One runtime file · 19 themes · 100,000 rows

A working product playground, not a screenshot.

Every capability the component ships with, running on this page rather than described. It uses only bm-treelistview.demo.js, ordinary HTML, and the component’s public properties, methods and events. Grouping, totals, inline editing, typed filters, column reordering and four export formats are all switchable live below.

Start driving the grid Open the inspector
See how it is wired up Request a product discussion

Demo runtime · Nothing is sent anywhere · Reload to reset

19Built-in themes, including auto, plus a custom host-CSS theme.
5Datasets: the feature showcase, commerce, finance, delivery and scale.
24Feature switches you can toggle live on the component.
20DOM events streamed straight into the event log.

01Workbench

Switch the dataset, then drive the component live.

The same component renders all five datasets without a rewrite. Everything in the controls panel maps to a public attribute, property or method: nothing here is demo-only scaffolding.

Northwind Commerce Operations

Product hierarchy, suppliers, stock health, revenue, row-level actions, lazy loading, filtering and export.

Send demo feedback
Event feed: Waiting for demo initialisation… Keyboard: ↑ ↓ ← → Home End Enter Space *

02Inspector

Everything the component reports, as it happens.

Live metrics update on every state change. The event log is the raw DOM event stream a host application would listen to, and the snapshot is exactly what getState() returns.

ScenarioCommerce
ThemeDark
Visible rows0
Selected0
Event logstream
No events yet.
State snapshotjson
Click “Snapshot state” to inspect the component state.

03Guided pass

A suggested route through the whole surface.

Work through these thirteen passes and you will have exercised the whole public surface — themes, keyboard access, columns, grouping, editing, filtering, export, scale and right-to-left.

0 of 13 done

04Integration

How this page is wired up.

The playground uses direct HTML integration on purpose, so customers can see the smallest possible adoption path: no build step, no framework, no wrapper.

Plain HTML usage

Load the runtime, place the element, hand it columns and rows. That is the whole adoption path.

<script src="./bm-treelistview.min.js"></script>

<bm-treelistview
  id="tree"
  theme="dark"
  mode="tree"
  selection-mode="checkbox"
  show-filter="true"
  show-footer="true">
</bm-treelistview>

await tree.setData(columns, items);

Features covered here

This page exercises the main public surface: properties, methods, events, column metadata, cell kinds, row actions, lazy loading and CSS custom properties.

ThemesDensitySelectionSortingMulti-sortFilteringColumn filtersGroupingAggregationTotals rowInline editingColumn reorderVirtualisationLazy loadCSV / TSV / JSON / ExcelClipboardARIA/keyboardRTLStateCustom CSS

Turning the features on

All of it is attributes and one call per feature. Nothing here needs a build step or a wrapper.

<bm-treelistview
  id="tree"
  theme="auto"
  selection-mode="checkbox"
  show-column-filters="true"
  allow-grouping="true"
  show-group-panel="true"
  show-totals="true"
  allow-column-reorder="true"
  editable="true"
  virtualize-threshold="200">
</bm-treelistview>

// A column opts into totals and editing:
{ id: 'value', title: 'Value', kind: 'currency',
  aggregate: 'sum', editable: true,
  validate: ({ value }) => value >= 0 || 'Cannot be negative' }

await tree.setGroupBy([{ columnId: 'region' }]);
await tree.downloadData({ format: 'excel' }, 'report.xls');

Custom theme override

The Custom theme button applies a host CSS class and overrides --tlv-* variables. Built-in themes use theme="..."; custom branding uses host CSS.

bm-treelistview.custom-demo-theme {
  --tlv-header-bg: linear-gradient(135deg, #7c2d12, #9f1239);
  --tlv-node-bg: #fffaf0;
  --tlv-node-bg-alt: #ffedd5;
  --tlv-node-hover-bg: #fed7aa;
  --tlv-node-selected-bg: #fdba74;
  --tlv-focus-ring: #f97316;
}