Table
A high-performance enterprise table component combining vxe-table, Element Plus, Naive UI, and Ant Design. Supports virtual scrolling, tree data, fixed columns/rows, summary rows and more.
Basic Table
The most basic table display usage.
Date | Name | Address |
|---|
2024-01-01 | John | 88 Jianguo Rd, Chaoyang, Beijing |
2024-01-02 | Jane | Lujiazui Financial Center, Pudong, Shanghai |
2024-01-03 | Mike | Zhujiang New Town, Tianhe, Guangzhou |
2024-01-04 | Sarah | Tech Park, Nanshan, Shenzhen |
Basic Table
Striped Table
Use the stripe property.
Date | Name | Address |
|---|
2024-01-01 | John | 88 Jianguo Rd, Chaoyang, Beijing |
2024-01-02 | Jane | Lujiazui Financial Center, Pudong, Shanghai |
2024-01-03 | Mike | Zhujiang New Town, Tianhe, Guangzhou |
2024-01-04 | Sarah | Tech Park, Nanshan, Shenzhen |
Striped Table
Bordered Table
Use the border property.
Date | Name | Address |
|---|
2024-01-01 | John | 88 Jianguo Rd, Chaoyang, Beijing |
2024-01-02 | Jane | Lujiazui Financial Center, Pudong, Shanghai |
2024-01-03 | Mike | Zhujiang New Town, Tianhe, Guangzhou |
2024-01-04 | Sarah | Tech Park, Nanshan, Shenzhen |
Bordered Table
Status Table
Add custom class names via row-class-name.
Date | Name | Address |
|---|
2024-01-01 | John | Chaoyang, Beijing |
2024-01-02 | Jane | Pudong, Shanghai |
2024-01-03 | Mike | Tianhe, Guangzhou |
2024-01-04 | Sarah | Nanshan, Shenzhen |
Status Table
Overflow Tooltip
Set the column showOverflowTooltip property.
Date | Name | Address |
|---|
2024-01-01 | John | 88 Jianguo Rd, SOHO Modern City Tower A, Rm 1001, Chaoyang, Beijing - This is a very long address for testing text overflow |
2024-01-02 | Jane | Lujiazui Financial Center, Intl Finance Tower 28F, Pudong, Shanghai - This is also a very long address |
Overflow Tooltip
Fixed Header
Set the height property.
Date | Name | Address |
|---|
2024-01-01 | John | Office Rd 1 |
2024-01-02 | Jane | Office Rd 2 |
2024-01-03 | Mike | Office Rd 3 |
2024-01-04 | John | Office Rd 4 |
2024-01-05 | Jane | Office Rd 5 |
2024-01-06 | Mike | Office Rd 6 |
2024-01-07 | John | Office Rd 7 |
2024-01-08 | Jane | Office Rd 8 |
2024-01-09 | Mike | Office Rd 9 |
2024-01-10 | John | Office Rd 10 |
2024-01-11 | Jane | Office Rd 11 |
2024-01-12 | Mike | Office Rd 12 |
2024-01-13 | John | Office Rd 13 |
2024-01-14 | Jane | Office Rd 14 |
2024-01-15 | Mike | Office Rd 15 |
2024-01-16 | John | Office Rd 16 |
2024-01-17 | Jane | Office Rd 17 |
2024-01-18 | Mike | Office Rd 18 |
2024-01-19 | John | Office Rd 19 |
2024-01-20 | Jane | Office Rd 20 |
Fixed Header
Fixed Columns
Set the column fixed property.
Date | Name | Province | City | Address | Zip |
|---|
2024-01-01 | John | Beijing | Chaoyang | 88 Jianguo Rd, Chaoyang, Beijing | 100000 |
2024-01-02 | Jane | Shanghai | Pudong | Lujiazui Financial Center, Pudong, Shanghai | 200000 |
2024-01-03 | Mike | Guangdong | Tianhe | Zhujiang New Town, Tianhe, Guangzhou | 510000 |
2024-01-04 | Sarah | Guangdong | Nanshan | Tech Park, Nanshan, Shenzhen | 518000 |
Fixed Columns
Different Sizes
Available sizes: large, default, small.
Date | Name | Address |
|---|
2024-01-01 | John | 88 Jianguo Rd, Chaoyang, Beijing |
2024-01-02 | Jane | Lujiazui Financial Center, Pudong, Shanghai |
2024-01-03 | Mike | Zhujiang New Town, Tianhe, Guangzhou |
2024-01-04 | Sarah | Tech Park, Nanshan, Shenzhen |
Different Sizes
Highlight Current Row
Use the highlight-current-row property.
Date | Name | Address |
|---|
2024-01-01 | John | 88 Jianguo Rd, Chaoyang, Beijing |
2024-01-02 | Jane | Lujiazui Financial Center, Pudong, Shanghai |
2024-01-03 | Mike | Zhujiang New Town, Tianhe, Guangzhou |
2024-01-04 | Sarah | Tech Park, Nanshan, Shenzhen |
Current row ID: None
Highlight Current Row
Custom Index
Use show-index to show the index column.
Index | Date | Name | Address |
|---|
| 10 | 2024-01-01 | John | 88 Jianguo Rd, Chaoyang, Beijing |
| 20 | 2024-01-02 | Jane | Lujiazui Financial Center, Pudong, Shanghai |
| 30 | 2024-01-03 | Mike | Zhujiang New Town, Tianhe, Guangzhou |
| 40 | 2024-01-04 | Sarah | Tech Park, Nanshan, Shenzhen |
Custom Index