From d58b39d8882f802522fc2a059326ce862bd4b9b9 Mon Sep 17 00:00:00 2001
From: GiftLanga <glanga@retrorabbit.co.za>
Date: Tue, 30 Apr 2024 12:21:44 +0200
Subject: [PATCH] docs(cdk/drag-drop): Add table drag drop example

Adds an example that shows how to drag and drop table rows
Fixes #25168
---
 src/cdk/drag-drop/drag-drop.md                |  8 +++
 .../cdk/drag-drop/BUILD.bazel                 |  2 +
 .../cdk-drag-drop-table-example.css           | 29 +++++++++++
 .../cdk-drag-drop-table-example.html          | 38 ++++++++++++++
 .../cdk-drag-drop-table-example.ts            | 49 +++++++++++++++++++
 .../cdk/drag-drop/index.ts                    |  1 +
 6 files changed, 127 insertions(+)
 create mode 100644 src/components-examples/cdk/drag-drop/cdk-drag-drop-table/cdk-drag-drop-table-example.css
 create mode 100644 src/components-examples/cdk/drag-drop/cdk-drag-drop-table/cdk-drag-drop-table-example.html
 create mode 100644 src/components-examples/cdk/drag-drop/cdk-drag-drop-table/cdk-drag-drop-table-example.ts

diff --git a/src/cdk/drag-drop/drag-drop.md b/src/cdk/drag-drop/drag-drop.md
index bb8438e525d9..0d90da0800fc 100644
--- a/src/cdk/drag-drop/drag-drop.md
+++ b/src/cdk/drag-drop/drag-drop.md
@@ -238,3 +238,11 @@ whenever an item is about to be moved into a new index. If the predicate returns
 item will be moved into the new index, otherwise it will keep its current position.
 
 <!-- example(cdk-drag-drop-sort-predicate) -->
+
+### Reordering table rows
+Angular Material provides seamless integration of drag-and-drop functionality into tables,
+by adding the `cdkDropList` directive to your mat-table and handling the `(cdkDropListDropped)`
+event, you can enable drag-and-drop interactions within your table. This allows users to reorder
+rows or perform other custom actions with ease.
+
+<!-- example(cdk-drag-drop-table) -->
diff --git a/src/components-examples/cdk/drag-drop/BUILD.bazel b/src/components-examples/cdk/drag-drop/BUILD.bazel
index 11588b528d2e..66a1ad7cf3b0 100644
--- a/src/components-examples/cdk/drag-drop/BUILD.bazel
+++ b/src/components-examples/cdk/drag-drop/BUILD.bazel
@@ -13,6 +13,8 @@ ng_module(
         "//src/cdk/drag-drop",
         "//src/cdk/overlay",
         "//src/cdk/portal",
+        "//src/material/icon",
+        "//src/material/table",
     ],
 )
 
diff --git a/src/components-examples/cdk/drag-drop/cdk-drag-drop-table/cdk-drag-drop-table-example.css b/src/components-examples/cdk/drag-drop/cdk-drag-drop-table/cdk-drag-drop-table-example.css
new file mode 100644
index 000000000000..d1c7b844f677
--- /dev/null
+++ b/src/components-examples/cdk/drag-drop/cdk-drag-drop-table/cdk-drag-drop-table-example.css
@@ -0,0 +1,29 @@
+table {
+  width: 100%;
+}
+
+.example-drag-cursor {
+  margin-right: 16px;
+  cursor: move;
+}
+
+.cdk-drag-preview {
+  box-sizing: border-box;
+  border-radius: 4px;
+  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;
+}
+
+.cdk-drag-placeholder {
+  opacity: 0;
+}
+
+.cdk-drag-animating {
+  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+}
+
+.cdk-drop-list-dragging .mat-row:not(.cdk-drag-placeholder) {
+  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+}
diff --git a/src/components-examples/cdk/drag-drop/cdk-drag-drop-table/cdk-drag-drop-table-example.html b/src/components-examples/cdk/drag-drop/cdk-drag-drop-table/cdk-drag-drop-table-example.html
new file mode 100644
index 000000000000..a1d5dbfce35c
--- /dev/null
+++ b/src/components-examples/cdk/drag-drop/cdk-drag-drop-table/cdk-drag-drop-table-example.html
@@ -0,0 +1,38 @@
+<mat-table #table [dataSource]="dataSource" class="mat-elevation-z8" cdkDropList (cdkDropListDropped)="drop($event)"
+  cdkDropListData="dataSource">
+  <!-- Position Column -->
+  <ng-container matColumnDef="position" sticky>
+    <mat-header-cell *matHeaderCellDef> No. </mat-header-cell>
+    <mat-cell *matCellDef="let element">
+      <mat-icon class="example-drag-cursor">reorder</mat-icon>
+      <span>{{element.position}}</span>
+    </mat-cell>
+  </ng-container>
+
+  <!-- Name Column -->
+  <ng-container matColumnDef="name">
+    <mat-header-cell *matHeaderCellDef> Name </mat-header-cell>
+    <mat-cell *matCellDef="let element"> {{element.name}} </mat-cell>
+  </ng-container>
+
+  <!-- Weight Column -->
+  <ng-container matColumnDef="weight">
+    <mat-header-cell *matHeaderCellDef> Weight </mat-header-cell>
+    <mat-cell *matCellDef="let element"> {{element.weight}} </mat-cell>
+  </ng-container>
+
+  <!-- Symbol Column -->
+  <ng-container matColumnDef="symbol">
+    <mat-header-cell *matHeaderCellDef> Symbol </mat-header-cell>
+    <mat-cell *matCellDef="let element"> {{element.symbol}} </mat-cell>
+  </ng-container>
+
+  <!-- Quantity Column -->
+  <ng-container matColumnDef="quantity">
+    <mat-header-cell *matHeaderCellDef> Quantity of Element </mat-header-cell>
+    <mat-cell *matCellDef="let element">{{element.quantity}}</mat-cell>
+  </ng-container>
+
+  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+  <mat-row *matRowDef="let row; columns: displayedColumns;" cdkDrag [cdkDragData]="row"></mat-row>
+</mat-table>
diff --git a/src/components-examples/cdk/drag-drop/cdk-drag-drop-table/cdk-drag-drop-table-example.ts b/src/components-examples/cdk/drag-drop/cdk-drag-drop-table/cdk-drag-drop-table-example.ts
new file mode 100644
index 000000000000..a7ba7df01e4e
--- /dev/null
+++ b/src/components-examples/cdk/drag-drop/cdk-drag-drop-table/cdk-drag-drop-table-example.ts
@@ -0,0 +1,49 @@
+import {Component, ViewChild} from '@angular/core';
+import {CdkDragDrop, CdkDropList, CdkDrag, moveItemInArray} from '@angular/cdk/drag-drop';
+import {MatTable, MatTableModule} from '@angular/material/table';
+import {MatIconModule} from '@angular/material/icon';
+
+export interface PeriodicElement {
+  name: string;
+  position: number;
+  weight: number;
+  symbol: string;
+  quantity: number;
+}
+
+export const ELEMENT_DATA: PeriodicElement[] = [
+  {position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H', quantity: 100},
+  {position: 2, name: 'Helium', weight: 4.0026, symbol: 'He', quantity: 100},
+  {position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li', quantity: 100},
+  {position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be', quantity: 100},
+  {position: 5, name: 'Boron', weight: 10.811, symbol: 'B', quantity: 100},
+  {position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C', quantity: 100},
+  {position: 7, name: 'Nitrogen', weight: 14.0067, symbol: 'N', quantity: 100},
+  {position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O', quantity: 100},
+  {position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F', quantity: 100},
+  {position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne', quantity: 100},
+];
+
+/**
+ * @title Drag&Drop table
+ */
+@Component({
+  selector: 'cdk-drag-drop-table-example',
+  templateUrl: 'cdk-drag-drop-table-example.html',
+  styleUrl: 'cdk-drag-drop-table-example.css',
+  standalone: true,
+  imports: [CdkDropList, CdkDrag, MatTableModule, MatIconModule],
+})
+export class CdkDragDropTableExample {
+  @ViewChild('table', {static: true}) table: MatTable<PeriodicElement>;
+
+  displayedColumns: string[] = ['position', 'name', 'weight', 'symbol', 'quantity'];
+  dataSource = ELEMENT_DATA;
+
+  drop(event: CdkDragDrop<string>) {
+    const previousIndex = this.dataSource.findIndex(d => d === event.item.data);
+
+    moveItemInArray(this.dataSource, previousIndex, event.currentIndex);
+    this.table.renderRows();
+  }
+}
diff --git a/src/components-examples/cdk/drag-drop/index.ts b/src/components-examples/cdk/drag-drop/index.ts
index 68ef0b96dd6a..7c41155fbf58 100644
--- a/src/components-examples/cdk/drag-drop/index.ts
+++ b/src/components-examples/cdk/drag-drop/index.ts
@@ -15,3 +15,4 @@ 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';