Data Display

Tree

role="tree" list; initTree adds expand/collapse, selection state and the APG tree keys.

Element: <ul>
Module: @basenative/components
Function: renderTree

Quick start

Import the render function and call it from your server template.

import { renderTree } from '@basenative/components';

renderTree({ items: [{ id: '1', label: 'src', children: [{ id: '1-1', label: 'signals.js' }] }] });

Examples

Each block is a real server render — no mockups, no virtual DOM.

File tree

role="tree" with expand/collapse, icons, selection state and the APG arrow keys.

Live render

📁src
- 📁runtime
  - 📄signals.js
  - 📄hydrate.js
  - 📄bind.js
- 📁server
  - 📄render.js
📁examples

Source

renderTree({
  items: [
    {
      id: '1',
      label: 'src',
      icon: '📁',
      children: [
        { id: '1-1', label: 'signals.js', icon: '📄' },
        { id: '1-2', label: 'hydrate.js', icon: '📄' },
      ],
    },
    { id: '2', label: 'examples', icon: '📁' },
  ],
  expanded: new Set(['1']),
  selected: '1-1',
})

Options

Arguments accepted by renderTree().

renderTree option reference
Option	Type	Default	Description
`items`	`{ id, label, icon?, children? }[]`	`—`	Tree nodes.
`expanded`	`Set<string>`	`new Set()`	IDs of expanded nodes.
`selected`	`string`	`''`	ID of selected node.