javascript - Material 表如何将页面大小设置为全部

Question

我正在使用 React + Material 表。

实现什么

我想要设置 pageSize 的选项到“全部”以匹配 Material 表中的总行数。

我做了什么

我用 useState创建 rowsPerPage ，并在 handleChangeRowsPerPage 函数中设置 rowsPerPage 。我使用组件覆盖来自定义分页并将 rowsPerPage 和处理程序传递给它的 Prop 。我还将 rowsPerPage 传递给 MaterialTable 的 pageSize 选项。

我遇到的问题

页面不会重新调整大小，并且 state.pageSize 不会更新。即使 props.options.pageSize 和 Pagination 使用 onChangeRowsPerPage 成功更新。

链接到 sandbox

import React, { useState } from "react";
import MaterialTable from "material-table";
import { TablePagination } from "@material-ui/core";

export default function ComponentOverriding() {
  const [rowsPerPage, setRowsPerPage] = useState(5);
  //updates pagination, but no re-size
  const handleChangeRowsPerPage = event => {
    //enable to set rows per page to match total count
    event.target.value === "All"
      ? setRowsPerPage(data.length)
      : setRowsPerPage(event.target.value);
  }; 

  const data = [
    { name: "Mehmet", surname: "Baran", birthYear: 1987 },
    { name: "Zerya Betül", surname: "Baran", birthYear: 2017 }
  ];
  return (
    <MaterialTable
      title="Component Override Demo"
      columns={[
        { title: "Name", field: "name" },
        { title: "Surname", field: "surname" },
        { title: "Birth Year", field: "birthYear" }
      ]}
      data={data}
      //options.pageSize updates, but no re-size
      options={{ pageSize: rowsPerPage }}
      // onChangeRowsPerPage={handleChangeRowsPerPage} //TypeError Cannot read property 'value' of undefined
      components={{
        Pagination: props => (
          <TablePagination
            {...props}
            rowsPerPageOptions={[5, 10, 20, "All"]}
            rowsPerPage={rowsPerPage}
            //updates pagination, but no re-size
            onChangeRowsPerPage={handleChangeRowsPerPage}
          />
        )
      }}
    />
  );
}

Answer 1

我有一个解决方案，
无需自定义分页
只需更换

<MaterialTable
  options={{ 
    pageSize: rowsPerPage,
    pageSizeOptions: [5, 10, 20],
  }}
/>

和

<MaterialTable
  options={{ 
    pageSize: rowsPerPage,
    pageSizeOptions: [5, 10, 20, { value: data.length, label: 'All' }],
  }}
/>