Nested grids, pivot tables, master-detail layouts, 200+ formula functions — and years of enterprise refinement behind it. How teams use TreeGrid to tame genuinely complex data.
There’s a category of web application where simple grids run out of road very quickly. The data is hierarchical. Rows contain detail rows. Cells need to trigger actions, upload files, or render rich text. The grid needs to talk to the server in the background, synchronise with other grids on the page, and be localised into Arabic.
TreeGrid has been built for exactly this category — refined over years of real enterprise projects and shaped by the specific edge cases that only appear in production. Not the fastest grid in every benchmark, but arguably the most feature-complete one available as a pure JavaScript component.
TreeGrid is the right choice when the data structure or the interaction model is too complex for a standard grid — and when correctness and completeness matter more than raw rendering speed.
A wholesale distributor needed an order management view where each order row expanded to show its line items, each line item could be edited inline, and totals recalculated automatically using formulas. Clicking a line item opened a nested detail grid showing warehouse movements for that SKU.
TreeGrid’s built-in master-detail and nested grid support handled all three levels without any custom rendering code. Formulas in the parent row referenced aggregated values from the child grid. Changes were synchronised to the server in the background via AJAX — the user never clicked a save button.
Key technical decision: TreeGrid’s automatic server synchronisation sends only changed rows and cells — not the entire dataset. For an order system with thousands of lines, this reduced network traffic by over 90% compared to a full-page submit approach.
A procurement platform serving markets across Europe and the Middle East needed a single grid component that could switch between English, German, French, and Arabic — including right-to-left layout, localised date formats, and Arabic number formatting — without a page reload.
TreeGrid’s built-in localisation to 14 languages with full RTL support handled the language switching at runtime. The same grid configuration served all markets; only the locale string changed. For the Arabic market, the entire grid mirrored horizontally — column order, scroll direction, and text alignment all flipped correctly.
Built-in languages with full RTL support
Excel-compatible formula functions
Levels of nested tree hierarchy
A finance team needed a self-service reporting interface where analysts could drag dimensions onto rows and columns, apply aggregation functions, and drill down into underlying transactions — all without writing SQL or waiting for IT to build a new report.
TreeGrid’s dynamic pivot table with drag-and-drop configuration became the core of the reporting UI. Analysts dragged cost centres onto the row axis, time periods onto the column axis, and chose between sum, average, or count from a dropdown. Clicking any aggregated cell expanded it to show the underlying transaction rows. The entire interaction happened client-side — the server was queried only when the analyst changed the base dataset.
TreeGrid includes features that sound minor until you need them: cell hints for overflowed content, a dates dialog for recurring date patterns, tag entry cells, popup button types, and file upload cells. These are the details that separate a component shaped by real enterprise feedback from one built to pass a feature checklist.
TreeGrid is available as a downloadable package with a fully functional trial version. The package includes examples for React, Vue, Angular, Svelte, Ember, Express, and Salesforce LWC, along with server-side scripts for Node.js, ASP.NET, JSP, and PHP.
TreeGrid connects to any backend returning JSON or XML. The GanttChart module — for task scheduling and resource calendars — is available as an add-on to the same package.
If your data has structure that a flat grid can’t express — hierarchies, nested detail, complex cell types, or multilingual requirements — TreeGrid is built for exactly that complexity.
Try the live demo
Explore tree hierarchies, pivot tables, and master-detail layouts — without registration.
Open TreeGrid demo →