React Data GridCalculated Columns

Calculated Columns let your end users add read-only values to the grid without storing those values in row data.

Enabling Calculated Columns Copy Link

Calculated columns are enabled by setting calculatedColumns: true, and setting calculatedExpression on a column definition. In source code, bracket references such as [revenue] resolve to the same-row value from the column with that colId.

const calculatedColumns = true;
const [columnDefs, setColumnDefs] = useState([
    { field: 'revenue' },
    { field: 'cost' },
    {
        colId: 'profit',
        calculatedExpression: '[revenue] - [cost]',
        cellDataType: 'number',
        sortable: true,
        filter: true,
    },
]);

<AgGridReact
    calculatedColumns={calculatedColumns}
    columnDefs={columnDefs}
/>

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 Copy Link

Calculated columns are full columns, so Row Grouping, Tree Data, Sorting and Filtering, Text Formatting and Cell Components 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, 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.

References with Column Groups Copy Link

Register the Column Menu so users can add a calculated column from the header menu with Add Calculated Column. The header menu on a calculated column shows Edit Calculated Column to change its title, type and expression, and Remove Calculated Column to remove it. Right-clicking cells in a calculated column also shows Remove Calculated Column.

The dialog shows references by header name, for example [Revenue]. When headers are duplicated under groups, it uses the shortest unique group path, such as [2025 Q4] and [2026 Q4]. It translates these display references back to colId references before updating the column definition.

If two columns share the same header and the same group hierarchy, the dialog falls back to appending the colId, for example [2025 Q4 (revenue-q4)]. This keeps the reference stable when columns are reordered. Give your columns distinct headers or group hierarchies to avoid this.

The following example has duplicate Q1, Q2, Q3 and Q4 headers under 2025 and 2026 column groups. The year groups start collapsed and show a calculated Total column; expanding a group reveals the quarter columns. The dialog shows grouped references such as [2025 Q4] and [2026 Q4], while the source code stores stable colId references such as [q4_2025] and [q4_2026].

The dialog manages calculated columns inside the grid without mutating the columnDefs array supplied by the application. To persist user-created calculated columns, read the complete current definitions from api.getColumnDefs().

Dialog Options Copy Link

The Calculated Column dialog can be configured with the calculatedColumns grid option. Set calculatedColumns: true to enable the feature with default dialog options, or provide an options object to enable the feature and customise the dialog.

While a column's dialog is open, the grid highlights the column's header and cells. Customise the highlight colour with the --ag-calculated-column-highlight-color CSS variable.

dataTypes Copy Link

Use dataTypes to control which cell data types appear in the dialog type dropdown. The list can include built-in cell data types and custom types registered with dataTypeDefinitions:

const dataTypeDefinitions = useMemo(() => { 
	return {
        currency: {
            extendsDataType: 'number',
            baseDataType: 'number',
            valueFormatter: params =>
                params.value == null ? '' : `$${params.value.toLocaleString()}`,
        },
    };
}, []);
const calculatedColumns = {
    dataTypes: ['currency', 'number', 'boolean'],
};

<AgGridReact
    dataTypeDefinitions={dataTypeDefinitions}
    calculatedColumns={calculatedColumns}
/>

Built-in types use the grid's locale text, while custom type names are converted to readable labels in the dialog. If a selected value does not match a registered Cell Data Type, the grid's normal cellDataType validation applies when the calculated column is created.

expressionPickers Copy Link

Use expressionPickers to control which expression pickers appear:

const calculatedColumns = {
    expressionPickers: ['columns'],
};

<AgGridReact calculatedColumns={calculatedColumns} />

type CalculatedColumnExpressionPicker = 
      'columns' 
    | 'functions' 
    | 'operators'

This only controls the expression picker buttons. Use an empty array or null to hide all picker buttons. Inline autocomplete while typing in the expression editor remains available.

suppressColumnHighlighting Copy Link

Use suppressColumnHighlighting to disable the highlight while the dialog is open:

const theme = myTheme;
const calculatedColumns = {
    suppressColumnHighlighting: true,
};

<AgGridReact
    theme={theme}
    calculatedColumns={calculatedColumns}
/>

applyMode Copy Link

By default, dialog edits apply to the column immediately: Add Calculated Column creates the column and opens the dialog over it, and title, type and expression changes update the column as you type. Closing the dialog keeps the latest state; remove the column with Remove Calculated Column. An empty expression renders blank cells, and invalid or incomplete expressions render formula errors until fixed.

Set applyMode: 'deferred' to hold changes until you click Apply instead. In deferred mode the dialog shows Apply and Cancel buttons and validates the expression, so you cannot apply an invalid one:

const calculatedColumns = {
    applyMode: 'deferred',
};

<AgGridReact calculatedColumns={calculatedColumns} />

type CalculatedColumnApplyMode = 'live' | 'deferred'

Advanced Calculated Columns Copy Link

Calculated columns can use the same Mathematical Operators and Provided Functions as formulas, and can reference other calculated columns in the same row. This allows chained derived values such as profit, margin and status.

const calculatedColumns = true;
const [columnDefs, setColumnDefs] = useState([
    { field: 'revenue' },
    { field: 'cost' },
    {
        colId: 'profit',
        calculatedExpression: '[revenue] - [cost]',
        cellDataType: 'number',
    },
    {
        colId: 'margin',
        calculatedExpression: '[profit] / [revenue]',
        cellDataType: 'number',
        valueFormatter: params => `${Math.round(params.value * 100)}%`,
    },
    {
        colId: 'status',
        calculatedExpression: 'IF([margin] >= 0.25, "Healthy", "Review")',
        cellDataType: 'text',
    },
]);

<AgGridReact
    calculatedColumns={calculatedColumns}
    columnDefs={columnDefs}
/>

Header cells and grid cells for calculated columns include the ag-calculated-column CSS class; use it for custom styling.

A column added from the header menu appears after the column it was created from.

API Copy Link

Manage calculated columns through column definitions, like other columns. Read the current definitions with api.getColumnDefs() and write them back with api.setGridOption('columnDefs', ...) to add, edit or remove a calculated column. To find the calculated columns in the grid, filter api.getColumns() by calculatedExpression.

The dialog manages calculated columns inside the grid without mutating the columnDefs array supplied by the application. To persist user-created calculated columns, read the complete current definitions from api.getColumnDefs().

The following example adds, edits and removes a Profit Margin column through these APIs, and logs the calculated columns currently in the grid:

Calculated Column events also use stored colId references in their expression payloads. For example, an event raised from the dialog still reports [revenue], not [Revenue].

Column Properties Copy Link

Grid Options Copy Link

Events Copy Link