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"
              />

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

感谢您的帮助！

Answer 1

签出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"));

Answer 2

Nathan的答案很好用，但是无需动态计算pageSize即可解决。比较简单的方法是在react-table组件上定义minRows属性。默认情况下，它是未定义的，并且react-table将添加尽可能多的空白行来填充页面。定义此设置会限制创建的填充行的数量，因此您可以将其设置为0或1以实现所需的功能，具体取决于是否希望在没有显示行的情况下呈现填充行。

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

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

2 个答案: