Table - Column Drag

Configure column drag through drag-config, supporting drag to reorder columns, custom drag styles, drag event listening, and more.

Drag to Reorder Columns

Set drag-config with column: true to enable column drag reordering. Drag header columns to adjust column display order.

Drag to Reorder Columns

Frozen Columns

Column drag works with fixed columns (fixed). Fixed columns do not participate in drag, only non-fixed columns in the middle can be reordered. Use column-level draggable property for precise control.

Frozen Columns + Column Drag

Personalized Columns

Combine column drag with column visibility to implement personalized column configuration. Users can check columns to display and drag to adjust order.

Personalized Columns (Visibility + Drag)

Drag Events

Listen to column drag events through drag-config's onDragStart and onDragEnd callbacks.

Column Drag Events

Grouped Header

Column drag works with grouped headers (children). Dragging grouped headers moves the entire column group.

Grouped Header + Column Drag

Row & Column Drag Combined

Set drag-config with row: true and column: true to enable both row and column drag simultaneously. Drag headers to adjust column order, drag data rows to adjust row order.

Row & Column Drag Combined

API

DragConfig (Column Drag Related)

Passed through the drag-config property.

Property	Description	Type	Default
column	Whether columns can be dragged	boolean	false
row	Whether rows can be dragged (can be enabled simultaneously)	boolean	false
animation	Animation duration (milliseconds)	number	150
onDragStart	Drag start callback	({ type, data, index }) => void	—
onDragEnd	Drag end callback	({ type, oldIndex, newIndex, data }) => void	—
dragClass	Style class during drag	string	—
ghostClass	Ghost element style class	string	—

TableColumn Props (Column Drag Related)

Property	Description	Type	Default
draggable	Whether this column can be drag-sorted	boolean	—
visible	Whether column is visible	boolean	true

Events

Event	Description	Parameters
drag-end	Triggered when drag ends	{ type: 'row' | 'column', oldIndex: number, newIndex: number, data: unknown[] }

Methods (via ref)

Method	Description	Parameters
getColumns	Get current column info	—
setColumnVisible	Set column visibility	(prop: string, visible: boolean)
resetColumns	Reset all columns to visible	—

Notes

1. Fixed columns are not draggable: Columns with fixed set do not participate in drag sorting by default.
2. Column-level control: Use the draggable property in column config to precisely control whether each column can be dragged.
3. Reactive column config: Wrap columns config with ref, column order updates automatically after drag.
4. Row & column combined drag: Set both row: true and column: true to support simultaneous row and column drag; the table automatically distinguishes operation areas.