Allows to select items in the tree.
Use the package manager pnpm to install @tabula/ui-checkbox-tree
.
pnpm add @tabula/ui-checkbox-tree
Usage of the UiCheckboxTree
is simple:
import { FC } from 'react';
import { UiCheckboxTree, Tree as BaseTree } from '@tabula/ui-checkbox-tree';
type Data = {
name: string;
};
type Tree = BaseTree<number, Data>;
const labelOf = ({ name }: Data) => name;
type Props = {
tree: Tree;
};
export const Tree: FC<Props> = ({ tree }) => {
const [selected, setSelected] = useState<Set<number>>(new Set());
return (
<UiCheckboxTree labelOf={labelOf} onChange={setSelected} selected={selected} tree={tree} />
);
};
The tree
property contains a tree data to render. You can define type of ids, and data which expected in the tree
structure.
Ids of items must be unique and has type number
or string
.
See typings for more information.
Function which will be called to get label of node.
Set of leaf's ids which is checked.
Handler which accepts a set of checked leaf's ids.
The UiCheckboxTree
always calls this callback with full set of checked ids, not only ids which checked after the latest
user's action.
You can provide custom CSS class which will be assigned to the root element.
We allow to assign test ID for the root element.
This project is ISC licensed.