Skip to content

Data Grid - Overlays

The various data grid overlays.

Loading overlay

To display a loading overlay and signify that the data grid is in a loading state, set the loading prop to true.

The data grid supports 3 loading overlay variants out of the box:

circular-progress (default): a circular loading spinner.
linear-progress: an indeterminate linear progress bar.
skeleton: an animated placeholder of the data grid.

The type of loading overlay to display can be set via slotProps.loadingOverlay for the following two props:

variant: when loading and there are rows in the table.
noRowsVariant: when loading and there are not any rows in the table.

<DataGrid
  {...data}
  loading
  slotProps={{
    loadingOverlay: {
      variant: 'linear-progress',
      noRowsVariant: 'skeleton',
    },
  }}
/>

Circular progress

A circular loading spinner, the default loading overlay.

<DataGrid {...data} loading />

<DataGrid {...data} loading />

Press Enter to start editing

Linear progress

An indeterminate linear progress bar.

<DataGrid
  {...data}
  loading
  slotProps={{
    loadingOverlay: {
      variant: 'linear-progress',
      noRowsVariant: 'linear-progress',
    },
  }}
/>

<DataGrid
  {...data}
  loading
  slotProps={{
    loadingOverlay: {
      variant: 'linear-progress',
      noRowsVariant: 'linear-progress',
    },
  }}
/>

Press Enter to start editing

Skeleton

An animated placeholder of the data grid.

<DataGridPro
  {...data}
  loading
  slotProps={{
    loadingOverlay: {
      variant: 'skeleton',
      noRowsVariant: 'skeleton',
    },
  }}
  initialState={{
    pinnedColumns: {
      left: ['desk'],
    },
  }}
/>

<DataGridPro
  {...data}
  loading
  slotProps={{
    loadingOverlay: {
      variant: 'skeleton',
      noRowsVariant: 'skeleton',
    },
  }}
  initialState={{
    pinnedColumns: {
      left: ['desk'],
    },
  }}
/>

Press Enter to start editing

Custom component

If you want to customize the no rows overlay, a component can be passed to the loadingOverlay slot.

In the following demo, a labelled determinate CircularProgress component is rendered in place of the default loading overlay, with some additional Loading rows… text.

<DataGrid
  slots={{
    loadingOverlay: CustomLoadingOverlay,
  }}
  loading
  {...data}
/>

<DataGrid
  slots={{
    loadingOverlay: CustomLoadingOverlay,
  }}
  loading
  {...data}
/>

Press Enter to start editing

No rows overlay

The no rows overlay is displayed when the data grid has no rows.

<DataGrid {...data} rows={[]} />

<DataGrid {...data} rows={[]} />

Press Enter to start editing

Custom component

If you want to customize the no rows overlay, a component can be passed to the noRowsOverlay slot and rendered in place.

In the following demo, an illustration is added on top of the default "No rows" message.

<DataGrid
  slots={{
    noRowsOverlay: CustomNoRowsOverlay,
  }}
  {...data}
  rows={[]}
/>

<DataGrid
  slots={{
    noRowsOverlay: CustomNoRowsOverlay,
  }}
  {...data}
  rows={[]}
/>

Press Enter to start editing

No results overlay

The no results overlay is displayed when the data grid has no results after filtering.

Custom component

If you want to customize the no results overlay, a component can be passed to the noResults slot and rendered in place.

In the following demo, an illustration is added on top of the default "No results found" message.

API