Displaying Data

Data Table

How the Data Table works with a keyboard and assistive tech.

Guidance#

Uses a native <table> with <th scope="col">, so cells are announced with their column.

The sorted column header has aria-sort. The sort control inside it is a <button>.

Each row checkbox is labelled with its row, such as "Select Acme invoice".

The select-all checkbox uses the mixed state when only some rows are selected.