如何在MUI X Data Grid分页中添加首页和末页按钮？

MUI X Data Grid默认的分页组件不包含首页和末页按钮，要实现这个功能，需要手动管理分页状态并使用MUI的Pagination组件自定义分页栏，具体步骤如下：

核心实现步骤 #

• 手动接管DataGrid的分页状态，通过paginationModel和onPaginationModelChange实现双向绑定
• 隐藏DataGrid自带的分页栏，使用开启了首页/末页按钮的MUI Pagination组件替代
• 处理DataGrid与Pagination组件的页码索引差异（DataGrid页码从0开始，Pagination从1开始）

修改后的完整代码 #

import React, { useState } from "react";
import { DataGrid } from "@mui/x-data-grid";
import Pagination from "@mui/material/Pagination";
import Stack from "@mui/material/Stack";

export default function EntityList(props: any) {
  // 手动管理分页状态：page为当前页索引（从0开始），pageSize为每页条数
  const [paginationModel, setPaginationModel] = useState({
    page: 0,
    pageSize: 10,
  });

  // 计算总页数：根据总行数和每页条数向上取整
  const totalPages = Math.ceil(props.rows.length / paginationModel.pageSize);

  return (
    <>
      <div className="outerDivNameBtn2">
        <DataGrid
          className="DatagridStyle2"
          rows={props.rows}
          columns={props.columns}
          onRowSelectionModelChange={(itm) => props.receiveId(itm)}
          // 隐藏DataGrid自带的分页组件
          hideFooterPagination
          // 绑定自定义的分页状态和回调
          paginationModel={paginationModel}
          onPaginationModelChange={setPaginationModel}
          initialState={{
            sorting: {
              sortModel: [{ field: props.sortName, sort: "asc" }],
            },
          }}
          pageSizeOptions={[5, 10, 25, 50, 100]}
          disableRowSelectionOnClick
        />
      </div>
      {/* 自定义分页栏：开启首页和末页按钮 */}
      <Stack spacing={2} sx={{ marginTop: 2, display: "flex", justifyContent: "center" }}>
        <Pagination
          // 总页数
          count={totalPages}
          // 转换页码索引：DataGrid的page从0开始，Pagination从1开始
          page={paginationModel.page + 1}
          // 页码切换时同步到DataGrid的分页状态
          onChange={(_, newPage) => {
            setPaginationModel(prev => ({ ...prev, page: newPage - 1 }));
          }}
          // 当前每页条数
          pageSize={paginationModel.pageSize}
          // 显示首页按钮
          showFirstButton
          // 显示末页按钮
          showLastButton
        />
      </Stack>
    </>
  );
}

关键细节说明 #

• hideFooterPagination：必须设置这个属性来关闭DataGrid自带的分页栏，避免出现两套分页组件
• 页码索引转换：DataGrid内部使用0-based的页码索引，而MUI Pagination组件使用1-based的页码，所以在传递和接收页码时需要做加减1的转换
• 总页数计算：如果是后端分页场景，totalPages应该直接使用后端返回的总页数（或通过总条数计算），不要依赖前端的rows长度

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