diff --git a/src/cdk/drag-drop/drag-drop.md b/src/cdk/drag-drop/drag-drop.md index 0aca4d30d639..b6f7a01c9364 100644 --- 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. - - -#### Sortable tabs -Example of how to add sorting support to a `mat-tab-group`. - - #### 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. diff --git a/src/components-examples/cdk/drag-drop/index.ts b/src/components-examples/cdk/drag-drop/index.ts index de8bfb538f06..1544b6263759 100644 --- 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 index b9842617e977..dba3386450d4 100644 --- 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/cdk/drag-drop/cdk-drag-drop-table/cdk-drag-drop-table-example.css b/src/components-examples/material/table/table-drag-drop/table-drag-drop-example.css similarity index 92% rename from src/components-examples/cdk/drag-drop/cdk-drag-drop-table/cdk-drag-drop-table-example.css rename to src/components-examples/material/table/table-drag-drop/table-drag-drop-example.css index d11a28880ac1..b533e1b5d2dc 100644 --- a/src/components-examples/cdk/drag-drop/cdk-drag-drop-table/cdk-drag-drop-table-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/cdk/drag-drop/cdk-drag-drop-table/cdk-drag-drop-table-example.html b/src/components-examples/material/table/table-drag-drop/table-drag-drop-example.html similarity index 100% rename from src/components-examples/cdk/drag-drop/cdk-drag-drop-table/cdk-drag-drop-table-example.html rename to src/components-examples/material/table/table-drag-drop/table-drag-drop-example.html diff --git a/src/components-examples/cdk/drag-drop/cdk-drag-drop-table/cdk-drag-drop-table-example.ts b/src/components-examples/material/table/table-drag-drop/table-drag-drop-example.ts similarity index 89% rename from src/components-examples/cdk/drag-drop/cdk-drag-drop-table/cdk-drag-drop-table-example.ts rename to src/components-examples/material/table/table-drag-drop/table-drag-drop-example.ts index 422754d6cca0..bcfe245b3ee3 100644 --- a/src/components-examples/cdk/drag-drop/cdk-drag-drop-table/cdk-drag-drop-table-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; 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 index 1922e7ffa3ad..f0703a0ed9d5 100644 --- 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 index 9a5c71465077..33bac811d773 100644 --- 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 index 8adb7b40e8e5..445d4469c100 100644 --- 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/cdk/drag-drop/cdk-drag-drop-tabs/cdk-drag-drop-tabs-example.css b/src/components-examples/material/tabs/tab-group-drag-drop/tab-group-drag-drop-example.css similarity index 100% rename from src/components-examples/cdk/drag-drop/cdk-drag-drop-tabs/cdk-drag-drop-tabs-example.css rename to src/components-examples/material/tabs/tab-group-drag-drop/tab-group-drag-drop-example.css diff --git a/src/components-examples/cdk/drag-drop/cdk-drag-drop-tabs/cdk-drag-drop-tabs-example.html b/src/components-examples/material/tabs/tab-group-drag-drop/tab-group-drag-drop-example.html similarity index 100% rename from src/components-examples/cdk/drag-drop/cdk-drag-drop-tabs/cdk-drag-drop-tabs-example.html rename to src/components-examples/material/tabs/tab-group-drag-drop/tab-group-drag-drop-example.html diff --git a/src/components-examples/cdk/drag-drop/cdk-drag-drop-tabs/cdk-drag-drop-tabs-example.ts b/src/components-examples/material/tabs/tab-group-drag-drop/tab-group-drag-drop-example.ts similarity index 74% rename from src/components-examples/cdk/drag-drop/cdk-drag-drop-tabs/cdk-drag-drop-tabs-example.ts rename to src/components-examples/material/tabs/tab-group-drag-drop/tab-group-drag-drop-example.ts index 3fb4a9685d73..814a483a844d 100644 --- a/src/components-examples/cdk/drag-drop/cdk-drag-drop-tabs/cdk-drag-drop-tabs-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 index e4cafbb90c7b..3d1e98d2ccc4 100644 --- a/src/dev-app/table/table-demo.html +++ b/src/dev-app/table/table-demo.html @@ -90,3 +90,6 @@

Table wrapped in reusable component

Table wrapped re-orderable columns

+ +

Table wrapped re-orderable rows

+ diff --git a/src/dev-app/table/table-demo.ts b/src/dev-app/table/table-demo.ts index 8aad80b0c697..0cf758276588 100644 --- 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 index 84370e2d4c87..2f9aba0001b1 100644 --- 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. - + + +#### Drag and drop + +Material tables can be integrated with the `@angular/cdk/drag-drop` module to support drag&drop of +either columns or rows. + + + #### Selection diff --git a/src/material/tabs/tabs.md b/src/material/tabs/tabs.md index 958da95ed3fd..d48905c52598 100644 --- 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`. +### Sortable tabs + +The `mat-tab-group` component can be integrated with the `@angular/cdk/drag-drop` module. + + + ### Accessibility `MatTabGroup` and `MatTabNavBar` both implement the [ARIA Tabs design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/). Both components