Use the Tree View component to render hierarchical data in an expandable and collapsible list.
LyteNyte Grid exports a TreeView component for tree-based UIs,
such as tree set filters. TreeView is a specialized,
single-column variant of the grid, with styling and capabilities augmented to
match a standard tree view.
Since the TreeView component shares its implementation with LyteNyte Grid, using
the TreeView component alongside LyteNyte Grid does not increase your application’s
bundle size.
Import TreeView from LyteNyte Grid to get started. Pass an array of path-based
objects to the items property. Each item must conform to the
TreeViewItem interface shown below:
1
interfaceTreeViewItem{
2
readonlyid:string;
3
readonlypath:string[];
4
readonlyname?:string;
5
}
The items property is a flat array. The path property on each item determines the
resulting tree structure.
The demo below shows a basic tree view. Since TreeView is a
LyteNyte Grid variant, it requires a sized container.
The code for this tree view example is shown below. The items property is set to an
array of values. You can select rows by clicking the checkbox next to each item.
The TreeView component always uses linked row selection. The
selection behavior matches the standard LyteNyte Grid selection model. You can provide
a ref to the TreeView component to access the TreeView API, which includes the
rowsSelected method for retrieving selected items.
1
constref=useRef<TreeViewAPI|null>(null);
2
3
useEffect(()=>{
4
ref.rowsSelected();
5
}, []);
6
7
<TreeViewitems={items} ref={ref} />;
To control row selection manually, set the rowSelection property on the TreeView
component. Provide an onRowSelectionChange callback to respond to selection updates.
Since row selection is represented as a linked tree, you must determine which rows are
selected by traversing the selection tree. The demo below demonstrates this
behavior by tracking which files in the tree are selected.
The code below determines selection by traversing the tree and filtering items based
on their selection state. This is one simple approach to determining selected rows.
You should choose an approach that matches your application’s requirements.
You can customize the rendered output of the TreeView component by providing a render
prop as the children value. This render prop receives a set of
TreeViewChildParams, shown below, which you can use to render custom content.
The delimiter used to join item path values. The TreeView component uses
the joined value as the ID for branch nodes. The default value is "/".
A React node or a render prop that receives the current check state and returns a React node.
Controls the default expansion state of tree nodes. Set this value to true
to expand all nodes by default. Set this value to a number to expand all nodes with a depth
less than or equal to that number. The default value is false.
The leaf tree view items to provide to the TreeView component. Each item must
include an ID and a path value.
A callback invoked whenever a row is expanded or collapsed.
A callback invoked whenever a row is selected or deselected.
The expansion state of tree nodes. Provide this value to control which nodes
are expanded or collapsed.
The height of each tree item. This value must be a fixed integer.
A flag that determines whether the Select All checkbox is rendered above the tree items. The default value is true.
The row selection state used by the TreeView component. If not provided, the
TreeView component uses internal selection state. Provide this value to control selection
externally.
A flag that determines whether row selection is enabled. The default value is true.
A render prop that customizes the Select All checkbox. The TreeView component
only calls this prop when rowSelectAllShow is enabled.
