);
};
const root = createRoot(document.getElementById("root")!);
root.render(
,
);
```
[Live example: Calculated Columns](https://www.ag-grid.com/examples/calculated-columns/calculated-columns/reactFunctionalTs)
Register [Cell Data Types](https://www.ag-grid.com/react-data-grid/cell-data-types/) to give users formatting options to pick from when they create a column. The example above provides a `currency` type — see [dataTypes](#datatypes).
Calculated expressions do not need a leading equals sign (`=`). The value inside brackets must match a column `colId`, which defaults to the `field` when no explicit `colId` is provided.
Calculated Columns are supported with all row models. Same-row bracket references are reliable everywhere. Cross-row and range references depend on the referenced rows being loaded in the current row model.
For Server-Side, Infinite and Viewport Row Models, sorting and filtering are datasource or server responsibilities. The grid displays calculated values for loaded rows, but does not client-sort or client-filter remote datasets by calculated results.
Calculated columns are always read-only. They cannot be edited through cell editing, paste, fill handle or delete operations.
## Row Groups and Tree Data
Calculated columns are full columns, so [Row Grouping](https://www.ag-grid.com/react-data-grid/grouping/), [Tree Data](https://www.ag-grid.com/react-data-grid/tree-data/), [Sorting](https://www.ag-grid.com/react-data-grid/row-sorting/) and [Filtering](https://www.ag-grid.com/react-data-grid/filtering/), [Text Formatting](https://www.ag-grid.com/react-data-grid/value-formatters/) and [Cell Components](https://www.ag-grid.com/react-data-grid/component-cell-renderer/) apply to them the same way as any other column.
A calculated column evaluates on rows that have their own data: leaf rows, and Tree Data parents that carry data. It stays blank on rows without data — row group rows, group footers, the grand-total row, and Tree Data filler nodes.
To show a value on group rows, give the calculated column an `aggFunc`. Each leaf evaluates the expression, and the group aggregates those per-leaf results with the chosen function — the same as a column with a `valueGetter`. For example `{ calculatedExpression: '[revenue] - [cost]', aggFunc: 'sum' }` shows the total of its rows' profits on a group. A ratio has no meaningful aggregation, so a column like `[profit] / [revenue]` is left without an `aggFunc` and stays blank on group rows.
Under [Pivoting](https://www.ag-grid.com/react-data-grid/pivoting/), a calculated column with an `aggFunc` is a value column: it evaluates per leaf and its results aggregate into the pivot result columns, the same as a column with a `valueGetter`. Without an `aggFunc` it is not a value column, so it has no pivot result column and is absent from the cross-tab, like any other non-value column.
A calculated column can also be a pivot column (`pivot: true`): its per-row result becomes the pivot key, so the grid creates a result column for each distinct calculated value — the same as pivoting on a column with a `valueGetter`.
#### Row Groups with Calculated Columns
```tsx
"use client";
import React, {
useCallback,
useMemo,
useRef,
useState,
StrictMode,
} from "react";
import { createRoot } from "react-dom/client";
import { AgGridReact, AgGridProvider } from "ag-grid-react";
import {
AutoGroupColumnDef,
CalculatedColumnsGridOption,
ClientSideRowModelModule,
ColDef,
ColGroupDef,
DataTypeDefinitions,
GridOptions,
ModuleRegistry,
NumberFilterModule,
ValueFormatterLiteParams,
enableDevValidations,
} from "ag-grid-community";
import {
CalculatedColumnsModule,
ColumnMenuModule,
RowGroupingModule,
} from "ag-grid-enterprise";
import { SalesRow } from "./interfaces";
if (process.env.NODE_ENV !== "production") {
enableDevValidations();
}
const modules = [
ClientSideRowModelModule,
CalculatedColumnsModule,
ColumnMenuModule,
RowGroupingModule,
NumberFilterModule,
];
const formatter = (
params: ValueFormatterLiteParams,
format: (value: number) => string,
): string => {
const { value } = params;
if (value == null) {
return "";
}
if (String(value).startsWith("#")) {
return String(value);
}
return format(value);
};
const currencyFormatter = (
params: ValueFormatterLiteParams,
) => formatter(params, (value) => `$${value.toLocaleString()}`);
const percentageFormatter = (
params: ValueFormatterLiteParams,
) => formatter(params, (value) => `${Math.round(value * 100)}%`);
const GridExample = () => {
const containerStyle = useMemo(() => ({ width: "100%", height: "100%" }), []);
const gridStyle = useMemo(() => ({ height: "100%", width: "100%" }), []);
const [rowData, setRowData] = useState([
{
productType: "Solar",
product: "Solar panel kit",
revenue: 142000,
cost: 96000,
},
{
productType: "Solar",
product: "Smart thermostat",
revenue: 78000,
cost: 52000,
},
{
productType: "Charging",
product: "Battery pack",
revenue: 126000,
cost: 101000,
},
{
productType: "Charging",
product: "EV charger",
revenue: 92000,
cost: 61000,
},
{
productType: "Heating",
product: "Heat pump",
revenue: 168000,
cost: 119000,
},
{
productType: "Heating",
product: "Hybrid boiler",
revenue: 156000,
cost: 117000,
},
{
productType: "Heating",
product: "Heat recovery unit",
revenue: 124000,
cost: 88000,
},
{
productType: "Storage",
product: "Storage cabinet",
revenue: 71000,
cost: 52000,
},
{
productType: "Storage",
product: "Lithium rack",
revenue: 143000,
cost: 112000,
},
{
productType: "Storage",
product: "Flow battery",
revenue: 187000,
cost: 149000,
},
{
productType: "Storage",
product: "Backup generator",
revenue: 173000,
cost: 131000,
},
{
productType: "Wind",
product: "Wind turbine kit",
revenue: 232000,
cost: 171000,
},
{
productType: "Wind",
product: "Micro turbine",
revenue: 76000,
cost: 49000,
},
{
productType: "Wind",
product: "Tower mount",
revenue: 41000,
cost: 26000,
},
{
productType: "Monitoring",
product: "Energy monitor",
revenue: 47000,
cost: 29000,
},
{
productType: "Monitoring",
product: "Smart meter",
revenue: 39000,
cost: 24000,
},
{
productType: "Monitoring",
product: "Grid analyser",
revenue: 58000,
cost: 36000,
},
{
productType: "Efficiency",
product: "Insulation pack",
revenue: 44000,
cost: 27000,
},
{
productType: "Efficiency",
product: "LED retrofit",
revenue: 36000,
cost: 21000,
},
{
productType: "Efficiency",
product: "Window film",
revenue: 28000,
cost: 16000,
},
]);
const [columnDefs, setColumnDefs] = useState([
{ field: "productType", rowGroup: true, hide: true },
{ field: "product", flex: 1.4 },
{
field: "revenue",
aggFunc: "sum",
cellDataType: "currency",
},
{
field: "cost",
aggFunc: "sum",
cellDataType: "currency",
},
{
colId: "profit",
headerName: "Profit",
calculatedExpression: "[revenue] - [cost]",
// aggFunc lets the calculated column aggregate its per-leaf results onto group rows.
aggFunc: "sum",
cellDataType: "currency",
filter: "agNumberColumnFilter",
},
{
colId: "margin",
headerName: "Margin",
// No aggFunc: a ratio does not aggregate, so margin evaluates on leaf rows and is blank on groups.
calculatedExpression: "[profit] / [revenue]",
cellDataType: "percentage",
},
]);
const dataTypeDefinitions = useMemo(() => {
return {
currency: {
baseDataType: "number",
extendsDataType: "number",
valueFormatter: currencyFormatter,
},
percentage: {
baseDataType: "number",
extendsDataType: "number",
valueFormatter: percentageFormatter,
},
};
}, []);
const calculatedColumns = useMemo(() => {
return {
dataTypes: ["currency", "percentage", "number", "text", "boolean"],
};
}, []);
const defaultColDef = useMemo(() => {
return {
flex: 1,
minWidth: 130,
};
}, []);
const autoGroupColumnDef = useMemo(() => {
return {
headerName: "Product Type",
minWidth: 180,
};
}, []);
return (