how to apply pagination to a dynamic table in react js

Question

I'm trying to apply pagination to a dynamic table which is created by fetching data from an API. I've applied pagination while I was creating bootstrap cards from the same data but I don't know how to do this when creating a table.

here is the code on which I want to apply pagination-

 render(){
    return(
        <div className='container'>
            <table className='table table-striped'>
                <thead>
                    <tr>
                        <th>User_Id</th>
                        <th>User_Name</th>
                        <th>Email</th>
                        <th>Profile Picture</th>
                    </tr>
                </thead>
                <tbody>
                    {this.state.arr.map((card)=>{
                        return(
                            <tr>
                                <td>{card.user_id}</td>
                                <td>{card.user_name}</td>
                                <td>{card.email}</td>
                                <td>{'http://api.getlessuae.com/'+card.profile_picture}</td>
                                <td><button className="btn btn-outline-primary ml-2 my-2 my-sm-0">Edit</button></td>
                                <td><button className="btn btn-outline-primary ml-2 my-2 my-sm-0">Delete</button></td>
                            </tr>
                    ) })}
                </tbody>
             </table>
        </div>

    )

}

for now, I have 20 users on the table and I want to show only 5 users per page.

the table looks like this-

Possible duplicate of [how to implement Pagination in reactJs](https://stackoverflow.com/questions/40232847/how-to-implement-pagination-in-reactjs) — Murtaza Hussain, May 13 '19 at 08:44
@trixn The difference is when we go to the next page, Heading of the table also disappears with the data. I want the table headings there every time page changes. — , May 13 '19 at 08:54
@MrigankShekharShringi Well of course you must only paginate the elements in the body of the table. I don't see how that should affect the header. — trixn, May 13 '19 at 08:58

score 0 · Answer 1 · answered May 13 '19 at 08:40

You can use react-paginate https://www.npmjs.com/package/react-paginate

<ReactPaginate
      previousLabel={'previous'}
      nextLabel={'next'}
      breakLabel={'...'}
      breakClassName={'break-me'}
      pageCount={this.state.pageCount}
      marginPagesDisplayed={2}
      pageRangeDisplayed={5}
      onPageChange={this.handlePageClick}
      containerClassName={'pagination'}
      subContainerClassName={'pages pagination'}
      activeClassName={'active'}
    />

how to apply pagination to a dynamic table in react js

1 Answers1