使用MUI X Data Grid构建React组件时末尾出现空白列求助

问题描述 #

使用MUI X Data Grid构建React组件时，组件末尾多出一列空白列。当前代码仅展示driver对象中的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>
  );
}

解决方法 #

方法1：禁用列宽调整 #

默认情况下DataGrid允许用户拖动调整列宽，可能导致空白列残留。添加disableColumnResize属性禁用该功能：

<DataGrid
  // 其他属性保持不变
  disableColumnResize
/>

方法2：启用自动高度或固定表格宽度 #

• 添加autoHeight让表格根据行数自动调整高度，避免横向留白：

<DataGrid
  // 其他属性保持不变
  autoHeight
/>

• 或者根据列宽总和设置固定宽度（两列各150，总宽度300）：

<DataGrid
  // 其他属性保持不变
  sx={{
    // 原有样式保留，添加宽度设置
    width: 300,
    "& .MuiDataGrid-columnHeaders": { border: "none" },
    // ...其他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"
        disableColumnResize
        autoHeight
        sx={{
          "& .MuiDataGrid-columnHeaders": { border: "none" },
          "& .MuiDataGrid-columnHeaderTitle": {
            fontWeight: "bold",
          },
          "& .MuiDataGrid-cell:focus-within": {
            outline: "none",
          },
          "& .MuiDataGrid-columnHeader:focus": {
            outline: "none",
          },
        }}
      />
    </div>
  );
}

内容的提问来源于stack exchange，提问作者StickyHands2024