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.
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 LinearProgress component is rendered in place of the default circular loading spinner.
No rows overlay
The no rows overlay is displayed when the data grid has no rows.
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.
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.