如何隐藏Material-UI DataGrid底部的状态行？

要隐藏DataGrid底部的状态行，直接给DataGrid组件添加hideFooter属性并设置为true即可，这是Material-UI官方提供的原生配置项，无需额外自定义样式。

修改后的完整代码如下：

import * as React from "react";
import IconButton from "@mui/material/IconButton";
import { DataGrid, GridRowsProp, GridColDef } from "@mui/x-data-grid";
import DeleteIcon from "@mui/icons-material/Delete";

const _rows: GridRowsProp = [
  { id: 1, col1: "Hello", col2: "World" },
  { id: 2, col1: "XGrid", col2: "is Awesome" },
  { id: 3, col1: "Material-UI", col2: "is Amazing" },
  { id: 4, col1: "Hello", col2: "World" },
  { id: 5, col1: "XGrid", col2: "is Awesome" },
  { id: 6, col1: "Material-UI", col2: "is Amazing" },
  { id: 7, col1: "Material-UI", col2: "is Amazing" },
  { id: 8, col1: "Hello", col2: "World" },
  { id: 9, col1: "XGrid", col2: "is Awesome" },
  { id: 10, col1: "Material-UI", col2: "is Amazing" },
  { id: 11, col1: "Hello", col2: "World" },
  { id: 12, col1: "XGrid", col2: "is Awesome" },
  { id: 13, col1: "Material-UI", col2: "is Amazing" },
  { id: 14, col1: "Hello", col2: "World" },
  { id: 15, col1: "XGrid", col2: "is Awesome" },
  { id: 16, col1: "Material-UI", col2: "is Amazing" },
  { id: 17, col1: "Material-UI", col2: "is Amazing" },
  { id: 18, col1: "Hello", col2: "World" },
  { id: 19, col1: "XGrid", col2: "is Awesome" },
  { id: 20, col1: "Material-UI", col2: "is Amazing" },
  { id: 21, col1: "Hello", col2: "World" },
  { id: 22, col1: "XGrid", col2: "is Awesome" },
  { id: 23, col1: "Material-UI", col2: "is Amazing" },
  { id: 24, col1: "Hello", col2: "World" },
  { id: 25, col1: "XGrid", col2: "is Awesome" },
  { id: 26, col1: "Material-UIII", col2: "is Amazinggggg" }
];

export default function ControlledSelectionGrid() {
  const [rows, setRows] = React.useState(_rows);
  const [selectionModel, setSelectionModel] = React.useState([]);
  const columns: GridColDef[] = [
    { field: "col1", headerName: "Column 1", width: 150 },
    { field: "col2", headerName: "Column 2", width: 150 },
    {
      field: "delete",
      width: 75,
      sortable: false,
      disableColumnMenu: true,
      renderHeader: () => {
        return (
          <IconButton
            onClick={() => {
              const selectedIDs = new Set(selectionModel);
              // 可在此调用API删除选中ID，获取最新数据后更新本地状态
              setRows((r) => r.filter((x) => !selectedIDs.has(x.id)));
            }}
          >
            <DeleteIcon />
          </IconButton>
        );
      }
    }
  ];

  return (
    <div style={{ width: "100%" }}>
      <DataGrid
        autoHeight
        rows={rows}
        columns={columns}
        checkboxSelection
        hideFooter // 新增此属性隐藏底部状态行
        onSelectionModelChange={(ids) => {
          setSelectionModel(ids);
        }}
      />
    </div>
  );
}

添加hideFooter属性后，就能完全隐藏底部包含行数统计、分页控件的状态行，实现你需要的效果。

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