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.

Drag to Reorder Rows

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.

Drag Handle

Frozen Columns + Drag

Row dragging can be used in conjunction with frozen columns (fixed).

Frozen Columns + Row Drag

Drag Events

Obtain drag state information through the onDragStart and onDragEnd callbacks of drag-config, or by listening to the drag-end event.

Drag Events

Tree Data Drag

Row dragging can be used with tree data (tree-config), supporting drag-and-drop tree nodes to adjust the order.

Tree Data Drag

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[]