title: react-bootstrap-table - own number of pagination items
body: <p>I am using BootstrapTable from react-bootstrap-table and taking data from external API. Each time I get an object of 30 items. Therefore the pageSize is 30 but I get the <em>totalPages</em> variable from API which is let's say 6. Unfortunately, the table data is each time 30 so there is just one page
  <a href="https://i.stack.imgur.com/hoqSy.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/hoqSy.png" alt="enter image description here"></a></p>
  
  <p>I would like to tell the table how many pages I want to have - 6 - and each time <em>onClick</em> in the pagination item I will call another API link. How can I achieve this?</p>
  
  <pre><code>  onPageChange = page =&gt; {
      alert(`Let's go to page: ${page}`);
    };
  
    render() {
      const options = {
        onPageChange: this.onPageChange,
        hideSizePerPage: true,
        page: 1,
        sizePerPage: this.props.pageSize,
        paginationSize: 6,
      };
      return (
        &lt;Card&gt;
          &lt;CardHeader&gt;
            &lt;h1&gt; Sales report&lt;/h1&gt;
          &lt;/CardHeader&gt;
          &lt;CardBody&gt;
            &lt;BootstrapTable
              data={this.props.sales}
              version="4"
              striped
              hover
              pagination
              options={options}
              keyField="Type"
            &gt;
              {tableHeaders.map((header, index) =&gt; (
                &lt;TableHeaderColumn key={index} dataField={header}&gt;
                  {header}
                &lt;/TableHeaderColumn&gt;
              ))}
            &lt;/BootstrapTable&gt;
          &lt;/CardBody&gt;
        &lt;/Card&gt;
      );
    }
  </code></pre>