What you are looking at
Avatars, chip lists, star ratings, inline sparklines, percentages and formatted currency, every one a built-in cell kind, not a custom renderer.
One JavaScript file · Framework-neutral · 100,000 rows
Transform complex hierarchical data into a premium product experience.
A highly customisable Web Component for tree grids, catalogues, dashboards and admin consoles, anywhere hierarchical data has to be fast, attractive and genuinely interactive. Grouping, inline editing, typed filters and export are built in, and it stays comfortable past 100,000 rows.
Commercial licence · Compiled runtime · Merchant of record checkout
1Runtime file to drop into the host application.
11Built-in themes, including one that follows the operating system.
15Cell kinds, from currency and dates to sparklines and avatars.
Any UIHTML5, Angular, React, Vue, Blazor and more.
01See it working
The real component, running on this page.
Not a screenshot and not a video. This is the same runtime file your application would load. Pick a spotlight to put a capability front and centre.
Product portfolio: teams, quality, utilisation and budget
Grouped by stage. Each group header carries its own averages and totals; the sticky row at the bottom totals everything visible.
Roughly forty lines of setup
Columns declare kind, aggregate and editable; the grid does the
rest. No data pipeline to write, no chart library to pull in.
The same file your app loads
One runtime, no framework, no build step. What renders here is what renders in your product.
02Capabilities
Built for product teams who need tree data to feel first-class.
Compact enough for admin tooling, refined enough for SaaS, flexible enough for catalogues, portfolios and
finance structures, and simple to adopt: add the script, place the element, call
setData(columns, items), then switch behaviour with plain HTML attributes.
Tree and list modes
Show hierarchical parent-child data, or flatten the very same dataset into a list when users need a different
working view. One mode attribute switches between them: no second component, no second data shape.
Filtering and sorting
A global filter bar, per-column filters with thirteen typed operators, and multi-column sort. Currency sorts numerically and dates chronologically, with no configuration.
Frozen tree column
Keep the hierarchy visible while users horizontally scroll through wide operational datasets with many fields.
Selection models
Use single, multiple or checkbox selection, including select-all for visible rows and a footer selection count.
Fifteen cell kinds
Text, badge, progress, link, date, currency, number, percent, boolean, chips, rating, sparkline, avatar, icon text and row actions, plus your own renderers when you need them.
Easy to use
Drop in one runtime file, render <bm-treelistview>, pass columns and rows with setData, then control features using straightforward attributes and methods.
Accessible by design
WCAG 2.2 AA: treegrid roles, full ARIA metadata, roving tabindex, a complete keyboard grid, polite announcements, RTL, reduced-motion and Windows High Contrast.
Lazy loading
Load children on demand for large hierarchies, remote datasets and enterprise-scale tree structures.
Grouping and totals
Bucket rows by any column with live counts and aggregates in every group header, plus an optional sticky totals row. Sum, average, min, max, distinct counts, or your own function.
Inline editing
Text, number, date, checkbox and select editors, chosen automatically from the column type. Validators reject bad values and say why, without losing what the user typed.
Export and clipboard
CSV, TSV, JSON and a real .xlsx workbook: numbers as numbers, dates as dates, header row frozen, so the recipient can sum and filter without touching anything first. Formatted or raw, whole grid or selection. Ctrl/Cmd + C pastes straight into a spreadsheet, and exports are guarded against formula injection.
Real .xlsxCSV · TSV · JSONNo dependencies
Built for scale
Virtual scrolling renders only what is on screen and can switch itself on above a row count you choose. Ten thousand rows are comfortable; a hundred thousand are practical.
10,000 comfortable100,000 virtualisedAuto-virtualisation
Columns under user control
Reorder by dragging, resize by mouse, touch or keyboard, pin either edge, freeze the tree column, and hide columns from a built-in chooser. The layout is part of the saved state.
Master and detail
Open a full-width panel under any row for an invoice's line items, a chart, or a component of your own. It is a separate disclosure from expanding children, so collapsing a subtree never closes the panel someone opened to read.
Saved views
Users build one arrangement for the Monday review and another for chasing overdue accounts, then move between them by name. Columns, widths, order, sort, filters and grouping, deliberately not the selection, because records come and go.
Conditional formatting
Twelve operators decide how a cell or a whole row looks from what it contains, with in-cell data bars scaled across the rows in view. Rules are data, not callbacks: they survive a JSON attribute and can be built by a settings screen.
Server-side data
Point it at a callback and the grid asks your server for the rows it needs, with the user's sort, filters and grouping in the request. Aligned to blocks, debounced, and every response carries an AbortSignal: an answer to a question the user has moved past is discarded rather than rendered.
Block requestsDebouncedStale answers dropped
Paging, or virtual scrolling
A built-in pager when your users expect pages, virtual scrolling when they expect to scroll. Pages are sliced from the flattened, filtered, sorted rows, never from the source tree, which would put a parent on page one and its children on page two.
Cell navigation and ranges
Switch from row focus to cell focus, then select a rectangle with Shift+arrow or Shift+click and copy just that block. Pinned rows stay above and below the scroll for totals and running summaries.
Speaks your language
Every one of the thirty-three strings the grid announces can be replaced, and counted messages use real CLDR plural rules through Intl.PluralRules, so Polish gets its four forms and Welsh its six, not an English guess with an "s" on the end.
Prints properly
Printing expands the virtualised rows, drops the scrollbars and shadows, and repeats the header on every page, so a grid on paper is the grid, not the forty rows that happened to be on screen.
Brand theming
Nineteen built-in themes (nine light, nine dark, and one that follows the operating system), plus over a hundred CSS variables and named parts, so the grid looks native to your brand. Every one is checked against WCAG contrast for the pairings a user actually reads.
19 themesLight & dark pairsFollows the OS
03Live demo
Northwind Commerce Operations, running right here.
This is the real component, not a video. Try grouping and the totals row, edit a cell in place, filter a column numerically, reorder the columns by dragging a header, export to four formats, and expand “Future Launch Lines” to watch children load on demand. Eleven built-in themes, three densities and full keyboard navigation are all live.
Commerce product hierarchy, suppliers, stock health and revenue
Use the grid as a product catalogue, operations dashboard, portfolio view or enterprise admin console.
Event feed: Waiting for interaction…
Keyboard: ↑ ↓ ← → Home End Enter Space *
04Integration
Use it from almost any UI technology.
Because it is a standards-based Web Component, the consuming application does not need to use any specific JavaScript framework. It can be used in plain HTML5, Angular, React, Vue, Blazor, ASP.NET, Razor pages, static sites and other modern front ends. For the three biggest, a typed wrapper ships with the licence so you do not have to write the bridging code below at all. The full documentation covers all of it.
HTML5 integration
html
One JS runtimeDOM eventssetData APINo framework lock-in
Load runtime
Reference the licensed compiled bm-treelistview.min.js runtime from your host app.
Render element
Place <bm-treelistview> in the page, component or Razor view.
Bind data
Call setData(columns, items) and listen for TreeListView DOM events.
Look it up
Every property, method and event is in the API reference, with guides for each framework, theming and accessibility.
Typed wrappers for React, Angular and Vue
Every licence includes a wrapper for each of the three, with typed properties, typed events and the element itself reachable for the imperative API. They are generated from the component's own metadata, so a property the component has is a property the wrapper has, in every release.
React 18 & 19Angular standaloneVue 3No component code inside
One runtime, many host applications
Ship the same JavaScript runtime into portals, admin products, dashboards and customer-facing apps without rewriting the tree-grid experience for every framework.
No framework lock-inSimple upgradesSimple APIFast adoption
05Commercial licensing
Pick the licence pack that fits your team.
TreeListView is available through Lemon Squeezy, our merchant of record. Choose a single developer licence, a discounted team pack, or the limited-time organisation-wide option for one named organisation. Every pack is a one-off purchase that includes a year of support and updates; renewing afterwards is optional and buys another year of both, never the right to keep using what you already have.
Default choice
1 developer
Single License
$299one-off
Then $99 per developer per year for support & updates, optional; your licence keeps working either way
Ideal for one developer using TreeListView in commercial application work, internal tools, prototypes or client projects.
- 1 developer licence
- Commercial usage rights
- Compiled runtime distribution
- 1 year of support & updates
Small team
2 developers
2 Licenses Pack
$399one-off
Then $99 per developer per year for support & updates, optional; your licence keeps working either way
A practical pack for two developers working together on the same product, admin console, SaaS screen or customer project.
- 2 developer licences
- Better value than separate licences
- Commercial usage rights
- 1 year of support & updates
Best value
5 developers
5 Licenses Pack
$499one-off
Then $99 per developer per year for support & updates, optional; your licence keeps working either way
Best suited for product squads building polished tree-grid experiences across dashboards, catalogues and operations screens.
- 5 developer licences
- Strong team discount
- Commercial usage rights
- 1 year of support & updates
Limited time
Unlimited
Organization-wide Pack
$999one-off
Then $199 per year for support & updates, optional; your licence keeps working either way
Unlimited developer licences for your single named organisation. Ideal when TreeListView will be standardised across multiple teams.
- Unlimited developer licences
- Single named organisation
- Excellent for internal platforms
- 1 year of support & updates
Secure Lemon Squeezy checkout
The buy buttons take you to the TreeListView product licence purchase in the Lemon Squeezy checkout page. Lemon Squeezy acts as the merchant of record, handles the secure purchase flow, and presents the available licence quantity options to help you complete your purchase.
Runtime delivery
Use the compiled commercial bm-treelistview.min.js runtime in your authorised hosted application or customer portal. The public site and playground use bm-treelistview.demo.js.
Source protected
The component source code, build chain and internal development assets are not shipped with the runtime as part of a standard licence purchase. A source code licence is available separately.
Written licence
Usage is governed by a separate written licence agreement with Binarymission (UK).
Support & updates
Every pack includes one year of technical support and product updates. Renewal afterwards is $99 per developer per year, or $199 per year for the organisation-wide pack. Your licence keeps working either way; renewal covers support and new versions, not continued use.
Source code licence & escrow: a separate product
Some organisations need more than a runtime: a long-lived deployment, an OEM arrangement, or a procurement policy that requires the source. TreeListView can be licensed at source under its own written agreement, or deposited with a third-party escrow agent who releases it to you on agreed trigger events. Either way you get the complete buildable project (component, build chain, test suite and internal documentation), verified to rebuild every shipped artefact from nothing but two documented commands before it leaves us.
Discuss a source licence
Priced per agreement. Tell us what you need it for and we will come back to you.
06About us
Bring powerful tree-grid experiences into your product without building them from scratch.
TreeListView helps software teams add polished hierarchical data experiences to admin portals, operations dashboards, catalogue systems and SaaS products with a simple licensed runtime.