Interface WunderbaumOptions

Available options for wunderbaum.Wunderbaum.

Options are passed to the constructor as plain object:

const tree = new mar10.Wunderbaum({
  id: "demo",
  element: document.getElementById("demo-tree"),
  source: "url/of/data/request",
  ...
});

Event handlers are also passed as callbacks

const tree = new mar10.Wunderbaum({
  ...
  init: (e) => {
    console.log(`Tree ${e.tree} was initialized and loaded.`)
  },
  activate: (e) => {
    console.log(`Node ${e.node} was activated.`)
  },
  ...
});
interface WunderbaumOptions {
    activate?: (e: WbActivateEventType) => void;
    adjustHeight: boolean;
    autoCollapse: boolean;
    beforeActivate?: (e: WbActivateEventType) => WbCancelableEventResultType;
    beforeExpand?: (e: WbExpandEventType) => WbCancelableEventResultType;
    beforeSelect?: (e: WbSelectEventType) => WbCancelableEventResultType;
    buttonClick?: (e: WbButtonClickEventType) => void;
    change?: (e: WbChangeEventType) => void;
    checkbox: DynamicCheckboxOption;
    click?: (e: WbClickEventType) => WbCancelableEventResultType;
    columnsFilterable: boolean;
    columnsMenu: boolean;
    columnsResizable?: boolean;
    columnsSortable?: boolean;
    connectTopBreadcrumb: null | string | HTMLElement;
    dblclick?: (e: WbClickEventType) => WbCancelableEventResultType;
    deactivate?: (e: WbDeactivateEventType) => WbCancelableEventResultType;
    debugLevel: number;
    discard?: (e: WbNodeEventType) => void;
    dnd: DndOptionsType;
    edit: EditOptionsType;
    emptyChildListExpandable: boolean;
    enabled: boolean;
    error?: (e: WbErrorEventType) => void;
    expand?: (e: WbTreeEventType) => void;
    filter: FilterOptionsType;
    fixedCol: boolean;
    focus?: (e: WbTreeEventType) => void;
    header: null | string | boolean;
    icon?: DynamicIconOption;
    iconBadge?: (e: WbIconBadgeCallback) => WbIconBadgeEventResultType;
    iconMap: string | IconMapType;
    iconTooltip?: DynamicBoolOrStringOption;
    init?: (e: WbInitEventType) => void;
    keydown?: (e: WbKeydownEventType) => WbCancelableEventResultType;
    lazyLoad?: (e: WbNodeEventType) => void;
    load?: (e: WbNodeEventType) => void;
    minExpandLevel: number;
    modifyChild?: (e: WbNodeEventType) => void;
    navigationModeOption: NavModeEnum;
    quicksearch: boolean;
    receive?: (e: WbReceiveEventType) => void;
    render?: (e: WbRenderEventType) => void;
    renderStatusNode?: (e: WbRenderEventType) => void;
    rowHeightPx: number;
    scrollIntoViewOnExpandClick: boolean;
    select?: (e: WbNodeEventType) => void;
    selectMode: SelectModeType;
    showSpinner: boolean;
    skeleton: boolean;
    strings: TranslationsType;
    tooltip?: DynamicBoolOrStringOption;
    unselectable?: DynamicBoolOption;
    update?: (e: WbTreeEventType) => void;
}

Callback

activate? beforeActivate? beforeExpand? beforeSelect? buttonClick? change? click? dblclick? deactivate? discard? error? expand? focus? iconBadge? init? keydown? lazyLoad? load? modifyChild? receive? render? renderStatusNode? select? update?

Other

adjustHeight autoCollapse checkbox columnsFilterable columnsMenu columnsResizable? columnsSortable? connectTopBreadcrumb debugLevel dnd edit emptyChildListExpandable enabled filter fixedCol header icon? iconMap iconTooltip? minExpandLevel navigationModeOption quicksearch rowHeightPx scrollIntoViewOnExpandClick selectMode showSpinner skeleton strings tooltip? unselectable?

Callback

Optionalactivate

activate?: (e: WbActivateEventType) => void

e.node was activated.

OptionalbeforeActivate

beforeActivate?: (e: WbActivateEventType) => WbCancelableEventResultType

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

OptionalbeforeExpand

beforeExpand?: (e: WbExpandEventType) => WbCancelableEventResultType

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

OptionalbeforeSelect

beforeSelect?: (e: WbSelectEventType) => WbCancelableEventResultType

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

OptionalbuttonClick

buttonClick?: (e: WbButtonClickEventType) => void

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

Optionalchange

change?: (e: WbChangeEventType) => void

Optionalclick

click?: (e: WbClickEventType) => WbCancelableEventResultType

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

Optionaldblclick

dblclick?: (e: WbClickEventType) => WbCancelableEventResultType

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

Optionaldeactivate

deactivate?: (e: WbDeactivateEventType) => WbCancelableEventResultType

e.node was deactivated.

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

Optionaldiscard

discard?: (e: WbNodeEventType) => void

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

Optionalerror

error?: (e: WbErrorEventType) => void

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

Optionalexpand

expand?: (e: WbTreeEventType) => void

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

Optionalfocus

focus?: (e: WbTreeEventType) => void

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

OptionaliconBadge

iconBadge?: (e: WbIconBadgeCallback) => WbIconBadgeEventResultType

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

Optionalinit

init?: (e: WbInitEventType) => void

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).

Optionalkeydown

keydown?: (e: WbKeydownEventType) => WbCancelableEventResultType

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.

OptionallazyLoad

lazyLoad?: (e: WbNodeEventType) => void

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.

Optionalload

load?: (e: WbNodeEventType) => void

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

OptionalmodifyChild

modifyChild?: (e: WbNodeEventType) => void

Optionalreceive

receive?: (e: WbReceiveEventType) => void

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.

Optionalrender

render?: (e: WbRenderEventType) => void

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.

OptionalrenderStatusNode

renderStatusNode?: (e: WbRenderEventType) => void

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

Optionalselect

select?: (e: WbNodeEventType) => void

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

Optionalupdate

update?: (e: WbTreeEventType) => void

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

Other

adjustHeight

adjustHeight: boolean

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

autoCollapse

autoCollapse: boolean

Collapse siblings when a node is expanded.

Default

false

checkbox

checkbox: DynamicCheckboxOption

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

Default

false.

columnsFilterable

columnsFilterable: boolean

Default value for ColumnDefinition.filterable option.

Default

false

Since

0.11.0

columnsMenu

columnsMenu: boolean

Default value for ColumnDefinition.menu option.

Default

false

Since

0.11.0

OptionalcolumnsResizable

columnsResizable?: boolean

Default value for ColumnDefinition.resizable option.

Default

false

Since

0.10.0

OptionalcolumnsSortable

columnsSortable?: boolean

Default value for ColumnDefinition.sortable option.

Default

false

Since

0.11.0

connectTopBreadcrumb

connectTopBreadcrumb: null | string | HTMLElement

HTMLElement or selector that receives the top nodes breadcrumb.

Default

undefined

debugLevel

debugLevel: number

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

Default

3 (4 in local debug environment)

dnd

dnd: DndOptionsType

edit

edit: EditOptionsType

emptyChildListExpandable

emptyChildListExpandable: boolean

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.

Default

false

enabled

enabled: boolean

Default

true

filter

filter: FilterOptionsType

fixedCol

fixedCol: boolean

Default

false

header

header: null | string | boolean

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

Optionalicon

icon?: DynamicIconOption

Optional callback to render icons per node.

iconMap

iconMap: string | IconMapType

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.

Default

"bootstrap"

OptionaliconTooltip

iconTooltip?: DynamicBoolOrStringOption

Optional callback to render a tooltip for the icon.

minExpandLevel

minExpandLevel: number

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

Default

0

navigationModeOption

navigationModeOption: NavModeEnum

Default

NavModeEnum.startRow

quicksearch

quicksearch: boolean

Default

true

rowHeightPx

rowHeightPx: number

Height of a node row div.

Default

22

scrollIntoViewOnExpandClick

scrollIntoViewOnExpandClick: boolean

Scroll Node into view on Expand Click

Default

true

selectMode

selectMode: SelectModeType

Default

"multi"

showSpinner

showSpinner: boolean

Show a <progress> element while loading data.

Default

false.

skeleton

skeleton: boolean

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.

Default

false.

strings

strings: TranslationsType

Translation map for some system messages.

Optionaltooltip

tooltip?: DynamicBoolOrStringOption

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

Optionalunselectable

unselectable?: DynamicBoolOption

Optional callback to make a node unselectable.

Settings

Member Visibility

On This Page

Callback
Other