How to handle pagination in react table?

Question

I am working on a react app where a table is rendered and I want to implement pagination on it,table is working fine with data coming from a mock api but the pagination is not working.

Can someone suggest some methods? Here's my code for table:

import React, { Component } from "react";
import { Table, Header, Menu, Icon, Pagination } from "semantic-ui-react";
import axios from "axios"

//create a react component with name MessageDashBoard
export default class MessageDashBoard extends Component{

    //constructor
    constructor(props){
        super(props);
        this.state = {
            messages: [],
            page: 1,
            total: 0,
            loading: false
        }
    }
    //componentDidMount
    componentDidMount(){
        this.getMessages();
    }
    //getMessages
    getMessages(){
        this.setState({loading: true});
        axios.get('https://my-json-server.typicode.com/himanshuranjan30/demo/db')
        .then(response => {
            console.log(response.data.data);
            this.setState({
                messages: response.data.data,
                total: response.data.data.length,
                loading: false
            });
        })
        .catch(error => {
            console.log(error);
        });
    }
//handlePageChange
handlePageChange(page){
    this.setState({page: page});
    this.getMessages();
}



    //render

    
    render(){
       //show response data in a table
        return(
            <div>
                <Table celled>
                <Table.Header fullWidth>
            <Table.Row>
              <Table.HeaderCell>message_ctrl_id</Table.HeaderCell>
              <Table.HeaderCell>message</Table.HeaderCell>
              <Table.HeaderCell>message status</Table.HeaderCell>
              <Table.HeaderCell>acknowledgement</Table.HeaderCell>
              <Table.HeaderCell>acknowledgement status</Table.HeaderCell>
            </Table.Row>
            </Table.Header>
                    <Table.Body>
                        {this.state.messages.map(message => {
                            return(
                                <Table.Row key={message.message_ctrl_id}>
                                    <Table.Cell>{message.message_ctrl_id}</Table.Cell>
                                    <Table.Cell>{message.message}</Table.Cell>
                                    <Table.Cell>{message.message_status}</Table.Cell>
                                    <Table.Cell>{message.acknowledgement}</Table.Cell>
                                    <Table.Cell>{message.acknowledgement_status}</Table.Cell>
                                </Table.Row>
                            )
                        }   
                        )}
                    </Table.Body>
                    <Table.Footer>
                        <Table.Row>
                            <Table.Cell>
                                <Pagination

                                    page={this.state.page}
                                    total={this.state.total}
                                    loading={this.state.loading}
                                    onPageChange={()=>this.handlePageChange(this.state.page)}
                                    perPage={10}
                                    pageSize={10}
                                    pagination={<Pagination.Pagination />}
                                />
                            </Table.Cell>
                        </Table.Row>
                    </Table.Footer>
                </Table>
            </div>
        )

    }

}

In the above code,I have implemented a table whose data is getting fetched using axios and then I am rendering it on the page.I am also able to see the page buttons underneath but they are not working on click.How do I set no of data per page and able to change pages?

Thanks

Answer 1

you need these modifications:

1. in getMessages you should get page and also correct total as follows:

let temp = [...this.state.messages, ...response.data.data]; // if you  want to have all messages in one page! otherwise your code is fine
this.setState({
                messages: temp,
                total: temp.length,
                page: response.data.page, // your backend response should have current page parameter
                loading: false
            });

2. in Pagination you should modify onPageChange as follows:

onPageChange={()=>this.handlePageChange(this.state.page+1)}