极客教程React MUI TablePagination API
MUI 是一个用户界面库，提供预定义和可定制的React组件，用于更快和更容易的Web开发。MUI提供了一套全面的UI工具，帮助更快地发布新功能。在本文中，让我们讨论MUI库提供的TablePagination API。
Pagination 是将内容分成离散页面的过程。如果需要对包含大量行的表进行整理，而又不希望让表变得过大，那么某种类型的分页可以帮助。为此，MUI提供了TablePagination API来简化任务。
语法：
<TablePagination
rowsPerPageOptions={[5, 10, 25]}
component="div"
count={15}
rowsPerPage={5}
page={1}
/>
创建React应用：
步骤1：初始化 使用create-react-app命令行工具初始化应用。
npx create-react-app myApp
步骤2： 进入项目目录。
cd myApp
安装MUI： 可以使用npm或yarn等软件包管理器来轻松安装。
npm install @mui/material @emotion/react @emotion/styled
或者
yarn add @mui/material @emotion/react @emotion/styled
将TablePagination API导入项目：
import TablePagination from '@mui/material/TablePagination';
// or
import { TablePagination } from '@mui/material';
属性列表：
- count： 这是表格中总行数的计数。
- onPageChange： 这是当页面改变时调用的回调函数。
- page： 这个属性接受一个整数，表示当前页面的索引。它遵循从零开始的索引。
- rowsPerPage： 这个属性指定了每个页面上显示的行数。如果在任何页面上行数少于每页行数的值，那么只会显示剩余的行数。
- classes： 这是用来覆盖或扩展应用于组件的样式。
- component： 这是用于根节点的元素类型。
- getItemAriaLabel： 这个属性用于帮助使用屏幕阅读器的用户。它接受一个返回当前页面用户友好名称的函数作为字符串。
- onRowsPerPageChange： 这是当每页行数改变时执行的回调函数。例如，可以用它来在每页行数改变时将当前页面索引改回初始值。
- rowsPerPageOptions： 这个属性自定义了每页行数选择字段的选项。它可以是一个整数数组，数组中的每个整数将显示为选择行数PerPage时可选的选项。
- sx： 这是系统属性。它允许我们为组件定义额外的CSS样式。
示例1： 让我们使用我们迄今学到的一些属性来创建一个表格。在这个示例中，我们将创建一个结果表，其中的列代表参与者的姓名和不同科目的分数。我们将使用rowsPerPage属性来在一页上显示多行。
import * as React from "react";
import Table from "@mui/material/Table";
import TableBody from "@mui/material/TableBody";
import TableCell from "@mui/material/TableCell";
import TableContainer from "@mui/material/TableContainer";
import TableHead from "@mui/material/TableHead";
import TableRow from "@mui/material/TableRow";
import TablePagination from "@mui/material/TablePagination";
import Paper from "@mui/material/Paper";
function createData(name, dsa, maths, dbms, networking) {
return { name, dsa, maths, dbms, networking };
}
const rows = [
createData("John", 80, 66, 76, 89),
createData("Sandeep", 82, 83, 79, 98),
createData("Raman", 85, 79, 80, 85),
createData("Saini", 75, 67, 85, 78),
createData("Virat", 90, 89, 84, 76),
createData("Rohit", 86, 83, 95, 88),
createData("Smriti", 92, 90, 89, 80),
createData("Mandhana", 86, 88, 88, 89),
createData("Deepti", 79, 86, 80, 88)
];
export default function BasicTable() {
const [pg, setpg] = React.useState(0);
const [rpg, setrpg] = React.useState(5);
function handleChangePage(event, newpage) {
setpg(newpage);
}
function handleChangeRowsPerPage(event) {
setrpg(parseInt(event.target.value, 10));
setpg(0);
}
return (
<Paper>
<h1 style={{ textAlign: "center", color: "green" }}>
GeeksForGeeks
</h1>
<TableContainer component={Paper}>
<Table sx={{ minWidth: 650 }}
aria-label="simple table">
<TableHead>
<TableRow>
<TableCell>Geek</TableCell>
<TableCell align="right">Dsa
</TableCell>
<TableCell align="right">Maths
</TableCell>
<TableCell align="right">Dbms
</TableCell>
<TableCell align="right">Networking
</TableCell>
</TableRow>
</TableHead>
<TableBody>
{rows.slice(pg * rpg, pg * rpg + rpg).map((row) => (
<TableRow
key={row.name}
sx={{ "&:last-child td,
&:last-child th": { border: 0 } }}
>
<TableCell component="th" scope="row">
{row.name}
</TableCell>
<TableCell align="right">{row.dsa}
</TableCell>
<TableCell align="right">{row.maths}
</TableCell>
<TableCell align="right">{row.dbms}
</TableCell>
<TableCell align="right">{row.networking}
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
<TablePagination
rowsPerPageOptions={[5, 10, 25]}
component="div"
count={rows.length}
rowsPerPage={rpg}
page={pg}
onPageChange={handleChangePage}
onRowsPerPageChange={handleChangeRowsPerPage}
/>
</Paper>
);
}
输出：
示例2： 在这个示例中，我们将创建另一个表格，显示事件列表以及日期。我们将使这个表格更加互动，具有更改每页显示行数和点击下一页或上一页按钮来切换页面的功能。除了count属性，我们还将使用props，如onPageChange，onRowsPerPageChange等。
import * as React from "react";
import Table from "@mui/material/Table";
import TableBody from "@mui/material/TableBody";
import TableCell from "@mui/material/TableCell";
import TableContainer from "@mui/material/TableContainer";
import TableHead from "@mui/material/TableHead";
import TableRow from "@mui/material/TableRow";
import TablePagination from "@mui/material/TablePagination";
import Paper from "@mui/material/Paper";
function createData(events, dates) {
return { events, dates };
}
const rows = [
createData("Technical Scripter", "13 October"),
createData("Gate Mock", "5 November"),
createData("Bi Wizard", "26 November"),
createData("Job-A-Thon14", "21 October"),
createData("GFG Hiring", "15 October"),
createData("TechnicalScripter", "13 October"),
createData("Gate Mock Exam", "5 November"),
createData("Bi Wizard School", "26 November"),
createData("Job-A-Thon 14", "21 October"),
createData("GFG Hiring Challenge", "15 October")
];
export default function BasicTable() {
const [pg, setpg] = React.useState(0);
const [rpg, setrpg] = React.useState(5);
function handleChangePage(event, newpage) {
setpg(newpage);
}
function handleChangeRowsPerPage(event) {
setrpg(parseInt(event.target.value, 10));
setpg(0);
}
return (
<Paper>
<h1 style={{ textAlign: "center", color: "green" }}>
GeeksForGeeks</h1>
<TableContainer component={Paper}>
<Table sx={{ minWidth: 650 }}
aria-label="simple table">
<TableHead>
<TableRow>
<TableCell>Event</TableCell>
<TableCell align="right">
Date
</TableCell>
</TableRow>
</TableHead>
<TableBody>
{rows.slice(pg * rpg, pg *
rpg + rpg).map((row) => (
<TableRow
key={row.name}
sx={{ "&:last-child td,
&:last-child th": { border: 0 } }}
>
<TableCell component="th"
scope="row">
{row.events}
</TableCell>
<TableCell align="right">
{row.dates}</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
<TablePagination
rowsPerPageOptions={[5, 10, 25]}
component="div"
count={rows.length}
rowsPerPage={rpg}
page={pg}
onPageChange={handleChangePage}
onRowsPerPageChange={handleChangeRowsPerPage}
/>
</Paper>
);
}
输出：
参考: https://mui.com/material-ui/api/table-pagination/