I am trying to paginate material table data using TablePagination. The pageSize property is initially defined as a state variable and updated based on selected pageSizeOptions. But the page size is not updated. It always remains the initial value even though the state is updated.
The below is the code snippet,
class Paginate extends Component {
constructor(props) {
super(props);
this.state = {
data:[//sample data],
page: 0,
rowsPerPage: 5,
totalCount: //total count,
};
}
handleChangePage = (event, newPage) => {
this.setState({ ...this.state, page: newPage });
};
handleChangeRowsPerPage = (event) => {
this.setState({ ...this.state, rowsPerPage: event.target.value, page: 0 });
};
render(){
const { totalCount, rowsPerPage, page , data} = this.state;
return (
<MaterialTable
title="Paginate"
data={data}
columns={columns}
options={{
paging: true,
pageSize: rowsPerPage,
emptyRowsWhenPaging: true,
pageSizeOptions: [5, 10, 20, 30, 50, 75, 100],
}}
components={{
Pagination: (props) => (
<TablePagination
{...props}
count={totalCount}
page={page}
rowsPerPage={rowsPerPage}
onChangePage={this.handleChangePage}
onChangeRowsPerPage={this.handleChangeRowsPerPage}
component="div"
/>
),
}}
/>)
}
when the code is run the page size is set to 5 and 5 records are displayed. When the page size option is changed, the re-rendered page will still have page size 5.
