Tree

Basic tree example demonstrating core behavior.

Package: @solidiom/tree
Version: 0.0.1-next.0
Status: stable

Examples

import * as Tree from "@solidiom/tree"

;<Tree.Root selectionMode="single" defaultExpandedIds={new Set(["src"])}>
  <Tree.Item id="src" textValue="src">
    <Tree.ItemIndicator>▶</Tree.ItemIndicator>
    src
    <Tree.Branch>
      <Tree.Item id="src-components" textValue="components">
        <Tree.ItemIndicator>▶</Tree.ItemIndicator>
        components
        <Tree.Branch>
          <Tree.Item id="src-components-button" textValue="button.tsx">
            <Tree.ItemIndicator>▶</Tree.ItemIndicator>
            button.tsx
          </Tree.Item>
          <Tree.Item id="src-components-modal" textValue="modal.tsx">
            <Tree.ItemIndicator>▶</Tree.ItemIndicator>
            modal.tsx
          </Tree.Item>
        </Tree.Branch>
      </Tree.Item>
      <Tree.Item id="src-utils" textValue="utils.ts">
        <Tree.ItemIndicator>▶</Tree.ItemIndicator>
        utils.ts
      </Tree.Item>
    </Tree.Branch>
  </Tree.Item>
</Tree.Root>

The Branch renders only when its parent Item is expanded. The ItemIndicator toggles expand/collapse on click. The tree supports keyboard navigation with Arrow keys, Home/End, and typeahead. Use selectionMode="multiple" for multi-select.

src

README.md

View source

        /**
 * @solidiom/tree — Headless tree view primitive.
 *
 * Parts: Root, Item, Branch, ItemIndicator.
 */

export {
  Root,
  Item,
  Branch,
  ItemIndicator,
  type TreeRootProps,
  type TreeItemProps,
  type TreeBranchProps,
  type TreeItemIndicatorProps,
} from "./tree"

export type { TreeContextValue, TreeItemEntry, TreeReason, SelectionMode } from "./tree-context"