Skip to content
+

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',
};
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.

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:

Full example

The demo below shows the most common custom column renderers used across our demos.

Press Enter to start editing

API