Table - Sort & Filter
The Table component supports sorting and filtering data.
Sort
Set the column sortable property to true to enable sorting.
Date | Name | Age | Tag |
|---|
2024-01-01 | John | 28 | Home |
2024-01-02 | Jane | 35 | Company |
2024-01-03 | Mike | 22 | Home |
2024-01-04 | Sarah | 45 | Company |
2024-01-05 | Tom | 31 | School |
Sort
Filter
Set the column filterable property to true and provide filters options to enable filtering.
Date | Name | Tag |
|---|
2024-01-01 | John | Home |
2024-01-02 | Jane | Company |
2024-01-03 | Mike | Home |
2024-01-04 | Sarah | Company |
2024-01-05 | Tom | School |
Filter
Custom Sort
Use the sortMethod property to customize sort logic.
Name | Age |
|---|
John | 28 |
Jane | 35 |
Mike | 22 |
Sarah | 45 |
Tom | 31 |
Name column sorted by character length
Custom Sort
Multi-Column Sort
Set sort-config.multiple to true to enable multi-column sorting.
Date | Age |
|---|
2024-01-01 | 28 |
2024-01-02 | 35 |
2024-01-03 | 22 |
2024-01-04 | 45 |
2024-01-05 | 31 |
Multi-Column Sort
Clear Sort
Use the table instance's clearSort method to clear sort state.
Date | Name | Age | Tag |
|---|
2024-01-01 | John | 28 | Home |
2024-01-02 | Jane | 35 | Company |
2024-01-03 | Mike | 22 | Home |
2024-01-04 | Sarah | 45 | Company |
2024-01-05 | Tom | 31 | School |
Clear Sort