reactjs - react 表动态页面大小，但具有大小限制和分页

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

感谢您的帮助!

Answer 1

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

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