Data Grid - Styling

The grid CSS can be easily overwritten.

Using the `sx` prop

For one-off styles, the sx prop can be used. It allows to apply simple to complex customizations directly onto the Data Grid element. The keys accepted can be any CSS property as well as the custom properties provided by MUI. For more details, visit the sx prop page.

<DataGrid sx={{ m: 2 }} /> // Sets the margin to 2 times the spacing unit = 16px

<DataGrid
  {...data}
  sx={{
    boxShadow: 2,
    border: 2,
    borderColor: 'primary.light',
    '& .MuiDataGrid-cell:hover': {
      color: 'primary.main',
    },
  }}
/>

<DataGrid
  {...data}
  sx={{
    boxShadow: 2,
    border: 2,
    borderColor: 'primary.light',
    '& .MuiDataGrid-cell:hover': {
      color: 'primary.main',
    },
  }}
/>

Press Enter to start editing

Styling column headers

The GridColDef type has properties to apply class names and custom CSS on the header.

headerClassName: to apply class names into the column header. It can also be a function, which is called with a GridColumnHeaderParams object.
headerAlign: to align the content of the header. It must be 'left' | 'right' | 'center'.

const columns: GridColDef[] = [
  {
    field: 'first',
    headerClassName: 'super-app-theme--header',
    headerAlign: 'center',
  },
  {
    field: 'last',
    headerClassName: 'super-app-theme--header',
    headerAlign: 'center',
  },
];

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

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

Press Enter to start editing

Styling rows

The getRowClassName prop can be used to apply a custom CSS class on each row. It's called with a GridRowParams object and must return a string. Sometimes it might be needed to override the existing rules using higher specificity CSS selectors.

interface GridRowParams<R extends GridRowModel = GridRowModel> {
  /**
   * The grid row id.
   */
  id: GridRowId;
  /**
   * The row model of the row that the current cell belongs to.
   */
  row: R;
  /**
   * All grid columns.
   */
  columns: GridColDef[];
}

<StyledDataGrid
  {...data}
  loading={loading}
  getRowClassName={(params) => `super-app-theme--${params.row.status}`}
/>

<StyledDataGrid
  {...data}
  loading={loading}
  getRowClassName={(params) => `super-app-theme--${params.row.status}`}
/>

Press Enter to start editing

Styling cells

There are multiple ways to apply a custom CSS class on a cell.

Using thecellClassName property of GridColDef:

This property allows to set a CSS class that is applied on every cell of the column it was defined. It can also be a function, which is called with a GridCellParams object.

const columns: GridColDef[] = [
  {
    field: 'name',
    cellClassName: 'super-app-theme--cell',
  },
  {
    field: 'score',
    type: 'number',
    cellClassName: (params: GridCellParams<number>) =>
      clsx('super-app', {
        negative: params.value < 0,
        positive: params.value > 0,
      }),
  },
];

Using the getCellClassName prop:

This prop is called for every cell in every column. Different from the first option, this prop is defined at the Data Grid level, not column level. It is also called with a GridCellParams object.

<DataGrid
  rows={rows}
  columns={columns}
  getCellClassName={(params: GridCellParams<any, any, number>) => {
    if (params.field === 'city' || params.value == null) {
      return '';
    }
    return params.value >= 15 ? 'hot' : 'cold';
  }}
/>

<DataGrid
  rows={rows}
  columns={columns}
  getCellClassName={(params: GridCellParams<any, any, number>) => {
    if (params.field === 'city' || params.value == null) {
      return '';
    }
    return params.value >= 15 ? 'hot' : 'cold';
  }}
/>

Press Enter to start editing

Cell alignment

Use the align property in GridColDef to change the alignment of content of the cells. Choose between one of the following values: 'left' | 'right' | 'center'.

Striped rows

You can use the indexRelativeToCurrentPage param passed to getRowClassName to apply alternating styles to the rows.

The following demo illustrates how this can be achieved.

<StripedDataGrid
  loading={loading}
  {...data}
  getRowClassName={(params) =>
    params.indexRelativeToCurrentPage % 2 === 0 ? 'even' : 'odd'
  }
/>

<StripedDataGrid
  loading={loading}
  {...data}
  getRowClassName={(params) =>
    params.indexRelativeToCurrentPage % 2 === 0 ? 'even' : 'odd'
  }
/>

Press Enter to start editing

By default, the Data Grid uses the Material UI theme.palette.background.default color for the background color of the grid container, the column headers, and the pinned rows and columns.

You can override these background colors with the following theme configuration:

import { createTheme } from '@mui/material/styles';
import type {} from '@mui/x-data-grid/themeAugmentation';

const theme = createTheme({
  palette: {
    DataGrid: {
      // Container background
      bg: '#f8fafc',
      // Pinned rows and columns background
      pinnedBg: '#f1f5f9',
      // Column header background
      headerBg: '#eaeff5',
    },
  },
});

Light and dark mode in Material UI v6

Material UI v6 users can use the colorSchemes property to specify different colors for light and dark mode:

import { createTheme } from '@mui/material/styles';
import type {} from '@mui/x-data-grid/themeAugmentation';

const theme = createTheme({
  colorSchemes: {
    light: {
      palette: {
        DataGrid: {
          bg: '#f8fafc',
          pinnedBg: '#f1f5f9',
          headerBg: '#eaeff5',
        },
      },
    },
    dark: {
      palette: {
        DataGrid: {
          bg: '#334155',
          pinnedBg: '#293548',
          headerBg: '#1e293b',
        },
      },
    },
  },
});

Data Grid - Styling

Using the `sx` prop

Styling column headers

Styling rows

Styling cells

Cell alignment

Striped rows

Container, header, and pinned sections

Light and dark mode in Material UI v6

Light and dark mode in Material UI v5

Custom theme

API