Table - Column Width Resize

Enable column width drag-to-resize through the resizable property. Users can drag the column header edge to change column width.

Drag Mode

Set the resizable property to true to enable column width adjustment. Users can drag on the right edge of column headers to adjust column width.

Date	Name	Province	City	Address

2024-01-01	John	Beijing	Chaoyang	88 Jianguo Rd
2024-01-02	Jane	Shanghai	Pudong	Lujiazui Financial Center
2024-01-03	Mike	Guangdong	Tianhe	Zhujiang New Town
2024-01-04	Sarah	Zhejiang	Xihu	Wensan Road
2024-01-05	Tom	Jiangsu	Gulou	Zhongshan North Rd

Basic Column Width Resize

Grouped Headers

Column width adjustment is compatible with grouped headers (children), allowing sub-column width adjustment under grouped headers.

Basic Info		Address Info
Name	Age	Province	City	Address	Zip

John	28	Beijing	Chaoyang	88 Jianguo Rd	100020
Jane	32	Shanghai	Pudong	Lujiazui Loop	200120
Mike	25	Guangdong	Tianhe	Zhujiang New Town	510623
Sarah	30	Zhejiang	Xihu	Wensan Road	310012

Grouped Headers + Column Resize

Frozen Columns

Column width adjustment can work with fixed columns (fixed).

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 Resize

Min Column Width Limit

Limit the minimum column width through the column config's minWidth to prevent columns from being dragged too narrow.

Hint: ID min 60px, Name min 80px, Email min 150px, Role min 80px, Description min 120px

ID	Name	Email	Role	Description

1	John	john@example.com	Admin	System super admin with all permissions
2	Jane	jane@example.com	Editor	Content editor, responsible for article review and publishing
3	Mike	mike@example.com	Viewer	Read-only permission, can only view data

Min Column Width Limit

Per-Column Config

Control whether a specific column is resizable through the column config's resizable property.

Hint: "ID" and "Age" columns are not resizable (resizable: false)

ID	Name	Age	Department	Position

1	John	28	Engineering	Frontend Engineer
2	Jane	32	Product	Product Manager
3	Mike	25	Design	UI Designer
4	Sarah	30	Operations	Operations Director

Per-Column Resizable Control

Event Listening

Listen to column width changes through the column-resize event to get the current column and new width value.

ID	Name	Age	Department

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

Column Width Change Log:

Drag column edge to see log

Column Width Change Event

API

Table Props (Column Resize Related)

Property	Description	Type	Default
resizable	Globally enable column width adjustment	boolean	false

TableColumn Props (Column Resize Related)

Property	Description	Type	Default
width	Column width (pixels or percentage)	number | string	—
minWidth	Minimum column width (minimum 40px during drag)	number | string	—
maxWidth	Maximum column width	number | string	—
resizable	Whether this column is resizable (higher priority than global resizable)	boolean	—

Events

Event	Description	Parameters
column-resize	Triggered when column width changes	(column: TableColumn, width: number)

Notes

1. Recommended to set border: Tables with borders show column boundaries and drag areas more clearly.
2. Set initial width: It is recommended to set width for each column to ensure accurate column width calculation.
3. minWidth priority: If column width is less than minWidth during drag, it will be limited to the minimum width.
4. Column-level override: The resizable in column config overrides the global resizable setting.