CODEWITHSUNDEEP
paginationmaterial-table
STha
STha

Reputation: 99

Any Example for custom pagination in material-table and reactjs

Any Example for custom pagination? material-table and reactjs. I want to pass from and to page size to the server and need to hide the first and last button from paging

Upvotes: 9

Views: 19681

Answers (1)

Orestes
Orestes

Reputation: 637

Styudy this example https://material-table.com/#/docs/features/component-overriding in order to understand better the code i will show: With this you can access directly to the pagination component and make the call by your own. 

       `components={{
              Pagination: props => (
                           <TablePagination
                           {...props}
                          rowsPerPageOptions={[5, 10, 20, 30]}
                      rowsPerPage={this.state.numberRowPerPage}
                      count={this.state.totalRow}
                      page={
                        firstLoad
                          ? this.state.pageNumber
                          : this.state.pageNumber - 1
                      }
                      onChangePage={(e, page) =>
                        this.handleChangePage(page + 1)
                      }
                      onChangeRowsPerPage={event => {
                        props.onChangeRowsPerPage(event);
                        this.handleChangeRowPerPage(event.target.value);
                      }}
                    />
                  ),
                        }}`

Using the same way you can change the text of this buttons, please check this example https://material-table.com/#/docs/features/localization.

Best Regards

Upvotes: 21

Related Questions