Founding price: $35, then $79.99 after 23:59 UTC on 4 November, then $79.99
Get ProA tree with a search field that keeps matching rows and the branches above them, opens them, marks the matched text and announces the count.
This item has no props to tune. Use the lens above to change theme, density, direction and more.
Use it for trees too long to scan: documentation navigation, permission lists, product categories, file pickers.
Do not use it for short trees, and not when the tree is loaded lazily (the unloaded rows cannot be searched).
It uses input, tree-view, which the CLI installs for you.
| Prop | Type | Default | Description |
|---|---|---|---|
nodes | TreeNode[] | - | The tree. |
query / defaultQuery / onQueryChange | string | "" | The search text. |
defaultExpanded | string[] | [] | Branches open before anyone types. |
placeholder / searchLabel / emptyText | string | - | Texts. |
... | - | - | All TreeView props except expansion. |
<mark>.useFilteredTree(nodes, query, defaultExpanded, match?) and Highlight are exported for your own layouts; pass match to search more than the label.tree-view. Branches opened by a search can be closed.Motion respects prefers-reduced-motion: the only animation is the loading spinner, which is switched off. Layout uses logical properties, so the component works in right-to-left languages.
The component ships with a Testing Library test (filterable-tree.test.tsx) that covers its keyboard paths, roles and states.