Core Features

Advanced Features

React Data GridFormulas

Enterprise

Formulas let users enter spreadsheet-style expressions into grid cells so values update automatically when referenced data changes.

Enabling Formulas Copy Link

To enable formulas, set the column property allowFormula: true on one or more columns and ensure your rows have Row IDs.

const [columnDefs, setColumnDefs] = useState([
    { field: 'product' },
    { field: 'price' },
    { field: 'quantity' },
    { field: 'subtotal', allowFormula: true },
    { field: 'tax', allowFormula: true },
    { field: 'total', allowFormula: true },
]);
const cellSelection = useMemo(() => { 
	return {
        handle: {
            mode: 'fill',
        },
    };
}, []);
const getRowId = useCallback((params) => String(params.data.rid), []);

<AgGridReact
    columnDefs={columnDefs}
    cellSelection={cellSelection}
    getRowId={getRowId}
/>

Formula Editor Component Copy Link

The Formula Cell Editor is the default editor for allowFormula: true columns unless you provide a custom cellEditor. It tokenises references, highlights ranges, and provides function autocomplete while typing.

To opt out, set a cellEditor on the column. Formulas still evaluate, but the formula editor features are disabled.

See Formula Editor Component for details and examples.

Formula Syntax Copy Link

Formulas are text strings that start with an equals sign (=) and can contain references, functions, operators, and constants.

Basics Copy Link

  • = prefix indicates a formula.
  • Constants can be numbers (e.g. 3.14, -7), strings (e.g. "Hello"), or booleans (TRUE, FALSE).
  • Standard operator precedence applies (BODMAS/PEMDAS).

Cell References Copy Link

Cell references use column letters plus row numbers (e.g. A1, B2). Rows are 1-based and columns continue past Z with AA, AB, AC, and so on.

Relative references move as the grid changes. Absolute references stay fixed using $:

  • =$A$1 locks column and row.
  • =A$1 locks the row only.
  • =$A1 locks the column only.

Long-Form References Copy Link

The grid stores formulas in a long-hand format using column and row IDs to preserve references across row/column changes while the grid is not open. The editor converts that back to shorthand when users edit a cell.

If you supply formulas directly in data, use the long-hand format to avoid row position drift. See the notes in Formula Reference for the conversion rules.

Cell Ranges Copy Link

Ranges refer to a block of cells using a top-left and bottom-right reference separated by : (e.g. A1:B2).

Functions Copy Link

Formulas support built-in functions such as SUM, AVERAGE, and CONCAT. See Formula Reference for the full list of supported functions, errors and operators.

Feature Interactions / Compatibility Copy Link

FeatureStatusNotes
Fill HandleSupportedDragging from a formula offsets relative refs (e.g. =B1+C2 becomes =B2+C3). Absolute refs remain fixed.
Cell SelectionSupportedRequired for range highlights and range handle editing in the formula editor.
Row NumbersSupportedEnabled by default; clicking a row number adds a row range to the formula.
Cell ExpressionsNot supported
Tree Data and Row GroupingNot supported
Pivoting and AggregationNot supported
Master DetailNot supported
Server-Side, Infinite, and Viewport Row ModelsNot supported

Formula Data Source Copy Link

You can back formulas with a custom data source. This example uses a Map-based store for formula values:

TypeError: Cannot read properties of undefined (reading 'map')

const formulaStore = new Map();
const formulaKey = (rowId, colId) => `${rowId}-${colId}`;

const gridOptions = {
    columnDefs: [
        { field: 'sales' },
        { field: 'tax', allowFormula: true },
    ],
    formulaDataSource: {
        getFormula: ({ column, rowNode }) => formulaStore.get(formulaKey(rowNode.id, column.getColId())),
        setFormula: ({ column, rowNode, formula }) => {
            const key = formulaKey(rowNode.id, column.getColId());
            if (formula === undefined) {
                formulaStore.delete(key);
            } else {
                formulaStore.set(key, formula);
            }
        },
    },
};

A user-provided data source should provide the following interface:

Function
Initialise the data source so that the user can take a reference to the gridApi if they are going to need it.
getFormulaCopy Link
Function
Return the formula string for the given cell.
setFormulaCopy Link
Function
Set the formula string for the given cell.
destroyCopy Link
Function
Called by the grid when the data source is being disposed.

Exporting Copy Link

When performing a CSV Export, the grid exports the evaluated values of any formulas. When performing an Excel Export, the grid exports the formulas themselves so Excel can evaluate them.

See also Copy Link

  • Formula Editor Component – The rich editing experience for formula cells, including autocomplete and range selection tools.
  • Formula Reference – Full reference for operators (+, -, *, /, ^, &, comparisons), provided functions and errors.
  • Custom Functions – How to register and implement custom functions for formulas.