Unable to go to next page using the onChange function in MaterialTable

Question

I'm trying to change the page in MaterialTable but am unable to do so. Although, the page size functionality is working but the page change functionality isn't.

Here is my state:

constructor(props) {
    super(props)
    this.state = {
        status: false,
        message: "",
        page: 0,
        pageSize: 5,
    }
}

And inside MaterialTable, I have this:

<MaterialTable
                            title=""
                            page={this.state.page}
                            totalCount={this.props.operations.ids ? this.props.operations.ids.length : 0}
                            columns={[
                                {
                                    title: 'Sr No.', field: 'serialNumber', render: rowData => {
                                        return _.findIndex(renderingData, { "id": rowData.id }) + 1
                                    }
                                },
                                { title: 'Time Stamp', field: 'date', render: rowData => { return moment(rowData.date).format("YYYY/MM/DD hh:mm a") } },
                                { title: 'Details', field: 'name' },
                                {
                                    title: 'View Details', field: 'viewDetails', render: rowData => {
                                        return <Button
                                            variant="contained"
                                            color={"primary"}
                                            onClick={() => this.props.setTab(rowData)}
                                        >View</Button>
                                    }
                                },
                            ]}
                            onChangePage={(page, pageSize) => {
                                this.setState({ ...this.state, page, pageSize})
                            }}
data={renderingData}
/>

Let me know if any modification is required for this. I still haven't been able to solve the problem.

Answer 1

Ok, so the problem was that the data that goes into Material Table was the same even after clicking the Next page button. I went around it by adding this in the data. The rest of the code is the same.

data={renderingData.slice(this.state.page*this.state.pageSize, this.state.page*this.state.pageSize + this.state.pageSize)}

This code makes sure that new data is present when you click on next page.

Answer 2

clicking on next button , you also need to increase the page number

onChangePage={(event,page ) => { this.setState({ ...this.state, page}) }}

also change function handleChangeRowsPerPage(event) { setRowsPerPage(+event.target.value); }