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.

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.

Fixed Column Config

Full Column Config Panel

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

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