LyteNyte Grid logo for light mode. Links back to the documentation home page.
Github repository for this project. 1771 Technologies home page
Pivoting

Row & Column Pivots

Configure pivot row and column fields in the client data source to create specific views of your data.

Note

To focus on row and column configuration, all demos in this guide use a single measure column: sum of Profit. For measure configuration, see the Measures guide.

All demos also use the Pill Manager to manage pivot configuration. This component is optional; you can substitute any UI that fits your application.

Pivot Columns

Set the columns property on the pivotModel of the client data source to configure which columns are used to dynamically generate pivot columns. The values in the columns property are used to create the pivot column definitions.

The demo below lets you select pivot columns. Try different column combinations to see how pivoting behaves.

Column Pivots

Column Pivots
Age Group
Gender
Country
State
Product
Category
Sub-Category
Fork code on stack blitzFork code on code sandbox

Each pivot you add deepens the column hierarchy, and the number of generated columns can grow exponentially. LyteNyte Grid imposes no limits on the number of pivots you can apply, so your application should limit this based on your data requirements.

Without pivot rows, LyteNyte Grid aggregates all rows into a single totals row. See the Pivot Rows section of this guide to add pivot rows.

Pivot Column Group Expansions

Defining multiple pivot columns creates a column group hierarchy. Since the grid generates these dynamically, they are not explicitly defined in your application state.

The client data source manages column group expansion state internally. You can collapse column groups using the grid’s api.columnToggleGroup method.

The demo below shows this behavior. The grid is pivoted on Age Group and Gender. A custom header group renderer allows column groups to be collapsed. Notice that the Total columns remain visible even when the group is collapsed.

Pivot Column Groups

Fork code on stack blitzFork code on code sandbox

Pivot Column Updates

The client data source dynamically generates pivot columns and manages their column state. This lets you move and resize these generated pivot columns as shown in the demo below.

Update Pivot Columns

Fork code on stack blitzFork code on code sandbox

Pivot Column Modification

LyteNyte Grid dynamically creates pivot columns based on the provided column configuration. Set the pivotColumnProcessor property on the useClientDataSource hook to modify these columns before they are rendered.

Using pivotColumnProcessor, you can modify dynamically created columns in any way that suits your application. You can reorder or remove columns, or change any column property.

The demo below uses pivotColumnProcessor to remove the Total columns created by the column pivots.

Modifying Pivot Columns

Fork code on stack blitzFork code on code sandbox

The code for the pivot column processor is shown below. The processor returns a new array of columns based on the columns generated by the grid.

const ds = useClientDataSource<GridSpec>({
  data: salesData,
  pivotMode: true,
  pivotColumnProcessor: (columns) => {
    return columns.filter((x) => !x.id.includes("total"));
  },
  pivotModel: {
    columns: [{ id: "ageGroup" }, { id: "customerGender" }],
    measures: [
      {
        dim: { id: "profit", name: "Profit", type: "number", cellRenderer: ProfitCell, width: 120 },
        fn: "sum",
      },
    ],
  },
  aggregateFns: { sum: aggSum },
});

Pivot Rows

Add pivot row groups to extend the pivot view by another dimension. Set the rows property on the pivotModel to group rows before measurement. Note that, unlike standard row grouping, the final level of a pivot row group represents an aggregated result and cannot be expanded.

The demo below shows pivot rows. Each pivot row adds a grouping level. Since pivoting rotates data dimensions, row and column definitions are interchangeable. Click the Swap button to invert the current configuration.

Row Pivots

Column Pivots
Age Group
Gender
Country
State
Product
Category
Sub-Category
Row Pivots
Country
Age Group
Gender
State
Product
Category
Sub-Category
Fork code on stack blitzFork code on code sandbox

The demo uses the Pill Manager component to configure pivots. React state stores the pivot configuration and updates it when pills are clicked or dragged. The updated pivot state is then mapped to the client data source, as shown in the code below.

const [colPivots, setColPivots] = useState<PillManager.T.PillItem[]>(initialPivots);
const [rowPivots, setRowPivots] = useState<PillManager.T.PillItem[]>(initialColPivots);


const ds = useClientDataSource<GridSpec>({
  data: salesData,
  pivotMode: true,
  pivotModel: {
    columns: colPivots.filter((x) => x.active),
    rows: rowPivots.filter((x) => x.active),
    measures: [
      {
        dim: { id: "profit", name: "Profit", type: "number", cellRenderer: ProfitCell, width: 120 },
        fn: "sum",
      },
    ],
  },
  aggregateFns: { sum: aggSum },
});

Next Steps

  • Measures: Aggregate and summarize row data when pivoting.
  • Pivot Filters: Filter pivots by labels or predicate conditions.
  • Grand Totals: Display a grand total across all pivot measures.