Tables
Component status
| Status | |
|---|---|
| Is the design finished and component available in Figma library? | Missing |
| Is the design documentation complete? | Update required |
| Is the technical documentation complete? | Missing |
Introduction
At Triptease, we use many things that look like tables. Not all of these are tables or should be tables. Let's talk about some of them!
What do you mean?
Ah, so you know our Message Manager table? It's got tons of bells and whistles (read: hover to peek, delete, download emails, archive, duplicate). Perhaps it was never meant to be a table.
Enter, the Data Grid.
| Feature | Table | Grid |
|---|---|---|
| Sorting | Supported via header buttons/links. | Supported via columnheader roles. |
| Filtering | Supported externally. | Supported externally (or integrated). |
| Selection | Supported via checkboxes in rows/cells. | Integrated into grid behavior. |
| Keyboard Navigation | Tabbing between all interactive items. | Arrow keys for cells, single tab stop. |
| Accessibility | Limited ARIA roles. | Rich ARIA roles and structure. |
| Best Use Case | Light interaction or static data. | Heavy interaction and dense data. |
When should I use tables and when should I use grids?
As a rule of thumb, use tables for static data and lightweight interaction. Use grids when links or widgets are dense and seamless navigation is critical.
Use Tables when:
- Links are sparse or the primary content of the table.
- The table is mostly for static data with minimal interactivity.
- You want the tabbing sequence to treat each link or interactive element as a separate stop.
- If the table contains many links, navigating through the content with the Tab key can become tedious.
Use Grids when:
- Links are dense or interspersed with other interactive widgets.
- You want to streamline keyboard navigation with arrow keys and a single tab stop.
- The table’s structure is highly interactive, with actions like row selection, sorting, or cell navigation.
- The entire grid is a single tab stop.
- Once focused, users can use arrow keys to navigate between cells
- Links remain actionable, but their navigation is wrapped in the grid’s interaction model.