reactjs - 仅 React Material Table 前端分页

Question

我有 MUI 4 并在进行表格分页。我从没有分页的 API 接收了所有数据，只有大约 50 项，所以它将是小前端分页。是否有任何简单的输入来设置此表的属性？我尝试在线复制示例，但是它们用于复杂的后端分页。不确定，我应该为 (a) rowsPerPage (b) 页面或 (c) onChangePage 准备什么。我的 table 没有任何特殊效果。

  <TablePagination
    rowsPerPageOptions={[10, 25, 100]}
    count={appointmentList.length}
    rowsPerPage={10} // I want 10 to be default value from 10,25,100
    page={5}
    onChangePage={(_, p) => console.log('hello')}
  />

Answer 1

您可以创建一个state 来处理page 和一个函数来处理页面更改，如下所示:

import React from 'react';
import TablePagination from '@material-ui/core/TablePagination';

export default function TablePaginationDemo() {
  const [page, setPage] = React.useState(2);
  const [rowsPerPage, setRowsPerPage] = React.useState(10);

  const handleChangePage = (event, newPage) => {
    setPage(newPage);
  };

  const handleChangeRowsPerPage = (event) => {
    setRowsPerPage(parseInt(event.target.value, 10));
    setPage(0);
  };

  return (
    <TablePagination
      component="div"
      count={100}
      page={page}
      onPageChange={handleChangePage}
      rowsPerPage={rowsPerPage}
      onRowsPerPageChange={handleChangeRowsPerPage}
    />
  );
}