[英]"material-table" - How to add more rows per page and fix rendering - ReactJs
I am trying to apply more rows per page to my table from material-table
.我正在尝试从material-table
每页更多行应用到我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 . rowsPerPageOptions={[5, 10, 25, 50, 100]}
,但我的问题是当我应用 100 行时,表格会扩展到空白行。 ( 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 . (我目前只从后端收到 24 行(文档))所以基本上它必须限于我拥有的数据。 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 PageSize:将在每个页面上呈现的行数
pageSizeOptions: Page size options that could be selected by user pageSizeOptions:用户可以选择的页面大小选项
options={{ pageSize:10, pageSizeOptions:[10,20,30],
}} }}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.