DataGrid

DataGrid is a compound component for keyboard-aware grid navigation across rows and cells.

Labeling

The grid should appear with surrounding context that explains what the cells represent.

AnnouncementFocus the demo and press a key from the table.

Key	Action
`→←`	Moves the focus to the next or previous cell in the row. Follows the text direction: in right-to-left, → moves to the previous cell. Stops at the row edge unless `wrap` is set.
`↓↑`	Moves the focus to the cell below or above in the same column.
`HomeEnd`	Moves the focus to the first or last cell of the row.
`Ctrl + HomeCtrl + End`	Moves the focus to the first cell of the first row or the last cell of the last row.
`Page DownPage Up`	Moves the focus to the last or first row in the same column, or by `rowDelta` rows when it is set.
`Tab`	Moves the focus into the grid on the last active cell and then out of it: the whole grid is one tab stop.

Every row is checked in a real browser: Playwright presses the key in Chromium and checks where the focus and the active item land.