Skip to content

DataTable

What component has

Keyboard support

Keyboard support
KeyFunction
TabMoves focus to the next focusable element outside of the table.
Shift + TabMoves focus to the previous focusable element.
Left Arrow, Right Arrow, Up Arrow, Down ArrowMoves focus across the grid of table cells.
EnterActivates interactive elements inside the table grid.

Roles & attributes

The following list describes roles and attributes that component already has.

Component / elementRole / AttributeUsage
DataTablerole="grid"Identifies the element that serves as the grid widget container. The grid element isn't focusable because it implements the practice described in the section on Managing Focus Within Components Using a Roving tabindex.
aria-rowcount="SOME_VALUE"Applied when not all rows are present in the DOM. Defines the total number of rows in the grid.
aria-colcount="SOME_VALUE"Applied when not all columns are present in the DOM. Defines the total number of columns in the grid.
DataTable.Head, DataTable.Rowrole="row"Identifies a row of cells within a tabular structure. A row contains one or more grid cells or column headers, and possibly a row header, within a grid.
aria-rowindex="INDEX_VALUE"Applied when not all rows are present in the DOM. Defines an element's position with respect to the total number of rows within the grid.
DataTable.Headaria-sort="ascending/descending"This attribute is set to a specific value when a column is sorted in ascending or descending order.
DataTable.Columnrole="columnheader"Identifies an element as a column header cell, similar to the native <th> element with column scope.
DataTable.Cellrole="gridcell"Identifies a cell in a grid or treegrid. It's intended to mimic the functionality of the HTML <td> element for table-style grouping of information.
aria-colindex="INDEX_VALUE"Applied when not all columns are present in the DOM. Defines an element's column index or position with respect to the total number of columns within the grid.

Considerations for developers

Attributes

The following list will help you to keep in mind the necessary attributes to make our components fully accessible in the particular cases in your interfaces.

Attributes
Component / elementAttributeUsage
DataTablearia-labelDefines the accessible name of a table without a visible title.
aria-labelledby="ID_REF"Refers to the heading element that labels the grid.

Considerations for designers

If you need to show different states for table rows or cells, avoid relying only on color. Add a visual indicator, like text or an icon with alt text, inside the cells.

Other recommendations

For more accessibility recommendations, refer to the common Accessibility guide.

Automated screen reader testing

Intergalactic v15.29.0, React v18.2.0, Playwright v1.25.1, Guidepup v0.13.1, MacOS Monterey 12.

Running screen reader against this file.

1. Screen reader goes into the active element.
2. Screen reader says "In web content table 4 columns, 6 rows".
3. Screen reader goes into the active element.
4. Screen reader says "In table No selection. Keyword row 1 of 0 column 1 of 4".
5. Screen reader presses the "Control+Option+ArrowDown" button.
6. Screen reader says "row 2 of 0 ebay buy".
7. Screen reader presses the "Control+Option+ArrowDown" button.
8. Screen reader says "row 3 of 0 www.ebay.com".
9. Screen reader presses the "Control+Option+ArrowRight" button.
10. Screen reader says "KD,% 11.2 column 2 of 4".
11. Screen reader presses the "Control+Option+ArrowRight" button.
12. Screen reader says "CPC $3.4 column 3 of 4".
13. Screen reader presses the "Control+Option+ArrowDown" button.
14. Screen reader says "row 4 of 0 $0.65".

Last updated:

Released under the MIT License.

Released under the MIT License.