> Documentation index: https://www.gooddata.ai/docs/gooddata-ui/llms.txt lists every page of these docs as Markdown.

# Pivot table

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

API reference: [PivotTableNext()](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-pivot/sdk-ui-pivot.pivottablenext/index.md) (function), [IPivotTableNextProps](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-pivot/sdk-ui-pivot.ipivottablenextprops/index.md) (interface)

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`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-pivot/sdk-ui-pivot.pivottablenext/index.md), the pivot table component built on AG Grid Enterprise. It replaces the original [`PivotTable`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-pivot/sdk-ui-pivot.pivottable/index.md) component.

> **Note:**
> In the next major version, [`PivotTableNext`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-pivot/sdk-ui-pivot.pivottablenext/index.md) replaces the legacy [`PivotTable`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-pivot/sdk-ui-pivot.pivottable/index.md) component, and the `Next` suffixes are dropped from the component and type names.

## [Buckets](https://www.gooddata.ai/docs/gooddata-ui/latest/visualisations/pivot-table/#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](#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](#totals). |
| `filters` | No | Filters | Limits the data the table shows. |

## [Sorting](https://www.gooddata.ai/docs/gooddata-ui/latest/visualisations/pivot-table/#sorting)

To sort the table, pass sort items in the `sortBy` prop. See [Sort items](https://www.gooddata.ai/docs/gooddata-ui/latest/data-layer/execution/execution-model/index.md#sort-items).

```tsx
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](https://www.gooddata.ai/docs/gooddata-ui/latest/visualisations/pivot-table/#configuration)

Pass these options in the `config` prop:

```tsx
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](https://www.gooddata.ai/docs/gooddata-ui/latest/visualisations/pivot-table/#ag-grid-enterprise-license)

[`PivotTableNext`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-pivot/sdk-ui-pivot.pivottablenext/index.md) 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:

    ```tsx
    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`:

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

### [Table transposition](https://www.gooddata.ai/docs/gooddata-ui/latest/visualisations/pivot-table/#table-transposition)

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

```tsx
<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:

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

### [Text wrapping](https://www.gooddata.ai/docs/gooddata-ui/latest/visualisations/pivot-table/#text-wrapping)

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

```tsx
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](https://www.gooddata.ai/docs/gooddata-ui/latest/visualisations/pivot-table/#column-width)

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

```tsx
<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):

```tsx
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](https://www.gooddata.ai/docs/gooddata-ui/latest/visualisations/pivot-table/#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:

```tsx
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](https://www.gooddata.ai/docs/gooddata-ui/latest/data-layer/execution/table-totals/index.md) for the total types.

## [Migrate from PivotTable](https://www.gooddata.ai/docs/gooddata-ui/latest/visualisations/pivot-table/#migrate-from-pivottable)

To move from the original [`PivotTable`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-pivot/sdk-ui-pivot.pivottable/index.md) to [`PivotTableNext`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-pivot/sdk-ui-pivot.pivottablenext/index.md):

1. Import [`PivotTableNext`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-pivot/sdk-ui-pivot.pivottablenext/index.md) instead of [`PivotTable`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-pivot/sdk-ui-pivot.pivottable/index.md). 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`.
2. Keep importing `main.css`. It includes the styles for both components.
3. Optionally, provide an AG Grid license through `AgGridTokenProvider` or `config.agGridToken` to remove the watermark.
4. Review your configuration. The options are backward compatible and extended.
5. Test the table. [`PivotTableNext`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-pivot/sdk-ui-pivot.pivottablenext/index.md) uses different CSS class names, and some behavior can differ in details.

## [Structure](https://www.gooddata.ai/docs/gooddata-ui/latest/visualisations/pivot-table/#structure)

```tsx
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](https://www.gooddata.ai/docs/gooddata-ui/latest/visualisations/pivot-table/#example)

```tsx
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:

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

## [Props](https://www.gooddata.ai/docs/gooddata-ui/latest/visualisations/pivot-table/#props)

| Prop | Type | Required | Description | Inherited from |
|------|------|----------|-------------|----------------|
| [`backend`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-pivot/sdk-ui-pivot.ipivottablenextprops/index.md#ipivottablenextpropsbackend) | [`IAnalyticalBackend`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-backend-spi/sdk-backend-spi.ianalyticalbackend/index.md) | No | Backend to use for the pivot table. | — |
| [`columns`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-pivot/sdk-ui-pivot.ipivottablenextprops/index.md#ipivottablenextpropscolumns) | [`AttributesOrPlaceholders`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.attributesorplaceholders/index.md) | No | Columns to display in the pivot table. | — |
| [`config`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-pivot/sdk-ui-pivot.ipivottablenextprops/index.md#ipivottablenextpropsconfig) | [`PivotTableNextConfig`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-pivot/sdk-ui-pivot.pivottablenextconfig/index.md) | No | Configuration for the pivot table. | — |
| [`drillableItems`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-pivot/sdk-ui-pivot.ipivottablenextprops/index.md#ipivottablenextpropsdrillableitems) | [`ExplicitDrill`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.explicitdrill/index.md)`[]` | No | Configure drillability; e.g. which parts of the visualization can be interacted with. | — |
| [`execConfig`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-pivot/sdk-ui-pivot.ipivottablenextprops/index.md#ipivottablenextpropsexecconfig) | [`IExecutionConfig`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-model/sdk-model.iexecutionconfig/index.md) | No | Execution configuration to apply when computing data for the table. | — |
| [`filters`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-pivot/sdk-ui-pivot.ipivottablenextprops/index.md#ipivottablenextpropsfilters) | [`NullableFiltersOrPlaceholders`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.nullablefiltersorplaceholders/index.md) | No | Filters to apply to the pivot table. | — |
| [`measures`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-pivot/sdk-ui-pivot.ipivottablenextprops/index.md#ipivottablenextpropsmeasures) | [`AttributesMeasuresOrPlaceholders`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.attributesmeasuresorplaceholders/index.md) | No | Measures to display in the pivot table. | — |
| [`onColumnResized`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-pivot/sdk-ui-pivot.ipivottablenextprops/index.md#ipivottablenextpropsoncolumnresized) | [`ColumnResizedCallback`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-pivot/sdk-ui-pivot.columnresizedcallbacknext/index.md) | No | Specify function to call when user manually resizes a table column. | — |
| [`pageSize`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-pivot/sdk-ui-pivot.ipivottablenextprops/index.md#ipivottablenextpropspagesize) | `number` | No | Customize size of page when fetching data from backend. | — |
| [`placeholdersResolutionContext`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-pivot/sdk-ui-pivot.ipivottablenextprops/index.md#ipivottablenextpropsplaceholdersresolutioncontext) | `any` | No | Optional resolution context for composed placeholders. | — |
| [`rows`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-pivot/sdk-ui-pivot.ipivottablenextprops/index.md#ipivottablenextpropsrows) | [`AttributesOrPlaceholders`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.attributesorplaceholders/index.md) | No | Rows to display in the pivot table. | — |
| [`sortBy`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-pivot/sdk-ui-pivot.ipivottablenextprops/index.md#ipivottablenextpropssortby) | [`SortsOrPlaceholders`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.sortsorplaceholders/index.md) | No | Sort by to apply to the pivot table. | — |
| [`totals`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-pivot/sdk-ui-pivot.ipivottablenextprops/index.md#ipivottablenextpropstotals) | [`TotalsOrPlaceholders`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.totalsorplaceholders/index.md) | No | Totals to display in the pivot table. | — |
| [`workspace`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-pivot/sdk-ui-pivot.ipivottablenextprops/index.md#ipivottablenextpropsworkspace) | `string` | No | Workspace to use for the pivot table. | — |
| [`ErrorComponent`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.ivisualizationprops/index.md#ivisualizationpropserrorcomponent) | `ComponentType<`[`IErrorProps`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.ierrorprops/index.md)`>` | 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`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.ivisualizationprops/index.md) |
| [`exportTitle`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.ivisualizationprops/index.md#ivisualizationpropsexporttitle) | `string` | No | Set title to use for exported files. | [`IVisualizationProps`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.ivisualizationprops/index.md) |
| [`LoadingComponent`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.ivisualizationprops/index.md#ivisualizationpropsloadingcomponent) | `ComponentType<`[`ILoadingProps`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.iloadingprops/index.md)`>` | No | React component to display while loading data from the backend. | [`IVisualizationProps`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.ivisualizationprops/index.md) |
| [`locale`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.ivisualizationprops/index.md#ivisualizationpropslocale) | `string` | No | Set Locale for visualization localization. | [`IVisualizationProps`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.ivisualizationprops/index.md) |
| [`onDataView`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.ivisualizationcallbacks/index.md#ivisualizationcallbacksondataview) | [`OnDataView`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.ondataview/index.md) | No | _(Alpha)_ Called when the visualization loads a DataView, i.e. it receives data from the backend. | [`IVisualizationCallbacks`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.ivisualizationcallbacks/index.md) |
| [`onDrill`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.ivisualizationcallbacks/index.md#ivisualizationcallbacksondrill) | [`OnFiredDrillEvent`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.onfireddrillevent/index.md) | No | Called when user triggers a drill on a visualization. | [`IVisualizationCallbacks`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.ivisualizationcallbacks/index.md) |
| [`onError`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.ivisualizationcallbacks/index.md#ivisualizationcallbacksonerror) | [`OnError`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.onerror/index.md) | No | Called when an error occurs while loading data for the visualization. | [`IVisualizationCallbacks`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.ivisualizationcallbacks/index.md) |
| [`onExportReady`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.ivisualizationcallbacks/index.md#ivisualizationcallbacksonexportready) | [`OnExportReady`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.onexportready/index.md) | No | Called when the visualization is ready to be exported. | [`IVisualizationCallbacks`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.ivisualizationcallbacks/index.md) |
| [`onLoadingChanged`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.ivisualizationcallbacks/index.md#ivisualizationcallbacksonloadingchanged) | [`OnLoadingChanged`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.onloadingchanged/index.md) | No | Called when loading status of the visualization changes - vis starts or stops loading | [`IVisualizationCallbacks`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.ivisualizationcallbacks/index.md) |