Skip to content

Data Grid - Components

The grid is highly customizable. Override components using the components prop.

As part of the customization API, the grid allows you to replace and override nested components with the components prop. The prop accepts an object of type GridSlotsComponent .

Toolbar

To enable the toolbar you need to add the Toolbar: GridToolbar to the grid components prop. This demo showcases how this can be achieved.

<DataGrid
  {...data}
  components={{
    Toolbar: GridToolbar,
  }}
/>

Alternatively, you can compose your own toolbar.

function CustomToolbar() {
  return (
    <GridToolbarContainer>
      <GridColumnsToolbarButton />
      <GridFilterToolbarButton />
    </GridToolbarContainer>
  );
}
<DataGrid
  {...data}
  components={{
    Toolbar: CustomToolbar,
  }}
/>

Loading overlay

By default, the loading overlay displays a circular progress. This demo replaces it with a linear progress.

<DataGrid
  components={{
    LoadingOverlay: CustomLoadingOverlay,
  }}
  loading
  {...data}
/>

No rows overlay

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

<DataGrid
  components={{
    NoRowsOverlay: CustomNoRowsOverlay,
  }}
  rows={[]}
  columns={data.columns}
/>

Footer

The grid exposes props to hide specific elements of the UI:

  • hideFooter: If true, the footer component is hidden.
  • hideFooterRowCount: If true, the row count in the footer is hidden.
  • hideFooterSelectedRowCount: If true, the selected row count in the footer is hidden.
  • hideFooterPagination: If true, the pagination component in the footer is hidden.

By default, pagination uses the TablePagination component that is optimized for handling tabular data. This demo replaces it with the Pagination component.

<DataGrid
  pagination
  pageSize={5}
  components={{
    Pagination: CustomPagination,
  }}
  {...data}
/>