Pagination

Provide pagination links for your site or app with the multi-page pagination component. Set items to the number of pages. activePage prop dictates which page is active


          class PaginationBasic extends React.Component {
            constructor(...args) {
              super(...args);

              this.state = { activePage: 1 };
            }

            handleSelect(eventKey) {
              this.setState({
                activePage: eventKey
              });
            }

            render() {
              return (
                <div>
                  <Pagination
                    bsSize="large"
                    items={10}
                    activePage={this.state.activePage}
                    onSelect={::this.handleSelect} />
                  <br />

                  <Pagination
                    bsSize="medium"
                    items={10}
                    activePage={this.state.activePage}
                    onSelect={::this.handleSelect} />
                  <br />

                  <Pagination
                    bsSize="small"
                    items={10}
                    activePage={this.state.activePage}
                    onSelect={::this.handleSelect} />
                </div>
              );
            }
          }

          
        

# More options

such as first, last, previous, next, boundaryLinks and ellipsis.


          class PaginationAdvanced extends React.Component {
            constructor(...args) {
              super(...args);

              this.state = { activePage: 1 };
            }

            handleSelect(eventKey) {
              this.setState({
                activePage: eventKey
              });
            }

            render() {
              return (
                <Pagination
                  prev
                  next
                  first
                  last
                  ellipsis
                  boundaryLinks
                  items={20}
                  maxButtons={5}
                  activePage={this.state.activePage}
                  onSelect={::this.handleSelect} />
              );
            }
          }

          
        

# Props

NameTypeDefaultDescription
activePagenumber1
boundaryLinksbooleanfalseWhen true, will display the first and the last button page
bsClassstring'pagination'Base CSS class and prefix for the component. Generally one should only change bsClass to provide new, non-Bootstrap, CSS styles for a component.
buttonComponentClasselementTypeSafeAnchorYou can use a custom element for the buttons
ellipsisboolean | node trueWhen true, will display the default node value ('…'). Otherwise, will display provided node (when specified).
firstboolean | node falseWhen true, will display the default node value ('«'). Otherwise, will display provided node (when specified).
itemsnumber1
lastboolean | node falseWhen true, will display the default node value ('»'). Otherwise, will display provided node (when specified).
maxButtonsnumber0
nextboolean | node falseWhen true, will display the default node value ('›'). Otherwise, will display provided node (when specified).
onSelectfunction
prevboolean | node falseWhen true, will display the default node value ('‹'). Otherwise, will display provided node (when specified).