Column Pivoting

Column pivoting transforms values of a column into new columns in your grid. Set the columnPivotModel property on grid state to enable this feature. Pivoting alone doesn't provide much value — you must also specify a measure column to calculate values in your pivot. Use the measureModel property to define which columns to use as measure functions.

LyteNyte Grid creates unique state for pivot columns with their own sort and filter settings and ordering.

Your underlying data source must support column pivoting. Since pivots derive from row values, creating columns from these values depends on your data source. Both the Client Row Data Source and Server Row Data Source support column pivoting.

Pivoting

To start column pivoting:

1. Set the columnPivotModel property to an array of column id strings. You can only use columns marked as columnPivotable.

2. Configure the measureModel with at least one measure function. The measureModel is identical to the aggModel, so reading the aggregations guide will be useful.

3. Enable pivot mode by setting columnPivotModeIsOn to true in the grid state. This property toggles between normal mode and pivot mode.

"use client";
 
import {
  LyteNyteGrid,
  useLyteNytePro,
  useClientDataSource,
} from "@1771technologies/lytenyte-pro";
import "@1771technologies/lytenyte-pro/grid.css";
import { ColumnProReact } from "@1771technologies/lytenyte-pro/types";
import { bankDataSmall } from "@1771technologies/sample-data/bank-data-smaller";
import { useId } from "react";
 
const columns: ColumnProReact[] = [
  { id: "age", type: "number" },
  { id: "job", rowGroupable: true },
  { id: "balance", type: "number" },
  { id: "education", rowGroupable: true },
  { id: "marital", columnPivotable: true },
];
 
export function ColumnPivoting() {
  const ds = useClientDataSource({
    data: bankDataSmall,
  });
 
  const grid = useLyteNytePro({
    gridId: useId(),
    rowDataSource: ds,
    columns,
 
    columnPivotModeIsOn: true,
    columnPivotModel: ["marital"],
 
    measureModel: {
      balance: { fn: "sum" },
    },
  });
 
  return (
    <div>
      <div style={{ height: 500, display: "flex", flexDirection: "column" }}>
        <div style={{ flex: "1" }}>
          <LyteNyteGrid grid={grid} />
        </div>
      </div>
    </div>
  );
}

Pivots and Row Groups

LyteNyte Grid supports column pivots as a flattened view, where pivots break a measure into its constituent parts. Pivots and measures become most useful when combined with row groups. Simply set the rowGroupModel value on the grid state to enable this powerful combination.

"use client";
 
import {
  LyteNyteGrid,
  useLyteNytePro,
  useClientDataSource,
} from "@1771technologies/lytenyte-pro";
import "@1771technologies/lytenyte-pro/grid.css";
import { ColumnProReact } from "@1771technologies/lytenyte-pro/types";
import { bankDataSmall } from "@1771technologies/sample-data/bank-data-smaller";
import { useId } from "react";
 
const columns: ColumnProReact[] = [
  { id: "age", type: "number" },
  { id: "job", rowGroupable: true },
  { id: "balance", type: "number" },
  { id: "education", rowGroupable: true },
  { id: "marital", columnPivotable: true },
];
 
export function ColumnPivotingRowGroups() {
  const ds = useClientDataSource({
    data: bankDataSmall,
  });
 
  const grid = useLyteNytePro({
    gridId: useId(),
    rowDataSource: ds,
    columns,
    rowGroupModel: ["job", "education"],
 
    columnPivotModeIsOn: true,
    columnPivotModel: ["marital"],
 
    measureModel: {
      balance: { fn: "sum" },
    },
  });
 
  return (
    <div>
      <div style={{ height: 500, display: "flex", flexDirection: "column" }}>
        <div style={{ flex: "1" }}>
          <LyteNyteGrid grid={grid} />
        </div>
      </div>
    </div>
  );
}

Column Pivot Field

Use the columnPivotField property on a column to determine the pivot value from row data. This helps with client-side pivoting and provides hints to other data sources on how to pivot columns.

Column Pivots Programmatic Interface

Since most pivot column state is internal to the grid, LyteNyte Grid provides a comprehensive API for working with column pivots. Here are the key methods:

Sorting Column Pivots

Pivot columns use their own sort model, separate from normal columns. Access and modify this with:

• columnPivotSortModel: Retrieves the current pivot sort model
• columnPivotSetSortModel: Sets a new sort model for pivot columns

Standard sort API methods like columnSortCycleToNext are pivot-mode aware and work on pivot columns.

Filtering Column Pivots

Access and modify pivot column filters with:

• columnPivotFilterModel: Retrieves the current filter model for pivot columns
• columnPivotSetFilterModel: Sets a new filter model for pivot columns

Other Methods

These additional methods help with specific pivot operations:

• columnPivotsLoading: Returns true when pivot columns are loading asynchronously
• columnPivotsReload: Requests the grid to reload pivot columns from the data source
• columnPivotField: Returns the pivot key for a specific column and row
• columnPivotFieldFromData: Returns the pivot key for a specific column and data object
• columnPivotMeasureField: Returns the measure value for a specific column and data
• columnPivots: Returns all pivot columns
• columnIsPivot: Returns true if the specified column is a pivot column