docs(cdk\drag-drop): Add table drag drop example #28969
Conversation
GiftLanga
requested review from
andrewseguin,
devversion and
crisbeto
as code owners
crisbeto
added
the
dev-app preview
GiftLanga
force-pushed
the
docs/add-drag-drop-table-example
branch
2 times, most recently
from
94f4ae2
to
bb1c375
Compare
|
Deployed dev-app for bc612dc to: https://ng-dev-previews-comp--pr-angular-components-28969-dev-80lb1mz4.web.app Note: As new commits are pushed to this pull request, this link is updated after the preview is rebuilt. |
| <ng-container matColumnDef="position" sticky> | ||
| <mat-header-cell *matHeaderCellDef> No. </mat-header-cell> | ||
| <mat-cell *matCellDef="let element"> | ||
| <mat-icon class="example-drag-cursor" (mousedown)="dragDisabled = false;">reorder</mat-icon> |
There was a problem hiding this comment.
Why is dragging disabled initially? When I was trying it out, it felt a bit buggy because it wouldn't start dragging the first time. I think that we should just remove the dragDisabled binding.
There was a problem hiding this comment.
I wanted to enable dragging only when the user clicks the drag icon, but I see verry laggy. I'll just remove it.
| cursor: move; | ||
| } | ||
|
|
||
| .cdk-drag-preview { |
There was a problem hiding this comment.
Should we add a background color to this one? Currently it's transparent.
There was a problem hiding this comment.
Yeah, I'll add it.
src/cdk/drag-drop/drag-drop.md
Outdated
| 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. |
There was a problem hiding this comment.
This describes how the drag&drop works in general. I think we can just say something about how drag&drop can be integrated into a table.
There was a problem hiding this comment.
How does this sound?
"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."
GiftLanga
force-pushed
the
docs/add-drag-drop-table-example
branch
2 times, most recently
from
d79ef43
to
bc612dc
Compare
Adds an example that shows how to drag and drop table rows Fixes angular#25168
GiftLanga
force-pushed
the
docs/add-drag-drop-table-example
branch
from
bc612dc
to
d58b39d
Compare
crisbeto
added
action: merge
Adds an example that shows how to drag and drop table rows (cherry picked from commit 26aa8fa)
Adds an example that shows how to drag and drop table rows (cherry picked from commit 26aa8fa)
Adds an example that shows how to drag and drop table rows Fixes #25168