link管理

链接快照平台

输入网页链接，自动生成快照
标签化管理网页链接

Data Grid - Custom subcomponents

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

Overriding components

As part of the customization API, the Data Grid allows you to override internal components with the slots prop. The prop accepts an object of type UncapitalizedGridSlotsComponent .

If you wish to pass additional props in a component slot, you can do it using the slotProps 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}
  slots={{
    columnMenu: MyCustomColumnMenu,
  slotProps={{
    columnMenu: { background: 'red', counter: rows.length },

The components/componentsProps API is deprecated and slots/slotProps API is preferred.

Note that the components prop used PascalCase for the slot names, while the slots prop uses camelCase .

<DataGrid components={{ ColumnMenu: GridColumnMenu }} /> // Deprecated
<DataGrid slots={{ columnMenu: GridColumnMenu }} />

Interacting with the data grid

The grid exposes two hooks to help you to access the data 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 paginationModel = useGridSelector(apiRef, gridPaginationModelSelector);
  const pageCount = useGridSelector(apiRef, gridPageCountSelector);
  return (
    <Pagination
      count={pageCount}
      page={paginationModel.page + 1}
      onChange={(event, value) => apiRef.current.setPage(value - 1)}

Component slots

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

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.

To enable the toolbar you need to add the toolbar: GridToolbar to the Data Grid slots prop. This demo showcases how this can be achieved.

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.

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

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

The slotProps.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.

The following demo uses the slotProps.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.

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

To override default props or pass custom props to slot components, use the slotProps prop.

<DataGrid
  slotProps={{
    toolbar: {
      // override default props
      disableDensitySelector: true,

Custom slot props with TypeScript

If the custom component requires additional props to work properly, TypeScript may throw type errors. To prevent, use module augmentation to enhance the props interface.

The naming of overridable interfaces uses a pattern like this:

`${slotNameInPascalCase}PropsOverrides`;

For example, for columnMenu slot, the interface name would be ColumnMenuPropsOverrides .

This file lists all the interfaces for each slot which could be used for augmentation.

// augment the props for the toolbar slot
declare module '@mui/x-data-grid' {
  interface ToolbarPropsOverrides {
    someCustomString: string;
    someCustomNumber: number;
<DataGrid
  slots={{
    // custom component passed to the toolbar slot
    toolbar: CustomGridToolbar,
  slotProps={{
    toolbar: {
      // props required by CustomGridToolbar
      someCustomString: 'Hello',
      someCustomNumber: 42,
>

This demo below shows how to use the slotProps prop and module augmentation to pass a new prop status to the footer slot.

Data Grid - Custom subcomponents

Overriding components

Interacting with the data grid

Component slots

Column menu

Footer

Loading overlay

No rows overlay

Row

Cell

Icons

Slot props

Custom slot props with TypeScript