Skip to main content

DHTMLX Pivot. Initialization example

Demo of basic DHTMLX Pivot initialization. Create a pivot table instance with field definitions, a dataset, and configuration for rows, columns, and multiple aggregation methods in just a few lines of code.

Live example​

new pivot.Pivot("#pivot", {
    fields,
    data: dataset,
    config: {
        rows: [
            "studio"
        ],
        columns: [
            "type"
        ],
        values: [
            {
                field: "score",
                method: "max"
            },
            {
                field: "episodes",
                method: "count"
            },
            {
                field: "rank",
                method: "min"
            },
            {
                field: "members",
                method: "sum"
            },
        ]
    }
});

<!-- component container -->
<div id="pivot" style="width: 100%; height: 100%;"></div>

<!-- dataset -->

<script>
const dataset = [
      {
        "rank": 1,
        "title": "Shingeki no Kyojin: The Final Season - Kanketsu-hen",
        "popularity": 609,
        "genre": "Action",
        "studio": "MAPPA",
        "type": "Special",
        "episodes": 2,
        "duration": 61,
        "members": 347875,
        "score": 9.17
      },
      {
        "rank": 2,
        "title": "Fullmetal Alchemist: Brotherhood",
        "popularity": 3,
        "genre": "Action",
        "studio": "Bones",
        "type": "TV",
        "episodes": 64,
        "duration": 24,
        "members": 3109951,
        "score": 9.11
      },
      // ... 246 more items (see Live Editor for full data)
    ]; 

    const fields = [
      {
        "id": "rank",
        "label": "Rank",
        "type": "number"
      },
      {
        "id": "title",
        "label": "Title",
        "type": "text"
      },
      {
        "id": "popularity",
        "label": "Popularity",
        "type": "number"
      },
      {
        "id": "genre",
        "label": "Genre",
        "type": "text"
      },
      {
        "id": "studio",
        "label": "Studio",
        "type": "text"
      },
      {
        "id": "type",
        "label": "Type",
        "type": "text"
      },
      {
        "id": "episodes",
        "label": "Episodes",
        "type": "number"
      },
      {
        "id": "duration",
        "label": "Duration",
        "type": "number"
      },
      {
        "id": "members",
        "label": "Members",
        "type": "number"
      },
      {
        "id": "score",
        "label": "Score",
        "type": "number"
      }
    ];
</script>

Setting up a pivot table from scratch requires defining how raw data should be grouped and aggregated. Developers need a clear, minimal API to specify which fields serve as row labels, which as column headers, and which values to aggregate - without writing complex data transformation logic.

DHTMLX Pivot provides a straightforward constructor that accepts a container selector and a configuration object. The fields array describes the available data columns and their types. The config object specifies rows (grouping fields), columns (header fields), and values (aggregated metrics with their methods). The widget handles all data processing, grouping, and rendering automatically.

This example initializes a pivot on an anime dataset grouped by studio (rows) and type (columns). Four value aggregations are configured: maximum score, episode count, minimum rank, and total members. The configuration panel is visible, allowing users to interactively rearrange fields.

Solution overview​

To initialize DHTMLX Pivot, create a new pivot.Pivot instance by passing a container selector and a configuration object with fields, data, and config properties. The config object defines which fields appear as rows, columns, and values with their aggregation methods.

Key points​

  • Minimal constructor: Pass a CSS selector for the container element and a configuration object - DHTMLX Pivot handles all internal data processing and rendering
  • Field definitions: The fields array describes each data column with its type and label, enabling the configuration panel to display user-friendly names and proper controls
  • Flexible aggregation: Combine multiple aggregation methods in the values array - each entry specifies a field and a method (max, min, sum, count, average, and more)
  • Interactive configuration: The built-in configuration panel lets users drag and drop fields between rows, columns, and values at runtime without code changes

API reference​

Additional resources​