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

Question

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 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 a blank one. ( I receive at the moment only 24 rows (documents) from the backend ) So basically it has to be limited to the data that I have. Can someone 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}
                      />
    ),

you can accept my answer, if you think it's useful :) – DevLoverUmar Jan 06 '21 at 02:36 — DevLoverUmar, Jan 06 '21 at 02:36

score 21 · Answer 1 · edited Oct 03 '21 at 10:38

21

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: false,   // To avoid of having empty rows
        pageSizeOptions:[6,12,20,50],    // rows selection options
      }}
    />

edited Oct 03 '21 at 10:38

S. Hesam

5,266
3
37
59

answered Sep 24 '20 at 10:41

DevLoverUmar

11,809
11
68
98

This does not work in material-react-table v1.14.0 – Jeremy Bernier Aug 27 '23 at 10:18
Ok as it's an old answer it might not for the new versions. Please add midifications to this answer or add yours to keep this thread up-to-date. – DevLoverUmar Aug 28 '23 at 15:15

score 5 · Accepted Answer · answered Aug 20 '19 at 07:57

5

As mentioned in the docs you can use emptyRowsWhenPaging and set it to false in the options.

answered Aug 20 '19 at 07:57

Domino987

8,475
2
15
38

Thanks mate didn't saw that prop in the documentation – PandaMastr Aug 20 '19 at 07:59
1

It should be more visibel. I'll talk to the maintainer. – Domino987 Aug 20 '19 at 08:00
yeah it will be a good idea . Do you know an property to change the default view of the rows . At deafault is set to 5 , but is there some prop that can be set to 10 for ex. ? – PandaMastr Aug 20 '19 at 08:06
3

There is the pageSize option. – Domino987 Aug 20 '19 at 08:08
Yeah just found it also thank you . You made my day – PandaMastr Aug 20 '19 at 08:09

score 5 · Answer 3 · answered Jun 23 '21 at 06:16

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],
```
}}

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

3 Answers3