如何在MUI React Table中添加首页和末页按钮？

方法一：自定义TablePagination的操作按钮 #

MUI的TablePagination组件支持自定义分页操作栏，咱们可以用它自带的图标组件快速实现带双箭头的首页、末页按钮：

1. 先导入需要的组件和图标：

import TablePagination from '@mui/material/TablePagination';
import IconButton from '@mui/material/IconButton';
import FirstPageIcon from '@mui/icons-material/FirstPage';
import LastPageIcon from '@mui/icons-material/LastPage';
import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
import ChevronRightIcon from '@mui/icons-material/ChevronRight';

2. 编写自定义分页操作组件：

function TablePaginationActions(props) {
  const { count, page, rowsPerPage, onPageChange } = props;

  // 跳转到首页
  const goFirstPage = (event) => {
    onPageChange(event, 0);
  };

  // 上一页
  const goPrevPage = (event) => {
    onPageChange(event, page - 1);
  };

  // 下一页
  const goNextPage = (event) => {
    onPageChange(event, page + 1);
  };

  // 跳转到末页
  const goLastPage = (event) => {
    onPageChange(event, Math.max(0, Math.ceil(count / rowsPerPage) - 1));
  };

  return (
    <div style={{ display: 'flex', gap: 8 }}>
      <IconButton
        onClick={goFirstPage}
        disabled={page === 0}
        aria-label="跳转到首页"
      >
        <FirstPageIcon />
      </IconButton>
      <IconButton
        onClick={goPrevPage}
        disabled={page === 0}
        aria-label="上一页"
      >
        <ChevronLeftIcon />
      </IconButton>
      <IconButton
        onClick={goNextPage}
        disabled={page >= Math.ceil(count / rowsPerPage) - 1}
        aria-label="下一页"
      >
        <ChevronRightIcon />
      </IconButton>
      <IconButton
        onClick={goLastPage}
        disabled={page >= Math.ceil(count / rowsPerPage) - 1}
        aria-label="跳转到末页"
      >
        <LastPageIcon />
      </IconButton>
    </div>
  );
}

3. 将自定义组件传入TablePagination的ActionsComponent属性：

<TablePagination
  rowsPerPageOptions={[5, 10, 25]}
  component="div"
  count={yourData.length} // 替换为你的数据总条数
  rowsPerPage={rowsPerPage} // 当前每页显示条数
  page={page} // 当前页码
  onPageChange={handleChangePage} // 页码切换回调函数
  onRowsPerPageChange={handleChangeRowsPerPage} // 每页条数切换回调
  ActionsComponent={TablePaginationActions} // 启用自定义操作组件
/>

方法二：使用现成封装的表格库 #

嫌自己写逻辑麻烦的话，直接用mui-datatables，这个库默认自带完整分页（包含首页、末页按钮），配置简单：

1. 安装依赖：

npm install mui-datatables

2. 基本使用示例：

import MUIDataTable from "mui-datatables";

// 表格列定义
const columns = ["姓名", "公司", "城市", "州"];

// 表格数据
const data = [
  ["Joe James", "Test Corp", "Yonkers", "NY"],
  ["John Walsh", "Test Corp", "Hartford", "CT"],
  // 补充更多数据...
];

// 开启完整分页配置
const options = {
  pagination: true,
  paginationType: "full", // 此参数启用首页、末页按钮
};

// 渲染表格
<MUIDataTable
  title={"员工列表"}
  data={data}
  columns={columns}
  options={options}
/>

这样无需手动编写按钮逻辑，直接就能得到带双箭头的首页、末页分页栏。

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