docs(material/table): add reorderable columns example (#18456)

Author: jeanbza

src/components-examples/material/table/BUILD.bazel

@@ -11,6 +11,8 @@ ng_module(
     ]),
     module_name = "@angular/components-examples/material/table",
     deps = [
+        "//src/cdk/drag-drop",
+        "//src/cdk/table",
         "//src/material/button",
         "//src/material/button-toggle",
         "//src/material/checkbox",

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,

src/components-examples/material/table/table-reorderable/table-reorderable-example.css

@@ -0,0 +1,3 @@
+table {
+  width: 100%;
+}

src/components-examples/material/table/table-reorderable/table-reorderable-example.html

@@ -0,0 +1,29 @@
+<table mat-table
+       [dataSource]="dataSource" 
+       cdkDropList
+       cdkDropListOrientation="horizontal"
+       (cdkDropListDropped)="drop($event)">
+
+  <ng-container matColumnDef="position">
+    <th mat-header-cell cdkDrag *matHeaderCellDef> No. </th>
+    <td mat-cell *matCellDef="let element"> {{element.position}} </td>
+  </ng-container>
+
+  <ng-container matColumnDef="name">
+    <th mat-header-cell cdkDrag *matHeaderCellDef> Name </th>
+    <td mat-cell *matCellDef="let element"> {{element.name}} </td>
+  </ng-container>
+
+  <ng-container matColumnDef="weight">
+    <th mat-header-cell cdkDrag *matHeaderCellDef> Weight </th>
+    <td mat-cell *matCellDef="let element"> {{element.weight}} </td>
+  </ng-container>
+
+  <ng-container matColumnDef="symbol">
+    <th mat-header-cell cdkDrag *matHeaderCellDef> Symbol </th>
+    <td mat-cell *matCellDef="let element"> {{element.symbol}} </td>
+  </ng-container>
+
+  <tr mat-header-row *matHeaderRowDef="columns"></tr>
+  <tr mat-row *matRowDef="let row; columns: columns;"></tr>
+</table>

src/components-examples/material/table/table-reorderable/table-reorderable-example.ts

@@ -0,0 +1,39 @@
+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 {
+  columns: string[] = ['position', 'name', 'weight', 'symbol'];
+  dataSource = ELEMENT_DATA;
+
+  drop(event: CdkDragDrop<string[]>) {
+    moveItemInArray(this.columns, event.previousIndex, event.currentIndex);
+  }
+}
+
+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'},
+];

src/dev-app/table/table-demo.html

@@ -66,3 +66,6 @@ <h3>Table with mat-text-column advanced</h3>
 
 <h3>Table wrapped in reusable component</h3>
 <table-wrapped-example></table-wrapped-example>
+
+<h3>Table wrapped re-orderable columns</h3>
+<table-reorderable-example></table-reorderable-example>