title: Paginating a table in React-bootstrap
body: <p>I am trying to paginate a table using react-bootstrap. To do this I created a page below. However instead of seeing the pagination component in the docs, I see a bunch of <code>&lt;li&gt;</code> tags for "&lt;&lt;", "&lt;" "1", "2", ">", ">>" on separate lines.</p>
  
  <p>Also when I click the next button or a page button instead getting a number in the eventKey of my handleSelect I get the entire event object.  Looking around such as here: <a href="https://www.codereviewvideos.com/course/pagination-filtering-and-sorting/video/react-pagination-part-1" rel="nofollow noreferrer">https://www.codereviewvideos.com/course/pagination-filtering-and-sorting/video/react-pagination-part-1</a> and <a href="https://react-bootstrap.github.io/components.html#pagination" rel="nofollow noreferrer">https://react-bootstrap.github.io/components.html#pagination</a>, it seems react-bootstrap returns a number. In the example documentation all the list items have a href defined. However, my components do not, why does it not setup proper links for the page buttons?  </p>
  
  <p>-- Updates --<br>
  I need to download the styling from: <a href="https://getbootstrap.com/docs/3.3/customize/" rel="nofollow noreferrer">https://getbootstrap.com/docs/3.3/customize/</a> to get the appropriate styling to work for .paginate and .paginate-md</p>
  
  <p>Why does the react bootstrap styling and links fail for my case?</p>
  
  <pre><code>export default class MyPage extends React.Component {
  
  constructor(props) {
      super(props);
  
      this.state = {
          activePage: 1
      };
      this.handleSelect = this.handleSelect.bind(this);
  }
  
  handleSelect(eventKey) {
      console.log('handle select', eventKey);
      this.setState({
        activePage: eventKey,
      });
  }
  
  getPaginatedTable() {
      var dataRows = Globals.Data["dataList"]; 
      const totalPages = Math.ceil(dataRows.length/PER_PAGE_SIZE);
      var startOffset = (this.state.activePage-1) * PER_PAGE_SIZE;
      var startCount = 0;
      return (
          &lt;div id="dataTableDiv"&gt;
              &lt;table&gt;
                  &lt;thead&gt;
                     //mycolumns
                  &lt;/thead&gt;
                  &lt;tbody&gt;
                      {   dataRows.map((dataRow, index) =&gt; {
                              if(index &gt;= startOffset &amp;&amp; startCount &lt; PER_PAGE_SIZE){
                                  startCount++;
                                  return (&lt;DataRowDisplay key={index} Data={data} /&gt;);
                              }
                          })
                      }
                  &lt;/tbody&gt;
              &lt;/table&gt;
              &lt;Pagination bsSize="medium"
                  prev
                  next
                  first
                  last
                  ellipsis
                  boundaryLinks
                  items={totalPages}
                  maxButtons={MAX_PAGE_SIZE}
                  activePage={this.state.activePage}
                  onSelect={this.handleSelect}
              /&gt;
          &lt;/div&gt;
      );
  }
  
  
  render() {
      return (
          &lt;div&gt;
              {this.getPaginatedTable()}
          &lt;/div&gt;
      );
  }
  </code></pre>