W3cubDocs

Pagination

A set of presentational components for building pagination UI.

let active = 2;
let items = [];
for (let number = 1; number <= 5; number++) {
  items.push(
    <Pagination.Item key={number} active={number === active}>
      {number}
    </Pagination.Item>,
  );
}

const paginationBasic = (
  <div>
    <Pagination>{items}</Pagination>
    <br />

    <Pagination size="lg">{items}</Pagination>
    <br />

    <Pagination size="sm">{items}</Pagination>
  </div>
);

render(paginationBasic);

More options

For building more complex pagination UI, there are few convenient sub-components for adding "First", "Previous", "Next", and "Last" buttons, as well as an Ellipsis item for indicating previous or continuing results.

<Pagination>
  <Pagination.First />
  <Pagination.Prev />
  <Pagination.Item>{1}</Pagination.Item>
  <Pagination.Ellipsis />

  <Pagination.Item>{10}</Pagination.Item>
  <Pagination.Item>{11}</Pagination.Item>
  <Pagination.Item active>{12}</Pagination.Item>
  <Pagination.Item>{13}</Pagination.Item>
  <Pagination.Item disabled>{14}</Pagination.Item>

  <Pagination.Ellipsis />
  <Pagination.Item>{20}</Pagination.Item>
  <Pagination.Next />
  <Pagination.Last />
</Pagination>

API

Pagination

import Pagination from 'react-bootstrap/Pagination'

Name	Type	Default	Description
size	`'sm'` \| `'lg'`		Set's the size of all PageItems.
bsPrefix	string	`'pagination'`	Change the underlying component CSS base class name and modifier class names prefix. This is an escape hatch for working with heavily customized bootstrap css.

PageItem

import PageItem from 'react-bootstrap/PageItem'

Name	Type	Default	Description
active	boolean	`false`	Styles PageItem as active, and renders a `<span>` instead of an `<a>`.
activeLabel	string	`'(current)'`	An accessible label indicating the active state..
disabled	boolean	`false`	Disables the PageItem
href	string
onClick	function		A callback function for when this component is clicked

© 2014–present Stephen J. Collings, Matthew Honnibal, Pieter Vanderwerff
Licensed under the MIT License (MIT).
https://react-bootstrap.github.io/components/pagination/