TreeGrid

Base Component to Display and Edit Data in Grid and Tree View

TreeGrid is an enterprise JavaScript data grid and tree grid for displaying and editing complex tabular and hierarchical data directly in the browser.
A high-performance grid component with a rich feature set, continuously improved based on real customer needs and feedback.

Why TreeGrid

Complex features

TreeGrid is a feature-rich JavaScript data grid and tree grid, refined over many years and shaped by real-world enterprise projects and customer feedback.

Excel-like Editing

Excel-style in-cell editing with formulas, validation and formatting. Full copy & paste support, keyboard navigation and range selection for productivity workflows.

Modern Integration

Works seamlessly with React, Vue, Angular, Svelte and Vanilla JavaScript. Includes complete TypeScript definitions for strongly-typed development.

Flexible Data Handling

Input and output in XML, JSON, XLSX or CSV. TreeGrid communicates with any server and supports background data loading and synchronization.

Export & Print

Export full datasets to XLSX, HTML, CSV and PDF with custom styling. Print-ready layouts include automatic splitting and multi-page scaling.

Advanced Features

Grouping, pivoting, filtering, sorting and aggregation. Nested and master & detail grids, rich conditional formatting and tree-based hierarchies.

Features and Advantages

Comprehensive capabilities for enterprise-level data management

Cell Types

Many cell types and their features

Cell types: text, HTML, number, date, checkbox, combo box, image, link, etc.
Editable link and image types.
Radio button cells and their dependencies.
More side icons and buttons in cells.
Switch and popup buttons types.
Upload file cell type.

Calculations & formatting

Cell formats and Excel-like and JavaScript formulas

Full Excel-style editable formula engine with 200+ functions.
Expression-based calculations and custom formulas.
Full JavaScript formulas and calculations in data.
Advanced formatting based on type and format strings.
Conditional formatting with custom rules and conditions.

Advanced Layout

Special grid structure features

Sticky cell text remains visible during horizontal scrolling.
Cell spanning across rows, columns or both directions.
Nested grids - embed another grid inside a cell.
Built-in master & detail grids.
Row, column and cell state colors and indicators.
RTL (right-to-left) display for Middle Eastern languages.
Side and horizontal pagers for navigating large datasets.
Cell hint to show the overflowed cell value in-place.
Synchronized layouts between multiple grids on the same page.

Layout Operations

Rows & columns manipulation

Add, copy and delete rows and columns.
Resize, move and hide row and columns.
Freeze rows and columns on all sides.
Drag rows or columns between grids.
Resize row and column sections and the entire grid.
Span cells dynamically for layout flexibility.
Multiple selection modes: row, column, cell and range.
Copy & paste rows, columns and cell ranges.
Full undo & redo support.

Cell Editing

Excel-like editing and navigation

In-cell editing with Excel-like keyboard navigation.
Single-cell or range cursor.
Auto-complete with suggestions and rules.
Advanced validation via custom rules or regex.
Input masks with regular expressions.
Multi-line editing in text areas
Rich text editing with full formatting and styling.
Permanent edit mode for always-on editing scenarios

Advanced Editing

Extra editing features

Auto-fill and smart fill-down operations.
Copy & paste cells and ranges from and to Excel and other spreadsheets.
Calendar picker for date cells.
Dates dialog for selecting ranges and repeating dates.
Inserting images floating above cells like in Excel.
Manipulating and changing images by mouse dragging.
Entering individual tags visually separated and highlighted.

Tree & Hierarchical Data

Multi-level structures and pivot tables

Unlimited tree hierarchy for rows and columns.
Expand & collapse with keyboard shortcuts.
Dynamic multi level pivot tables with drag & drop configuration.
Editable pivot cells with automatic or custom aggregation
Flexible grouping with automatic or custom aggregation
Tree filtering and search capabilities for hierarchical datasets.

Filtering & Analysis

Advanced filtering, sorting and data analysis

Excel-style auto-filter with checkbox lists.
Expression filtering with custom operators
Global Google-like full-text search.
Custom filter functions and predicates.
Multi-column sorting with custom comparators.
Aggregation functions (sum, average, count, ...).
Statistical analysis and data summaries.

Export & Integration

Export capabilities and framework support

Export to XLSX, CSV, PDF with customizable styling.
Print-ready layouts with multi-page splitting and scaling.
HTML export with full formatting preservation.
Synchronize changes via AJAX, form submits or custom API.
Works with React, Vue, Angular, Svelte and Vanilla JavaScript.
Full TypeScript definitions and IntelliSense support.
Comprehensive API and event system.
Can be used without writing custom JavaScript.
Cross-browser compatibility (Chrome, Firefox, Safari, Edge).
Salesforce LWC & CSP compatibility.

Customization & Theming

Flexible styling and customization

Full theming support with JSON customization.
Built-in themes and custom theme creation.
Responsive design with mobile and touch support.
Customizable toolbar and context menu options.
Customizable cell styling and formatting.
Custom cell renderers and editors.
Styling individual cells by CSS class or HTML prefix / suffix.
Localized to 14 languages, including all texts and date and number formats.
Fully customizable key and mouse navigation action schemes.
Gantt and bar charts available via GanttChart module.

TreeGrid Advantages to FastGrid

TreeGrid features not supported by FastGrid

Nested grids - another grid embedded in a cell.
Built-in master & detail grids.
Search in cells by user expression.
XML data format support.
RTL (right-to-left) display for Middle Eastern languages.
Side and horizontal pagers for navigating large datasets.
Styling individual cells by CSS class or HTML prefix / suffix.
Synchronized layouts across multiple grids on page.
Automatic updates and synchronization with the server.
Cell IDs for automated testing.
Entering individual tags visually marked and separated.
Switch and popup button cell types.
Editable link and image cell types.
Upload file cell type.
Radio button cell type.
Dates dialog for selecting ranges and repeating dates.
Cell hint to show the overflowed cell value in-place.
Gantt and bar charts available via GanttChart module.

Technical Specifications

Supported Browsers

Logo ChromeChrome
Logo EdgeEdge
Logo SafariSafari
Logo FirefoxFirefox
Logo Android WebViewAndroid
Logo Samsung InternetSamsung
Logo OperaOpera

And all Gecko and WebKit / Chromium / Blink engine clones

JavaScript Frameworks

The TreeGrid package includes examples and documentation for use with JavaScript frameworks:

ReactJavaScript / TypeScript
AngularTypeScript
VueJavaScript / TypeScript
SvelteJavaScript / TypeScript
EmberJavaScript / TypeScript
ExpressJavaScript
SalesForce LWCJavaScript
OtherHTML, JavaScript

The package can be used in any other client-side framework that supports third-party JavaScript code.

Server-Side Support

The TreeGrid package includes examples and predefined server script code:

NodeJS (JavaScript)
ASP.NET (C#, Visual Basic)
JSP (Java)
PHP
HTML (other)

TreeGrid can integrate with any backend returning XML or JSON.

TreeGrid Live Example

Articles about TreeGrid

Real-world use cases, architecture notes and tips from teams shipping high-performance data grids.

Buyer Guide · Data Grids

JavaScript Data Grid Buyer's Guide

Choosing a JavaScript data grid is a product decision, not only a frontend decision. The grid will influence application performance, user productivity.

Read article
July 202511 min readEnterpriseJavaScript

Enterprise Guide · Requirements

Enterprise Data Grid Requirements Checklist

An enterprise data grid is not a simple table with sorting. It is a critical application component that must support performance, usability, security.

Read article
July 20259 min readEnterpriseChecklist

Security Guide · JavaScript Components

CSP-Compatible JavaScript Components Guide

Content Security Policy, usually called CSP, is an important security mechanism for modern web applications. It helps control which scripts and resources.

Read article
July 20259 min readSecurityCSP

Data Grids · Web Development

What is a JavaScript Data Grid?

Learn what a JavaScript data grid is, how it differs from a basic HTML table and why enterprise applications rely on grids for editing, filtering and large datasets.

Read article
June 20256 min readData GridJavaScript

Data Grids · HTML Tables

Data Grid vs HTML Table: what is the difference?

Understand when a basic HTML table is enough and when an interactive JavaScript data grid becomes the better choice for editing, performance and enterprise workflows.

Read article
June 20256 min readData GridHTML

Frameworks · Integration

Which JavaScript frameworks do data grids support?

Modern data grids need to fit real frontend stacks. Here is how framework support works across React, Angular, Vue, Svelte and Vanilla JavaScript.

Read article
June 20256 min readFrameworksJavaScript

UX Patterns · Performance

Pagination vs Virtual Scrolling: when to use each

Pagination and virtual scrolling both handle large datasets, but they create very different user experiences. Learn which pattern fits each workflow.

Read article
June 20256 min readUXPerformance

Tree Grid · Hierarchical Data

What is a Tree Grid?

A tree grid combines hierarchy with columns, making it useful for product categories, project tasks, permissions, financial accounts and nested enterprise data.

Read article
June 20256 min readTreeGridHierarchy

Product Comparison · Data Grids

Which TreeGrid Component Should You Choose?

TreeGrid offers several JavaScript components for enterprise data applications. They share the same focus on complex browser-based data work, but they are.

Read article
June 20253 min readComparisonTreeGrid

Product Comparison · Data Grids

FastGrid vs TreeGrid: Which JavaScript Grid Should You Choose?

FastGrid and TreeGrid are both JavaScript grid components from the TreeGrid product family, but they are designed for different priorities. The most.

Read article
June 20253 min readComparisonData Grid

Product Comparison · Web Spreadsheets

TreeGrid vs SpreadSheet: Hierarchical Grid or Excel-Compatible Spreadsheet?

TreeGrid and SpreadSheet are related products, but they are designed for different user expectations. TreeGrid is a JavaScript data grid and tree grid.

Read article
June 20253 min readComparisonSpreadsheet

Tree Grid · Complex Data · Enterprise UI

10 things to watch out for when implementing a JavaScript Tree Grid for complex data

Hierarchies, master-detail views, validation, editing and exports can quickly become complex. The key is keeping the data model clear and the UI understandable.

Read article
June 202510 min readTreeGridEnterprise

Data Grids · Enterprise · JavaScript

The grid that grows with your data: TreeGrid in real-world projects

Nested grids, pivot tables, master-detail layouts and 200+ formula functions. How teams tame complex data.

Read article
June 20258 min readEnterpriseJavaScript

Frequently Asked Questions

Everything you need to know about TreeGrid

What is TreeGrid and what problems does it solve?

TreeGrid is an enterprise JavaScript grid component for displaying and editing complex tabular and hierarchical data in the browser. It addresses scenarios where standard HTML tables or simpler grids fall short: deep tree structures, pivot analysis, master-detail layouts, nested grids, and extensive inline editing workflows.

What cell types does TreeGrid support?

TreeGrid supports text, HTML, number, date, checkbox, combo box, image, link, radio button, file upload, switch and popup button cell types. Editable link and image types are included, along with side icons, additional in-cell buttons, and cell hints that show overflowed content in place.

What formula and calculation capabilities are available?

TreeGrid includes a full Excel-style editable formula engine with 200+ functions, JavaScript-based formulas and calculations, expression-based custom formulas, advanced formatting using type and format strings, and conditional formatting with custom rules. Formulas have access to the full grid API.

How does TreeGrid handle hierarchical and grouped data?

TreeGrid supports unlimited tree hierarchy for rows and columns with keyboard expand/collapse, dynamic multi-level pivot tables with drag-and-drop configuration, editable pivot cells with automatic or custom aggregation, flexible grouping with custom aggregation functions, and tree-aware filtering and search across hierarchical datasets.

What advanced layout features are available?

TreeGrid offers sticky cell text that stays visible during horizontal scrolling, cell spanning across rows, columns, or both, nested grids embedded inside a cell, built-in master-detail grids, synchronized layouts across multiple grids on the same page, RTL display for Middle Eastern languages, side and horizontal pagers, and row, column, and cell state colors and indicators.

What makes TreeGrid's editing experience stand out?

TreeGrid provides Excel-like in-cell editing with keyboard navigation, auto-complete with suggestions and regex-based rules, advanced input validation, input masks, multi-line and rich text editing, permanent edit mode for always-on scenarios, auto-fill and smart fill-down, copy and paste to/from Excel, calendar and date range pickers, image insertion and manipulation, tag entry, and full undo/redo.

What filtering and analysis tools are built in?

TreeGrid includes Excel-style auto-filter with checkbox lists, expression-based filtering with custom operators, Google-like full-text search, custom filter functions and predicates, multi-column sorting with custom comparators, aggregation functions (sum, average, count, and more), and statistical analysis with data summaries.

What data formats does TreeGrid support for input and output?

TreeGrid works with XML, JSON, XLSX, and CSV for both import and export. It can communicate with any backend via AJAX, form submits, or a custom API, and supports background data loading and automatic synchronization with the server.

What features does TreeGrid have that FastGrid does not?

TreeGrid includes nested and master-detail grids, search by user expression, XML data format, RTL display, side and horizontal pagers, cell styling via CSS class or HTML prefix/suffix, synchronized layouts across multiple grids, automatic server synchronization, cell IDs for automated testing, tag entry cells, switch and popup button cell types, editable link and image types, file upload cells, radio button cells, dates dialog, cell hints, and Gantt/bar chart support via the GanttChart module.

How is TreeGrid customized visually?

TreeGrid supports full JSON-based theming with built-in and custom themes, responsive design with mobile and touch support, custom cell renderers and editors, per-cell styling via CSS class or HTML prefix/suffix, configurable toolbar and context menus, and localization to 14 languages including date and number formats. Key and mouse navigation schemes are fully customizable.

Which frameworks and browsers are supported?

TreeGrid supports React, Vue, Angular, Svelte, Ember, Express, and Salesforce LWC in JavaScript and TypeScript, with full TypeScript definitions included. It runs in Chrome, Edge, Safari, Firefox, Opera, Android WebView, and Samsung Internet.

Build powerful data grids with TreeGrid

TreeGrid is the most comprehensive JavaScript grid component available.