Pivot Table Plugin

The Pivot plugin transforms flat data into a pivot table view.

Installation

import '@toolbox-web/grid/features/pivot';

Basic Usage

Vanilla JS

import '@toolbox-web/grid';
import '@toolbox-web/grid/features/pivot';
import { queryGrid } from '@toolbox-web/grid';

const grid = queryGrid('tbw-grid');
grid.gridConfig = {
  columns: [
    { field: 'region', header: 'Region' },
    { field: 'product', header: 'Product' },
    { field: 'quarter', header: 'Quarter' },
    { field: 'sales', header: 'Sales', type: 'number' },
  ],
  features: {
    pivot: {
      rowGroupFields: ['region', 'product'],
      columnGroupFields: ['quarter'],
      valueFields: [{ field: 'sales', aggFunc: 'sum', header: 'Total' }],
    },
  },
};
grid.rows = salesData;

React

import '@toolbox-web/grid-react/features/pivot';
import { DataGrid } from '@toolbox-web/grid-react';

function SalesPivot({ data }) {
  return (
    <DataGrid
      rows={data}
      columns={[
        { field: 'region', header: 'Region' },
        { field: 'product', header: 'Product' },
        { field: 'quarter', header: 'Quarter' },
        { field: 'sales', header: 'Sales', type: 'number' },
      ]}
      pivot={{
        rowGroupFields: ['region', 'product'],
        columnGroupFields: ['quarter'],
        valueFields: [{ field: 'sales', aggFunc: 'sum', header: 'Total' }],
      }}
      style={{ height: '400px' }}
    />
  );
}

Vue

<script setup>
import '@toolbox-web/grid-vue/features/pivot';
import { TbwGrid, TbwGridColumn } from '@toolbox-web/grid-vue';

const data = [
  { region: 'North', product: 'Widget', quarter: 'Q1', sales: 1000 },
  { region: 'North', product: 'Gadget', quarter: 'Q1', sales: 1500 },
  { region: 'South', product: 'Widget', quarter: 'Q2', sales: 1200 },
];

const pivotConfig = {
  rowGroupFields: ['region', 'product'],
  columnGroupFields: ['quarter'],
  valueFields: [{ field: 'sales', aggFunc: 'sum', header: 'Total' }],
};
</script>

<template>
  <TbwGrid :rows="data" :pivot="pivotConfig" style="height: 400px">
    <TbwGridColumn field="region" header="Region" />
    <TbwGridColumn field="product" header="Product" />
    <TbwGridColumn field="quarter" header="Quarter" />
    <TbwGridColumn field="sales" header="Sales" type="number" />
  </TbwGrid>
</template>

Angular

// Feature import - enables the [pivot] input
import '@toolbox-web/grid-angular/features/pivot';

import { Component } from '@angular/core';
import { Grid } from '@toolbox-web/grid-angular';
import type { ColumnConfig } from '@toolbox-web/grid';

@Component({
  selector: 'app-sales-pivot',
  imports: [Grid],
  template: `
    <tbw-grid
      [rows]="rows"
      [columns]="columns"
      [pivot]="pivotConfig"
      style="height: 400px; display: block;">
    </tbw-grid>
  `,
})
export class SalesPivotComponent {
  rows = [...]; // Your sales data

  columns: ColumnConfig[] = [
    { field: 'region', header: 'Region' },
    { field: 'product', header: 'Product' },
    { field: 'quarter', header: 'Quarter' },
    { field: 'sales', header: 'Sales', type: 'number' },
  ];

  pivotConfig = {
    rowGroupFields: ['region', 'product'],
    columnGroupFields: ['quarter'],
    valueFields: [{ field: 'sales', aggFunc: 'sum', header: 'Total' }],
  };
}

Demo

PIVOT

Active Whether pivot is active

Aggregation Aggregation function

sumavgcountminmax

Show totals Show row group totals

Show grand total Show grand total row

Show tool panel Show drag-and-drop tool panel

Default expanded Groups expanded by default

Indent width Indent per depth level (px)

20

Animation Expand/collapse animation

slidefadefalse

Show source

Use the controls to explore the full pivot configuration — toggle active state, totals, grand total, tool panel, default expansion, indent width, aggregation function, and animation style.

Configuration Options

See PivotConfig for the full list of options and defaults.

Aggregation Functions

sum, avg, count, min, max, first, last

Programmatic-Only Usage

To use pivot transformation without exposing the tool panel UI to users:

features: {
  pivot: {
    showToolPanel: false,
    rowGroupFields: ['region'],
    columnGroupFields: ['quarter'],
    valueFields: [{ field: 'sales', aggFunc: 'sum' }],
  },
},

The pivot API methods remain available for programmatic control.

Animation

The plugin supports animated expand/collapse transitions. Animation respects the grid-level animation.mode setting and can be customized per-plugin:

features: {
  pivot: {
    rowGroupFields: ['region'],
    valueFields: [{ field: 'sales', aggFunc: 'sum' }],
    animation: 'slide', // 'slide' | 'fade' | false
  },
},

Animation is automatically disabled when animation.mode is 'off' or when the user prefers reduced motion ('reduced-motion' mode with system preference).

Programmatic API

const plugin = grid.getPluginByName('pivot');

plugin.expand('North__Widget A');  // expand a specific group by key
plugin.collapse('North');           // collapse a group
plugin.expandAll();
plugin.collapseAll();

Styling

The pivot plugin supports CSS custom properties for theming. Override these on tbw-grid or a parent container:

CSS Custom Properties

Property	Default	Description
--tbw-pivot-group-bg	var(--tbw-color-row-alt)	Group row background
--tbw-pivot-group-hover	var(--tbw-color-row-hover)	Group row hover
--tbw-pivot-leaf-bg	var(--tbw-color-bg)	Leaf row background
--tbw-pivot-grand-total-bg	var(--tbw-color-header-bg)	Grand total row
--tbw-pivot-toggle-hover-bg	var(--tbw-color-row-hover)	Toggle button hover
--tbw-pivot-section-bg	var(--tbw-color-panel-bg)	Panel section background
--tbw-toggle-size	1.25em	Toggle button size
--tbw-animation-duration	200ms	Expand/collapse animation

Example

tbw-grid {
  /* Custom pivot styling */
  --tbw-pivot-group-bg: #fff3e0;
  --tbw-pivot-grand-total-bg: #ffcc80;
  --tbw-pivot-toggle-hover-bg: #ffe0b2;
}

CSS Classes

The pivot plugin uses these class names:

Class	Element
.pivot-group-row	Grouped summary row
.pivot-leaf-row	Detail/leaf row
.pivot-grand-total-row	Grand total row
.pivot-grand-total-footer	Sticky footer container
.pivot-toggle	Expand/collapse button
.pivot-label	Group name display
.tbw-pivot-slide-in	Row slide animation
.tbw-pivot-fade-in	Row fade animation

See Also

• Row Grouping — Simple row grouping
• Multi-Sort — Multi-column sorting
• Tree — Hierarchical tree data