material-table和reactjs中自定义分页的任何示例

import React from 'react';
import MaterialTable from 'material-table';

const CustomPagination = (props) => {
  const { totalCount, pageSize, page, onChangePage } = props;

  const totalPages = Math.ceil(totalCount / pageSize);

  const handlePageChange = (newPage) => {
    onChangePage(newPage);
  };

  return (
    <div>
      <button onClick={() => handlePageChange(page - 1)} disabled={page === 0}>
        Previous
      </button>
      <span>{`Page ${page + 1} of ${totalPages}`}</span>
      <button onClick={() => handlePageChange(page + 1)} disabled={page === totalPages - 1}>
        Next
      </button>
    </div>
  );
};

const App = () => {
  const [data, setData] = React.useState([]);

  const fetchData = async (query) => {
    // 根据query参数获取数据
    // 这里可以使用异步请求库（如axios）向后端发送请求
    // 并根据返回的数据更新data状态
  };

  return (
    <MaterialTable
      columns={[
        { title: 'Name', field: 'name' },
        { title: 'Age', field: 'age', type: 'numeric' },
      ]}
      data={data}
      options={{
        paginationType: 'custom',
        pageSize: 10,
        pageSizeOptions: [10, 20, 50],
      }}
      components={{
        Pagination: (props) => (
          <CustomPagination
            totalCount={props.count}
            pageSize={props.pageSize}
            page={props.page}
            onChangePage={props.onChangePage}
          />
        ),
      }}
      onQueryChange={(query) => fetchData(query)}
    />
  );
};

export default App;