如何向grommet数据表添加分页

import React, { useState } from 'react';
import { DataTable, Pagination } from 'grommet';

const data = [
  { name: 'John', age: 30 },
  { name: 'Jane', age: 25 },
  { name: 'Bob', age: 35 },
  // ... more data
];

const columns = [
  { property: 'name', header: 'Name' },
  { property: 'age', header: 'Age' },
  // ... more columns
];

const pageSizeOptions = [10, 20, 50]; // 可选的每页显示数据条数

const MyDataTable = () => {
  const [currentPage, setCurrentPage] = useState(1);
  const [pageSize, setPageSize] = useState(pageSizeOptions[0]);

  const onPage = ({ page, size }) => {
    setCurrentPage(page);
    setPageSize(size);
  };

  const startIndex = (currentPage - 1) * pageSize;
  const endIndex = startIndex + pageSize;
  const displayedData = data.slice(startIndex, endIndex);

  return (
    <>
      <DataTable columns={columns} data={displayedData} />
      <Pagination
        numberItems={data.length}
        page={currentPage}
        size={pageSize}
        options={pageSizeOptions}
        onChange={onPage}
      />
    </>
  );
};

export default MyDataTable;