我想在React应用程序中从Material UI创建表格分页

npm install @mui/material

import React from 'react';
import { Table, TableHead, TableRow, TableCell, TableBody } from '@mui/material';
import { Pagination } from '@mui/material';

const tableData = [
  { id: 1, name: 'John Doe', age: 25 },
  { id: 2, name: 'Jane Smith', age: 30 },
  { id: 3, name: 'Bob Johnson', age: 35 },
  // 更多表格数据...
];

const [currentPage, setCurrentPage] = React.useState(1);

const rowsPerPage = 2;
const startIndex = (currentPage - 1) * rowsPerPage;
const endIndex = startIndex + rowsPerPage;
const currentPageData = tableData.slice(startIndex, endIndex);

return (
  <div>
    <Table>
      <TableHead>
        <TableRow>
          <TableCell>ID</TableCell>
          <TableCell>Name</TableCell>
          <TableCell>Age</TableCell>
        </TableRow>
      </TableHead>
      <TableBody>
        {currentPageData.map((row) => (
          <TableRow key={row.id}>
            <TableCell>{row.id}</TableCell>
            <TableCell>{row.name}</TableCell>
            <TableCell>{row.age}</TableCell>
          </TableRow>
        ))}
      </TableBody>
    </Table>
    <Pagination
      count={Math.ceil(tableData.length / rowsPerPage)}
      page={currentPage}
      onChange={(event, page) => setCurrentPage(page)}
    />
  </div>
);