Searchable Tree Table

ProNew

A tree table with a filter field that keeps matching rows and the parents above them, plus Expand all and Collapse all. Use this when a nested table is long and people look for one row.

Customize

Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.

aria-label

Guide and examples

When to use it

Use it for nested tables with more than a couple of dozen rows, such as orders with items or folders with files.

Do not use it for flat tables (use a data grid with filtering) or when the data is paged from a server.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Default	Description
`nodes`	`TreeNode<T>[]`	-	The rows.
`columns`	`TreeTableColumn<T>[]`	-	As in `tree-table`.
`searchText`	`(node) => string`	`label`	What a row is searched by.
`aria-label`	`string`	-	Names the grid; the search field is `Search {name}`.

Accessibility

The search field has an accessible name; the number of matching rows is a status message.
Expand all and Collapse all are disabled when they would do nothing.
Everything from tree-table applies: treegrid roles and arrow-key navigation.

Testing

The pattern ships with a Testing Library test (searchable-tree-table.test.tsx) that covers expand and collapse all, filtering with parents, the empty result and Escape.

Guide and examples

When to use it

Use it for nested tables with more than a couple of dozen rows, such as orders with items or folders with files.

Do not use it for flat tables (use a data grid with filtering) or when the data is paged from a server.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Default	Description
`nodes`	`TreeNode<T>[]`	-	The rows.
`columns`	`TreeTableColumn<T>[]`	-	As in `tree-table`.
`searchText`	`(node) => string`	`label`	What a row is searched by.
`aria-label`	`string`	-	Names the grid; the search field is `Search {name}`.

Accessibility

The search field has an accessible name; the number of matching rows is a status message.
Expand all and Collapse all are disabled when they would do nothing.
Everything from tree-table applies: treegrid roles and arrow-key navigation.

Testing

The pattern ships with a Testing Library test (searchable-tree-table.test.tsx) that covers expand and collapse all, filtering with parents, the empty result and Escape.