TreeListView documentation
A commercial tree grid Web Component. One custom element, no framework required, and wrappers for React, Angular and Vue when you want them.
A grid in ten lines
<script src="./bm-treelistview.min.js"></script>
<div style="height: 520px">
<bm-treelistview id="grid" selection-mode="checkbox" show-filter="true"></bm-treelistview>
</div>
<script>
const grid = document.getElementById('grid');
await customElements.whenDefined('bm-treelistview');
await grid.ready();
await grid.setData(
[
{ id: 'name', title: 'Name', tree: true },
{ id: 'owner', title: 'Owner' },
{ id: 'budget', title: 'Budget', kind: 'currency', aggregate: 'sum' },
],
[
{
id: 'p1',
cells: { name: 'Platform', owner: 'Priya', budget: 1000 },
expanded: true,
children: [
{ id: 'p1-a', cells: { name: 'API', owner: 'Ade', budget: 250 } },
{ id: 'p1-b', cells: { name: 'Auth', owner: 'Bo', budget: 750 } },
],
},
],
);
grid.addEventListener('tlvSelectionChange', event => console.log(event.detail));
</script>Where to go
Getting started
Install it, give it data, give it a height. The five things that trip everyone up, first.
API reference
94 properties, 61 methods and 30 events, with a filter box.
Frameworks
React, Angular, Vue, Svelte and Blazor — with the generated wrappers, or without.
Theming
Nineteen built-in themes, custom properties, and ::part() when you need to go deeper.
Accessibility
What the component provides, what it needs from you, and the keyboard map.
Performance
Virtual scrolling, memoisation and what to do at a hundred thousand rows.
The two rules that cover most problems
1. Give it a height. The grid fills its container. A container with no height is a grid with no height, and that is the single most common "it did not render" report.
2. Complex values go through properties, not attributes. An attribute is a string;
columns="[object Object]"is what an array becomes if you try. Booleans, numbers and strings are fine either way.
Licensing
TreeListView is commercial software from Binarymission (UK). The demo runtime is limited to 500 loaded nodes and is not licensed for production use; the commercial runtime has no such limit. Talk to us about a licence.