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.

Basic Column Width Resize

Grouped Headers

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

Grouped Headers + Column Resize

Frozen Columns

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

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.

Min Column Width Limit

Per-Column Config

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

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.

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.