Guided demo scenarios
Switch datasets to show how the same component can handle different business screens without rewriting the UI.
⚡ One runtime · 10 built-in themes · Deep interaction demo
A full TreeListView product playground.
This standalone page is designed for two jobs: a polished online demo for potential customers, and a practical product playground for internal testers. It uses only bm-treelistview.js, a normal HTML page, and the component’s public properties, methods and events.
Guided exploration checklist
Use these suggested checks while exploring realistic customer and product-team journeys.
Northwind Commerce Operations
Product hierarchy, suppliers, stock health, revenue, row-level actions, lazy loading, filtering and export.
Quick actions
Theme gallery Optional: compare all built-in themes as buttons
Feature switches Turn component capabilities on/off for deeper exploration
Columns, state and diagnostics Useful for evaluators who want to test the API surface
Event feed: Waiting for demo initialisation…
Keyboard: ↑ ↓ ← → Home End Enter Space *
Live metrics
ScenarioCommerce
ThemeDark
Visible rows0
Selected0
Event log
No events yet.
State snapshot
Click “Snapshot state” to inspect the component state.
Plain HTML usage
The demo intentionally uses direct HTML integration so customers can see the smallest possible adoption path.
<script src="./bm-treelistview.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
This page exercises the main public surface: properties, methods, events, column metadata, cell kinds, row actions, lazy loading and CSS custom properties.
ThemesDensitySelectionSortingFilteringLazy loadCSV exportARIA/keyboardStateCustom CSS
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;
}