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 header columns to reorder them

ID	Name	Age	Department	Position	City

1	John	28	Engineering	Frontend Engineer	Beijing
2	Jane	32	Product	Product Manager	Shanghai
3	Mike	25	Design	UI Designer	Guangzhou
4	Sarah	30	Operations	Operations Director	Shenzhen
5	Tom	27	Marketing	Marketing Manager	Hangzhou

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.

Fixed columns do not participate in drag, only non-fixed columns in the middle can be reordered

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

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.

ID Name Age Department Position Email City

ID	Name	Age	Department	Position

1	John	28	Engineering	Frontend Engineer
2	Jane	32	Product	Product Manager
3	Mike	25	Design	UI Designer

Personalized Columns (Visibility + Drag)

Drag Events

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

ID	Name	Age	Department

1	John	28	Engineering
2	Jane	32	Product
3	Mike	25	Design

Event Log:

Drag columns to see event log

Column Drag Events

Grouped Header

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

Basic Info			Address Info
ID	Name	Age	Province	City	Address	Zip

1	John	28	Beijing	Chaoyang	88 Jianguo Rd	100020
2	Jane	32	Shanghai	Pudong	Lujiazui Loop	200120
3	Mike	25	Guangdong	Tianhe	Zhujiang New Town	510623

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.

Supports both row and column drag. Drag headers to reorder columns, drag rows to reorder rows.

ID	Name	Age	Department	Rating

1	John	28	Engineering	92
2	Jane	32	Product	88
3	Mike	25	Design	95
4	Sarah	30	Operations	85
5	Tom	27	Marketing	90

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.