在@mui/x-data-grid组件中分配loadingOverlay属性时出错

Question

我在尝试在 React 项目中的 @mui/x-data-grid 组件中分配 loadingOverlay 属性时遇到问题。尽管遵循了文档，我仍然收到错误：

The property 'loadingOverlay' does not exist in the type 'IntrinsicAttributes & Omit<Partial<DataGridPropsWithDefaultValues> & DataGridPropsWithComplexDefaultValueBeforeProcessing & DataGridPropsWithoutDefaultValue<...>, DataGridForcedPropsKey> & { ...; } & RefAttributes<...>'.

我已经验证我正在使用 @mui/x-data-grid 的 6.19.5 版本，并且我确信我的实现与文档一致。然而，我仍然面临这个问题。

这是我的代码片段：

import { Box } from "@mui/material";
import { DataGrid, GridColDef, esES } from "@mui/x-data-grid";

type dataTable = {
  _id: string | number;
  [key: string]: any;
};

interface pagination {
  page: number;
  pageSize: number;
}

interface CustomTableProps {
  columns: GridColDef[];
  data: dataTable[];
  loading?: boolean;
  rowCount?: number;
  pagination: pagination;
  setPagination: React.Dispatch<React.SetStateAction<pagination>>;
  handleRowClick?: (row: string) => void;
  handleAllRowClick?: (row: string) => void;
}

export const Table = ({
  columns,
  data,
  pagination,
  rowCount,
  setPagination,
  handleRowClick,
  handleAllRowClick,
  ...props
}: CustomTableProps) => {
  const handlePageChange = (model: { page: number; pageSize: number }) => {
    setPagination((prevPagination) => ({
      ...prevPagination,
      page: model.page,
    }));
  };

  return (
    <Box
      sx={{
        height: "calc(88vh - 64px)",
        width: "100%",
        margin: 0,
        padding: 0,
        "@media (max-width: 1860px)": {
          height: "calc(81vh - 64px)",
        },
      }}
    >
      <DataGrid
        columns={columns}
        rows={data}
        rowHeight={50}
        paginationMode="server"
        pageSizeOptions={[]}
        initialState={{
          pagination: {
            paginationModel: {
              page: pagination?.page || 0,
              pageSize: pagination?.pageSize || 15,
            },
          },
        }}
        rowCount={rowCount}
        onPaginationModelChange={handlePageChange}
        filterMode="server"
        filterDebounceMs={500}
        getRowId={(row) => row._id}
        onRowClick={(tableData) => {
          if (handleRowClick) {
            handleRowClick(tableData.row._id);
          }
          if (handleAllRowClick) {
            handleAllRowClick(tableData.row);
          }
        }}
        localeText={esES.components.MuiDataGrid.defaultProps.localeText}
        loadingOverlay={<img src="/loader_rips.gif" alt="Loading..." />} 
        {...props}
      />
    </Box>
  );
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js"></script>

任何有关如何解决此错误的见解或建议将不胜感激。预先感谢您的帮助！

Answer 1

不确定您是否仍然面临此问题或已解决。当使用

import { DataGrid } from '@mui/x-data-grid';

并将加载覆盖分配给数据网格时，您需要使用 slot 属性。这是一个例子：

slots={{
        loadingOverlay: () => <LoadingOverlay />,
        noRowsOverlay: () => (
          <NoDataOverlay
            title={title}
            subtitle="Try adjusting your filters or import data"
            dataTableName={dataTableName}
          />
        ),
      }}

这是文档的链接https://mui.com/x/react-data-grid/components/