Skip to content
RevoGrid [Pro]

JavaScript Pivot Table

Pivot Table empowers users with the ability to transform multidimensional data into insightful visualizations.

Source code
src/components/pivot/Pivot.ts
import { defineCustomElements } from '@revolist/revogrid/loader';
defineCustomElements();


import { PivotPlugin, AdvanceFilterPlugin } from '@revolist/revogrid-pro';
import NumberColumnType from '@revolist/revogrid-column-numeral';
import { ECOMMERCE_PIVOT } from '../sys-data/ecommerce.pivot';
import type { DataType } from '@revolist/revogrid';


export function load(parentSelector: string, rows: DataType[]) {
  const grid = document.createElement('revo-grid');


  // Set grid properties
  grid.range = true;
  grid.resize = true;
  grid.filter = true;
  grid.colSize = 200;
  grid.readonly = true;
  grid.theme = 'compact';


  // Set the data source
  grid.source = rows;


  // Define column types
  grid.columnTypes = {
    integer: new NumberColumnType(),
    currency: new NumberColumnType('$0,0.00'),
  };


  // Define plugins
  grid.plugins = [PivotPlugin, AdvanceFilterPlugin];


  // Set additional data
  grid.additionalData = {
    pivot: {
      ...ECOMMERCE_PIVOT,
    },
  };


  // Append the grid to the specified parent element
  document.querySelector(parentSelector)?.appendChild(grid);
}

With a wide range of configuration options, it allows dynamic handling of data fields across rows, columns, and summary areas, all tailored to fit specific business needs.

Below is a pivot table element map. It may be helpful as you begin learning the capabilities of the Pivot Table component.

Pivot Grid

Perfect for applications requiring complex data analysis, this plugin ensures flexibility and control while maintaining high performance.

Pivot Table Features

Key Features

  • Dynamic Pivoting: Easily switch between a standard grid and pivot mode for flexible data analysis.
  • Custom Aggregation: Apply built-in or custom aggregation functions to summarize data effectively.
  • Interactive Field Management: Drag and drop dimensions, rows, columns, and values with the configurator.
  • Custom Cell Rendering: Use custom renderers for displaying more interactive data, such as progress bars or star ratings.
  • i18n Support: Seamlessly integrate with different languages using built-in i18n configurations.
  • Real-time Sorting and Filtering: Enable users to filter and sort data dynamically for enhanced decision-making.

This is a concise example demonstrating the integration and configuration of the Pivot Table plugin, including the setup of dimensions, rows, columns, and value aggregators.

import { PivotPlugin, commonAggregators, type PivotConfig } from '@revolist/revogrid-pro';
// Add PivotPlugin
grid.plugins = [PivotPlugin];
// Define the pivot configuration
const pivot: PivotConfig = {
  dimensions: [
      { prop: 'city' },
      { prop: 'age' },
      {
        prop: 'dateOfBirth',
        // Optional: Define aggregators
        aggregators: { count: commonAggregators.count },
      },
    ],
    // Optional: Define rows
    rows: ['age'],
    // Optional: Define columns
    columns: ['city'],
    values: [{ prop: 'dateOfBirth', aggregator: 'count' }],
};
// Add the pivot configuration to the additionalData
grid.additionalData = { pivot };

Dimensions

Dimensions are the fields or properties that define the structure of the pivot grid, providing the basis for organizing and aggregating data across rows, columns, and values. Dimensions allow users to segment data by categories or attributes, such as Age, City, or Gender, which can be placed in the respective areas (rows, columns) of the pivot grid.

Pivot Dimensions

Each dimension can have its own specific configuration, including filters, sorting options, custom aggregators, and display formatting. You can drag and drop dimensions into the appropriate areas to define the structure of the pivot grid in Configurator.

Additionally, dimensions may include options like hierarchical structures (for nested data), making it easy to drill down into more granular levels. By defining the dimensions, users gain control over how data is displayed and analyzed in the pivot grid, enabling more effective and tailored reporting.

Technically, dimensions are instances of ColumnRegular, which means they are regular columns that can be used in the grid. You can configure them just like any other column: set name, template, size, and more.

import { PivotPlugin, commonAggregators, type PivotConfig } from '@revolist/revogrid-pro';
//...
{
    dimensions: [{
        prop: 'Total Spend',
        sortable: true,
        columnType: 'currency',
        filter: ['number'],
        cellProperties: ({ value }) => ({
          class: {
            highlight: value > 20000,
            'align-right': true,
          },
        }),
        aggregators: {
          sum: commonAggregators.sum,
          avg: commonAggregators.avg,
          min: commonAggregators.min,
          max: commonAggregators.max,
        },
    }]
}
//...

Pivot Columns

The pivot columns are generated based on the unique combinations of row, column, and value headers. Each column represents a specific combination of values, and the values within each column are aggregated based on the value header.

Pivot Columns

Pivot Table also supports hierarchical structures, allowing for expanded and collapsed rows.

Summary Values

The Pivot supports summary values, calculated based on aggregations like sum, average, count, minimum, maximum, medium, etc. Also you can define your own summary values. These summary values are customizable with different formats and text displays to fit your business requirements.

Pivot Summary

Flexible Sorting and Filtering

The plugin includes powerful sorting and filtering capabilities, allowing users to dynamically adjust their view of the data. Sorting can be applied to individual fields, while filtering enables more granular control over the displayed data.

Pivot Sorting and Filtering

Configuration Management

The Configurator component allows users to easily manage and organize fields within the pivot grid. Users can drag and drop fields into different areas such as rows, columns, or values, enabling fast customizations. Dimensions can also be hidden or restricted to certain areas for a more controlled user experience.

Customizable Pivot Configurations

The PivotConfig provides an easy way to define the layout of rows, columns, and value fields. The dimensions are fully customizable, allowing users to apply different aggregators and filters to control data representation.

Example configuration:

const defaultPivotConfig = (): PivotConfig => ({
    // Define the dimensions to choose from
    dimensions: [
      {
          prop: 'Age',
          columnType: 'integer',
          filter: ['number'],
          size: 100,
          sortable: true,
          aggregators: {
              sum: commonAggregators.sum,
              avg: commonAggregators.avg,
          },
      },
      { prop: 'City' },
      { prop: 'Total Spend' },
    ],
    // Define the rows
    rows: ['Age'],
    // Define the columns
    columns: ['City'],
    // Define the values: aggregations for your columns
    values: [
    {
        prop: 'Total Spend',
        aggregator: 'sum',
    },
  ],
});

Demo

Pivot Table Demo