[英]How to combine Material-table with Material-UI Dialog? (ReactJS)
[英]"material-table" - How to add more rows per page and fix rendering - ReactJs
我正在嘗試從material-table
每頁更多行應用到我material-table
。 到現在為止,我發現您可以添加一個數組,其中包含每頁如一廂情願的行。 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}
/>
),
我們可以為每頁添加行和進一步的分頁選項
<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。
在材料表的選項部分添加這些屬性
pageSize:10
pageSizeOptions:[10,20,30]
PageSize:將在每個頁面上呈現的行數
pageSizeOptions:用戶可以選擇的頁面大小選項
options={{ pageSize:10, pageSizeOptions:[10,20,30],
}}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.