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.

@see {@link https://www.w3.org/TR/wai-aria-practices/examples/treegrid/treegrid-1.html}

View on Storybook

View source on GitHub

Import

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

Props

Examples

Default

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