I am trying to apply more rows per page to my table from material-table
. Until now i found out that you can add an array with with the wishful rows per page ex. rowsPerPageOptions={[5, 10, 25, 50, 100]}
, but my problem is when i apply the row of 100 the table extends to an blank one . ( i receive at the moment only 24 rows (documents) from the backend ) So basicly it has to be limitted to the data that i have . Can some one give me a hand ? Thank you
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}
/>
),
We can add rows per page and further pagination options as
<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
}}
/>
如文档中所述,您可以使用 emptyRowsWhenPaging 并在选项中将其设置为 false。
Add these attribute in the options section of the material table
pageSize:10
pageSizeOptions:[10,20,30]
PageSize: Number of rows that would be rendered on every page
pageSizeOptions: Page size options that could be selected by user
options={{ pageSize:10, pageSizeOptions:[10,20,30],
}}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.