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

Measures

Configure measures to aggregate values across pivot rows and columns.

To create a measure, define a custom function that receives an array of leaf rows and a field value, then returns a summarized result. The return value can be any type, but it’s typically numeric.

Note

This guide assumes familiarity with row aggregations. See the Client Row Aggregations guide for details.

Defining Measures

Define a measure by setting the measure property on the pivot model. LyteNyte Grid uses a measure for two purposes:

  1. Aggregate row data based on the row pivot and column pivot dimensions.
  2. If the measure dimension is a column, use it as a reference for the columns created from the pivot configuration.

The demo below shows a measure that sums Profit. Rows are pivoted by Country and columns by Age Group, creating a profit breakdown per country and age demographic.

Sum of Profit Measure

Fork code on stack blitzFork code on code sandbox

The code below shows how to apply the measure. This demo uses a predefined measure function called "sum", but you can also provide a function inline if that better suits your application’s use case.

const aggSum: Grid.T.Aggregator<GridSpec["data"]> = (field, data) => {
  const values = data.map((x) => computeField<number>(field, x));
  return sum(values);
};


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

Configuring Multiple Measures

You can apply multiple measures to the pivot configuration by providing additional dimensions. The order of measures does not affect aggregation behavior, but it does influence the initial column order when pivots are applied.

The demo below demonstrates multiple measures in action. You can also update the measure function by clicking the function name in the pill and selecting a different measure for that column.

Multiple Measures

Measures
Revenue
Profit
Price
Cost
Quantity
Fork code on stack blitzFork code on code sandbox

Be aware that measures multiply your column count. If a pivot generates 20 columns, two measures produce 40 columns, and three produce 60.

Multiple Measures Per Column

You can measure the same column multiple times to apply different measure functions.

The demo below measures Profit with both sum and avg. The grid treats each measure as distinct, even when both reference the same column.

Column Multiple Measures

Fork code on stack blitzFork code on code sandbox

LyteNyte Grid identifies measures by id. When you apply multiple measures to the same column, you must provide a unique ID for each measure. The example below shows how to configure this:

const ds = useClientDataSource<GridSpec>({
  pivotModel: {
    columns: [{ id: "ageGroup" }],
    rows: [{ id: "country" }],
    measures: [
      {
        dim: {
          ...columns.find((x) => x.id === "profit")!,
          id: "Profit (sum)",
          field: "profit",
          name: "Profit (sum)",
          width: 100,
        },
        fn: "sum",
      },
      {
        dim: {
          ...columns.find((x) => x.id === "profit")!,
          id: "Profit (avg)",
          field: "profit",
          name: "Profit (avg)",
          width: 100,
        },
        fn: "avg",
      },
    ],
  },
  aggregateFns: { sum: aggSum, avg: aggAvg },
});

Next Steps