Table - Row Drag
Configure row drag functionality through drag-config, supporting drag sorting, drag handles, drag event listening, and more.
Drag to Reorder Rows
Set row: true in drag-config to enable row drag sorting. Press and hold the row with the mouse to drag.
Index | Name | Age | Department |
|---|
1 | John | 28 | Engineering |
2 | Jane | 32 | Product |
3 | Mike | 25 | Design |
4 | Sarah | 30 | Operations |
5 | Tom W. | 27 | Marketing |
6 | David S. | 35 | HR |
Custom Drag Handle
Specify the CSS selector of the drag handle via drag-config.handle. Dragging is only triggered within the handle area to prevent accidental operations.
Index | Task Name | Priority | Status |
|---|
☰ | 1 | Requirement Review | High | In Progress |
☰ | 2 | UI Design | High | Completed |
☰ | 3 | Frontend Dev | Medium | Pending |
☰ | 4 | Backend Dev | Medium | Pending |
☰ | 5 | Testing | Low | Pending |
☰ | 6 | Deployment | Low | Pending |
Frozen Columns + Drag
Row dragging can be used in conjunction with frozen columns (fixed).
ID | Name | Department | Position | Salary | City | Phone |
|---|
1 | John | Engineering | Frontend Engineer | 15000 | Beijing | 13800001111 |
2 | Jane | Product | Product Manager | 18000 | Shanghai | 13800002222 |
3 | Mike | Design | UI Designer | 14000 | Guangzhou | 13800003333 |
4 | Sarah | Operations | Operations Director | 22000 | Shenzhen | 13800004444 |
5 | Tom W. | Marketing | Marketing Manager | 16000 | Hangzhou | 13800005555 |
Drag Events
Obtain drag state information through the onDragStart and onDragEnd callbacks of drag-config, or by listening to the drag-end event.
Order | Name | ID |
|---|
1 | Item 1 | 1 |
2 | Item 2 | 2 |
3 | Item 3 | 3 |
4 | Item 4 | 4 |
5 | Item 5 | 5 |
Event Log:
Drag a row to view the event log
Tree Data Drag
Row dragging can be used with tree data (tree-config), supporting drag-and-drop tree nodes to adjust the order.
Name | Owner |
|---|
Engineering | CEO Zhang |
Frontend Team | Team Leader Li |
John | |
Jane | |
Backend Team | Team Leader Wang |
Mike | |
Sarah | |
Product | CEO Liu |
Product Team 1 | Team Leader Chen |
Product Team 2 | Team Leader Huang |
API
DragConfig
Passed through the drag-config property.
| Property | Description | Type | Default |
|---|---|---|---|
| row | Whether row dragging is enabled | boolean | false |
| column | Whether column dragging is enabled | boolean | false |
| handle | CSS selector for the drag handle | string | — |
| animation | Animation duration (ms) | number | 150 |
| onDragStart | Drag start callback | ({ type, data, index }) => void | — |
| onDragEnd | Drag end callback | ({ type, oldIndex, newIndex, data }) => void | — |
| crossTable | Whether cross-table dragging is supported | boolean | false |
| dragClass | Style class during dragging | string | — |
| ghostClass | Ghost element style class | string | — |
Events
| Event | Description | Parameters |
|---|---|---|
| drag-end | Triggered when dragging ends | { type: 'row' | 'column', oldIndex: number, newIndex: number, data: unknown[] } |
onDragStart Parameters
| Parameter | Description | Type |
|---|---|---|
| type | Drag type | 'row' | 'column' |
| data | Dragged record | unknown |
| index | Dragged index | number |
onDragEnd Parameters
| Parameter | Description | Type |
|---|---|---|
| type | Drag type | 'row' | 'column' |
| oldIndex | Original index | number |
| newIndex | New index | number |
| data | Data after drag (reordered array) | unknown[] |