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

Question

我正在使用 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 个作为默认页面大小。我似乎无法理解这样做的逻辑。

谢谢您的帮助！

原文由 Page F.P.T 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

查看 React-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"));

原文由 Nathan 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

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

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

原文由 Alex 发布，翻译遵循 CC BY-SA 4.0 许可协议