TreeConfig

Since v0.1.1

Configuration options for the tree plugin.

Example

const grid = document.querySelector('tbw-grid');
grid.plugins = [
  new TreePlugin({
    childrenField: 'subItems',
    defaultExpanded: true,
    indentWidth: 24,
    animation: 'slide',
  }),
];

Properties

Property	Type	Description
childrenField?	string	Field name containing child rows (default: ‘children’)
autoDetect?	boolean	Auto-detect tree structure from data (default: true)
defaultExpanded?	boolean	Whether nodes are expanded by default (default: false)
indentWidth?	number	Indentation width per level in pixels (default: 20)
showExpandIcons?	boolean	Show expand/collapse icons (default: true)
treeColumn?	string	Field name of the column that displays the tree toggle and indentation. Defaults to the first visible column. Use this when the first column is narrow (e.g. an ID column) or when combining with pinned columns.
animation?	ExpandCollapseAnimation	Animation style for expanding/collapsing tree nodes. - false: No animation - 'slide': Slide animation (default) - 'fade': Fade animation
loadChildren?	(params: TreeLoadChildrenParams) => Promise<TreeRow[]> | Subscribable<TreeRow[]>	Lazy-load child rows when a node is expanded. v3.4.0+
hasChildren?	(row: TreeRow) => boolean	Predicate deciding whether a node has children, used to render the expand toggle before the children are loaded. v3.4.0+

Property Details

animation

Default: 'slide'

---

loadChildren

Lazy-load child rows when a node is expanded.

Called once per node the first time it is expanded while its children are not yet loaded. The resolved rows are written to row[childrenField] and the grid re-renders. While the request is in flight the node’s toggle is replaced by the grid’s small spinner and the row carries aria-busy.

Returns a Promise or a Subscribable (e.g. an Angular HttpClient observable — the subscription is torn down on abort, which natively cancels the underlying request).

Ignored when ServerSidePlugin is active — child data then flows through dataSource.getChildRows() instead.

Pair with TreeConfig.hasChildren when unloaded nodes cannot be detected from the data alone.

new TreePlugin({
  hasChildren: (row) => row.type === 'folder',
  loadChildren: async ({ row, signal }) => {
    const res = await fetch(`/api/nodes/${row.id}/children`, { signal });
    return res.json();
  },
})

---

hasChildren

Predicate deciding whether a node has children, used to render the expand toggle before the children are loaded.

Defaults to the built-in heuristic: an array with entries means children are embedded, any other truthy row[childrenField] value (e.g. children: true) means children exist but are not loaded yet.

A node with a non-empty embedded children array always counts as having children regardless of what this predicate returns.

---