From 7ac7ebdc1d297053fe350ef685d15fb98408a839 Mon Sep 17 00:00:00 2001
From: Jean de Klerk <deklerk@google.com>
Date: Mon, 10 Feb 2020 11:04:10 -0700
Subject: [PATCH 1/4] add example of a re-orederable table

---
 .../material/table/BUILD.bazel                |  2 +
 .../material/table/index.ts                   |  8 ++++
 .../table-reorderable-example.css             |  3 ++
 .../table-reorderable-example.html            | 29 ++++++++++++
 .../table-reorderable-example.ts              | 46 +++++++++++++++++++
 src/dev-app/table/table-demo.html             |  3 ++
 6 files changed, 91 insertions(+)
 create mode 100644 src/components-examples/material/table/table-reorderable/table-reorderable-example.css
 create mode 100644 src/components-examples/material/table/table-reorderable/table-reorderable-example.html
 create mode 100644 src/components-examples/material/table/table-reorderable/table-reorderable-example.ts

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 95e9deec7d65..5ad5caddd437 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 @@
+<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>
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..4365b6fdb998
--- /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[] = this._originalColumnPositions.slice();
+  dataSource = ELEMENT_DATA;
+
+  drop(event: CdkDragDrop<string[]>) {
+    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 @@ <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>

From b6ec7222be0755a65c65bc06d1a688c354ee9d10 Mon Sep 17 00:00:00 2001
From: Jean de Klerk <deklerk@google.com>
Date: Thu, 20 Feb 2020 17:29:46 -0700
Subject: [PATCH 2/4] remove old hack; reformat files

---
 src/components-examples/material/table/BUILD.bazel    |  4 ++--
 .../table-reorderable/table-reorderable-example.ts    | 11 ++---------
 2 files changed, 4 insertions(+), 11 deletions(-)

diff --git a/src/components-examples/material/table/BUILD.bazel b/src/components-examples/material/table/BUILD.bazel
index cd0146e42f66..005004f8a24e 100644
--- a/src/components-examples/material/table/BUILD.bazel
+++ b/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",
@@ -20,8 +22,6 @@ 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/table-reorderable/table-reorderable-example.ts b/src/components-examples/material/table/table-reorderable/table-reorderable-example.ts
index 4365b6fdb998..45cb74a734ee 100644
--- a/src/components-examples/material/table/table-reorderable/table-reorderable-example.ts
+++ b/src/components-examples/material/table/table-reorderable/table-reorderable-example.ts
@@ -10,18 +10,11 @@ import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
   styleUrls: [ './table-reorderable-example.css' ]
 })
 export class TableReorderableExample {
-  private _originalColumnPositions: string[] = ['position', 'name', 'weight', 'symbol'];
-  columns: string[] = this._originalColumnPositions.slice();
+  columns: string[] = ['position', 'name', 'weight', 'symbol'];
   dataSource = ELEMENT_DATA;
 
   drop(event: CdkDragDrop<string[]>) {
-    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);
+    moveItemInArray(this.columns, event.previousIndex, event.currentIndex);
   }
 }
 

From 948f4ecfd37964ad8281849f00f077cd23359a1c Mon Sep 17 00:00:00 2001
From: Jean de Klerk <deklerk@google.com>
Date: Thu, 20 Feb 2020 18:03:56 -0700
Subject: [PATCH 3/4] more formatting

---
 .../table/table-reorderable/table-reorderable-example.ts      | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

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
index 45cb74a734ee..ccb13f91aa5e 100644
--- a/src/components-examples/material/table/table-reorderable/table-reorderable-example.ts
+++ b/src/components-examples/material/table/table-reorderable/table-reorderable-example.ts
@@ -1,5 +1,5 @@
-import { Component } from '@angular/core';
-import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
+import {Component} from '@angular/core';
+import {CdkDragDrop, moveItemInArray} from '@angular/cdk/drag-drop';
 
 /**
  * @title Table with re-orderable columns

From 16a180baf57753b407e2acd75eaddd7991548f98 Mon Sep 17 00:00:00 2001
From: Jean de Klerk <deklerk@google.com>
Date: Fri, 21 Feb 2020 08:27:01 -0700
Subject: [PATCH 4/4] more formatting

---
 .../table/table-reorderable/table-reorderable-example.ts        | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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
index ccb13f91aa5e..11c1dd003bde 100644
--- a/src/components-examples/material/table/table-reorderable/table-reorderable-example.ts
+++ b/src/components-examples/material/table/table-reorderable/table-reorderable-example.ts
@@ -7,7 +7,7 @@ import {CdkDragDrop, moveItemInArray} from '@angular/cdk/drag-drop';
 @Component({
   selector: 'table-reorderable-example',
   templateUrl: './table-reorderable-example.html',
-  styleUrls: [ './table-reorderable-example.css' ]
+  styleUrls: ['./table-reorderable-example.css']
 })
 export class TableReorderableExample {
   columns: string[] = ['position', 'name', 'weight', 'symbol'];