材料表如何将页面大小设置为全部答案

【问题标题】：Material table how to set page size to All材料表如何将页面大小设置为全部
【发布时间】：2020-10-08 02:24:51
【问题描述】：

我正在使用 React + Material Table。

要实现的目标

我希望可以选择将pageSize 设置为“全部”以匹配材料表中的总行数。

我做了什么

我使用useState 创建 rowsPerPage ，并在 handleChangeRowsPerPage 函数中设置 rowsPerPage 。我使用组件覆盖来自定义分页并将 rowsPerPage 和处理程序传递给它的道具。我还将 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}
          />
        )
      }}
    />
  );
}

【问题讨论】：

这个有运气吗？也想拥有All 的大小，但找不到任何东西。

标签： javascript reactjs material-ui

【解决方案1】：

我有一个解决方案，无需自定义分页直接替换

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

与

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

【讨论】：

【解决方案2】：

为了给 Ashish 的答案添加一点内容，您还应该确保 data.length 不等于零，否则当您选择 All 时，您将在行下拉菜单中看到 [object Object] rows。

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

【讨论】：