"material-table" - 如何在每页添加更多行并修复渲染 - ReactJs

Question

我正在尝试在 material table 中为我的 table 每页应用更多行。直到现在我发现你可以添加一个数组，其中包含每页 ex 的如意行。 rowsPerPageOptions={[5, 10, 25, 50, 100]} ，但我的问题是当我应用第 100 行时，table 扩展到空白行。（我目前只从后端收到 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}
                      />
    ),

Answer 1

如 docs 中所述，您可以使用 emptyRowsWhenPaging 并在选项中将其设置为 false。

Answer 2

我们可以在每页添加行数和进一步的分页选项，如

   <MaterialTable
      title=""
      columns={myColumns}
      data={myData}      
      options={{
        paging:true,
        pageSize:6,       // make initial page size
        emptyRowsWhenPaging: false,   // To avoid of having empty rows
        pageSizeOptions:[6,12,20,50],    // rows selection options
      }}
    />

Answer 3

在 material table

的选项部分添加这些属性

    pageSize:10
    pageSizeOptions:[10,20,30]

PageSize: 每页显示的行数

pageSizeOptions: 用户可选择的页面大小选项

 options={{
     pageSize:10,
     pageSizeOptions:[10,20,30],

}}

"material-table" - 如何在每页添加更多行并修复渲染 - ReactJs

"material-table" - How to add more rows per page and fix rendering - ReactJs

javascript

reactjs

material-table