Interface WunderbaumOptions

e.node was activated.

e.node is about to be activated. Return false to prevent default handling, i.e. activating the node. See also deactivate event.

e.node is about to be expanded/collapsed. Return false to prevent default handling, i.e. expanding/collapsing the node.

Return false to prevent default handling, i.e. (de)selecting the node.

Return false to prevent default handling, i.e. (de)selecting the node.

Return false to prevent default behavior, e.g. expand/collapse, (de)selection, or activation.

Return false to prevent default behavior, e.g. expand/collapse.

e.node was deactivated.

Return false to prevent default handling, e.g. deactivating the node and activating the next. See also activate event.

e.node was discarded from the viewport and its HTML markup removed.

An error occurred, e.g. during initialization or lazy loading.

e.node was expanded (e.flag === true) or collapsed (e.flag === false)

The tree received or lost focus. Check e.flag for status.

e.node is about to be rendered. We can add a badge to the icon cell here.

Fires when the tree markup was created and the initial source data was loaded. Typical use cases would be activating a node, setting focus, enabling other controls on the page, etc.
Also sent if an error occured during initialization (check e.error for status).

Fires when a key was pressed while the tree has focus. e.node is set if a node is currently active. Return false to prevent default navigation.

Fires when a node that was marked 'lazy', is expanded for the first time. Typically we return an endpoint URL or the Promise of a fetch request that provides a (potentially nested) list of child nodes.

Fires when data was loaded (initial request, reload, or lazy loading), after the data is applied and rendered.

Fires when data was fetched (initial request, reload, or lazy loading), but before the data is applied and rendered. Here we can modify and adjust the received data, for example to convert an external response to native Wunderbaum syntax.

Fires when a node is about to be displayed. The default HTML markup is already created, but not yet added to the DOM. Now we can tweak the markup, create HTML elements in this node's column cells, etc. See also Custom Rendering for details.

Same as render(e), but for the status nodes, i.e. e.node.statusNodeType.

e.node was selected (e.flag === true) or deselected (e.flag === false)

Fires when the viewport content was updated, after scroling, expanding etc.

If true, the tree will automatically adjust its height to fit the parent container. This is useful when the tree is embedded in a container with a fixed or calculated sized. If the parent container is unsized (e.g. grows with its content, height: auto), then we can define a height: ... or max_height: ... style on the parent. To avoid a recursive resize-loop, it may be helpful to set overflow: hidden on the parent container.

Set this option to false will disable auto-resizing.

@default: true

Collapse siblings when a node is expanded.

Generate missing keys by hashing a combination of refKey (or title) and the parent key. This is useful when the source data does not contain unique keys but we want stable keys for persisting the active node, selection or expansion state. Note that this still assumes that the same refKey must not appear twice in the same parent node.

If true, render a checkbox before the node tile to allow selection with the mouse. Pass "radio" to render a radio button instead.

Default value for ColumnDefinition.filterable option.

Default value for ColumnDefinition.menu option.

Default value for ColumnDefinition.resizable option.

Default value for ColumnDefinition.sortable option.

HTMLElement or selector that receives the top nodes breadcrumb.

0:quiet, 1:errors, 2:warnings, 3:info, 4:verbose

Configuration options for the drag-and-drop extension.

Configuration options for the edit-title extension.

If true, allow to expand parent nodes, even if node.children conatains an empty array ([]). This is the the behavior of macOS Finder, for example.

Configuration options for the node-filter extension.

Show/hide header (default: null) null: assume false for plain tree and true for grids. string: use text as header (only for plain trees) true: display a header (use tree's id as text for plain trees) false: do not display a header

Optional callback to render icons per node.

Icon font definition. May be a string (e.g. "fontawesome6" or "bootstrap") or a map of iconName: iconClass pairs. Note: the icon font must be loaded separately. In order to only override some defauöt icons, use this pattern:

const tree = new mar10.Wunderbaum({
  ...
  iconMap: Object.assign(Wunderbaum.iconMaps.bootstrap, {
    folder: "bi bi-archive",
  }),
});
Copy

Optional callback to render a tooltip for the icon.

Number of levels that are forced to be expanded, and have no expander icon. E.g. 1 would keep all toplevel nodes expanded.

Height of a node row div.

Scroll Node into view on Expand Click

Show a <progress> element while loading data.

If true, add a wb-skeleton class to all nodes, that will result in a 'glow' effect. Typically used with initial dummy nodes, while loading the real data.

Group nodes with children or of type: 'folder' at the top when sorting. If a function is passed, it is called with the node as argument to determine whether the node is a folder or not. The function should return true for folders. and should return true for folders.

Translation map for some system messages.

Optional callback to render a tooltip for the node title. Pass true to use the node's title property as tooltip.

Optional callback to make a node unselectable.