diff --git a/src/cdk/drag-drop/drag-drop.md b/src/cdk/drag-drop/drag-drop.md index bb8438e525d9..3d875c3627d2 100644 --- a/src/cdk/drag-drop/drag-drop.md +++ b/src/cdk/drag-drop/drag-drop.md @@ -238,3 +238,10 @@ 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. + +### Reordering table rows +Adding `cdkDropList` on the `mat-table` element and the `cdkDrag` on the `mat-row` element groups the rows into a +reorderable collection. Rows will automatically rearrange as an element moves. You need to +listen to the `cdkDropListDropped` event to update the data model once the user finishes dragging. + + diff --git a/src/cdk/schematics/ng-update/html-parsing/elements.ts b/src/cdk/schematics/ng-update/html-parsing/elements.ts index 40d12f1f1938..e7ac53b65e1d 100644 --- a/src/cdk/schematics/ng-update/html-parsing/elements.ts +++ b/src/cdk/schematics/ng-update/html-parsing/elements.ts @@ -13,7 +13,7 @@ import {ChildNode, Element} from '../../utils'; * Parses a HTML fragment and traverses all AST nodes in order find elements that * include the specified attribute. */ -export function findElementsWithAttribute(html: string, attributeName: string) { +export function findElementsWithAttribute(html: string, attributeName: string): Element[] { const document = parseFragment(html, {sourceCodeLocationInfo: true}); const elements: Element[] = []; 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..7bbd5b1d2a47 --- /dev/null +++ b/src/components-examples/cdk/drag-drop/cdk-drag-drop-table/cdk-drag-drop-table-example.css @@ -0,0 +1,28 @@ +table { + width: 100%; +} + +.dragCursor { + 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); +} + +.cdk-drag-placeholder { + background: #e0e0e0; +} + +.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..51258a9ef2a1 --- /dev/null +++ b/src/components-examples/cdk/drag-drop/cdk-drag-drop-table/cdk-drag-drop-table-example.html @@ -0,0 +1,38 @@ + + + + No. + + reorder + {{element.position}} + + + + + + Name + {{element.name}} + + + + + Weight + {{element.weight}} + + + + + Symbol + {{element.symbol}} + + + + + Quantity of Element + {{element.quantity}} + + + + + 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..d63284aa2005 --- /dev/null +++ b/src/components-examples/cdk/drag-drop/cdk-drag-drop-table/cdk-drag-drop-table-example.ts @@ -0,0 +1,53 @@ +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; + + displayedColumns: string[] = ['position', 'name', 'weight', 'symbol', 'quantity']; + dataSource = ELEMENT_DATA; + dragDisabled = true; + + drop(event: CdkDragDrop) { + // Return the drag container to disabled. + this.dragDisabled = true; + + 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';