Table - Tree Data & Expand Row
The Table component supports tree data display and expand row functionality.
Tree Data
Configure tree data through tree-config, and set treeNode: true on the column to specify which column displays the expand icon.
Date | Department Name | Address |
|---|
2024-01-01 | Level 1 Dept A | Beijing HQ |
2024-01-06 | Level 1 Dept B | Shanghai HQ |
Tree Data
Default Expand All
Set tree-config.expandAll to true to expand all nodes by default.
Date | Department Name | Address |
|---|
2024-01-01 | Level 1 Dept A | Beijing HQ |
2024-01-02 | Level 2 Dept A-1 | Chaoyang, Beijing |
2024-01-03 | Level 2 Dept A-2 | Haidian District, Beijing |
2024-01-04 | Level 3 Dept A-2-1 | Zhongguancun |
2024-01-06 | Level 1 Dept B | Shanghai HQ |
2024-01-07 | Level 2 Dept B-1 | Pudong, Shanghai |
Expand All By Default
Expandable Rows
Implement expand row functionality through expand-config and expand slot.
Date | Name | Address |
|---|
2024-01-01 | John | Chaoyang, Beijing | |
2024-01-02 | Jane | Pudong, Shanghai |
Expand Row
Selectable Tree Data
Tree data can be combined with selection functionality.
Date | Department Name | Address |
|---|
2024-01-01 | Level 1 Dept A | Beijing HQ | |
2024-01-02 | Level 2 Dept A-1 | Chaoyang, Beijing | |
2024-01-03 | Level 2 Dept A-2 | Haidian District, Beijing | |
2024-01-04 | Level 3 Dept A-2-1 | Zhongguancun | |
2024-01-06 | Level 1 Dept B | Shanghai HQ | |
2024-01-07 | Level 2 Dept B-1 | Pudong, Shanghai |
Selected: None
Selectable Tree Data