Table
Tables help make complex information easier to scan and compare. Use tables for exact values or information that would be hard to read in body text.
import { ... } from '@ag.ds-next/react/table';To be accessible to all users, tables must have:
- a title or caption
- row and column headings
- a cross-reference in the text.
You may need to add notes below the table to help users understand the information and where it is from.
Don’t rely on colour to convey information.
Don’t leave cells empty. Use ‘zero’ or ‘nil’ or ‘n/a’ where there is no data. If it is numeric data, use zero (0). Only use zero if that is the true value.
Consider screen size and how much information you can include.
For more guidance, see:
ARIA attributes
Using ARIA attributes can help users of assistive technology understand the purpose of an element.
aria-labelledby and aria-describedby attributes can help users of assistive technology understand the purpose of a table, by relating a Heading or Text element to the table by their ID.
The aria-rowcount attribute defines the total number of rows in a table, for users of assistive technology. This is useful for tables with pagination.
The aria-rowindex attribute on TableRow defines its position with respect to the total number of rows within a Table.