Pagination Props

Following we list all props for paginationFactory from react-bootstrap-table2-paginator.

import paginationFactory from 'react-bootstrap-table2-paginator';

const pagination = paginationFactory({
  page: 2,
  ...
});

<BootstrapTable pagination={ pagination } ... />

Required

NONE

Optional

• page
• sizePerPage
• totalSize
• pageStartIndex
• paginationSize
• sizePerPageList
• withFirstAndLast
• alwaysShowAllBtns
• firstPageText
• prePageText
• nextPageText
• lastPageText
• firstPageTitle
• prePageTitle
• nextPageTitle
• lastPageTitle
• hideSizePerPage
• hidePageListOnlyOnePage
• onPageChange
• onSizePerPageChange
• showTotal
• paginationTotalRenderer

---

pagination.page - [Number]

Use pagination.page specify the current page when table render.

It's necessary value when remote pagination is enabled.

pagination.sizePerPage - [Number]

Use pagination.sizePerPage specify the current size per page when table render.

It's necessary value when remote pagination is enabled.

pagination.totalSize - [Number]

It's only work for remote mode, because react-bootstrap-table2 will never know the totally data size actually. Remeber to assign totalSize when you enable the remote pagination.

pagination.pageStartIndex - [Number]

Default is 1, which means the first page index is start from 1. If your first page want to start from 0, you can control it via pageStartIndex.

pagination.paginationSize - [Number]

Default is 5, which means the size of pagination.

pagination.sizePerPageList - [Array]

Default size per page have 10, 25, 30, 50. You can assign a number of array to replace this default list. However, sizePerPageList is flexible to let you decide the text display on the dropdown list:

[ {
  text: '5th', value: 5
}, {
  text: '10th', value: 10
}, {
  text: 'All', value: data.length
} ]

pagination.withFirstAndLast - [Bool]

Default is true, you can disable it if you don't want to show the "Go to first" and "Go to last" page buttons.

pagination.alwaysShowAllBtns - [Bool]

Default is false, which means react-bootstrap-table2 will hide the next or previouse page button if unnecessary. Anyway, you can still show them always via alwaysShowAllBtns prop.

pagination.firstPageText - [Any]

A quick way to specify the text on the first page button.

pagination.prePageText - [Any]

A quick way to specify the text on the previous page button.

pagination.nextPageText - [Any]

A quick way to specify the text on the next page button.

pagination.lastPageText - [Any]

A quick way to specify the text on the last page button.

pagination.firstPageTitle - [Any]

A quick way to specify the title on the first page button.

pagination.prePageTitle - [Any]

A quick way to specify the title on the previous page button.

pagination.nextPageTitle - [Any]

A quick way to specify the title on the next page button.

pagination.lastPageTitle - [Any]

A quick way to specify the title on the last page button.

pagination.hideSizePerPage - [Bool]

You can hide the size per page dropdown.

pagination.hidePageListOnlyOnePage - [Bool]

You can hide the pagination when there's only one page in table. Default is false.

pagination.showTotal - [Bool]

Default is false, if enable will display a text to indicate the row range of current page.

pagination.paginationTotalRenderer - [Function]

Custom the total information, this callbacok function have three arguments: from, to and size. Following is an example:

const customTotal = (from, to, size) => (
  <span className="react-bootstrap-table-pagination-total">
    Showing { from } to { to } of { size } Results
  </span>
);

pagination.onPageChange - [Function]

Accept a callback function and will be called when page changed. This callback function get below arguments:

Arguments

• page
• sizePerPage

pagination.onSizePerPageChange - [Function]

Accept a callback function and will be called when size per page changed. This callback function get below arguments:

Arguments

• page
• sizePerPage