Drag-Drop Row Reordering (Table Component)#
Overview#
The Table component supports drag-and-drop row reordering via the boolean draggable prop (default: false) . When enabled, each table row becomes draggable using the HTML5 Drag and Drop API, and the component emits an on-drag-drop event when a row is dropped onto another row.
The event payload is the two row indices involved in the swap β it is the caller's responsibility to reorder the underlying data array accordingly; the Table component does not mutate its data .
How It Works#
The feature spans three files:
1. table.vue β Prop & event declaration#
- The
draggableprop is aBoolean(defaultfalse), passed down to alltable-bodyinstances (normal, left-fixed, right-fixed). on-drag-dropis declared in the component'semitsarray.- The
dragAndDrop(a, b)method is the single point where the event fires, emitting the dragged-from index (a) and dropped-onto index (b).
2. table-body.vue β Prop relay#
- Passes
draggable: this.draggabletotable-trfor primary data rows. - Tree/child rows always get
draggable: falseβ drag-and-drop is intentionally disabled for nested rows.
3. table-tr.vue β DOM event handlers#
Each <tr> conditionally sets :draggable and wires three native events :
| Event | Handler | What it does |
|---|---|---|
dragstart | onDrag(e, index) | Stores the source row index in dataTransfer |
dragover | allowDrop(e) | Calls e.preventDefault() to allow a drop |
drop | onDrop(e, index) | Reads the stored source index, calls this.$parent.$parent.dragAndDrop(dragIndex, index) |
The $parent.$parent chain traverses table-body β table, where dragAndDrop lives .
Usage#
<Table :draggable="true" :data="tableData" :columns="columns" @on-drag-drop="handleDrop" />
handleDrop(dragIndex, dropIndex) {
const moved = this.tableData.splice(dragIndex, 1)[0];
this.tableData.splice(dropIndex, 0, moved);
}
The event provides the raw indices into the displayed (possibly filtered/sorted) row array, not the original data prop order. Callers should account for this when mutating the source array.
Key Files#
| File | Role |
|---|---|
src/components/table/table.vue | Prop definition, dragAndDrop() method, event emission |
src/components/table/table-tr.vue | HTML5 drag event handlers on <tr> |
types/table.d.ts | TypeScript type for draggable prop and onOnDragDrop event handler |
Limitations & Notes#
- Tree children cannot be dragged β
table-bodyhardcodesdraggable: falsefor child nodes in tree-structured data. - No built-in visual feedback β there is no drop indicator or row ghost out of the box; any visual cue must be added by the consumer.
- Index semantics β indices
aandbinon-drag-dropcorrespond to_indexvalues from the rendered row order , not necessarily positions in the originaldataprop if rows are sorted or filtered.