数据表格 - 自定义插槽和子组件

了解如何覆盖网格的部分。

与数据表格交互

网格公开了两个钩子，以帮助您在覆盖组件插槽时访问数据表格数据。

它们可以如下使用

useGridApiContext：返回 apiRef 对象（有关更多详细信息，请参阅 API 对象页面）。
useGridSelector：返回当前状态下选择器的结果（有关更多详细信息，请参阅状态页面）。

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

组件插槽

列面板

在以下演示中，列面板被替换为自定义组件，该组件将列组表示为嵌套列表。

<DataGrid
  rows={rows}
  columns={columns}
  checkboxSelection
  disableRowSelectionOnClick
  columnGroupingModel={columnGroupingModel}
  slots={{ columnsPanel: ColumnsPanel }}
  initialState={{
    preferencePanel: {
      open: true,
      openedPanelValue: GridPreferencePanelsValue.columns,
    },
  }}
/>

<DataGrid
  rows={rows}
  columns={columns}
  checkboxSelection
  disableRowSelectionOnClick
  columnGroupingModel={columnGroupingModel}
  slots={{ columnsPanel: ColumnsPanel }}
  initialState={{
    preferencePanel: {
      open: true,
      openedPanelValue: GridPreferencePanelsValue.columns,
    },
  }}
/>

按 Enter 开始编辑

如上所述，列菜单是一个组件插槽，可以轻松地重新组合并在每列上自定义，如下面的演示所示。

要启用工具栏，您需要将 toolbar: GridToolbar 添加到数据表格 slots 属性。此演示展示了如何实现这一点。

<DataGrid {...data} loading={loading} slots={{ toolbar: GridToolbar }} />

<DataGrid {...data} loading={loading} slots={{ toolbar: GridToolbar }} />

按 Enter 开始编辑

您还可以编写您自己的工具栏。工具栏中的每个按钮都用一个工具提示组件包装。为了覆盖与工具栏按钮对应的一些属性，您可以使用 slotProps 属性。

以下演示展示了如何覆盖密度选择器的工具提示标题和导出按钮的变体。

function CustomToolbar() {
  return (
    <GridToolbarContainer>
      <GridToolbarColumnsButton />
      <GridToolbarFilterButton />
      <GridToolbarDensitySelector
        slotProps={{ tooltip: { title: 'Change density' } }}
      />
      <Box sx={{ flexGrow: 1 }} />
      <GridToolbarExport
        slotProps={{
          tooltip: { title: 'Export data' },
          button: { variant: 'outlined' },
        }}
      />
    </GridToolbarContainer>
  );
}

<DataGrid
  {...data}
  slots={{
    toolbar: CustomToolbar,
  }}
/>

<DataGrid
  {...data}
  slots={{
    toolbar: CustomToolbar,
  }}
/>

按 Enter 开始编辑

网格公开了属性以隐藏 UI 的特定元素

hideFooter：如果为 true，则隐藏页脚组件。
hideFooterRowCount：如果为 true，则隐藏页脚中的行数。
hideFooterSelectedRowCount：如果为 true，则隐藏页脚中选定的行数。
hideFooterPagination：如果为 true，则隐藏页脚中的分页组件。

分页

默认分页组件导出为 GridPagination。此组件是 TablePagination 组件的扩展，它呈现页面大小控件、页面中的行数以及用于转到上一页和下一页的按钮。您可以完全替换分页组件或重用默认的分页组件。

下一个演示重用了 GridPagination，但用 Pagination 替换了上一页和下一页按钮，后者为每页渲染一个专用按钮。

<DataGrid
  loading={loading}
  pagination
  slots={{
    pagination: CustomPagination,
  }}
  {...data}
  initialState={{
    ...data.initialState,
    pagination: { paginationModel: { pageSize: 25 } },
  }}
/>

<DataGrid
  loading={loading}
  pagination
  slots={{
    pagination: CustomPagination,
  }}
  {...data}
  initialState={{
    ...data.initialState,
    pagination: { paginationModel: { pageSize: 25 } },
  }}
/>

按 Enter 开始编辑

行

slotProps.row 属性可用于将其他属性传递给行组件。一个常见的用例可能是监听默认未公开的事件。下面的演示显示了右键单击行时的上下文菜单。

单元格

以下演示使用 slotProps.cell 属性来监听单元格发出的特定事件。通过将鼠标悬停在单元格上来尝试一下，它应该显示每个单元格具有的字符数。

图标

与任何组件插槽一样，每个图标都可以自定义。但是，尚无法将 slotProps 与图标一起使用。

<DataGrid
  columns={columns}
  rows={rows}
  initialState={{
    sorting: { sortModel: [{ field: 'name', sort: 'asc' }] },
  }}
  slots={{
    columnSortedDescendingIcon: SortedDescendingIcon,
    columnSortedAscendingIcon: SortedAscendingIcon,
    columnUnsortedIcon: UnsortedIcon,
  }}
/>

<DataGrid
  columns={columns}
  rows={rows}
  initialState={{
    sorting: { sortModel: [{ field: 'name', sort: 'asc' }] },
  }}
  slots={{
    columnSortedDescendingIcon: SortedDescendingIcon,
    columnSortedAscendingIcon: SortedAscendingIcon,
    columnUnsortedIcon: UnsortedIcon,
  }}
/>

按 Enter 开始编辑

覆盖层

请参阅覆盖层文档，了解如何自定义 loadingOverlay、noRowsOverlay 和 noResultsOverlay。

使用 TypeScript 的自定义插槽属性

如果自定义组件需要其他属性才能正常工作，TypeScript 可能会抛出类型错误。要解决这些类型错误，请使用模块扩充来增强属性接口。

可覆盖接口的命名使用如下模式

`${slotNameInPascalCase}PropsOverrides`;

例如，对于 columnMenu 插槽，接口名称将为 ColumnMenuPropsOverrides。

此文件列出了每个插槽的所有接口，这些接口可用于扩充。

// 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 used by CustomGridToolbar
      someCustomString: 'Hello',
      someCustomNumber: 42,
    },
  }}
/>;

下面的演示展示了如何使用 slotProps 属性和模块扩充来将新属性 status 传递给 footer 插槽。