Advanced Features

React Data GridFormula Editor Component

Enterprise

The Formula Cell Editor is the default editor for columns with allowFormula: true. It tokenises cell references, highlights ranges, and provides function autocomplete while you type.

Default Formula Editor Copy Link

If a column enables formulas and does not specify a cellEditor, the grid automatically uses the Formula Cell Editor.

Range highlights and range handle editing require cellSelection to be enabled. Without it, the editor still works but range highlights and handles are not shown.

Disabling Formulas Cell Editor Copy Link

Providing a cellEditor opts the column out of the Formula Cell Editor. Formulas still evaluate, but range highlighting, handles, and function autocomplete are disabled because a different editor is in use.

Validation Copy Link

Invalid formulas already surface via the formula engine: the cell displays the error and shows a tooltip based on the grid's formula error state. Because of this, the Formula Cell Editor does not validate on every change by default.

To opt into validation while editing, set validateFormulas: true on the editor params. Validation will also run if you provide a custom getValidationErrors callback. For more details on validation behaviour and presentation, see Cell Editing Validation.

const columnDefs = [
    {
        field: 'total',
        allowFormula: true,
        cellEditorParams: {
            validateFormulas: true,
        },
    },
];