Data Grid - Formula Bar component

A spreadsheet-style formula bar for viewing and editing the focused cell's formula.

The formula bar is part of the formulas feature. On the default toolbar, enable it with slotProps.toolbar.formulaBar—see Formulas—Formula bar.

Use the Formula Bar component together with the Toolbar component when implementing a custom toolbar. The component ships with the injectable formula feature: it is exported from the @mui/x-data-grid-premium/formula entry point, and the grid it belongs to must receive the feature through the featureDependencies prop. The bar renders nothing when formulas are unavailable (disableFormulas, a data source, or active pivoting).

Basic usage

The demo below renders the Formula Bar from a custom toolbar.

Anatomy

import { FormulaBar } from '@mui/x-data-grid-premium/formula';

<FormulaBar />;

<FormulaBar /> renders a full-width strip with the focused cell's address, the formula input—the same editor the cells use, with reference coloring and autocomplete—and the live result preview while a draft is being edited.

Placement

The component only requires the grid's React context, not a place inside the grid's DOM: render it from any slot, and portal it wherever the formula bar should live—an app header, a side panel:

import * as ReactDOM from 'react-dom';

function PortaledFormulaBar() {
  return ReactDOM.createPortal(
    <FormulaBar />,
    document.getElementById('app-header')!,
  );
}

<DataGridPremium showToolbar slots={{ toolbar: PortaledFormulaBar }} />;

Editing behavior is unaffected by the placement: interacting with the bar never closes a cell edit it mirrors, and committing from the bar returns the focus to the grid.

Accessibility

The bar is a labeled group; the formula input is a combobox (or a textbox when the autocomplete is disabled) and is marked read-only for cells that cannot be edited. The labels come from the formulaBarLabel, formulaBarInputLabel, and formulaBarAddressLabel locale text keys.