wunderbaum is a zero-dependency JavaScript tree and treegrid library for hierarchical data with multi-selection, filtering, sorting, inline node editing, drag and drop, lazy loading, and keyboard navigation.

Use it as a plain tree or define columns for a multi-column treegrid. Data can come from local node arrays or remote requests.

Table of Contents

Features

Tree and treegrid modes share one hierarchical node model.
Static arrays and remote requests can populate the tree.
Lazy loading defers child data until a branch opens.
Single, multiple, and hierarchical selection modes.
Fuzzy filtering, branch matching, highlighting, and hide or dim modes.
Resizable treegrid columns with optional sort, filter, and menu controls.
Inline node-title editing with configurable triggers and validation hooks.
Drag-and-drop callbacks for before, after, and child insertion.
Lazy row rendering for large hierarchical datasets.
ESM and UMD builds with TypeScript declarations.

Use Cases

File and folder explorers with lazy directory branches, keyboard navigation, and drag-and-drop moves.
Administrative data trees that place owner, status, size, or other fields beside hierarchical titles.
Permission and configuration panels with hierarchical checkboxes, radio groups, and non-selectable nodes.
Large category, asset, or product hierarchies that need remote loading, filtering, sorting, and inline edits.

How to Use wunderbaum

Installation

Load the wunderbaum library directly in the HTML

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css"
/>

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/wunderbaum@0/dist/wunderbaum.css"
/>

<script src="https://cdn.jsdelivr.net/npm/wunderbaum@0/dist/wunderbaum.umd.min.js"></script>

Or Install it with npm

Install the package, import the Wunderbaum class, and load dist/wunderbaum.css through your stylesheet or bundler setup.

npm install wunderbaum

import { Wunderbaum } from "wunderbaum";

Basic Usage

Only element is mandatory during initialization. Each node needs a title.

<div id="demo-tree" style="height: 320px;"></div>

<script>
  const tree = new mar10.Wunderbaum({
    element: "#demo-tree",

    source: [
      {
        title: "Documents",
        key: "documents",
        expanded: true,
        children: [
          { title: "Invoices", key: "invoices" },
          { title: "Reports", key: "reports" },
        ],
      },
      {
        title: "Media",
        key: "media",
        children: [
          { title: "Images", key: "images" },
          { title: "Videos", key: "videos" },
        ],
      },
    ],

    activate: (e) => {
      console.log(e.node.key, e.node.title);
    },
  });
</script>

Data Sources And Node Format

Node Data

Nested source objects use these public node fields:

title (string, required): Node title. HTML is escaped.
key (string): Unique node key. A sequence value is generated when omitted.
refKey (string): Non-unique reference key used to identify clone nodes.
children (WbNodeData[]): Nested child nodes.
expanded (boolean): Initial expansion state.
lazy (boolean): Marks a node for deferred child loading.
selected (boolean): Initial selection state.
checkbox (boolean | "radio"): Overrides the checkbox presentation for this node.
radiogroup (boolean): Makes direct children behave as a radio group.
unselectable (boolean): Prevents node selection.
classes (string): Extra classes applied to the node row.
colspan (boolean): Displays only the title cell across a treegrid row.
icon (boolean | string): Overrides or hides the node icon.
iconTooltip (boolean | string): Tooltip for the node icon.
tooltip (boolean | string): Tooltip for the title. true uses the node title.
type (string): References an entry from the tree’s types map.
statusNodeType: Status row type such as loading, error, noData, or paging.

const tree = new mar10.Wunderbaum({
  element: "#demo-tree",

  source: [
    {
      title: "Quarterly Report",
      key: "report-q3",
      type: "document",
      owner: "Alex",
      size: 148000,
      modified: "2026-09-10",
    },
  ],
});

const node = tree.findKey("report-q3");

console.log(node.data.owner);
console.log(node.data.size);

Remote Source Object

A request source accepts:

url (string, required): Request URL.
params: Query parameters.
body: Request body. Supplying a body uses a POST request by default.
options (RequestInit): Native Fetch request options.

const tree = new mar10.Wunderbaum({
  element: "#demo-tree",

  source: {
    url: "/api/tree",
    params: {
      project: "frontend",
    },
    body: {
      active: true,
    },
    options: {
      headers: {
        "X-App-Version": "2",
      },
    },
  },
});

A string is the compact form for a simple remote source:

const tree = new mar10.Wunderbaum({
  element: "#demo-tree",
  source: "/api/tree",
});

Structured Source Objects

A source object can carry tree metadata beside its child data:

children: Node data.
types: Shared node type definitions.
columns: Treegrid column definitions.
_format ("nested" | "flat"): Transfer format.
_version (number): Transfer format version.
_keyMap: Maps shortened JSON property names to node property names.
_valueMap: Maps numeric values to reusable string values.
_positional: Defines positional property order for the flat format.

The nested object form can place shared type and column definitions beside the node list:

const tree = new mar10.Wunderbaum({
  element: "#demo-tree",

  source: {
    types: {
      folder: {
        icon: "bi bi-folder",
        classes: "folder-row",
      },
    },

    children: [
      {
        title: "Documents",
        type: "folder",
      },
    ],
  },
});

Lazy Loading

Mark an unloaded branch with lazy: true and return its child source from lazyLoad.

const tree = new mar10.Wunderbaum({
  element: "#demo-tree",

  source: [
    {
      title: "Customers",
      key: "customers",
      lazy: true,
    },
  ],

  lazyLoad: (e) => {
    return {
      url: "/api/tree/children",
      params: {
        parentKey: e.node.key,
      },
    };
  },
});

Methods that load lazy branches return Promises where asynchronous work is required:

await tree.expandAll();

const node = tree.findKey("customers");

if (node) {
  await node.setExpanded(true);
}

Convert External API Data

Return converted node data from receive when an endpoint uses another response structure.

const tree = new mar10.Wunderbaum({
  element: "#demo-tree",

  source: {
    url: "/api/categories",
  },

  receive: (e) => {
    return e.response.map((item) => ({
      title: item.name,
      refKey: String(item.id),
      lazy: item.hasChildren,
    }));
  },
});

Create A TreeGrid

Passing columns changes the control from a plain tree into a treegrid. The * column holds the hierarchical title.

Use render for additional cell content:

const tree = new mar10.Wunderbaum({
  element: "#demo-tree",

  columns: [
    {
      id: "*",
      title: "Name",
      width: 3,
      resizable: true,
    },
    {
      id: "owner",
      title: "Owner",
      width: 1,
    },
    {
      id: "size",
      title: "Size",
      width: 1,
    },
  ],

  source: [
    {
      title: "Report.pdf",
      owner: "Alex",
      size: "148 KB",
    },
    {
      title: "Budget.xlsx",
      owner: "Sam",
      size: "92 KB",
    },
  ],

  render: (e) => {
    for (const col of Object.values(e.renderColInfosById)) {
      col.elem.textContent = e.node.data[col.id] ?? "";
    }
  },
});

Column Definition Reference

id (string): Column identifier. Use "*" for the hierarchical title column.
title (string): Header text.
tooltip (string): Header tooltip.
width (string | number): Pixel width or relative numeric weight.
minWidth (string | number): Minimum width for a relative column.
resizable (boolean): Displays the column resize handle.
customWidthPx (number): Current custom width after a user resize.
filterable (boolean): Displays a filter control.
filterActive (boolean): Marks the filter control as active.
sortable (boolean): Displays a sort control.
sortOrder ("asc" | "desc" | undefined): Current sort state.
menu (boolean): Displays a column menu control.
classes (string): Classes for header and data cells.
headerClasses (string): Classes for the header cell only.
html (string): HTML inserted into cells for that column.

Filter Nodes

filterNodes() accepts a search string, regular expression, or callback.

tree.filterNodes("report", {
  mode: "hide",
  fuzzy: true,
  highlight: true,
});

Remove the active filter with:

tree.clearFilter();

Filter Options

autoApply (boolean, default true): Reapplies the filter after lazy data loads.
autoExpand (boolean, default false): Expands branches that contain matches.
matchBranch (boolean, default false): Includes descendants of matching branches.
fuzzy (boolean, default false): Matches ordered characters such as fb against FooBar.
hideExpanders (boolean, default false): Hides expanders when filtering removes all visible children.
highlight (boolean, default true): Wraps matching text in <mark> for string filters.
leavesOnly (boolean, default false): Matches end nodes only.
mode (null | "mark" | "dim" | "hide", default "dim"): Unmatched-node presentation.
noData (boolean | string, default true): Displays a status row when no nodes match.
connect (FilterConnectType | null, default null): Experimental connection to external filter controls.

filter.connect accepts:

inputElem: Search input element or selector.
modeButton: Element or selector used to change filter mode.
nextButton: Element or selector used to activate the next match.
prevButton: Element or selector used to activate the previous match.
matchInfoElem: Element or selector that displays match information.

Configure Selection

The selectMode option accepts:

"single": One selected node.
"multi": Independent multiple selection. This is the default.
"hier": Hierarchical selection with parent and descendant state propagation.

const tree = new mar10.Wunderbaum({
  element: "#demo-tree",
  checkbox: true,
  selectMode: "hier",
  source: treeData,
});

const selectedNodes = tree.getSelectedNodes();

console.log(selectedNodes.map((node) => node.key));

Edit Node Titles

Configure node-title editing through the edit option:

const tree = new mar10.Wunderbaum({
  element: "#demo-tree",

  edit: {
    trigger: ["clickActive", "F2", "macEnter"],

    apply: (e) => {
      e.node.setTitle(e.inputElem.value);
    },
  },

  source: treeData,
});

Edit Options

debounce (number, default 100): Debounce interval for grid-cell change handling.
minlength (number, default 1): Minimum title length.
maxlength (number | null, default null): Maximum title length.
trigger (string[], default []): Edit triggers such as "clickActive", "F2", and "macEnter".
trim (boolean, default true): Trims whitespace before saving.
select (boolean, default true): Selects the full title when editing begins.
slowClickDelay (number, default 1000): Maximum interval used by clickActive.
validity (boolean, default true): Applies input validity feedback during editing.
beforeEdit: Runs before edit mode and can cancel editing or return custom input markup.
edit: Runs after the title input is created.
apply: Handles the edited value.

Drag And Drop Nodes

Drag-and-drop callbacks describe the requested operation. Update the node model in drop when the operation should change the tree.

const tree = new mar10.Wunderbaum({
  element: "#demo-tree",

  dnd: {
    dragStart: () => true,

    dragEnter: () => true,

    drop: (e) => {
      e.sourceNode.moveTo(
        e.node,
        e.suggestedDropMode
      );
    },
  },

  source: treeData,
});

Drag And Drop Options

autoExpandMS (default 1500): Hover delay before a collapsed node expands.
multiSource (default false): Multi-node drag setting.
effectAllowed (default "all"): Accepted values are none, copy, copyLink, copyMove, link, linkMove, move, and all.
dropEffectDefault (default "move"): Default copy, link, or move operation.
guessDropEffect (boolean, default true): Resolves the operation from DnD settings and modifier keys.
preventForeignNodes (boolean, default false): Rejects nodes from another wunderbaum instance.
preventLazyParents (boolean, default true): Rejects unloaded lazy drop parents.
preventNonNodes (boolean, default false): Rejects external non-node data.
preventRecursion (boolean, default true): Blocks moves into a node’s descendants.
preventSameParent (boolean, default false): Blocks drops under the current direct parent.
preventVoidMoves (boolean, default true): Blocks no-op moves.
serializeClipboardData (boolean | function, default true): Serializes node data into DataTransfer.
scroll (boolean, default true): Activates edge scrolling during dragging.
scrollSensitivity (default 20): Active top and bottom scroll area in pixels.
scrollSpeed (default 5): Scroll distance per update.
sourceCopyHook (default null): Hook passed to node serialization.
dragStart: Runs when dragging begins. Return true to accept the drag.
drag: Runs during dragging.
dragEnd: Runs when dragging finishes.
dragEnter: Defines accepted drop regions.
dragOver: Runs while the pointer moves over a drop node.
dragExpand: Can cancel automatic branch expansion.
drop: Handles an accepted drop.
dragLeave: Runs when the dragged object leaves a node.

All Configuration Options

Initialization Options

element (string | HTMLDivElement, required): Tree container or selector.
id (string): Tree identifier.
source (SourceType, default []): Initial node data or remote source.
columns (ColumnDefinition[], default []): Treegrid column definitions.
types (object, default {}): Shared node type definitions.
skeleton (boolean, default false): Applies skeleton styling to nodes.
debugLevel (number, default 3): Logging level from 0 through 4.
minExpandLevel (number, default 0): Keeps configured top levels expanded.
emptyChildListExpandable (boolean, default false): Keeps nodes expandable when children is empty.
rowHeightPx (number, default 22): Row height in pixels.
iconMap (string | object, default "bootstrap"): Icon definition map.
autoCollapse (boolean, default false): Collapses siblings when another node expands.
adjustHeight (boolean, default true): Adjusts tree height to its parent.
connectTopBreadcrumb (HTMLElement | string | null): Connects a breadcrumb container.
navigationModeOption ("startRow" | "cell" | "startCell" | "row"): Keyboard navigation mode.
header (boolean | string | null, default null): Header visibility and optional text.
showSpinner (boolean, default false): Displays a <progress> element while data loads.
autoKeys (boolean, default false): Generates stable missing keys.
checkbox (boolean | "radio" | function, default false): Selection-control presentation.
icon (boolean | string | function): Global or dynamic node icon.
iconTooltip (boolean | string | function): Icon tooltip.
tooltip (boolean | string | function): Node-title tooltip.
unselectable (boolean | function): Selection restriction.
enabled (boolean, default true): Enables tree interaction.
fixedCol (boolean, default false): Keeps the first grid column fixed.
columnsFilterable (boolean, default false): Default column filter-control state.
columnsMenu (boolean, default false): Default column menu-control state.
columnsResizable (boolean, default false): Default column resize state.
columnsSortable (boolean, default false): Default column sort-control state.
sortFoldersFirst (boolean | function, default false): Groups folders before end nodes during sorting.
selectMode ("single" | "multi" | "hier", default "multi"): Selection model.
quicksearch (boolean, default true): Keyboard title search.
scrollIntoViewOnExpandClick (boolean, default true): Scrolls an expanded node into view.
dnd (object): Drag-and-drop configuration.
edit (object): Title editing configuration.
filter (object): Default filter configuration.
strings (object): System text.

System Strings

loading: "Loading..."
loadError: "Error"
noData: "No data"
breadcrumbDelimiter: " » "
queryResult: "Found ${matches} of ${count}"
noMatch: "No results"
matchIndex: "${match} of ${matches}"

Dynamic Options

These options accept per-node callback values:

checkbox
icon
iconTooltip
tooltip
unselectable

const tree = new mar10.Wunderbaum({
  element: "#demo-tree",

  checkbox: (node) => node.type !== "heading",

  tooltip: (node) => {
    return `${node.title} (${node.key})`;
  },

  unselectable: (node) => node.type === "heading",

  source: treeData,
});

Event Callbacks

activate(e): A node became active.
beforeActivate(e): Runs before activation. Return false to cancel.
beforeExpand(e): Runs before expansion or collapse. Return false to cancel.
beforeSelect(e): Runs before a selection change. Return false to cancel.
buttonClick(e): A treegrid header control was clicked.
change(e): An embedded grid input changed.
click(e): A tree click occurred. Return false to cancel default handling.
dblclick(e): A double click occurred. Return false to cancel default handling.
deactivate(e): A node was deactivated.
discard(e): Rendered markup for a node was removed from the viewport.
error(e): Initialization or data loading failed.
expand(e): A node expanded or collapsed.
focus(e): The tree received or lost focus.
iconBadge(e): Supplies optional badge content for a node icon.
init(e): Initial markup and source loading completed.
keydown(e): A key was pressed while the tree had focus. Return false to block default navigation.
lazyLoad(e): An unloaded lazy node was opened for the first time.
load(e): Data was loaded, applied, and rendered.
modifyChild(e): A child-node modification occurred.
receive(e): Data was fetched but has not yet been applied.
render(e): A node row is about to enter the DOM.
renderStatusNode(e): A status row is about to render.
select(e): A node was selected or deselected.
update(e): The rendered viewport was updated.

Tree API

Tree Properties

activeNode: Current active node or null.
focusNode: Node with keyboard focus.
children: Top-level nodes.
parent: Always null, which lets a tree behave like its root for selected operations.
root: Invisible root node.
id: Tree identifier.
element: Tree container.
headerElement: Header container.
listContainerElement: Node-list container.
nodeListElement: Element containing rendered rows.
options: Merged runtime options.
columns: Treegrid column definitions.
types: Shared node type definitions.
data: Extra data returned by a remote source.
ready: Promise resolved after initialization.
breadcrumb: Connected breadcrumb element or null.
filterMode: Current filter mode.
Wunderbaum.version: Runtime release version.
Wunderbaum.iconMaps: Built-in bootstrap and fontawesome6 maps.
Wunderbaum.util: Public utility module.
iconMap: Deprecated icon-map accessor. Use Wunderbaum.iconMaps.

Tree Lookup And Traversal

[Symbol.iterator](): Iterates descendants depth-first in pre-order.
count(visible?): Returns the node count.
countUnique(): Counts unique reference keys.
findAll(match): Returns all matching nodes.
findByRefKey(refKey): Returns nodes sharing a reference key.
findFirst(match): Returns the first matching node.
findKey(key): Returns the node with a unique key.
findNextNode(match, startNode?, reverse?): Searches from a given node.
findRelatedNode(node, where, includeHidden?): Finds a related node by navigation direction.
getFirstChild(): Returns the first top-level node.
getLastChild(): Returns the last top-level node.
visit(callback): Visits all nodes.
visitRows(callback, options?): Traverses rows using display order.

Loading And Structure

addChildren(nodeData, options?): Inserts top-level nodes.
clear(): Removes all nodes.
load(source): Replaces tree data from a source and returns a Promise.
reload(options?): Reloads the current source. Experimental.
destroy(): Removes the instance and generated markup.
setTypes(types, replace?): Replaces or updates shared node types.
resetColumns(): Recalculates column settings.
update(change, options?): Requests a tree update.
updatePendingModifications(): Applies queued rendering changes.

Expansion And Navigation

expandAll(flag?, options?): Recursively expands or collapses nodes.
getActiveNode(): Returns the active node.
getFocusNode(): Returns the focused node.
getActiveColElem(): Returns the active treegrid cell.
getTopmostVpNode(complete?): Returns the topmost viewport node.
getLowestVpNode(complete?): Returns the lowest viewport node.
scrollTo(nodeOrOpts): Scrolls a node into the viewport.
setActiveNode(key, flag?, options?): Changes the active node by key.
setColumn(colIdx, options?): Changes the active treegrid column.
setCellNav(flag?): Changes cell navigation mode.
setFocus(flag?): Sets or releases tree focus.
setNavigationOption(mode, reset?): Changes row or cell navigation behavior.

Selection

selectAll(flag?): Selects or deselects applicable nodes recursively.
toggleSelect(): Toggles selection in the current tree context.
getSelectedNodes(stopOnParents?): Returns selected nodes.
getRefKeys(selected?): Returns reference keys.

Filtering

filterNodes(filter, options): Applies a filter and returns the match count.
clearFilter(): Removes the active filter.
countMatches(): Returns the current match count.
isFilterActive(): Checks for an active filter.
updateFilter(): Reapplies the current filter.
filterBranches(filter, options): Deprecated. Use filterNodes() with matchBranch: true.

Sorting

sort(options): Sorts tree nodes.
sortByProperty(...): Deprecated.
sortChildren(...): Deprecated.

State And Status

getState(options?): Returns selected tree state. Experimental.
setState(state, options?): Restores tree state. Experimental.
setStatus(status, options?): Displays or clears a status row.
getOption(name, defaultValue?): Reads an option.
setOption(name, value): Changes an option.
setEnabled(flag?): Enables or disables interaction.
isEnabled(): Returns enabled state.

State Checks

hasFocus()
hasHeader()
isCellNav()
isRowNav()
isEditing()
isEditingTitle()
isGrid()
isLoading()

Commands And Deferred Updates

applyCommand(command, options): Executes a navigation or modification command.
enableUpdate(flag): Suspends or resumes rendering updates.
runWithDeferredUpdate(callback): Defers rendering until a synchronous callback finishes.
runWithDeferredUpdateAsync(callback): Defers rendering until an asynchronous callback finishes.
toDictArray(callback?): Converts top-level nodes to dictionaries.
format(...)
format_iter(...)
toString()

Logging

log(...args)
logDebug(...args)
logInfo(...args)
logWarn(...args)
logError(...args)
logDeprecate(...)
logTime(...)
logTimeEnd(...)

Static Lookup Helpers

Wunderbaum.getEventInfo(event)
Wunderbaum.getNode(elementOrEvent)
Wunderbaum.getTree(elementOrId)

WunderbaumNode API

Node Properties

tree: Owning tree.
parent: Parent node.
children: Child nodes or null.
key: Unique node key.
refKey: Optional non-unique reference key.
title: Node title.
data: Custom application data.
type: Shared type identifier.
classes: Extra row classes.
checkbox: Checkbox or radio configuration.
radiogroup: Radio-group state for children.
expanded: Expansion state.
selected: Selection state.
unselectable: Selection restriction.
lazy: Lazy-loading state.
icon: Node icon definition.
iconTooltip: Icon tooltip.
tooltip: Title tooltip.
colspan: Treegrid colspan state.
statusNodeType: Status row type.
match: Current filter match value.
subMatchCount: Descendant filter match count.
WunderbaumNode.sequence: Static node sequence counter.

Creation And Structure

addChildren(nodeData, options?)
addNode(nodeData, mode?)
moveTo(targetNode, mode?, map?)
remove()
removeChildren()
removeMarkup()
resetLazy()
resetNativeChildOrder(options?)
triggerModify(operation, data?)
triggerModifyChild(operation, child)

Traversal

[Symbol.iterator]()
findAll(match)
findDirectChild(match)
findFirst(match)
findRelatedNode(where, includeHidden?)
getFirstChild()
getLastChild()
getNextSibling()
getPrevSibling()
getParent()
getParentList(includeRoot?, includeSelf?)
getPath(includeSelf?, part?, separator?)
getLevel()
getCloneList(includeSelf?)
visit(callback)
visitParents(callback, includeSelf?)
visitSiblings(callback, includeSelf?)

Expansion And Visibility

collapseSiblings(options?)
expandAll(flag?, options?)
makeVisible(options?)
scrollIntoView(options?)
setExpanded(flag?, options?)
navigate(where, options?)

Selection And Focus

setActive(flag?, options?)
setFocus(flag?)
setSelected(flag?, options?)
toggleSelected()
getSelectedNodes(stopOnParents?)
getRefKeys(selected?)

Data And Presentation

getOption(name, defaultValue?)
setClass(className, flag?)
setIcon(icon)
setKey(key, refKey?)
setStatus(status, options?)
setTitle(title)
setTooltip(tooltip)
update(change?)
getColElem(colIdx)
startEditTitle()
toDict(recursive?, callback?)
format(...)
format_iter(...)

Loading And Sorting

load(source)
loadLazy(forceReload?)
sort(options)
resort(options?)
sortByProperty(...): Deprecated.
sortChildren(...): Deprecated.

State Checks

hasChildren()
hasClass(className)
hasFocus()
isActive()
isAncestorOf(node)
isChildOf(node)
isClone()
isColspan()
isDescendantOf(node)
isEditingTitle()
isExpandable(andCollapsed?)
isExpanded()
isFirstSibling()
isLastSibling()
isLazy()
isLoaded()
isLoading()
isMatched()
isPagingNode()
isParentOf(node)
isPartload()
isPartsel()
isRadio()
isRendered()
isRootNode()
isSelected()
isStatusNode()
isTopLevel()
isUnloaded()
isVisible()

Hierarchical Selection Helpers

fixSelection3AfterClick()
fixSelection3FromEndNodes()

Node Commands And Logging

applyCommand(command, options)
log(...args)
logDebug(...args)
logInfo(...args)
logWarn(...args)
logError(...args)
toString()

Method Option Objects

`AddChildrenOptions`

before (WunderbaumNode | number | null): Inserts before a node or child index. The default appends.
applyMinExpanLevel (boolean, default true): Applies minExpandLevel to inserted descendants. The API property uses this exact spelling.

`ExpandAllOptions`

loadLazy (boolean, default false): Loads lazy branches during expansion.
resetLazy (boolean, default false): Unloads lazy children during collapse.
force (boolean, default false): Ignores minExpandLevel.
depth (number): Restricts recursion depth.
deep (boolean, default false): Collapses deeper descendants when a depth limit is used.
collapseOthers (boolean, default false): Collapses branches outside the requested depth.
keepActiveNodeVisible (boolean, default true): Keeps the active node visible.

`GetStateOptions`

activeKey (boolean, default true)
expandedKeys (boolean, default false)
selectedKeys (boolean, default false)

`SetStateOptions`

expandLazy (boolean, default false): Loads lazy branches when required while restoring state.

A tree state object contains:

expandedKeys
activeKey
activeColIdx
selectedKeys

`MakeVisibleOptions`

noAnimation (boolean, default false)
scrollIntoView (boolean, default true)
noEvents (boolean, default false)

`NavigateOptions`

activate (boolean, default true)
event (Event): Originating event.

`ScrollIntoViewOptions`

noAnimation (boolean, default false)
noEvents (boolean, default false)
topNode (WunderbaumNode)
ofsY (number): Additional top offset in pixels.

ScrollToOptions uses the same fields and adds:

node (WunderbaumNode, required)

`SetActiveOptions`

retrigger (boolean, default false): Fires activation callbacks even when the status does not change.
noEvents (boolean, default false): Suppresses activation callbacks.
focusTree (boolean, default false): Gives keyboard focus to the tree.
event (Event): Originating event.
colIdx (number | string): Activates a treegrid column.
edit (boolean): Focuses an embedded input. Column 0 or "*" opens title editing.

`SetColumnOptions`

edit (boolean, default false)
scrollIntoView (boolean, default true)

`SetExpandedOptions`

force (boolean, default false)
immediate (boolean, default false)
noAnimation (boolean, default false)
noEvents (boolean, default false)
resetLazy (boolean, default false)
scrollIntoView (boolean, default false)

`UpdateOptions`

immediate (boolean, default false): Requests an immediate redraw.

`SetSelectedOptions`

force (boolean, default false): Ignores selection restrictions.
noEvents (boolean, default false): Suppresses selection callbacks.
propagateDown (boolean, default false): Applies selection to descendants in "multi" mode.
callback: Runs for each affected node and can return false to skip it.

`SetStatusOptions`

message (string): Status-row message.
details (string): Status tooltip.

`ReloadOptions`

source (SourceType): Loads another source.
reactivate (boolean, default true): Reactivates the current active node after reload.

`ResetOrderOptions`

recursive (boolean, default true)
propName (string, default "_nativeIndex")

`SortOptions`

propName (string): Property used for sorting when no key callback or column is supplied.
key (function): Returns the comparison value for a node.
cmp (function): Deprecated comparison callback. Use key.
order ("asc" | "desc" | undefined)
deep (boolean, default true): Sorts descendants recursively.
caseInsensitive (boolean, default false)
nativeOrderPropName (string, default "_nativeIndex")
updateColInfo (boolean, default false): Rotates and records treegrid column sort state.
colId (string): Column ID used with updateColInfo.

`VisitRowsOptions`

includeHidden (boolean, default false)
includeSelf (boolean, default true)
reverse (boolean, default false)
start (WunderbaumNode | null): Traversal starting node.
wrap (boolean, default false)

Styling And Customization

CSS Custom Properties

Typography And Main Colors

--wb-font-stack
--wb-error-color
--wb-node-text-color
--wb-border-color
--wb-bg-highlight-color
--wb-header-color
--wb-background-color
--wb-alternate-row-color
--wb-alternate-row-color-hover
--wb-focus-border-color

State Colors

--wb-drop-source-color
--wb-drop-target-color
--wb-dim-color
--wb-error-background-color
--wb-hover-color
--wb-hover-border-color
--wb-grid-color
--wb-active-color
--wb-active-cell-color
--wb-active-border-color
--wb-active-hover-color
--wb-active-hover-border-color
--wb-active-column-color
--wb-active-header-column-color
--wb-active-color-grayscale
--wb-active-border-color-grayscale
--wb-active-hover-color-grayscale
--wb-active-cell-color-grayscale
--wb-grid-color-grayscale
--wb-filter-dim-color
--wb-filter-submatch-color

Dimensions

--wb-row-outer-height
--wb-row-inner-height
--wb-row-padding-y
--wb-col-padding-x
--wb-icon-outer-height
--wb-icon-outer-width
--wb-icon-height
--wb-icon-width
--wb-icon-padding-y
--wb-icon-padding-x
--wb-header-height

#demo-tree {
  --wb-node-text-color: #252525;
  --wb-background-color: #fafafa;
  --wb-header-color: #ececec;
  --wb-bg-highlight-color: #2563eb;
  --wb-focus-border-color: #1d4ed8;
  --wb-hover-color: #eff6ff;
}

Feature Classes

wb-alternate: Alternating row backgrounds.
wb-checkbox-auto-hide: Hides unchecked checkbox icons until the row is hovered.
wb-fade-expander: Shows expanders while the tree is hovered.
wb-initializing: Initial-loading class removed after initialization.
wb-no-select: Prevents mouse text selection.
wb-rainbow: Colors hierarchy levels.
wb-rtl: Right-to-left presentation.

Automatic State Classes

Tree state:

wb-grid
wb-fixed-col
wb-cell-mode

Row state:

wb-active
wb-busy
wb-error
wb-invalid
wb-loading
wb-match
wb-selected
wb-skeleton
wb-status-*
wb-submatch

Helper Classes

wb-helper-center
wb-helper-disabled
wb-helper-end
wb-helper-hidden
wb-helper-invalid
wb-helper-lazy-expander
wb-helper-link
wb-helper-start

Customize Icons

The built-in icon maps are bootstrap and fontawesome6. Load the corresponding icon font separately.

const tree = new mar10.Wunderbaum({
  element: "#demo-tree",

  iconMap: Object.assign(
    {},
    mar10.Wunderbaum.iconMaps.bootstrap,
    {
      folder: "bi bi-folder-fill",
      folderOpen: "bi bi-folder2-open",
      doc: "bi bi-file-earmark",
    }
  ),

  source: treeData,
});

Public icon-map keys:

error
loading
noData
expanderExpanded
expanderCollapsed
expanderLazy
checkChecked
checkUnchecked
checkUnknown
radioChecked
radioUnchecked
radioUnknown
folder
folderOpen
folderLazy
doc
colSortable
colSortAsc
colSortDesc
colFilter
colFilterActive
colMenu

Alternatives And Related Resources

The post JavaScript Tree/TreeGrid with Drag, Edit & Filter – Wunderbaum appeared first on CSS Script.

Discover more from RSS Feeds Cloud

Subscribe to get the latest posts sent to your email.

JavaScript Tree/TreeGrid with Drag, Edit & Filter – Wunderbaum

Features

Use Cases

How to Use wunderbaum

Installation

Basic Usage

Data Sources And Node Format

Node Data

Remote Source Object

Structured Source Objects

Lazy Loading

Convert External API Data

Create A TreeGrid

Column Definition Reference

Filter Nodes

Filter Options

Configure Selection

Edit Node Titles

Edit Options

Drag And Drop Nodes

Drag And Drop Options

All Configuration Options

Initialization Options

System Strings

Dynamic Options

Event Callbacks

Tree API

Tree Properties

Tree Lookup And Traversal

Loading And Structure

Expansion And Navigation

Selection

Filtering

Sorting

State And Status

State Checks

Commands And Deferred Updates

Logging

Static Lookup Helpers

WunderbaumNode API

Node Properties

Creation And Structure

Traversal

Expansion And Visibility

Selection And Focus

Data And Presentation

Loading And Sorting

State Checks

Hierarchical Selection Helpers

Node Commands And Logging

Method Option Objects

`AddChildrenOptions`

`ExpandAllOptions`

`GetStateOptions`

`SetStateOptions`

`MakeVisibleOptions`

`NavigateOptions`

`ScrollIntoViewOptions`

`SetActiveOptions`

`SetColumnOptions`

`SetExpandedOptions`

`UpdateOptions`

`SetSelectedOptions`

`SetStatusOptions`

`ReloadOptions`

`ResetOrderOptions`

`SortOptions`

`VisitRowsOptions`

Styling And Customization

CSS Custom Properties

Feature Classes

Automatic State Classes

Helper Classes

Customize Icons

Alternatives And Related Resources

Share this:

Like this:

Related

Discover more from RSS Feeds Cloud

By RSSFeeds Administrator