Build an interactive tree.

Install

npm install virtual-tree-canvas

Give the host an explicit height. Built-in icons are included automatically, including in bundled apps. No asset path is needed.

The package includes .d.ts declarations for editor autocomplete in JavaScript projects and type checking when enabled. No separate @types package is needed.

Choose the input method

Both methods display a tree. Choose based on whether you already have rows or want to inspect the properties of a JavaScript value.

setData does not inspect each row's data object. setModel turns the properties of the supplied object or array into rows, and edits update that model. For an array of objects without IDs, use setModel to inspect its indexed items; choose setData when each item is an application row with a stable ID. Calling either method on TreeView switches to the matching mode.

Define rows with setData

<div id="tree" style="height:480px"></div>

import { TreeView } from 'virtual-tree-canvas';

const view = new TreeView(document.querySelector('#tree'), {
  initialExpandDepth: 2
});
view.setData([
  { id: 'fleet', label: 'Fleet', icon: 'folder' },
  { id: 'radar', parentId: 'fleet', label: 'Radar', icon: 'radar' }
]);

// On permanent unmount: view.destroy();

Rows need stable IDs. Use parentId for hierarchy. Call setDynamicState to refresh live values without rebuilding the tree.

Filter the visible tree

The view shows its built-in filter by default. Type in that control to narrow the rows while keeping matching descendants in their hierarchy. Search is separate: it highlights results and moves focus between them. Compare the filter bar above the large tree with the filter inside the units table header.

view.setFilter('radar');
view.clearFilter();

// Choose one location for the built-in control:
view.configure({ filterPlacement: 'bar' });    // Above the canvas
view.configure({ filterPlacement: 'header' }); // In the first column header

The default 'auto' uses a bar in tree and pane views, and the first column header in inspector tables. For a custom control, call setFilter(query, { caseSensitive, wholeWord }). A predicate is also accepted. Set filter: false to hide the built-in control; that does not erase the active query.

Select and move rows

Selection is limited to one row by default. Enable multiSelect when people need to select several:

view.configure({ multiSelect: true });

A normal click selects one row. Ctrl/Command + click adds or removes a row, Shift + click selects a range, and Shift + drag selects a range with the mouse. Set rowDrag to provide data for dragging selected rows; a plain drag starts a data drag, while your application decides where to drop the data. rowReorder: true adds a separate handle for changing sibling order.

Inspect values with setModel

const view = new TreeView(host);
view.setModel({
  sensor: { range: 72 },
  tags: ['radar', 'navigation'],
  tracks: [{ name: 'North contact', distance: 12 }]
}, {
  'sensor.range': { min: 0, max: 120, step: 1 },
  tracks: { itemTitle: (index, item) => item.name }
});

Array elements appear as compact indexed rows. A simple value is edited in its row; objects and nested arrays can expand. Objects without an id get a summary from a name, title or simple fields. Try the live inspector on the home page to see all three forms.

More to explore

Try the live views, including the built-in filter in the large tree and inspector. The API reference covers configuration, columns, themes, events, sorting, worker support and every main view operation.