我正在使用 MUI X 数据网格构建一个 React 组件。我看到末尾添加了一个空列

Question

这是 UI 和生成的 CSS 的屏幕截图。此代码用于显示驱动程序对象的 2 列。我尝试删除 sx 道具，认为这可能会导致问题，但它没有帮助。

import React from "react";
import { DataGrid } from "@mui/x-data-grid";
export default function DriverRisk({ setSelectedRow, driver }) {
const columns = [
    {
      field: "FirstNm",
      headerName: "First Name",
      sortable: false,
      width: 150,
    },
    {
      field: "LastNm",
      headerName: "Last Name",
      sortable: false,
      width: 150,
    },
  ];
const rows = driver.map((person) => {
    return {
      FirstNm: person.FirstNm,
      LastNm: person.LastNm,
      id: person.FirstNm + person.LastNm,
    };
  });
return (
    <div className="reports-carfax-vehicle-data">
      <DataGrid
        rows={rows}
        columns={columns}
        disableColumnMenu
        hideFooterPagination
        hideFooter
        columnHeaderHeight={45}
        density={"compact"}
        sx={{
          "& .MuiDataGrid-columnHeaders": { border: "none" },
          "& .MuiDataGrid-columnHeaderTitle": {
            fontWeight: "bold",
          },
          "& .MuiDataGrid-cell:focus-within": {
            outline: "none",
          },
          "& .MuiDataGrid-columnHeader:focus": {
            outline: "none",
          },
        }}
      />
    </div>
  );
}

Answer 1

我不知道完整的解释。但是当我在列对象之一中声明 flex 属性时，DataGrid 将不会创建附加列和行。就试试吧。

示例：

const columns = [
    {
      field: "FirstNm",
      headerName: "First Name",
      sortable: false,
      width: 150,
      flex: 1, // try to add this at least one of object in column
    },
    {
      field: "LastNm",
      headerName: "Last Name",
      sortable: false,
      width: 150,
    },
  ];