Data Grid - Custom columns

Create custom column types.

You can extend the built-in column types with your own by simply spreading the necessary properties.

The demo below defines a new column type: usdPrice that extends the native number column type.

const usdPrice: GridColTypeDef = {
  type: 'number',
  width: 130,
  valueFormatter: (value) => valueFormatter.format(Number(value)),
  cellClassName: 'font-tabular-nums',
};

<DataGrid
  columns={[
    { field: 'status', width: 130 },
    { field: 'subTotal', ...usdPrice },
    { field: 'total', ...usdPrice },
  ]}
  rows={rows}
/>

<DataGrid
  columns={[
    { field: 'status', width: 130 },
    { field: 'subTotal', ...usdPrice },
    { field: 'total', ...usdPrice },
  ]}
  rows={rows}
/>

Press Enter to start editing

Sparkline

Sparkline charts can be useful as an overview of data trends.

In the demo below, we create a custom column type using the GridColTypeDef interface and use the Sparkline component from @mui/x-charts package in the renderCell property.

<DataGrid rows={rows} columns={columns} />

<DataGrid rows={rows} columns={columns} />

Press Enter to start editing

Date pickers

By default, the data grid uses native browser inputs for editing date and dateTime columns.

While MUI X Date / Time Pickers are not supported by the data grid out of the box yet, it is easy to integrate them by creating custom edit components and custom filter operators.

The example below uses @mui/x-date-pickers for both date and dateTime column types:

Data Grid - Custom columns

Sparkline

Date pickers

API