DHTMLX Pivot — JavaScript Pivot Table (GPL Edition)

@dhtmlx/pivot is a JavaScript pivot table component for summarizing and analyzing large datasets with a drag-and-drop configuration panel, 15+ aggregation methods, interactive filtering and sorting, tree mode, frozen columns, and export to Excel and CSV.

It is a standalone widget that works with plain JavaScript and integrates with React, Angular, Vue, and Svelte.

It is ideal for prototyping data analysis dashboards, embedding pivot reporting in open-source applications, and evaluating DHTMLX Pivot's core features under the GPL v2 license.

License

This edition of DHTMLX Pivot 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 Pivot.

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 Pivot 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 Pivot
• Download 30-day trial versions of all DHTMLX components
• Contact us regarding licensing: info@dhtmlx.com

Copyright © 2026 XB Software Ltd.

What is DHTMLX Pivot

DHTMLX Pivot is a JavaScript pivot table component for summarizing and analyzing large datasets directly in the browser. It renders a two-panel UI: a drag-and-drop configuration panel where users define rows, columns, values, and filters, and a high-performance data table that updates instantly as the configuration changes. Developers can define the initial pivot structure via API, apply aggregation methods (sum, count, min, max, avg, median, and more), freeze row columns, enable tree mode for hierarchical row grouping, and export results to Excel or CSV.

DHTMLX Pivot is a standalone component. It is distributed and licensed separately, and does not require Suite as a dependency. It can be integrated alongside Suite widgets such as DHTMLX Grid for combined tabular and pivot views.

Use this GPL edition when you want to prototype pivot reporting, integrate data analysis into an open-source project, or evaluate DHTMLX Pivot's features before obtaining a commercial license.

Quick Start

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

Install

npm install @dhtmlx/pivot

Include in your project

import { Pivot } from "@dhtmlx/pivot";
import "@dhtmlx/pivot/dist/pivot.css";

Or with script tags pointing to local dist files:

<script type="text/javascript" src="./dist/pivot.js"></script>
<link rel="stylesheet" href="./dist/pivot.css" />

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

Initialize

import { Pivot } from "@dhtmlx/pivot";
import "@dhtmlx/pivot/dist/pivot.css";

const fields = [
    { id: "continent", label: "Continent", type: "text" },
    { id: "year", label: "Year", type: "number" },
    { id: "oil", label: "Oil", type: "number" },
    { id: "gdp", label: "GDP", type: "number" },
];

const data = [
    { continent: "South America", year: 2015, oil: 1.545, gdp: 181.357 },
    { continent: "Europe", year: 2015, oil: 3.21, gdp: 412.5 },
    // more rows...
];

const table = new Pivot("#pivot_container", {
    fields,
    data,
    config: {
        rows: ["continent"],
        columns: ["year"],
        values: [
            { field: "oil", method: "sum" },
            { field: "gdp", method: "max" },
        ],
    },
});

Add a container element to your HTML:

<div id="pivot_container" style="width: 100%; height: 600px;"></div>

See a live demo

Basic Usage — DHTMLX Pivot

Initialize DHTMLX Pivot with tree mode, frozen row columns, and programmatic filters:

import { Pivot } from "@dhtmlx/pivot";
import "@dhtmlx/pivot/dist/pivot.css";

const table = new Pivot("#pivot_container", {
    fields,
    data,
    tableShape: {
        tree: true, // enable hierarchical collapsible rows
        split: { left: true }, // freeze row-label columns on the left
    },
    columnShape: {
        sort: true, // enable click-to-sort on column headers
    },
    config: {
        rows: ["continent", "form"],
        columns: ["year"],
        values: [
            { field: "oil", method: "sum" },
            { field: "gdp", method: "max" },
        ],
        filters: {
            continent: { includes: ["Europe", "Asia"] },
        },
    },
});

In tree mode, the first field in the rows array becomes the parent level and subsequent fields become nested children – rows are collapsible in the UI. The split: { left: true } option freezes all row-label columns so they remain visible while scrolling the data columns horizontally. Filters defined in the config.filters object are applied on initialization and can be changed programmatically via setConfig().

DHTMLX Pivot Features

DHTMLX Pivot includes the following features in the GPL edition.

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

Framework Integration

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

• React integration guide
• Angular integration guide
• Vue.js integration guide
• Svelte integration 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 Pivot features.
• Support forum – community Q&A and discussions for DHTMLX Pivot.