我正在使用 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 个作为默认页面大小。我似乎无法理解这样做的逻辑。
感谢您的帮助!
最佳答案
Nathan 的答案很好,但不需要动态计算 pageSize 来解决这个问题。更简单的方法是在react-table组件上定义minRows属性。默认情况下它是未定义的,react-table 会根据需要添加尽可能多的空填充行来填充页面。定义此限制会限制创建的填充行数,因此您可以将其设置为 0 或 1 来实现您想要的效果,具体取决于您是否希望在没有要显示的行时呈现填充行。
<ReactTable minRows={1} columns={columns} data={data} />
关于reactjs - react 表动态页面大小,但具有大小限制和分页,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53531230/