DHTMLX Grid — JavaScript Data Grid (GPL Edition)

@dhtmlx/grid is a high-performance JavaScript data grid component for building interactive tables with sorting, filtering, inline editing, multi-line headers, and seamless handling of large datasets.

It is a framework-agnostic data table and grid library that works with plain JavaScript and integrates with React, Angular, Vue, and other SPAs.

It is ideal for prototyping, quickly evaluating DHTMLX Grid in open-source projects or internal environments, and exploring its core features under the GPL v2 license.

License

This edition of DHTMLX Grid is licensed under the GNU General Public License v2.0 (GPL v2).

You can redistribute this package and/or modify it under the terms of the GPL v2.

GPL v2 requires that any project using this package also be open source under a GPL-compatible license.

You may NOT use this package in closed-source, proprietary, or commercial applications without a separate commercial license. For commercial use, please obtain a commercial license of DHTMLX Grid (PRO edition).

This package is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GPL v2 for more details.

Using DHTMLX Grid in a commercial or closed-source project?

You need a commercial license. DHTMLX offers Individual, Commercial, Enterprise, and Ultimate license tiers.

• Compare licenses and pricing
• Download a free 30-day trial of DHTMLX Grid
• Download 30-day trial versions of all DHTMLX components
• Contact us regarding licensing: [email protected] The commercial edition also includes PRO-only features such as pagination, row grouping, multi-sorting, block selection, clipboard support, and a drag panel. See the features table below for PRO-only features marked accordingly.

Copyright © 2026 XB Software Ltd.

What is DHTMLX Grid

DHTMLX Grid is a JavaScript UI component and datagrid widget for displaying and editing tabular data. It supports fixed multi-line headers and footers, resizable and draggable columns, built-in column filtering, inline cell editing with multiple editor types, and TreeGrid mode for hierarchical data. The component provides a complete JavaScript API and event system for programmatic control.

This is the GPL (open source) edition of DHTMLX Grid, distributed as the @dhtmlx/grid npm package. It is part of the DHTMLX Suite family of UI components and can be used standalone or alongside other Suite widgets.

Use this GPL edition when you want to prototype with DHTMLX Grid, evaluate it in open-source projects or internal environments, or explore its core features before obtaining a commercial license.

Quick Start

Install the package, import the styles, and initialize the grid in a container element.

Install

npm install @dhtmlx/grid

Include in your project

import { Grid } from "@dhtmlx/grid";
import "@dhtmlx/grid/grid.css";

Or via CDN as part of DHTMLX Suite:

<link rel="stylesheet" href="https://cdn.dhtmlx.com/suite/edge/suite.css" />
<script type="text/javascript" src="https://cdn.dhtmlx.com/suite/edge/suite.js"></script>

Or with script tags:

<script src="path/to/grid.js"></script>
<link rel="stylesheet" href="path/to/grid.css">

The CSS import is required for default grid styling and layout.

Initialize

import { Grid } from "@dhtmlx/grid";
import "@dhtmlx/grid/grid.css";

const grid = new Grid("grid_container", {
    columns: [
        { id: "name", header: [{ text: "Employee" }], width: 200 },
        { id: "role", header: [{ text: "Role" }], width: 150 },
        { id: "city", header: [{ text: "City" }], width: 150 }
    ],
    data: [
        { id: "1", name: "Alice Johnson", role: "Engineer", city: "New York" },
        { id: "2", name: "Bob Smith", role: "Designer", city: "London" },
        { id: "3", name: "Carol Lee", role: "Manager", city: "Berlin" }
    ]
});

Add a container element to your HTML:

<div id="grid_container" style="height: 500px; width: 100%;"></div>

See a live demo

Basic Usage — DHTMLX Grid

Initialize DHTMLX Grid with inline editing enabled and a custom cell template:

import { Grid } from "@dhtmlx/grid";
import "@dhtmlx/grid/grid.css";

const grid = new Grid("grid_container", {
    columns: [
        {
            id: "name",
            header: [{ text: "Name" }, { content: "inputFilter" }],
            editable: true
        },
        {
            id: "revenue",
            header: [{ text: "Revenue" }],
            type: "number",
            template: val => val >= 0
                ? `<span style="color:green">$${val}</span>`
                : `<span style="color:red">-$${Math.abs(val)}</span>`,
            htmlEnable: true
        }
    ],
    editable: true,
    data: [
        { id: "1", name: "Acme Corp", revenue: 48000 },
        { id: "2", name: "Nova Ltd", revenue: -1200 }
    ],
    autoWidth: true,
});

The template function receives the cell value and returns an HTML string. Set htmlEnable: true on the column to render it. The inputFilter content in the header adds a live text filter to that column. Use template with htmlEnable: true to render conditional formatting, icons, or custom HTML content in cells.

DHTMLX Grid Features

DHTMLX Grid includes the following main features in the GPL edition, with additional PRO-only capabilities marked accordingly.

| Feature | Details | | --- | --- | | Fixed multi-line headers and footers | Pin headers/footers while scrolling; span multiple rows | | Sortable columns | Click-to-sort with custom sort logic support | | Frozen (fixed) columns and rows | Pin columns to the left or right; freeze top rows while scrolling | | Search and filtering | Built-in per-column input, select, and combobox filters | | Inline editing | Text, number, date, select, combobox, multiselect, and textarea editors | | Resizable columns | Drag column boundaries to resize | | Themes and high-contrast mode | Multiple built-in themes including high-contrast for accessibility | | Accessibility | WCAG-compliant; full keyboard navigation and screen reader support | | Cell templates | Custom HTML rendering per cell via template function | | Data export | Export to PDF, PNG, XLSX, and CSV | | Auto-width columns | Automatically distribute column widths to fill the grid | | Column auto-fit | Auto-fit column width to cell content | | Selection | Row, cell, and complex selection modes with multi-selection | | Summary and statistics | Built-in aggregation (sum, count, avg, min, max) in headers/footers | | Cell spanning | Merge cells across rows and columns | | Keyboard navigation | Full keyboard support out of the box | | Event system | Rich API events for all user interactions | | TreeGrid mode | PRO only – hierarchical data with collapsible rows | | Undo/Redo | PRO only – revert and reapply data edits | | Auto-height for rows | PRO only – rows auto-resize to fit content | | Footer position | PRO only – relative or fixed footer positioning | | Range selection | PRO only – select and manage cell ranges programmatically | | Row expander / sub-rows | PRO only – nested widgets or HTML inside expandable rows | | Pagination | PRO only – navigate large datasets page by page | | Row grouping | PRO only – group rows by column values with aggregation | | Block selection | PRO only – spreadsheet-like block selection with fill handle | | Clipboard support | PRO only – copy, cut, and paste cell data | | Column drag-and-drop | PRO only – reorder columns by dragging | | Drag panel | PRO only – visual panel for drag-and-drop row management | | Multi-sorting | PRO only – sort by multiple columns simultaneously | | Dynamic export configuration | PRO only – customize export settings (columns, formats, options) at runtime |

This table highlights key features. For the complete and up-to-date feature list, see the Grid features section in the DHTMLX Grid documentation.

Framework Integration

DHTMLX Grid works with popular front-end frameworks including React, Angular, and Vue. These integration guides apply to both the GPL edition and the commercial editions of DHTMLX Grid.

• React integration guide
• Angular integration guide
• Vue.js integration guide
• Node.js backend guide

Documentation and Resources

• Product page – overview, screenshots, and key features.
• Documentation – getting started, guides, and configuration options.
• API reference – full JavaScript API.
• Live demos and samples – interactive examples of DHTMLX Grid features.
• Support forum – community Q&A and discussions for DHTMLX Suite.