Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

like image 394
STha Avatar asked May 20 '19 04:05

STha


People also ask

How add pagination in table using react JS?

js const calculateRange = (data, rowsPerPage) => { const range = []; const num = Math. ceil(data. length / rowsPerPage); let i = 1; for (let i = 1; i <= num; i++) { range. push(i); } return range; }; const sliceData = (data, page, rowsPerPage) => { return data.

How can I create custom pagination?

To configure the plugin, go to the new Pagination tab in your dashboard. The plugin's default settings will automatically hide your theme's existing pagination and replace it with the custom pagination from the plugin. All you need to do is configure the settings for the style and behavior of your new pagination.


1 Answers

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

like image 174
Orestes Avatar answered Oct 01 '22 02:10

Orestes