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 labeled 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