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
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.
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.
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With