DHTMLX Grid — JavaScript Data Grid (GPL Edition)

npm · License: GPL v2 · made by DHTMLX

@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: info@dhtmlx.com 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.

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.

npm short description: DHTMLX Grid — JavaScript data grid / data table with sorting, filtering, inline editing, TreeGrid, and large dataset support — GPL v2 open source edition.