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

Pivoting Overview

Summarize complex data relationships through pivoting and aggregation to reveal patterns and trends.

Pivots create dynamic columns from the unique cell values in a column. You can then apply aggregation measures to a value column to summarize data for each pivot column.

Pivot Reference Implementation

The demo below shows a complete, working pivoting example that you can use as a reference implementation. The remaining guides in the pivoting section focus on specific parts of the pivot configuration that LyteNyte Grid offers.

Complete Pivot Implementation

Column Pivots
Age Group
Gender
Country
State
Product
Category
Sub-Category
Row Pivots
Country
Age Group
Gender
State
Product
Category
Sub-Category
Measures
Profit
Quantity
Price
Cost
Revenue
Fork code on stack blitzFork code on code sandbox

The remainder of this section explains how to enable basic pivots and provides the foundational knowledge required to understand the other guides in the pivoting section.

Pivot Mode

LyteNyte Grid does not maintain pivot state internally. It renders only the props provided, delegating pivot state management to the client row data source. To implement pivoting:

  • Set the pivotMode property to true on the client data source.
  • Provide a pivotModel value.
  • Call the usePivotProps hook on the client data source and pass the returned props to the grid.

The code below shows the minimum configuration required.

function PivotGrid() {
  const ds = useClientDataSource<Spec>({
    pivotMode: true,
    pivotModel: {},
  });


  const pivotProps = ds.usePivotProps();


  return <Grid {...pivotProps} />;
}

Use the toggle below to enable pivot mode. The grid automatically pivots the Age Group values, groups rows by Country, and measures total Profit.

Basic Pivoting

Fork code on stack blitzFork code on code sandbox

Rows are grouped by Country. Since pivoting presents data in a strictly aggregated state, these groups cannot be expanded to reveal individual sub-rows.

The code below shows the demo’s pivot configuration. The grid uses the measures definition as a template for pivot-generated columns. In this example, Profit provides the base column definition for the generated pivot columns, and a header override ensures the new columns display the corresponding Age Group values.

const ds = useClientDataSource<GridSpec>({
  data: salesData,
  pivotMode: pivotMode,
  pivotModel: {
    columns: [{ id: "ageGroup" }],
    rows: [{ id: "country" }],
    measures: [
      {
        dim: {
          ...columns.find((x) => x.id === "profit")!,
          headerRenderer: AgeGroupPivotHeader,
          width: 120,
        },
        fn: "sum",
      },
    ],
  },
});

Client Source Pivot Model

The pivotModel property of the useClientDataSource hook defines how LyteNyte Grid renders pivoted rows. The interface is shown below.

interface PivotModel<Spec extends GridSpec = GridSpec> {
  readonly columns?: (Column<Spec> | PivotField<Spec>)[];
  readonly rows?: (Column<Spec> | PivotField<Spec>)[];
  readonly measures?: { dim: Column<Spec>; fn: Aggregator<Spec["data"]> | string }[];


  readonly sort?: SortFn<Spec["data"]>;
  readonly filter?: (HavingFilterFn | null)[];
  readonly rowLabelFilter?: (LabelFilter | null)[];
  readonly colLabelFilter?: (LabelFilter | null)[];
}

All properties in the pivot model are optional. The columns, rows, and measures properties determine the structure of the pivot view. Their behavior is as follows:

  • If you provide no values for columns, rows, or measures, the pivot view will be blank.
  • If columns contains one or more entries, LyteNyte Grid uses the cell values from those columns to generate dynamic pivot columns.
  • If rows contains one or more entries, LyteNyte Grid groups the measure output by the specified rows.
  • If measures is provided, LyteNyte Grid aggregates grid rows using the defined measures. Measure behavior depends on which other properties are present:
    1. If only measures are provided, LyteNyte Grid creates one column per measure and aggregates across all rows, producing a single totals row.
    2. If measures and columns are provided, LyteNyte Grid aggregates measures for each dynamically generated pivot column.
    3. If measures and rows are provided, LyteNyte Grid aggregates measures for each row group.
    4. If measures, rows, and columns are all provided, LyteNyte Grid aggregates measures for each row group, split across the dynamically generated pivot columns.

Next Steps