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.
Permanent edit mode.
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

Build powerful data grids with TreeGrid

TreeGrid is the most comprehensive JavaScript grid component available.