Sortable tables
A web component for holding tables with sortable columns.
| Column header 1 | Column header 2 | Sorting disabled |
|---|---|---|
| AAA | BBB | CCC |
| BBB | AAA | CCC |
Considerations
The table element (and its wrapping div to support horizontal scrolling, if used) must be wrapped in the <amplify-table-sort> custom HTML element.
The table markup must include a colgroup element with the same number of child col elements as there are th elements.
The th elements must sit within the thead element and the sortable data must sit within the tbody element.
Each th element must include the data-type="..." data attribute, which specifies the type of data in each column, e.g. data-type="number", data-type="string" or data-type="date". Use data-type="no-sort" when sorting functionality should be disallowed.
Where a table cell is holding a date, it must have a data-date attribute holding the date converted into UNIX timestamp, e.g. data-date="191030400".
| ID | First name | Last name | Band name | Date of birth | Place of birth | Random number |
|---|---|---|---|---|---|---|
| 1 | Emma | Bunton | Baby | 21 January 1976 | Watford, Hertfordshire | 5424353 |
| 2 | Geri | Halliwell | Ginger | 6 August 1972 | London | 554 |
| 3 | Victoria | Beckham | Posh | 17 April 1974 | Harlow, Essex | 23535 |
| 4 | Melanie | Brown | Scary | 29 May 1975 | Leeds, Yorkshire | 234 |
| 5 | Melanie | Chisholm | Sporty | 12 January 1974 | Whiston, Merseyside | 232 |