我正尝试将每页从material-table
到我的表的更多行。到现在为止,我发现您可以添加一个数组,每页ex的行数不一。 rowsPerPageOptions={[5, 10, 25, 50, 100]}
但是我的问题是,当我应用100行时,表格扩展到空白行。 (我目前仅从后端接收24行(文档))因此,从根本上讲,它必须限于我拥有的数据。有人可以帮我吗?谢谢
divideItems = () => {
let startIndex = ((parseInt(this.state.activePaginationTab) + 1) * this.state.rowsPerPage) - this.state.rowsPerPage;
let endIndex = (parseInt(this.state.activePaginationTab) + 1) * this.state.rowsPerPage - 1;
let tabItems = [];
for (let i = startIndex; i <= endIndex; i++) {
if (this.state.items[i]) {
tabItems.push(this.state.items[i]);
}
}
this.setState({
tabItems
}, () => {
});
}
getNewIndex = (event, page) => {
this.setState({
activePaginationTab: page
}, () => { this.divideItems() })
// this.divideItems(page)
};
handleChangeRowsPerPage = (event) => {
this.setState({
rowsPerPage: event.target.value
}, () => {
this.divideItems();
})
}
render() {
components={{
Pagination: props => (
<TablePagination
{...props}
rowsPerPageOptions={[5, 10, 25, 50,100]}
rowsPerPage={this.state.rowsPerPage}
count={this.state.items.length}
/>
),
答案 0 :(得分:3)
我们可以为每页添加行,并提供更多分页选项
<MaterialTable
title=""
columns={myColumns}
data={myData}
options={{
paging:true,
pageSize:6, // make initial page size
emptyRowsWhenPaging: true, //to make page size fix in case of less data rows
pageSizeOptions:[6,12,20,50], // rows selection options
}}
/>
答案 1 :(得分:1)
如docs中所述,您可以使用emptyRowsWhenPaging并将其在选项中设置为false。
答案 2 :(得分:1)
在材料表的选项部分添加这些属性
pageSize:10
pageSizeOptions:[10,20,30]
PageSize:将在每个页面上呈现的行数
pageSizeOptions:用户可以选择的页面大小选项
options={{
pageSize:10,
pageSizeOptions:[10,20,30],
}}