Skip to main content

treeView

function

Declare a panel whose content is a tree the host renders. You supply a data provider, `getChildren` and `getTreeItem`, and the host draws the rows, handles selection, and places any inline actions. Reach for this instead of view whenever the content is a hierarchy, because you get the workbench's own tree behaviour rather than a webview you have to style yourself. This is the one authoring constructor that returns a live object rather than plain declaration data. Hold on to the controller it gives you and call `refresh()` after your data changes: with no arguments, listeners receive `null`, meaning reload everything; with elements, they receive exactly those elements.

function treeView<TElement extends object, TContextValue extends string>(input: TreeViewInput<TElement, TContextValue>): TreeViewController<TElement, TContextValue>

Import

import { treeView } from '@modular/sdk';

Notes

example
```ts const tasks = treeView<Task>({ id: 'tasks.tree', title: 'Tasks', container: 'left', provider: { getChildren: parent => (parent === null ? store.roots() : parent.children), getTreeItem: task => ({ id: task.id, label: task.title }), }, }); store.onChange(task => tasks.refresh(task)); ```
category
Authoring