diff --git a/src/cdk/drag-drop/drag-drop.md b/src/cdk/drag-drop/drag-drop.md
index bb8438e525d9..3d875c3627d2 100644
--- a/src/cdk/drag-drop/drag-drop.md
+++ b/src/cdk/drag-drop/drag-drop.md
@@ -238,3 +238,10 @@ whenever an item is about to be moved into a new index. If the predicate returns
item will be moved into the new index, otherwise it will keep its current position.
+
+### Reordering table rows
+Adding `cdkDropList` on the `mat-table` element and the `cdkDrag` on the `mat-row` element groups the rows into a
+reorderable collection. Rows will automatically rearrange as an element moves. You need to
+listen to the `cdkDropListDropped` event to update the data model once the user finishes dragging.
+
+
diff --git a/src/cdk/schematics/ng-update/html-parsing/elements.ts b/src/cdk/schematics/ng-update/html-parsing/elements.ts
index 40d12f1f1938..e7ac53b65e1d 100644
--- a/src/cdk/schematics/ng-update/html-parsing/elements.ts
+++ b/src/cdk/schematics/ng-update/html-parsing/elements.ts
@@ -13,7 +13,7 @@ import {ChildNode, Element} from '../../utils';
* Parses a HTML fragment and traverses all AST nodes in order find elements that
* include the specified attribute.
*/
-export function findElementsWithAttribute(html: string, attributeName: string) {
+export function findElementsWithAttribute(html: string, attributeName: string): Element[] {
const document = parseFragment(html, {sourceCodeLocationInfo: true});
const elements: Element[] = [];
diff --git a/src/components-examples/cdk/drag-drop/BUILD.bazel b/src/components-examples/cdk/drag-drop/BUILD.bazel
index 11588b528d2e..66a1ad7cf3b0 100644
--- a/src/components-examples/cdk/drag-drop/BUILD.bazel
+++ b/src/components-examples/cdk/drag-drop/BUILD.bazel
@@ -13,6 +13,8 @@ ng_module(
"//src/cdk/drag-drop",
"//src/cdk/overlay",
"//src/cdk/portal",
+ "//src/material/icon",
+ "//src/material/table",
],
)
diff --git a/src/components-examples/cdk/drag-drop/cdk-drag-drop-table/cdk-drag-drop-table-example.css b/src/components-examples/cdk/drag-drop/cdk-drag-drop-table/cdk-drag-drop-table-example.css
new file mode 100644
index 000000000000..7bbd5b1d2a47
--- /dev/null
+++ b/src/components-examples/cdk/drag-drop/cdk-drag-drop-table/cdk-drag-drop-table-example.css
@@ -0,0 +1,28 @@
+table {
+ width: 100%;
+}
+
+.dragCursor {
+ margin-right: 16px;
+ cursor: move;
+}
+
+.cdk-drag-preview {
+ box-sizing: border-box;
+ border-radius: 4px;
+ box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
+ 0 8px 10px 1px rgba(0, 0, 0, 0.14),
+ 0 3px 14px 2px rgba(0, 0, 0, 0.12);
+}
+
+.cdk-drag-placeholder {
+ background: #e0e0e0;
+}
+
+.cdk-drag-animating {
+ transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+}
+
+.cdk-drop-list-dragging .mat-row:not(.cdk-drag-placeholder) {
+ transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+}
diff --git a/src/components-examples/cdk/drag-drop/cdk-drag-drop-table/cdk-drag-drop-table-example.html b/src/components-examples/cdk/drag-drop/cdk-drag-drop-table/cdk-drag-drop-table-example.html
new file mode 100644
index 000000000000..51258a9ef2a1
--- /dev/null
+++ b/src/components-examples/cdk/drag-drop/cdk-drag-drop-table/cdk-drag-drop-table-example.html
@@ -0,0 +1,38 @@
+
+
+
+ No.
+
+ reorder
+ {{element.position}}
+
+
+
+
+
+ Name
+ {{element.name}}
+
+
+
+
+ Weight
+ {{element.weight}}
+
+
+
+
+ Symbol
+ {{element.symbol}}
+
+
+
+
+ Quantity of Element
+ {{element.quantity}}
+
+
+
+
+
diff --git a/src/components-examples/cdk/drag-drop/cdk-drag-drop-table/cdk-drag-drop-table-example.ts b/src/components-examples/cdk/drag-drop/cdk-drag-drop-table/cdk-drag-drop-table-example.ts
new file mode 100644
index 000000000000..d63284aa2005
--- /dev/null
+++ b/src/components-examples/cdk/drag-drop/cdk-drag-drop-table/cdk-drag-drop-table-example.ts
@@ -0,0 +1,53 @@
+import {Component, ViewChild} from '@angular/core';
+import {CdkDragDrop, CdkDropList, CdkDrag, moveItemInArray} from '@angular/cdk/drag-drop';
+import {MatTable, MatTableModule} from '@angular/material/table';
+import {MatIconModule} from '@angular/material/icon';
+
+export interface PeriodicElement {
+ name: string;
+ position: number;
+ weight: number;
+ symbol: string;
+ quantity: number;
+}
+
+export const ELEMENT_DATA: PeriodicElement[] = [
+ {position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H', quantity: 100},
+ {position: 2, name: 'Helium', weight: 4.0026, symbol: 'He', quantity: 100},
+ {position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li', quantity: 100},
+ {position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be', quantity: 100},
+ {position: 5, name: 'Boron', weight: 10.811, symbol: 'B', quantity: 100},
+ {position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C', quantity: 100},
+ {position: 7, name: 'Nitrogen', weight: 14.0067, symbol: 'N', quantity: 100},
+ {position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O', quantity: 100},
+ {position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F', quantity: 100},
+ {position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne', quantity: 100},
+];
+
+/**
+ * @title Drag&Drop table
+ */
+@Component({
+ selector: 'cdk-drag-drop-table-example',
+ templateUrl: 'cdk-drag-drop-table-example.html',
+ styleUrl: 'cdk-drag-drop-table-example.css',
+ standalone: true,
+ imports: [CdkDropList, CdkDrag, MatTableModule, MatIconModule],
+})
+export class CdkDragDropTableExample {
+ @ViewChild('table', {static: true}) table: MatTable;
+
+ displayedColumns: string[] = ['position', 'name', 'weight', 'symbol', 'quantity'];
+ dataSource = ELEMENT_DATA;
+ dragDisabled = true;
+
+ drop(event: CdkDragDrop) {
+ // Return the drag container to disabled.
+ this.dragDisabled = true;
+
+ const previousIndex = this.dataSource.findIndex(d => d === event.item.data);
+
+ moveItemInArray(this.dataSource, previousIndex, event.currentIndex);
+ this.table.renderRows();
+ }
+}
diff --git a/src/components-examples/cdk/drag-drop/index.ts b/src/components-examples/cdk/drag-drop/index.ts
index 68ef0b96dd6a..7c41155fbf58 100644
--- a/src/components-examples/cdk/drag-drop/index.ts
+++ b/src/components-examples/cdk/drag-drop/index.ts
@@ -15,3 +15,4 @@ export {CdkDragDropOverviewExample} from './cdk-drag-drop-overview/cdk-drag-drop
export {CdkDragDropRootElementExample} from './cdk-drag-drop-root-element/cdk-drag-drop-root-element-example';
export {CdkDragDropSortingExample} from './cdk-drag-drop-sorting/cdk-drag-drop-sorting-example';
export {CdkDragDropSortPredicateExample} from './cdk-drag-drop-sort-predicate/cdk-drag-drop-sort-predicate-example';
+export {CdkDragDropTableExample} from './cdk-drag-drop-table/cdk-drag-drop-table-example';