反应表动态页面大小，但有大小限制和分页

Posted 2023-02-19

【中文标题】反应表动态页面大小，但有大小限制和分页

【英文标题】：React table dynamic page size but with size limit and pagination

【发布时间】：2019-05-01 01:21:21

【问题描述】：

我正在使用 React Table，我需要根据数据的长度动态设置表格行。这就是我得到的：

let pgSize = (data.length > 10) ? 5 : data.length;


<ReactTable
    data=data 
    PaginationComponent=Pagination
    columns=[
        
            columns: [
            //column defs
            ]
        
    ]
    defaultPageSize=10
    pageSize=pgSize
    className="-striped -highlight"
/>

我需要动态的行，但如果我将页面大小设置为数据的长度。分页被删除，如果我有 100 行数据，这将是一个问题。我最多需要 10 个作为默认页面大小。我似乎无法理解这样做的逻辑。

感谢您的帮助！

【问题讨论】：

所以你希望它在你的数据少于 defaultPageSize 时缩小页面大小，这样你就没有空行了？

嗨@Nathan，是的，但是如果它大于10，那么我需要分页，

【参考方案1】：

Nathan 的回答工作得很好，但没有必要动态计算 pageSize 来解决这个问题。更简单的方法是在 react-table 组件上定义 minRows 属性。默认情况下它是未定义的，react-table 将根据需要添加尽可能多的空填充行来填充您的页面。定义它会限制创建的填充行的数量，因此您可以将其设置为 0 或 1 以实现您所追求的目标，具体取决于您是否希望在没有要显示的行时呈现填充行。

<ReactTable minRows=1 columns=columns data=data />

【讨论】：

简单有效。谢谢。

【参考方案2】：

查看React-Table's sample table。

我稍微修改了他们的代码以使其适合您的情况。将此代码复制并粘贴到他们的编辑器中以查看输出。

在构造函数中，您可以将makeData(20) 更改为您想要的任何数据量。

请注意，我完全删除了 defaultPageSize 并通过您的三元运算符处理它。您的表将增长到 10（默认大小），但在 11 时，会缩小到只有 5 行。

import React from "react";
import  render  from "react-dom";
import  makeData, Logo, Tips  from "./Utils";

// Import React Table
import ReactTable from "react-table";
import "react-table/react-table.css";

class App extends React.Component 
  constructor() 
    super();
    this.state = 
      data: makeData(20)
    ;
  

  render() 
    const  data  = this.state;
    return (
      <div>
        <ReactTable
          data=data
          pageSize=(data.length > 10) ? 10 : data.length
          columns=[
            
              Header: "Name",
              columns: [
                
                  Header: "First Name",
                  accessor: "firstName"
                ,
                
                  Header: "Last Name",
                  id: "lastName",
                  accessor: d => d.lastName
                
              ]
            ,
            
              Header: "Info",
              columns: [
                
                  Header: "Age",
                  accessor: "age"
                ,
                
                  Header: "Status",
                  accessor: "status"
                
              ]
            ,
            
              Header: 'Stats',
              columns: [
                
                  Header: "Visits",
                  accessor: "visits"
                
              ]
            
          ]
          className="-striped -highlight"
        />
        <br />
        <Tips />
        <Logo />
      </div>
    );
  


render(<App />, document.getElementById("root"));

【讨论】：

哦，我明白了。谢谢！但我尝试将数据设为 25，它给我留下了 3 页，最后一页有 5 个空行。

啊，为了做到这一点，您必须将点击处理程序添加到行按钮并跟踪您所在的页面并使用pgSize=(currentPage*defaultPageSize) < defaultPageSize : data.length - currentPage*defaultPageSize : defaultPageSize 之类的东西。如果不从 pageJump 输入框中获取当前页面，我看不到从 React-Table 获取当前页面的方法。

【参考方案3】：

为了在初始渲染后更新 ReactTable 页面大小，请使用 pageSize 属性：

<ReactTable 
  minRows=0
  data=data 
  defaultPageSize=initialSize
  pageSize=updatedSize
/>