Drag-Drop Row Reordering (Table Component)#

Overview#

The Table component supports drag-and-drop row reordering via the boolean draggable prop (default: false) 1. 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 2.

How It Works#

The feature spans three files:

1. table.vue — Prop & event declaration#

• The draggable prop is a Boolean (default false), passed down to all table-body instances (normal, left-fixed, right-fixed).
• on-drag-drop is declared in the component's emits array.
• 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.draggable to table-tr for 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 3:

The $parent.$parent chain traverses table-body → table, where dragAndDrop lives 4.

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#

Limitations & Notes#

• Tree children cannot be dragged — table-body hardcodes draggable: false for 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 a and b in on-drag-drop correspond to _index values from the rendered row order 5, not necessarily positions in the original data prop if rows are sorted or filtered.