Data Grid

Advanced table with sorting and selection.

Props

keyboardIconPosition
"left" | "right"
Position of the keyboard navigation indicator icon.
Defaults to left.
keyboardIconVisibility
"visible" | "hidden"
Controls visibility of the keyboard navigation indicator icon.
Defaults to visible.
keyboardNav
"layout" | "table"
Navigation mode. 'table' navigates like a table (up/down between rows), 'layout' allows wrapping between rows with left/right arrows.
keyboardIconPosition
"left" | "right"
Position of the keyboard navigation indicator icon.
Defaults to left.
keyboardIconVisibility
"visible" | "hidden"
Controls visibility of the keyboard navigation indicator icon. Use "visible" to show or "hidden" to hide.
Defaults to visible.
keyboardNav
"layout" | "table"
Navigation mode. "table" navigates like a table (up/down between rows), "layout" allows wrapping between rows with left/right arrows.
keyboardIconPosition
"left" | "right"
Position of the keyboard navigation indicator icon.
Defaults to left.
keyboardIconVisibility
"visible" | "hidden"
Controls visibility of the keyboard navigation indicator icon. Use "visible" to show or "hidden" to hide.
Defaults to visible.
keyboardNav
"layout" | "table"
Navigation mode. "table" navigates like a table (up/down between rows), "layout" allows wrapping between rows with left/right arrows.
Defaults to table.
Examples
Examples show common usage patterns and implementation guidance.

No usage guidelines have been documented for this component yet.
All GoA Design System components are built to meet WCAG 2.2 AA standards. The following guidelines provide additional context for accessible implementation.

Keyboard

First cell
Second cell
Third cell
Fourth cell
Do
Add data-grid attributes to rows and cells for keyboard navigation to work.

Related components

Pagination

Help users navigation between multiple pages or screens as part of a set.
Table

A set of structured data that is easy for a user to scan, examine, and compare.
View old component docs