Skip to content
Edit this page

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

Interacting with the grid

The grid exposes two hooks to help you to access the grid data while overriding component slots.

They can be used as below:

  • useGridApiContext: returns the apiRef object (more details in the API object page).
  • useGridSelector: returns the result of a selector on the current state (more details in the State page).
function CustomPagination() {
  const apiRef = useGridApiContext();
  const page = useGridSelector(apiRef, gridPageSelector);
  const pageCount = useGridSelector(apiRef, gridPageCountSelector);

  return (
    <Pagination
      count={pageCount}
      page={page + 1}
      onChange={(event, value) => apiRef.current.setPage(value - 1)}
    />
  );
}

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, colDef } = props;

  return (
    <GridColumnMenuContainer ref={ref} {...props}>
      <GridColumnMenuSortItem onClick={hideMenu} column={colDef!} />
      <GridColumnMenuFilterItem onClick={hideMenu} column={colDef!} />
      <GridColumnMenuColumnsItem onClick={hideMenu} column={colDef!} />
    </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.

Press Enter to start editing

Alternatively, you can compose your own toolbar.

function CustomToolbar() {
  return (
    <GridToolbarContainer>
      <GridToolbarColumnsButton />
      <GridToolbarFilterButton />
      <GridToolbarDensitySelector />
      <GridToolbarExport />
    </GridToolbarContainer>
  );
}
Press Enter to start editing

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

The default pagination component is exported as GridPagination. This component is an extension of the TablePagination component, and it renders the page size control, the number of rows in the page and also the buttons to go to the previous and next page. You can replace the pagination component completely or reuse the default one.

The next demo reuses GridPagination but replaces the previous and next page buttons with Pagination, which renders a dedicated button for each page.

Press Enter to start editing

Loading overlay

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

Press Enter to start editing

No rows overlay

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

Press Enter to start editing

Row

The componentsProps.row prop can be used to pass additional props to the row component. One common use case might be to listen for events not exposed by default. The demo below shows a context menu when a row is right-clicked.

Cell

The following demo uses the componentsProps.cell prop to listen for specific events emitted by the cells. Try it by hovering a cell with the mouse and it should display the number of characters each cell has.

Icons

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

Press Enter to start editing

API