use pagination with react-bootstrap table

Question

I am building a basic react app using create-react-app and react-bootstrap. I am using a table to show information using from react-bootstrap https://react-bootstrap.github.io/components/table/. I am trying to get pagination working for the table and I am not sure how to get around it to work with table. Following is a code snippet of my component, I have added the pagination code-piece from react-bootstrap which just displays the pagination footer at the bottom but doesn't actually paginate the results. App.js

import React, { Component } from 'react';
import Table from 'react-bootstrap/lib/Table';
import Pagination from 'react-bootstrap/lib/Pagination';

export class App extends Component {

renderList() {
  return(
    <Table striped hover bordered condensed>
      <thead>
        <tr>
          <th>Name</th>
          <th>Description</th>
          <th>Forks</th>
          <th>Clone URL</th>
        </tr>
      </thead>
      <tbody>
        {this.state.response.map((object) => {
          return (
            <tr>
              <td><a onClick={this.handleClick.bind(this,object)}>{object.name} </a></td>
              <td>{object.description}</td>
              <td><Glyphicon glyph="cutlery" /> {object.forks_count}</td>
              <td>{object.clone_url}</td>
            </tr>
          );
        })}
        </tbody>
      </Table>
    );
  }

  renderPagination() {
    let items = [];
    for (let number = 1; number <= 10; number++) {
      items.push(
       <Pagination.Item>{number}</Pagination.Item>
      );
    }
    return (
      <Pagination bsSize="small">{items}</Pagination>
    );
  }

  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Netflix Repositories</h1>
        </header>
        {this.renderList()}
        <CommitList ref={(ref) => this.commitList = ref} 
          show={this.state.show}
          commits={this.state.commits} />
        {this.renderPagination()}
      </div>
    );
  }
}

How do I paginate the results on the table?

Answer 1

2 ways to handle this:

1. use only front-end pagination: get your whole results and divide your result with a list size, 10 for example, and suppose you have totally 50 list items, So you have 50/10 == 5 pages. for each pagination item, add an "onClick" to it and change your displayed page.

2. use both front-end and back-end pagination: fetch only the specific part of your result, and deal with it in front-end. (search Spring JPA Pagination for more details.)

Answer 2

Use Antd design for responsive table and pagination Here's the link: https://ant.design/components/pagination/