我有 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')}
/>
最佳答案
您可以创建一个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}
/>
);
}
关于reactjs - 仅 React Material Table 前端分页,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/73095650/