title: How to implement pure client side pagination without requests to the server in react, using react-table and react-paginate components?
body: <p>I am using an array of objects that comes from the server in componentDidMount method and then I save it into the state. </p>
  
  <p>If I change page size from select component everything is ok, but the page number clicks don't work. </p>
  
  <p>For example,  I set the page size to 20. My data array length equal to 29, so I have 2 pages. In the react table, there are 20 rows, and selected page - number 1. When I select page 2, nothing happens. It should have shown the remaining 9 rows but nothing occurs.</p>
  
  <p>I know that in general the amount of data corresponding to the page size must come from the server when click to another page occurs. But I was given the task that I should implement everything without requests to the server. </p>
  
  <p>How I can implement this? Any of your help will be useful, great thanks in advance! Here is my code:</p>
  
  <pre><code>constructor:
      perPage: JSON.parse(localStorage.getItem('detailsTablePerPageOrderEdit')) || 20,
      pageRanges: [20, 50, 100, 200, 300, 500, 1000],
  
                   &lt;CustomReactTable
                      columns={columnsDetails}
                      tableHeight={_.isEmpty(this.state.details) ? '25vh' : '80%'}
                      data={this.state.details}
                      onTrClick={(data) =&gt; this.handleDetailSelect(data)}
                      pageSize={this.state.perPage}
                    /&gt;
                    &lt;PaginationRow
                      changePerPage={(pageSize) =&gt; this.onPageSizeChange(pageSize)}
                      count={this.state.details.length}
                      handlePageChange={(page) =&gt; this.handlePageChange(page)}
                      page={this.state.page}
                      perPage={this.state.perPage}
                      pageRanges={this.state.pageRanges}
                    /&gt;
  
          handlePageChange = (page) =&gt; {           
         this.setState({ page: page.selected + 1 }); 
            //I think, here should be some code to implement pagination
         };
  onPageSizeChange = pageSize =&gt; {
      console.log(typeof pageSize);
      localStorage.setItem('detailsTablePerPageOrderEdit', pageSize);
      this.setState({
        page: 1,
        perPage: pageSize
      });
    };
  </code></pre>
  
  <p>paginationRow component:</p>
  
  <pre><code>import React from 'react';
  import {Row, Col} from 'react-bootstrap';
  import ReactPaginate from 'react-paginate';
  import PaginationCount from './PaginationCount';
  import i18n from '../../i18n';
  
  export default (props) =&gt; {
  
    if(props.count &lt;= 0 || props.page &lt; 0 || props.perPage &lt; 0){
      return null;
    }
  
  
    const fromItem = (props.page - 1) * props.perPage + 1;
    let toItem = props.page * props.perPage;
  
    toItem = toItem &gt; props.count ? props.count : toItem;
  
    const handlePageSizeChange = e =&gt; {
      props.changePerPage &amp;&amp; props.changePerPage(e.target.value);
    };
  
    const pageRanges = props.pageRanges || [50, 100, 200, 300, 500, 1000];
  
    return(
      &lt;Row&gt;
        &lt;div className="col padded"&gt;
          &lt;ReactPaginate
            activeClassName="active"
            breakLabel={&lt;a href="#!"&gt;...&lt;/a&gt;}
            containerClassName="pagination"
            disableInitialCallback
            forcePage={props.page - 1}
            initialPage={props.page - 1}
            marginPagesDisplayed={5}
            nextLabel={i18n.t('PaginationRow.next_label')}
            onPageChange={props.handlePageChange}
            pageCount={props.count/props.perPage}
            pageRangeDisplayed={5}
            previousLabel={i18n.t('PaginationRow.previous_label')}
            subContainerClassName="pages pagination"
          /&gt;
        &lt;/div&gt;
        {props.perPage ?
          &lt;div className="col col-md-auto "&gt;
            &lt;div className="form-group"&gt;
              &lt;select
                className="form-control paginationSelect" id="exampleFormControlSelect1"
                name="perPage"
                onChange={handlePageSizeChange}
                value={props.perPage}
              &gt;
                {pageRanges.map(r =&gt; (&lt;option key={r} value={r}&gt;{r}&lt;/option&gt;))}
              &lt;/select&gt;
            &lt;/div&gt;
          &lt;/div&gt;  : null
        }
        &lt;div className="col text-nowrap"&gt;
          &lt;div className="paginationTextInfo"&gt;
            &lt;PaginationCount
              itemFrom={fromItem}
              itemTo={toItem}
              totalCount={props.count}
            /&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/Row&gt;
    );
  };
  </code></pre>