Table

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:

• 1.3.1 Info and relationships – level A
• 1.4.1 Use of colour – level A

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.

Guidance for clickable rows

The onClick prop on the table row component should only be used as an enhancement for mouse/touch users to be able to quickly activate the “main” action on the table.

The callback function should only be used in scenarios where the concept is clearly understood with many existing examples (e.g. email applications often allow users to click the entire row to open an email).

Don’t rely on the onClick prop as the only means of triggering the main action. To support all users, the action must also be present (as either a link or button) within the cell content.

Ensure other interactive elements within a clickable row have adequate spacing and sizing to prevent users from accidentally triggering the row click event instead of pressing the link or button.