Pivot table

Display data in a flexible, multi-dimensional table with the PivotTableNext component.

A pivot table expands a regular (flat) table: you can reorganize and summarize the data beyond the usual row-column relationship.

This page documents PivotTableNext, the pivot table component built on AG Grid Enterprise. It replaces the original PivotTable component.

Note

In the next major version, PivotTableNext replaces the legacy PivotTable component, and the Next suffixes are dropped from the component and type names.

Buckets

Prop	Required	Takes	What it does
`measures`	No	One or more measures	Adds one column of values per measure. To show the measures in rows instead, see Table transposition.
`rows`	No	One or more attributes	Adds one row per attribute value combination.
`columns`	No	One or more attributes	Splits the measure columns by the attribute values.
`totals`	No	Totals	Adds aggregated rows. See Totals.
`filters`	No	Filters	Limits the data the table shows.

Sorting

To sort the table, pass sort items in the sortBy prop. See Sort items.

import "@gooddata/sdk-ui-pivot/styles/css/main.css";
import { PivotTableNext } from "@gooddata/sdk-ui-pivot/next";
import { newAttributeLocator, newMeasureSort } from "@gooddata/sdk-model";
import * as Md from "./catalog.js";

const sortBy = [
    newMeasureSort(Md.$FranchiseFees, "desc", [
        newAttributeLocator(Md.DateMonth.Short, "<january-element-value>"),
    ]),
];

<PivotTableNext
    measures={[Md.$FranchiseFees]}
    rows={[Md.LocationState]}
    columns={[Md.DateMonth.Short]}
    sortBy={sortBy}
/>;

The second argument of newAttributeLocator is the attribute element: on GoodData Cloud and GoodData.CN, its value (primary key).

Configuration

Pass these options in the config prop:

import "@gooddata/sdk-ui-pivot/styles/css/main.css";
import { PivotTableNext, newWidthForAttributeColumn } from "@gooddata/sdk-ui-pivot/next";
import * as Md from "./catalog.js";

const config = {
    maxHeight: 800,
    menu: {
        aggregations: true,
        aggregationsSubMenu: true,
    },
    separators: {
        thousand: ",",
        decimal: ".",
    },
    columnSizing: {
        defaultWidth: "autoresizeAll",
        columnWidths: [newWidthForAttributeColumn(Md.Date, 100)],
    },
    textWrapping: {
        wrapText: true,
    },
};

<PivotTableNext
    measures={[Md.$FranchiseFees]}
    rows={[Md.LocationState]}
    columns={[Md.DateMonth.Short]}
    config={config}
/>;

Cell selection lets you select and copy cell content. It is on by default; set config.enableCellSelection to false to turn it off.

AG Grid Enterprise license

PivotTableNext uses AG Grid Enterprise. A license is optional, but without one the table shows an AG Grid watermark. For production, provide your license in one of two ways:

Wrap your application in AgGridTokenProvider and pass the license in its token prop:

import { AgGridTokenProvider } from "@gooddata/sdk-ui-pivot/next";

<AgGridTokenProvider token="<ag-grid-license-key>">
    <YourApp />
</AgGridTokenProvider>;

Pass the license in the component’s config.agGridToken:

<PivotTableNext
    measures={[Md.$FranchiseFees]}
    rows={[Md.LocationState]}
    config={{ agGridToken: "<ag-grid-license-key>" }}
/>

Table transposition

By default, measures are rendered in columns. To display measures in rows, set config.measureGroupDimension to "rows":

<PivotTableNext
    measures={[Md.$FranchiseFees]}
    rows={[Md.LocationState]}
    columns={[Md.DateDatasets.Date.MonthYear.Short]}
    config={{
        measureGroupDimension: "rows",
    }}
/>

When the table has measures in rows and no row attributes, config.columnHeadersPosition: "left" places the column headers on the left:

<PivotTableNext
    measures={[Md.$FranchiseFees]}
    columns={[Md.LocationState]}
    config={{
        measureGroupDimension: "rows",
        columnHeadersPosition: "left",
    }}
/>

Text wrapping

wrapText and wrapHeaderText apply to all columns. columnOverrides changes the setting for the columns matched by its locators:

import { PivotTableNext, newAttributeColumnLocator } from "@gooddata/sdk-ui-pivot/next";

<PivotTableNext
    measures={[Md.$FranchiseFees]}
    rows={[Md.LocationState]}
    config={{
        textWrapping: {
            wrapText: true,
            wrapHeaderText: true,
            columnOverrides: [
                {
                    locators: [newAttributeColumnLocator(Md.LocationState)],
                    wrapText: false,
                },
            ],
        },
    }}
/>

Column width

To size every column to its content, set config.columnSizing.defaultWidth to "autoresizeAll":

<PivotTableNext
    measures={[Md.$FranchiseFees]}
    rows={[Md.LocationState]}
    config={{ columnSizing: { defaultWidth: "autoresizeAll" } }}
/>

To set the width of specific columns, list them in config.columnSizing.columnWidths. The attribute element in newAttributeColumnLocator is the element value (primary key):

import {
    newAttributeColumnLocator,
    newWidthForAttributeColumn,
    setNewWidthForSelectedColumns,
} from "@gooddata/sdk-ui-pivot/next";

const config = {
    columnSizing: {
        columnWidths: [
            newWidthForAttributeColumn(Md.Date, 100),
            setNewWidthForSelectedColumns(
                Md.$FranchiseFees,
                [newAttributeColumnLocator(Md.DateMonth.Short, "<january-element-value>")],
                200,
            ),
        ],
    },
};

Totals

Pass totals in the totals prop, or enable the column menu so that users add totals themselves. Build each total with newTotal from @gooddata/sdk-model; it takes the aggregation type, the measure, and the attribute to aggregate by:

import { newTotal } from "@gooddata/sdk-model";

<PivotTableNext
    measures={[Md.$FranchiseFees]}
    rows={[Md.LocationState]}
    totals={[newTotal("sum", Md.$FranchiseFees, Md.LocationState)]}
    config={{
        menu: {
            aggregations: true,
            aggregationsSubMenu: true,
        },
    }}
/>

See Table totals for the total types.

Migrate from PivotTable

To move from the original PivotTable to PivotTableNext:

Import PivotTableNext instead of PivotTable. The component is exported from both @gooddata/sdk-ui-pivot and the @gooddata/sdk-ui-pivot/next entry point. AgGridTokenProvider comes from @gooddata/sdk-ui-pivot/next.
Keep importing main.css. It includes the styles for both components.
Optionally, provide an AG Grid license through AgGridTokenProvider or config.agGridToken to remove the watermark.
Review your configuration. The options are backward compatible and extended.
Test the table. PivotTableNext uses different CSS class names, and some behavior can differ in details.

Structure

import "@gooddata/sdk-ui-pivot/styles/css/main.css";
import { PivotTableNext } from "@gooddata/sdk-ui-pivot/next";

<PivotTableNext
    measures={<measures>}
    rows={<rows>}
    columns={<columns>}
    …
/>

Example

import "@gooddata/sdk-ui-pivot/styles/css/main.css";
import { PivotTableNext } from "@gooddata/sdk-ui-pivot/next";
import * as Md from "./catalog.js";

const style = { height: 300 };

<div style={style}>
    <PivotTableNext measures={[Md.$FranchiseFees]} rows={[Md.LocationState]} columns={[Md.DateMonth.Short]} />
</div>;

Leave out columns to render a regular (flat) table:

<div style={style}>
    <PivotTableNext measures={[Md.$FranchiseFees]} rows={[Md.LocationState]} />
</div>

Props

Prop	Type	Required	Description	Inherited from
`backend`	`IAnalyticalBackend`	No	Backend to use for the pivot table.	—
`columns`	`AttributesOrPlaceholders`	No	Columns to display in the pivot table.	—
`config`	`PivotTableNextConfig`	No	Configuration for the pivot table.	—
`drillableItems`	`ExplicitDrill[]`	No	Configure drillability; e.g. which parts of the visualization can be interacted with.	—
`execConfig`	`IExecutionConfig`	No	Execution configuration to apply when computing data for the table.	—
`filters`	`NullableFiltersOrPlaceholders`	No	Filters to apply to the pivot table.	—
`measures`	`AttributesMeasuresOrPlaceholders`	No	Measures to display in the pivot table.	—
`onColumnResized`	`ColumnResizedCallback`	No	Specify function to call when user manually resizes a table column.	—
`pageSize`	`number`	No	Customize size of page when fetching data from backend.	—
`placeholdersResolutionContext`	`any`	No	Optional resolution context for composed placeholders.	—
`rows`	`AttributesOrPlaceholders`	No	Rows to display in the pivot table.	—
`sortBy`	`SortsOrPlaceholders`	No	Sort by to apply to the pivot table.	—
`totals`	`TotalsOrPlaceholders`	No	Totals to display in the pivot table.	—
`workspace`	`string`	No	Workspace to use for the pivot table.	—
`ErrorComponent`	`ComponentType<IErrorProps>`	No	React component to display in the event when there is an error with either obtaining the data from backend or with the data itself.	`IVisualizationProps`
`exportTitle`	`string`	No	Set title to use for exported files.	`IVisualizationProps`
`LoadingComponent`	`ComponentType<ILoadingProps>`	No	React component to display while loading data from the backend.	`IVisualizationProps`
`locale`	`string`	No	Set Locale for visualization localization.	`IVisualizationProps`
`onDataView`	`OnDataView`	No	(Alpha) Called when the visualization loads a DataView, i.e. it receives data from the backend.	`IVisualizationCallbacks`
`onDrill`	`OnFiredDrillEvent`	No	Called when user triggers a drill on a visualization.	`IVisualizationCallbacks`
`onError`	`OnError`	No	Called when an error occurs while loading data for the visualization.	`IVisualizationCallbacks`
`onExportReady`	`OnExportReady`	No	Called when the visualization is ready to be exported.	`IVisualizationCallbacks`
`onLoadingChanged`	`OnLoadingChanged`	No	Called when loading status of the visualization changes - vis starts or stops loading	`IVisualizationCallbacks`