Table - Column Configuration

Dynamically control column visibility and fixed direction through the column configuration panel for personalized table display.

Column Visibility Control

Control each column's show/hide through checkboxes in the panel, supporting select all / deselect all operations.

Index	Name	Age	Department	Salary	Phone	Email	Address

1	John	28	Engineering	15000	13800001111	john@test.com	Chaoyang, Beijing
2	Jane	32	Product	18000	13800002222	jane@test.com	Pudong, Shanghai
3	Mike	25	Design	14000	13800003333	mike@test.com	Tianhe, Guangzhou
4	Sarah	35	Operations	22000	13800004444	sarah@test.com	Nanshan, Shenzhen
5	Tom	29	Marketing	16000	13800005555	tom@test.com	West Lake, Hangzhou

Column Visibility Control

Fixed Column Config

Dynamically set whether each column is fixed to the left or right through the config panel. Click an already selected direction to unfix.

Index	Name	Age	Department	Salary	Phone	Email	Address

1	John	28	Engineering	15000	13800001111	john@test.com	Chaoyang, Beijing
2	Jane	32	Product	18000	13800002222	jane@test.com	Pudong, Shanghai
3	Mike	25	Design	14000	13800003333	mike@test.com	Tianhe, Guangzhou
4	Sarah	35	Operations	22000	13800004444	sarah@test.com	Nanshan, Shenzhen
5	Tom	29	Marketing	16000	13800005555	tom@test.com	West Lake, Hangzhou

Fixed Column Config

Full Column Config Panel

Combines visibility control and fixed column config, with a reset button to restore default settings.

Index	Name	Age	Department	Salary	Phone	Email	Address

1	John	28	Engineering	15000	13800001111	john@test.com	Chaoyang, Beijing
2	Jane	32	Product	18000	13800002222	jane@test.com	Pudong, Shanghai
3	Mike	25	Design	14000	13800003333	mike@test.com	Tianhe, Guangzhou
4	Sarah	35	Operations	22000	13800004444	sarah@test.com	Nanshan, Shenzhen
5	Tom	29	Marketing	16000	13800005555	tom@test.com	West Lake, Hangzhou

Full Column Config Panel

API

ColumnItem Configuration

Property	Description	Type	Default
prop	Column field name	string	—
label	Column title	string	—
width	Column width	number	—
visible	Whether to show	boolean	true
fixed	Fixed direction	'left' | 'right' | false	false

Implementation Details

1. Column Visibility: Maintain a column config array with visible property, use computed to filter visible: true columns for the table
2. Column Fixing: Set the fixed property in column config, mapped to the table column's fixed property
3. Reactivity: Config changes automatically trigger table re-rendering, no manual refresh needed

Usage Tips

1. Column config data can be stored in localStorage for persistence
2. It's recommended to provide a "Reset" function for users to restore default settings
3. When configuring fixed columns, ensure the total width of left and right fixed columns doesn't exceed the table width
4. Combined with column drag feature for more flexible column order adjustment