@snack-uikit/tree v0.9.6
Tree
Installation
npm i @snack-uikit/tree
Example
selectionMode = 'single'
import { Tree } from '@snack-uikit/tree';
// ...
const [selectedNode, setSelected] = useState<TreeNodeId>();
// ...
<Tree data={data} selectionMode='single' selected={selectedNode} onSelect={setSelected} />
selectionMode = 'multi'
import { Tree } from '@snack-uikit/tree';
// ...
const [selectedNodes, setSelected] = useState<TreeNodeId[]>([]);
// ...
<Tree data={data} selectionMode='multi' selected={selectedNodes} onSelect={setSelected} />
Tree
Props
name | type | default value | description |
---|---|---|---|
data* | TreeNodeProps[] | - | Данные для отрисовки |
onNodeClick | OnNodeClick | - | Обработчик клика по элементу дерева |
expandedNodes | string[] | - | Состояние для раскрытых элементов |
onExpand | (expandedKeys: string[], nodeId: string) => void | - | Колбэк при раскрытии/закрытии элементов |
onDataLoad | (node: TreeNodeProps) => Promise<unknown> | - | Колбэк для асинхронной загрузки данных при раскрытии дерева |
parentActions | (node: TreeNodeProps) => Item[] | - | Дополнительные действия для элемента-родителя |
nodeActions | (node: TreeNodeProps) => Item[] | - | Дополнительные действия для элемента-потомка |
showIcons | boolean | true | Флаг отвечающий за отображение иконок у элементов дерева |
showLines | boolean | true | Флаг отвечающий за отображение линий вложенности |
className | string | - | CSS-класс |
selectionMode | "single" | "multi" | - | Режим выбора элементов: - Single - одиночный выбор - Multi - множественный выбор - undefined - без выбора |
selected | string \| string[] | - | Состояние для выбраных элементов: - При selectionMode=Multi - принимает массив строк - При selectionMode=Single - принимает строку |
onSelect | ((selectedKeys: string[], node: TreeNodeProps) => void) \| ((selectedKey: string, node: TreeNodeProps) => void) | - | Колбэк при изменении выбраных элементов: - При selectionMode=Multi - возвращает массив строк - При selectionMode=Single - возвращает строку |
showToggle | boolean | - |
5 months ago
7 months ago
8 months ago
1 month ago
8 months ago
8 months ago
4 months ago
8 months ago
8 months ago
4 months ago
5 months ago
3 months ago
2 months ago
3 months ago
2 months ago
1 month ago
1 month ago
5 months ago
2 months ago
1 month ago
3 months ago
8 months ago
6 months ago
7 months ago
6 months ago
4 months ago
4 months ago
8 months ago
8 months ago
4 months ago
6 months ago
7 months ago
4 months ago
8 months ago
4 months ago
4 months ago
7 months ago
4 months ago
2 months ago
29 days ago
4 months ago
6 months ago
7 months ago
7 months ago
4 months ago
8 months ago
4 months ago
5 months ago
7 months ago
7 months ago
26 days ago
2 months ago
7 months ago
6 months ago
8 months ago
3 months ago
4 months ago
1 month ago
2 months ago
4 months ago
7 months ago
8 months ago
4 months ago
4 months ago
5 months ago
6 months ago
4 months ago
7 months ago
8 months ago
4 months ago
8 months ago
4 months ago
4 months ago
3 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
6 months ago
4 months ago
4 months ago
4 months ago
6 months ago
2 months ago
2 months ago
5 months ago
2 months ago
4 months ago
5 months ago
5 months ago
5 months ago
5 months ago
4 months ago
5 months ago
5 months ago
3 months ago
4 months ago
4 months ago
4 months ago
4 months ago
6 months ago
7 months ago
7 months ago
6 months ago
7 months ago
7 months ago
5 months ago
26 days ago
6 months ago
7 months ago
6 months ago
5 months ago
6 months ago
6 months ago
23 days ago
7 months ago
2 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
9 months ago
8 months ago
9 months ago
8 months ago
9 months ago
8 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
11 months ago
11 months ago
10 months ago
11 months ago
1 year ago
11 months ago
12 months ago
1 year ago
12 months ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
10 months ago
11 months ago
11 months ago
1 year ago
10 months ago
1 year ago
1 year ago
1 year ago
1 year ago
11 months ago
1 year ago
1 year ago
1 year ago
1 year ago
10 months ago
12 months ago
1 year ago
11 months ago
11 months ago
11 months ago
11 months ago
12 months ago
11 months ago
11 months ago
11 months ago
1 year ago
11 months ago
12 months ago
11 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago