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:

skeleton: an animated placeholder of the Data Grid.
linear-progress: an indeterminate linear progress bar.
circular-progress: a circular loading spinner.

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

variant (default: linear-progress): when loading and there are rows in the table.
noRowsVariant (default: skeleton): when loading and there are not any rows in the table.

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

Skeleton

An animated placeholder of the Data Grid.

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

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

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

Circular progress

A circular loading spinner.

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

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

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