Live Demo
Basic Table
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
Listing Table
| Task Name | Created By | Assigned On | Due Date |
|---|---|---|---|
| This task is complete - click here! |  | 31 Jan 2023 | Today |
| This task is complete - click here! |  | 31 Jan 2023 | Due to 3 days |
Anatomy
- Column Headers
- Single Column
- Single Row
- Cell
Variation
Borders can be used between rows. Borders can be used to distinguish groupings. To create more distinction, use borders in conjunction with striping.
The heading rows can have either a subtle or bold emphasis.
States
Table provides a hover state on rows to allow for easy scanning. While long pressing a row, that particular row and additional rows can be selected to apply overall changes to them. At the end of each row there's option to delete and edit each row.
Guidelines
- Maintain uniformity throughout the visual elements in the tables, like headers, rows and columns.
- Include sorting, filtering and contextual actions for better usability.
- Avoid overcrowding and allow text wrapping.
- Maintain consistent column widths to avoid abrupt layout shifts and provide a neat appearance.
- Use distinct styling for header cells to clearly differentiate them from data cells and provide context for the columns.