如何在Material-UI DataGrid中不使用分页显示全部26行？

要实现Material-UI DataGrid不使用分页、一次性显示全部26行数据，只需给DataGrid组件添加pagination={false}属性即可，结合你已经使用的autoHeight属性，表格会自动适配所有行的高度。

修改后的完整代码 #

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);
              // you can call an API to delete the selected IDs
              // and get the latest results after the deletion
              // then call setRows() to update the data locally here
              setRows((r) => r.filter((x) => !selectedIDs.has(x.id)));
            }}
          >
            <DeleteIcon />
          </IconButton>
        );
      }
    }
  ];

  return (
    <div style={{ width: "100%" }}>
      <DataGrid
        autoHeight
        rows={rows}
        columns={columns}
        checkboxSelection
        pagination={false} // 新增：禁用分页
        onSelectionModelChange={(ids) => {
          setSelectionModel(ids);
        }}
      />
    </div>
  );
}

关键说明 #

• pagination={false}：直接关闭DataGrid的内置分页功能，不再显示分页控件和每页行数选择器，所有行数据会一次性渲染。
• autoHeight：让表格自动根据行的数量计算并调整自身高度，确保所有行都能完整显示（只要内容不超出浏览器视口）。

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