Data Grid - Components

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

Overriding components

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

If you wish to pass additional props in a component slot, you can do it using the componentsProps prop. This prop is of type GridSlotsComponentsProps.

As an example, you could override the column menu and pass additional props as below.

<DataGrid
  rows={rows}
  columns={columns}
  components={{
    ColumnMenu: MyCustomColumnMenu,
  }}
  componentsProps={{
    columnMenu: { background: 'red', counter: rows.length },
  }}
/>

Note: The casing is different between the components (ColumnMenu) and componentsProps (columnMenu) props.

Getting props

While overriding component slots, you might need to access the grid data. Therefore, the grid exposes a useGridSlotComponentProps hook which allows retrieving the following props.

• state: the current grid state.
• rows: the current rows in the grid.
• columns: the current columns in the grid.
• options: the current set of options in the grid.
• apiRef: the GridApi ref that allows manipulating the grid.
• rootElement: the root DOM element.

It can be used as below:

function CustomRowCounter() {
  const { rows } = useGridSlotComponentProps();

  return <div>Row count: {rows.length} </div>;
}

Components

The full list of overridable components can be found on the GridSlotsComponent API page.

Column menu

As mentioned above, the column menu is a component slot that can be recomposed easily and customized on each column as in the demo below.

Below is the default GridColumnMenu.

export const GridColumnMenu = React.forwardRef<
  HTMLUListElement,
  GridColumnMenuProps
>(function GridColumnMenu(props: GridColumnMenuProps, ref) {
  const { hideMenu, currentColumn } = props;

  return (
    <GridColumnMenuContainer ref={ref} {...props}>
      <SortGridMenuItems onClick={hideMenu} column={currentColumn!} />
      <GridFilterMenuItem onClick={hideMenu} column={currentColumn!} />
      <HideGridColMenuItem onClick={hideMenu} column={currentColumn!} />
      <GridColumnsMenuItem onClick={hideMenu} column={currentColumn!} />
    </GridColumnMenuContainer>
  );
});

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>
      <GridToolbarColumnsButton />
      <GridToolbarFilterButton />
      <GridToolbarDensitySelector />
      <GridToolbarExport />
    </GridToolbarContainer>
  );
}

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

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.

Pagination

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}
  rowsPerPageOptions={[5]}
  components={{
    Pagination: CustomPagination,
  }}
  {...data}
/>

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}
/>

Note: As the no rows overlay, the grid allows to override the no results overlay with the NoResultsOverlay slot.

Icons

As any component slot, every icon can be customized. However, it is not yet possible to use the componentsProps with icons.

<DataGrid
  columns={columns}
  rows={rows}
  sortModel={[
    { field: 'name', sort: 'asc' },
    { field: 'stars', sort: 'desc' },
  ]}
  components={{
    ColumnSortedDescendingIcon: SortedDescendingIcon,
    ColumnSortedAscendingIcon: SortedAscendingIcon,
  }}
/>

API

• DataGrid
• DataGridPro