Components

Tree View

The tree view component is a UI component that displays hierarchical data as an expand/collapse list.

LyteNyte Grid exports a TreeView component that you can use for various UI elements, such as tree set filters. The TreeView component is a specialized version of LyteNyte Grid that contains a single column. The styling and capabilities are augmented to match a standard tree view component.

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.

Basic Tree View

Import the TreeView component from LyteNyte Grid to begin using it. The TreeView expects an array of path-based objects to be provided through the items property. Each item must conform to the TreeViewItem interface shown below:

1
interface TreeViewItem {
2
  readonly id: string;
3
  readonly path: string[];
4
  readonly name?: 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 in action. As the TreeView component is a variant of LyteNyte Grid, it requires a sized container.

Tree View

demo.tsx

1
import "@1771technologies/lytenyte-pro/components.css";
2
import "@1771technologies/lytenyte-pro/light-dark.css";
3
import { TreeView } from "@1771technologies/lytenyte-pro/components";
4
import { items } from "./data.js";
5

6
export default function ComponentDemo() {
7
  return (
8
    <div style={{ height: "400px" }} className="ln-grid flex items-center justify-center">
9
      <div className="bg-ln-bg-ui-panel border-ln-border-strong rounded-lg border p-2">
10
        <div className="w-75 h-75">
11
          <TreeView items={items} defaultExpansion={0} />
12
        </div>
13
      </div>
14
    </div>
15
  );
16
}

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.

1
<TreeView items={items} defaultExpansion={0} />

Tree Selection

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
const ref = useRef<TreeViewAPI | null>(null);
2

3
useEffect(() => {
4
  ref.rowsSelected();
5
}, []);
6

7
<TreeView items={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.

Tree Selection

Selected Rows

src / index.ts

demo.tsx

1
import "@1771technologies/lytenyte-pro/components.css";
2
import "@1771technologies/lytenyte-pro/light-dark.css";
3
import type { Grid } from "@1771technologies/lytenyte-pro";
4
import { TreeView } from "@1771technologies/lytenyte-pro/components";
5
import { items } from "./data.js";
6
import { useMemo, useState } from "react";
7

8
export default function ComponentDemo() {
9
  const [rowsSelected, setSelection] = useState<Grid.T.RowSelectionLinked>({
10
    kind: "linked",
11
    selected: false,
12
    children: new Map([
13
      ["src", { id: "src", children: new Map([["src-index", { id: "src-index", selected: true }]]) }],
14
    ]),
15
  });
16

17
  const selectedRows = useMemo(() => {
18
    const selected = items.filter((item) => {
19
      const path = item.path;
20

21
      let node: Grid.T.RowSelectionLinked | Grid.T.RowSelectNode = rowsSelected;
22
      let selection = node.selected;
23

24
      // Find the node in the tree that is the closest match to our path. Path
25
      // IDs are joined by a '/' in the tree view. Once we've found our node
26
      // We check if it is selected.
27
      for (let i = 0; i < path.length; i++) {
28
        const p = path.slice(0, i + 1).join("/");
29
        const n: Grid.T.RowSelectNode | undefined = node.children?.get(p);
30
        if (!n) break;
31

32
        node = n;
33
        if (node.selected != undefined) selection = node.selected;
34
      }
35

36
      if (node.children?.get(item.id)?.selected !== undefined)
37
        selection = node.children.get(item.id)!.selected!;
38

39
      return !!selection;
40
    });
41

42
    return selected;
43
  }, [rowsSelected]);
44

45
  return (
46
    <div
47
      style={{ minHeight: "400px" }}
48
      className="ln-grid flex flex-col items-center justify-center gap-4 py-4 md:flex-row"
49
    >
50
      <div className="bg-ln-bg-ui-panel border-ln-border-strong rounded-lg border p-2">
51
        <div className="w-75 h-75">
52
          <TreeView
53
            items={items}
54
            defaultExpansion={0}
55
            rowSelection={rowsSelected}
56
            onRowSelectionChange={setSelection}
57
          />
58
        </div>
59
      </div>
60
      <div className="border-ln-border-strong rounded-lg border p-2">
61
        <div className="w-75 h-75 overflow-auto">
62
          <h3 className="text-center text-lg font-semibold">Selected Rows</h3>
63
          <ul>
64
            {selectedRows.map((x) => {
65
              const name = x.path.join(" / ") + " / " + (x.name ?? x.id);
66

67
              return <li key={name}>{name}</li>;
68
            })}
69
          </ul>
70
        </div>
71
      </div>
72
    </div>
73
  );
74
}

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.

1
const [rowsSelected, setSelection] = useState<Grid.T.RowSelectionLinked>({
2
  kind: "linked",
3
  selected: false,
4
  children: new Map([
5
    ["src", { id: "src", children: new Map([["src-index", { id: "src-index", selected: true }]]) }],
6
  ]),
7
});
8

9
const selectedRows = useMemo(() => {
10
  const selected = items.filter((item) => {
11
    const path = item.path;
12

13
    let node: Grid.T.RowSelectionLinked | Grid.T.RowSelectNode = rowsSelected;
14
    let selection = node.selected;
15

16
    // Find the closest matching node for the current path. Path IDs
17
    // are joined using '/' in the TreeView. Once the node is found,
18
    // check whether it is selected.
19
    for (let i = 0; i < path.length; i++) {
20
      const p = path.slice(0, i + 1).join("/");
21
      const n: Grid.T.RowSelectNode | undefined = node.children?.get(p);
22
      if (!n) break;
23

24
      node = n;
25
      if (node.selected != undefined) selection = node.selected;
26
    }
27

28
    if (node.children?.get(item.id)?.selected !== undefined)
29
      selection = node.children.get(item.id)!.selected!;
30

31
    return !!selection;
32
  });
33

34
  return selected;
35
}, [rowsSelected]);

Children Render Prop

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.

1
export interface TreeViewChildParams<T extends TreeViewItem> {
2
  readonly row: RowGroup | RowLeaf<T>;
3
  readonly toggle: (b?: boolean) => void;
4

5
  readonly selected: boolean;
6
  readonly indeterminate: boolean;
7
  readonly selectEnabled: boolean;
8
  readonly select: (b?: boolean) => void;
9
  readonly handleSelect: (params: { readonly target: EventTarget; readonly shiftKey: boolean }) => void;
10
}

Using the children render prop, you can add additional functionality to rows, such as item removal. The demo below demonstrates this behavior.

Node Deletion

demo.tsx

1
import "@1771technologies/lytenyte-pro/components.css";
2
import "@1771technologies/lytenyte-pro/light-dark.css";
3
import { TreeView } from "@1771technologies/lytenyte-pro/components";
4
import { items as initial } from "./data.js";
5
import { useState } from "react";
6
import { TrashIcon } from "@radix-ui/react-icons";
7

8
export default function ComponentDemo() {
9
  const [items, setItems] = useState(initial);
10

11
  return (
12
    <div
13
      style={{ minHeight: "400px" }}
14
      className="ln-grid flex flex-col items-center justify-center gap-4 py-4 md:flex-row"
15
    >
16
      <div className="bg-ln-bg-ui-panel border-ln-border-strong rounded-lg border p-2">
17
        <div className="w-75 h-75">
18
          <TreeView items={items} defaultExpansion={0} rowSelectionEnabled={false} rowSelectAllShow={false}>
19
            {({ row, toggle }) => {
20
              if (row.kind === "branch") {
21
                return (
22
                  <div style={{ paddingInlineStart: row.depth * 16 }} className="flex items-center gap-1">
23
                    <button
24
                      data-ln-tree-view-cell-expander
25
                      aria-label="toggle the row group expansion state"
26
                      onClick={() => toggle()}
27
                    >
28
                      <CaretRight />
29
                    </button>
30
                    <div>{row.key}</div>
31
                  </div>
32
                );
33
              }
34

35
              return (
36
                <div className="flex w-full items-center" style={{ paddingInlineStart: row.depth * 16 + 20 }}>
37
                  <div className="flex-1">{row.data.name ?? row.data.id}</div>
38
                  <button
39
                    data-ln-button="secondary"
40
                    data-ln-icon
41
                    data-ln-size="md"
42
                    onClick={() => {
43
                      setItems((prev) => prev.filter((x) => x.id !== row.data.id));
44
                    }}
45
                  >
46
                    <TrashIcon />
47
                  </button>
48
                </div>
49
              );
50
            }}
51
          </TreeView>
52
        </div>
53
      </div>
54
    </div>
55
  );
56
}
57

58
function CaretRight() {
59
  return (
60
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentcolor" viewBox="0 0 256 256">
61
      <path d="M181.66,133.66l-80,80A8,8,0,0,1,88,208V48a8,8,0,0,1,13.66-5.66l80,80A8,8,0,0,1,181.66,133.66Z"></path>
62
    </svg>
63
  );
64
}

Properties

Next Steps

Column Manager: Manage the visibility and order of columns using the Column Manager.
Menu Button: Display a list of actions or options in an accessible dropdown menu.
Pill Manager: Create and manage grid interactions using label pills.

Tree View

Basic Tree View

Tree View

Tree Selection

Tree Selection

Selected Rows

Children Render Prop

Node Deletion

Properties

Next Steps

On this page