Table - Custom Templates
The Table component supports custom column content and headers.
Custom Column Template
Customize column rendering content through slots, where the slot name is the column's prop value.
Date | Name | Status | Tag |
|---|
2024-01-01 | John | success | Home |
2024-01-02 | Jane | warning | Company |
2024-01-03 | Mike | danger | School |
2024-01-04 | Sarah | info | Home |
Custom Column Template
Custom Header
Customize header content through the header-[prop] slot.
Date | 👤 Name | Status | Tag |
|---|
2024-01-01 | John | success | Home |
2024-01-02 | Jane | warning | Company |
2024-01-03 | Mike | danger | School |
2024-01-04 | Sarah | info | Home |
Custom Header
Action Column
Add action button columns for edit, delete, and other operations.
Date | Name | Actions |
|---|
2024-01-01 | John | |
2024-01-02 | Jane | |
2024-01-03 | Mike | |
2024-01-04 | Sarah |
Action Column
Formatted Display
Format cell content through the column's formatter function.
Name | Amount |
|---|
John | ¥1000.00 |
Jane | ¥2500.00 |
Mike | ¥800.00 |
Sarah | ¥3200.00 |
Formatted Display
Render Function
Render custom content through the column's render function using JSX/h function.
Name | Status |
|---|
John | success |
Jane | warning |
Mike | danger |
Sarah | info |
Render Function