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

Posted 2023-02-22

【中文标题】材料表如何将页面大小设置为全部

【英文标题】：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 的大小，但找不到任何东西。

【参考方案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' ],
  
/>