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

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

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

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

Answer 2

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

Answer 3

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

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