Headless Tree

1
export const SimpleExample = () => {
2
  const tree = useTree<string>({
3
    rootItemId: "folder",
4
    getItemName: (item) => item.getItemData(),
5
    isItemFolder: (item) => !item.getItemData().endsWith("item"),
6
    dataLoader: {
7
      getItem: (itemId) => itemId,
8
      getChildren: (itemId) => [
9
        `${itemId}-1`,
10
        `${itemId}-2`,
11
        `${itemId}-3`,
12
        `${itemId}-1item`,
13
        `${itemId}-2item`,
14
      ],
15
    },
16
    features: [
17
      syncDataLoaderFeature,
18
      selectionFeature,
19
      hotkeysCoreFeature,
20
      dragAndDropFeature,
21
    ],
22
  });
23

24
  return (
25
    <div ref={tree.registerElement} className="tree">
26
      {tree.getItems().map((item) => (
27
        <div
28
          key={item.getId()}
29
          className="treeitem-parent"
30
          style={{ marginLeft: `${item.getItemMeta().level * 20}px` }}
31
        >
32
          <button
33
            {...item.getProps()}
34
            ref={item.registerElement}
35
            className={cx("treeitem", {
36
              focused: item.isFocused(),
37
              expanded: item.isExpanded(),
38
              selected: item.isSelected(),
39
              folder: item.isFolder(),
40
            })}
41
          >
42
            {item.getItemName()}
43
          </button>
44
        </div>
45
      ))}
46
    </div>
47
  );
48
};