Use tables to:
- Present simple tabular data with clear rows and columns
- Display comparison information across categories
- Show structured data that benefits from a grid layout
- Present static information that does not require sorting or filtering
Do not use tables to:
- Display large datasets that require sorting, filtering, or pagination — use a data grid component instead
- Present content that would be clearer in a list format
- Show interactive data that users need to manipulate
Example of a simple table
Tables vs data grids vs lists
|
Use a table for |
Use a data grid for |
Use a list for |
|---|---|---|
|
Simple static tabular data |
Large datasets requiring sorting/filtering |
Sequential items without columns |
|
Comparison across categories |
Interactive data manipulation |
Single-column content |
|
Small to medium data sets |
Pagination and dynamic loading |
Content that doesn't need a grid structure |
Responsive behaviour