docs: move some drag&drop examples into separate packages (#32620)

crisbeto · web-flow · commit 3b8f7f3ec456 · 2026-01-07T18:16:38.000+01:00
The examples showing how to integrate drag&amp;drop into the Material tabs and table aren't surfaced on adev. These changes move them out into the individual components instead.
diff --git a/src/cdk/drag-drop/drag-drop.md b/src/cdk/drag-drop/drag-drop.md
@@ -273,17 +273,9 @@ item will be moved into the new index, otherwise it will keep its current positi
 ### Integrations with Angular Material
 The CDK's drag&drop functionality can be integrated with different parts of Angular Material.
 
-#### Sortable table
-This example shows how you can set up a table which supports re-ordering of tabs.
-<!-- example(cdk-drag-drop-table) -->
-
-#### Sortable tabs
-Example of how to add sorting support to a `mat-tab-group`.
-<!-- example(cdk-drag-drop-tabs) -->
-
 #### Scrollable container
 If your draggable items are inside a scrollable container (e.g., a div with overflow: auto)
-automatic scrolling will not work unless the scrollable container has the `cdkScrollable` directive. 
-Without it, the CDK cannot detect or control the scroll behavior of the container during drag 
+automatic scrolling will not work unless the scrollable container has the `cdkScrollable` directive.
+Without it, the CDK cannot detect or control the scroll behavior of the container during drag
 operations.
 <!-- example(cdk-drag-drop-scrollable) -->
diff --git a/src/components-examples/cdk/drag-drop/index.ts b/src/components-examples/cdk/drag-drop/index.ts
@@ -15,8 +15,6 @@ 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';
 export {CdkDragDropMixedSortingExample} from './cdk-drag-drop-mixed-sorting/cdk-drag-drop-mixed-sorting-example';
-export {CdkDragDropTabsExample} from './cdk-drag-drop-tabs/cdk-drag-drop-tabs-example';
 export {CdkDragDropCopyListExample} from './cdk-drag-drop-copy-list/cdk-drag-drop-copy-list-example';
 export {CdkDragDropScrollableExample} from './cdk-drag-drop-scrollable/cdk-drag-drop-scrollable-example';
diff --git a/src/components-examples/material/table/index.ts b/src/components-examples/material/table/index.ts
@@ -31,3 +31,4 @@ export {TableDynamicObservableDataExample} from './table-dynamic-observable-data
 export {TableGeneratedColumnsExample} from './table-generated-columns/table-generated-columns-example';
 export {TableFlexLargeRowExample} from './table-flex-large-row/table-flex-large-row-example';
 export {TableVirtualScrollExample} from './table-virtual-scroll/table-virtual-scroll-example';
+export {TableDragDropExample} from './table-drag-drop/table-drag-drop-example';
diff --git a/src/components-examples/material/table/table-drag-drop/table-drag-drop-example.css b/src/components-examples/material/table/table-drag-drop/table-drag-drop-example.css
@@ -14,7 +14,7 @@ table {
   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);
-  background-color: white;
+  background-color: var(--mat-sys-surface);
 }
 
 .cdk-drag-placeholder {
diff --git a/src/components-examples/material/table/table-drag-drop/table-drag-drop-example.html b/src/components-examples/material/table/table-drag-drop/table-drag-drop-example.html
diff --git a/src/components-examples/material/table/table-drag-drop/table-drag-drop-example.ts b/src/components-examples/material/table/table-drag-drop/table-drag-drop-example.ts
@@ -25,15 +25,15 @@ export const ELEMENT_DATA: PeriodicElement[] = [
 ];
 
 /**
- * @title Drag&Drop table
+ * @title Table with drag&drop support
  */
 @Component({
-  selector: 'cdk-drag-drop-table-example',
-  templateUrl: 'cdk-drag-drop-table-example.html',
-  styleUrl: 'cdk-drag-drop-table-example.css',
+  selector: 'table-drag-drop-example',
+  templateUrl: 'table-drag-drop-example.html',
+  styleUrl: 'table-drag-drop-example.css',
   imports: [CdkDropList, CdkDrag, MatTableModule, MatIconModule],
 })
-export class CdkDragDropTableExample {
+export class TableDragDropExample {
   @ViewChild('table', {static: true}) table!: MatTable<PeriodicElement>;
 
   displayedColumns: string[] = ['position', 'name', 'weight', 'symbol', 'quantity'];
diff --git a/src/components-examples/material/table/table-reorderable/table-reorderable-example.css b/src/components-examples/material/table/table-reorderable/table-reorderable-example.css
@@ -1,3 +1,7 @@
 table {
   width: 100%;
 }
+
+th.cdk-drag {
+  cursor: move;
+}
diff --git a/src/components-examples/material/tabs/BUILD.bazel b/src/components-examples/material/tabs/BUILD.bazel
@@ -19,6 +19,7 @@ ng_project(
         "//:node_modules/@angular/platform-browser",
         "//:node_modules/@types/jasmine",
         "//:node_modules/rxjs",
+        "//src/cdk/drag-drop",
         "//src/cdk/testing",
         "//src/cdk/testing/testbed",
         "//src/material/button",
diff --git a/src/components-examples/material/tabs/index.ts b/src/components-examples/material/tabs/index.ts
@@ -13,3 +13,4 @@ export {TabGroupPaginatedExample} from './tab-group-paginated/tab-group-paginate
 export {TabGroupPreserveContentExample} from './tab-group-preserve-content/tab-group-preserve-content-example';
 export {TabGroupStretchedExample} from './tab-group-stretched/tab-group-stretched-example';
 export {TabNavBarBasicExample} from './tab-nav-bar-basic/tab-nav-bar-basic-example';
+export {TabGroupDragDropExample} from './tab-group-drag-drop/tab-group-drag-drop-example';
diff --git a/src/components-examples/material/tabs/tab-group-drag-drop/tab-group-drag-drop-example.css b/src/components-examples/material/tabs/tab-group-drag-drop/tab-group-drag-drop-example.css
diff --git a/src/components-examples/material/tabs/tab-group-drag-drop/tab-group-drag-drop-example.html b/src/components-examples/material/tabs/tab-group-drag-drop/tab-group-drag-drop-example.html
diff --git a/src/components-examples/material/tabs/tab-group-drag-drop/tab-group-drag-drop-example.ts b/src/components-examples/material/tabs/tab-group-drag-drop/tab-group-drag-drop-example.ts
@@ -3,16 +3,16 @@ import {CdkDrag, CdkDragDrop, CdkDropList, moveItemInArray} from '@angular/cdk/d
 import {MatTabsModule} from '@angular/material/tabs';
 
 /**
- * @title Drag&Drop tabs
+ * @title Tabs with drag*drop integration.
  */
 @Component({
-  selector: 'cdk-drag-drop-tabs-example',
-  templateUrl: 'cdk-drag-drop-tabs-example.html',
-  styleUrl: 'cdk-drag-drop-tabs-example.css',
+  selector: 'tab-group-drag-drop-example',
+  templateUrl: 'tab-group-drag-drop-example.html',
+  styleUrl: 'tab-group-drag-drop-example.css',
   imports: [CdkDrag, CdkDropList, MatTabsModule],
   encapsulation: ViewEncapsulation.None,
 })
-export class CdkDragDropTabsExample {
+export class TabGroupDragDropExample {
   protected tabs = ['One', 'Two', 'Three', 'Four', 'Five'];
   protected selectedTabIndex = 0;
 
diff --git a/src/dev-app/table/table-demo.html b/src/dev-app/table/table-demo.html
@@ -90,3 +90,6 @@ <h3>Table wrapped in reusable component</h3>
 
 <h3>Table wrapped re-orderable columns</h3>
 <table-reorderable-example></table-reorderable-example>
+
+<h3>Table wrapped re-orderable rows</h3>
+<table-drag-drop-example></table-drag-drop-example>
diff --git a/src/dev-app/table/table-demo.ts b/src/dev-app/table/table-demo.ts
@@ -16,6 +16,7 @@ import {
 } from '@angular/components-examples/cdk/table';
 import {
   TableBasicExample,
+  TableDragDropExample,
   TableDynamicColumnsExample,
   TableExpandableRowsExample,
   TableFilteringExample,
@@ -77,6 +78,7 @@ import {
     TableReorderableExample,
     TableRecycleRowsExample,
     TableFlexLargeRowExample,
+    TableDragDropExample,
   ],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
diff --git a/src/material/table/table.md b/src/material/table/table.md
@@ -249,7 +249,15 @@ takes a data object and filter string and returns true if the data object is con
 If you want to show a message when not data matches the filter, you can use the `*matNoDataRow`
 directive.
 
-<!--- example(table-filtering) -->
+<!-- example(table-filtering) -->
+
+#### Drag and drop
+
+Material tables can be integrated with the `@angular/cdk/drag-drop` module to support drag&drop of
+either columns or rows.
+
+<!-- example(table-reorderable) -->
+<!-- example(table-drag-drop) -->
 
 #### Selection
 
diff --git a/src/material/tabs/tabs.md b/src/material/tabs/tabs.md
@@ -94,6 +94,12 @@ off-screen tabs in the DOM, you can set the `preserveContent` input to `true`.
 
 <!-- example(tab-group-preserve-content) -->
 
+### Sortable tabs
+
+The `mat-tab-group` component can be integrated with the `@angular/cdk/drag-drop` module.
+
+<!-- example(tab-group-drag-drop) -->
+
 ### Accessibility
 `MatTabGroup` and `MatTabNavBar` both implement the
 [ARIA Tabs design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/). Both components

Original file line number	Diff line number	Diff line change
`@@ -14,7 +14,7 @@ table {`
`14`	`14`	`box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),`
`15`	`15`	`0 8px 10px 1px rgba(0, 0, 0, 0.14),`
`16`	`16`	`0 3px 14px 2px rgba(0, 0, 0, 0.12);`
`17`		`- background-color: white;`
	`17`	`+ background-color: var(--mat-sys-surface);`
`18`	`18`	`}`
`19`	`19`
`20`	`20`	`.cdk-drag-placeholder {`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,7 @@`
`1`	`1`	`table {`
`2`	`2`	`width: 100%;`
`3`	`3`	`}`
	`4`	`+`
	`5`	`+th.cdk-drag {`
	`6`	`+ cursor: move;`
	`7`	`+}`