React table 动态页面大小但有大小限制和分页

Question

我正在使用 React Table，我需要根据数据的长度动态设置 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 个作为默认页面大小。我似乎无法理解这样做的逻辑。

感谢您的帮助！

Answer 1

查看 React-Table's sample table。

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

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

请注意，我完全删除了 defaultPageSize 并通过您的三元运算符处理它。您的 table 会增长到 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"));

Answer 2

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

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

Answer 3

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

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

React table 动态页面大小但有大小限制和分页

React table dynamic page size but with size limit and pagination

reactjs

react-table