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

【问题标题】：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，那么我需要分页，

标签： reactjs react-table

【解决方案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}
/>

【讨论】：