“材料表”-如何每页添加更多行并修复渲染-ReactJs

时间:2019-08-20 07:35:41

标签: javascript reactjs material-table

我正尝试将每页从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}
                      />
    ),

3 个答案:

答案 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],
    

    }}