Automattic Design System

Components

TreeGrid

TreeGrid is used to create a tree hierarchy. It is not a visually styled component, but instead helps with adding keyboard navigation and roving tab index behaviors to tree grid structures.

A tree grid is a hierarchical 2 dimensional UI component, for example it could be used to implement a file system browser.

A tree grid allows the user to navigate using arrow keys. Up/down to navigate vertically across rows, and left/right to navigate horizontally between focusables in a row.

The TreeGrid renders both a table and tbody element, and is intended to be used with TreeGridRow (tr) and TreeGridCell (td) to build out a grid.

import { __experimentalTreeGrid as TreeGrid } from '@wordpress/components';

View on Storybook

View in Figma

View source on GitHub

PropsPermalink to this section

NameDefaultDescription
applicationAriaLabel

string

Label to use for the element with the application role.

children Required

ReactNode

The children to be rendered in the tree grid.

onExpandRow() => {}

(row: HTMLElement) => void

Callback to fire when row is expanded.

onCollapseRow() => {}

(row: HTMLElement) => void

Callback to fire when row is collapsed.

onFocusRow() => {}

(event: KeyboardEvent<HTMLTableElement>, startRow: HTMLElement, destinationRow: HTMLElement) => void

Callback that fires when focus is shifted from one row to another via the Up and Down keys. Callback is also fired on Home and End keys which move focus from the beginning row to the end row.

The callback is passed the event, the start row element that the focus was on originally, and the destination row element after the focus has moved.

ExamplesPermalink to this section

DefaultPermalink to this section

const Default = () => <TreeGrid onExpandRow={fn()} onCollapseRow={fn()} onFocusRow={fn()}><Rows items={ groceries } /></TreeGrid>;