This type represents the data that can be handled by the Tree component.
This is really just a Map of itemId -> item for quick lookups for the logic
within the tree.
A render function that allows you to add additional functionality to or custom components within the tree.
A function to call that will sort the items within the tree for each unique
parentId. If you have a tree like:
a
├── a1
b
├── b1
├── b2
│ └── b2.1
c
├── c1
├── c2
└── c3
This function will be called with:
[a1][b2.1][b1, b2][c1, c2, c3][a, b, c]Creates an accessible tree widget that allows you to show hierarchical data
in a list presentation view. This component requires the selection and
expansion state to be provided/controlled but you can use the
useTreeItemSelection and useTreeItemExpansion hooks for a great starting
point for this functionality.
The TreeGroup component is used to render a tree item's nested items
whenever the expanded prop is true. It uses the Collapse component
behind the scenes to animate in-and-out of view and will fully unrender when
the expanded prop is false.
This component renders an item within a tree with optional child items. This
should almost always be used from the itemRenderer prop from the Tree
component as it provides a lot of the required a11y props for you.
A "reasonable" default implementation for rendering a tree item that extracts
the most used ListItem props and passes them down to the TreeItem.
This is actually exported from this package so it can be used along with a
custom renderer for all items that have isCustom enabled.
const itemRenderer: TreeItemRenderer<MyTreeItem> = (
itemProps,
item,
treeProps
) => {
const { key } = itemProps;
const { isCustom } = item;
if (isCustom) {
return <MyFancyNonTreeItem item={item} key={key} />
}
return defaultTreeItemRenderer(itemProps, item, treeProps);
}
The provided tree item props that should be passed down
for keyboard functionality, accessibility, and a key for the item.
The item itself. This is used to extract any of the common ListItemChildren props.
The props for the Tree this item is being rendered in.
This is really used so the expanderLeft, expanderIcon, labelKey,
getItemLabel, and getItemProps can be used to render the TreeItem
itself.
a TreeItem or a custom ReactElement
Gets all the child items for a specific parent item id. If the recursive
argument is enabled, all children of the items will also be returned instead
of only the top level items.
Either the flattened tree data or a list of all the tree data to iterate over
The parent id to get children of
Boolean if the children's children should also be returned
a list of all the items for a specific parent item id. Note: if the
recursive param is enabled, the list will be ordered so that the children of
a item will appear before the next item at the same level. So you either need
to sort by parentId or something else if you want a specific order.
This will get all the items from the provided itemId up to the root of the tree that can be used for drag and drop behavior or building a breadcrumb list.
The flattened tree data to navigate.
The item id to start the search at.
an ordered list of the current item followed by all the direct parents of that item.
A hook that implements the base functionality for expanding different tree items.
Either a list of tree item ids to be expanded by default or a function that will return the list of tree item ids to be expanded by default
An object containing props that can be passed to the Tree
component to handle the expansion state within the tree.
A hook that implements the base functionality for selecting different tree items.
The default list of tree item ids that should be expanded by default
Boolean if the tree can have multiple items selected or not.
an object containing props that can be passed to the Tree
component to handle the selection state within the tree
Generated using TypeDoc
A function to get additional props to pass to each tree item. It will be provided the current item and the "states" of the item merged together.
Note: It is generally recommended to use the
itemRendererinstead for additional functionality as you will have more control. This prop is more for applying custom styles or display data on the item.