Table

A configurable component for displaying tabular data.

When to use

Use a Table component when presenting large amounts of data that need to be easily compared and analysed. It is useful for presenting data in a structured and organised way that is easy for users to understand.

When not to use

Avoid using a Table component when presenting a small amount of data or when the data is not meant to be compared or analysed. If the data can be presented in a simpler format, such as a list, use that instead.

Behaviour

The Table follows standardised web behaviour. For instance, it bases the cell width on the content size. It also offers the ability to make both headers and individual columns sticky. This is incredibly beneficial for data comparison and analysis. For a complete overview of its behaviour, particularly for complex configurations and features, refer to the Angular component page.

Accessibility considerations

When designing accessible Data tables, various elements should be taken into consideration:

  • Content Clarity: Information should be clear and concise, avoiding unnecessary jargon to ensure it's easily understood by all users. Use a consistent and clear structure for the table, including headers, rows, and columns.
  • Cognitive Load: Be mindful of the amount of information presented at a time, especially on smaller devices. Overloading users with too much information can lead to confusion and difficulty in comprehension.

Accessibility is not just about compliance, but about ensuring an inclusive and user-friendly experience for everyone.