diff --git a/src/components-examples/material/table/BUILD.bazel b/src/components-examples/material/table/BUILD.bazel index 319d07c00092..cd0146e42f66 100644 --- a/src/components-examples/material/table/BUILD.bazel +++ b/src/components-examples/material/table/BUILD.bazel @@ -20,6 +20,8 @@ ng_module( "//src/material/progress-spinner", "//src/material/sort", "//src/material/table", + "//src/cdk/table", + "//src/cdk/drag-drop", ], ) diff --git a/src/components-examples/material/table/index.ts b/src/components-examples/material/table/index.ts index 2fa29e6a3e70..a6b4b35d3ca5 100644 --- a/src/components-examples/material/table/index.ts +++ b/src/components-examples/material/table/index.ts @@ -9,6 +9,9 @@ import {MatPaginatorModule} from '@angular/material/paginator'; import {MatProgressSpinnerModule} from '@angular/material/progress-spinner'; import {MatSortModule} from '@angular/material/sort'; import {MatTableModule} from '@angular/material/table'; +import {DragDropModule} from '@angular/cdk/drag-drop'; +import {CdkTableModule} from '@angular/cdk/table'; + import {TableBasicFlexExample} from './table-basic-flex/table-basic-flex-example'; import {TableBasicExample} from './table-basic/table-basic-example'; import {TableDynamicColumnsExample} from './table-dynamic-columns/table-dynamic-columns-example'; @@ -36,6 +39,7 @@ import { } from './table-text-column-advanced/table-text-column-advanced-example'; import {TableTextColumnExample} from './table-text-column/table-text-column-example'; import {TableWrappedExample, WrapperTable} from './table-wrapped/table-wrapped-example'; +import {TableReorderableExample} from './table-reorderable/table-reorderable-example'; export { TableBasicExample, TableBasicFlexExample, @@ -49,6 +53,7 @@ export { TableStickyFooterExample, TableStickyHeaderExample, TableTextColumnExample, TableTextColumnAdvancedExample, TableWrappedExample, WrapperTable, + TableReorderableExample, }; const EXAMPLES = [ @@ -63,6 +68,7 @@ const EXAMPLES = [ TableStickyFooterExample, TableStickyHeaderExample, TableTextColumnExample, TableTextColumnAdvancedExample, TableWrappedExample, WrapperTable, + TableReorderableExample, ]; @NgModule({ @@ -77,6 +83,8 @@ const EXAMPLES = [ MatProgressSpinnerModule, MatSortModule, MatTableModule, + CdkTableModule, + DragDropModule, ], declarations: EXAMPLES, exports: EXAMPLES, 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 new file mode 100644 index 000000000000..1922e7ffa3ad --- /dev/null +++ b/src/components-examples/material/table/table-reorderable/table-reorderable-example.css @@ -0,0 +1,3 @@ +table { + width: 100%; +} diff --git a/src/components-examples/material/table/table-reorderable/table-reorderable-example.html b/src/components-examples/material/table/table-reorderable/table-reorderable-example.html new file mode 100644 index 000000000000..c60ec7dc4a50 --- /dev/null +++ b/src/components-examples/material/table/table-reorderable/table-reorderable-example.html @@ -0,0 +1,29 @@ + + + + + + + + + + + + + + + + + + + + + + + + +
No. {{element.position}} Name {{element.name}} Weight {{element.weight}} Symbol {{element.symbol}}
diff --git a/src/components-examples/material/table/table-reorderable/table-reorderable-example.ts b/src/components-examples/material/table/table-reorderable/table-reorderable-example.ts new file mode 100644 index 000000000000..21fdd2a6d96e --- /dev/null +++ b/src/components-examples/material/table/table-reorderable/table-reorderable-example.ts @@ -0,0 +1,46 @@ +import { Component } from '@angular/core'; +import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop'; + +/** + * @title Table with re-orderable columns + */ +@Component({ + selector: 'table-reorderable-example', + templateUrl: './table-reorderable-example.html', + styleUrls: [ './table-reorderable-example.css' ] +}) +export class TableReorderableExample { + private originalColumnPositions: string[] = ['position', 'name', 'weight', 'symbol']; + columns: string[] = Object.assign([], this.originalColumnPositions); + dataSource = ELEMENT_DATA; + + drop(event: CdkDragDrop) { + moveItemInArray(this.columns, this.getCurPosition(event.previousIndex), event.currentIndex); + } + + getCurPosition(colOldIndex: number): number { + const colName: string = this.originalColumnPositions[colOldIndex]; + const p = (e: string) => e == colName; + return this.columns.findIndex(e => e == colName); + } +} + +export interface PeriodicElement { + name: string; + position: number; + weight: number; + symbol: string; +} + +const ELEMENT_DATA: PeriodicElement[] = [ + {position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'}, + {position: 2, name: 'Helium', weight: 4.0026, symbol: 'He'}, + {position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li'}, + {position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be'}, + {position: 5, name: 'Boron', weight: 10.811, symbol: 'B'}, + {position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C'}, + {position: 7, name: 'Nitrogen', weight: 14.0067, symbol: 'N'}, + {position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O'}, + {position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F'}, + {position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne'}, +]; diff --git a/src/dev-app/table/table-demo.html b/src/dev-app/table/table-demo.html index b612e9c84d5b..1578bbfdbbc0 100644 --- a/src/dev-app/table/table-demo.html +++ b/src/dev-app/table/table-demo.html @@ -66,3 +66,6 @@

Table with mat-text-column advanced

Table wrapped in reusable component

+ +

Table wrapped re-orderable columns

+