Table

The Table component is used to display data in a structured, grid-like format, making it easy to compare and analyse information.

Examples

The generic table is composed by two micro-components: Header and Cells

To present tabular data where users need to compare and analyse multiple data points.
When the dataset has multiple attributes or variables that can be clearly organized in rows and columns.
To facilitate sorting, filtering, and searching through large datasets.
When you need to display data that users may want to copy or export to other formats like CSV or Excel.

For displaying hierarchical data where nested relationships are more important than a flat structure.
When presenting content that is better understood through visual representation like charts or graphs.
If the dataset is very small or the data can be summarized in a simpler format like a list or a card.
When the table would become too complex to read on smaller screens, especially if it involves horizontal scrolling.

List: Use for simple data collections that don’t require complex comparisons.
Card: Ideal for presenting individual data points with rich media or actions.
Chart: Better for visualizing trends, distributions, and relationships in the data.

Ensure the table has a clear and descriptive caption.
Use appropriate table headers (<th>) and ensure they are properly scoped to rows or columns using the scope attribute.
Ensure all interactive elements within the table (like sortable headers or buttons) are keyboard accessible.
Provide sufficient contrast between text and background colours to ensure readability.
Implement aria roles and properties to convey additional information about the table structure and interactive elements to screen readers.
Ensure the table is responsive and usable on different devices, particularly for users relying on screen magnification or small screens.