Server-Side Row Model - Pivoting

Summary

Pivoting is available in AdapTable when using the Server-Side Row Model
The data needs to be pivoted on the server and passed to the client to display
Pivot result columns are created dynamically from the server response

AdapTable fully supports Pivoting when using the Server Side Row Model.

Nothing additional needs to be added, on the AdapTable side, to that which is provided in AG Grid's Server-Side architecture.

Note

After each getRows response you typically build AG Grid pivot result columns from the fields the server returns (see pivotResultColumns.ts in the demo).

SSRM - Pivoting

Fork Fork

Uses the public athletes mock server (data.adaptable.dev) to pivot on the server and return rows + pivotFields
Switch Layouts in the Dashboard toolbar to compare patterns:
- Year Pivot — group by Country, pivot on Year, sum Gold (dynamic year columns)
- Multi-Value Pivot — same pivot with Gold / Silver / Bronze under each year group
- Multi-Group Pivot — group by Country then Sport, pivot on Year (expand a country to drill down)
- Agg-Only Pivot — Pivot Sum style: group by Country, sum medals, no PivotColumns (empty array)
Pivot result columns are rebuilt whenever the server returns a new pivotFields set

import {AdaptableOptions} from '@adaptabletools/adaptable';

export const adaptableOptions: AdaptableOptions = {
  primaryKey: 'id',
  adaptableId: 'SSRM - Pivoting',
  initialState: {
    Dashboard: {
      Tabs: [
        {
          Name: 'Main',
          Toolbars: ['Layout', 'SystemStatus'],
        },
      ],
    },
    Theme: {
      CurrentTheme: 'dark',
    },
    Layout: {
      CurrentLayout: 'Year Pivot',
      Layouts: [
        // Classic SSRM pivot: group → pivot → one aggregation (dynamic year columns)
        {
          Name: 'Year Pivot',
          PivotColumns: ['year'],
          PivotGroupedColumns: ['country'],
          PivotAggregationColumns: [
            {
              ColumnId: 'gold',
              AggFunc: 'sum',
            },
          ],
        },
        // Same pivot, multiple value columns → year groups with gold/silver/bronze children
        {
          Name: 'Multi-Value Pivot',
          PivotColumns: ['year'],
          PivotGroupedColumns: ['country'],
          PivotAggregationColumns: [
            {ColumnId: 'gold', AggFunc: 'sum'},
            {ColumnId: 'silver', AggFunc: 'sum'},
            {ColumnId: 'bronze', AggFunc: 'sum'},
          ],
        },
        // Drill-down row groups + year pivot (expand a country to see sports)
        {
          Name: 'Multi-Group Pivot',
          PivotColumns: ['year'],
          PivotGroupedColumns: ['country', 'sport'],
          RowGroupDisplayType: 'multi',
          PivotAggregationColumns: [
            {
              ColumnId: 'gold',
              AggFunc: 'sum',
            },
          ],
        },
        // Pivot Sum style: group + aggregations, no pivot columns (empty PivotColumns).
        // Equivalent of handbook "Pivot Sum Layout" — values show as Gold/Silver/Bronze.
        {
          Name: 'Agg-Only Pivot',
          PivotColumns: [],
          PivotGroupedColumns: ['country'],
          SuppressAggFuncInHeader: true,
          PivotAggregationColumns: [
            {ColumnId: 'gold', AggFunc: 'sum'},
            {ColumnId: 'silver', AggFunc: 'sum'},
            {ColumnId: 'bronze', AggFunc: 'sum'},
          ],
          ColumnSizing: {
            gold: {Width: 100},
            silver: {Width: 100},
            bronze: {Width: 100},
          },
        },
      ],
    },
  },
};

Read-only

Loading demo…

PreviousSorting NextRow Grouping