View Source

Pagination

View and navigate heterogeneous content one page at a time.

Pagination is implemented as an encapsulated view system, accepting an array of items as input.

Installation#

npm i --save boundless-pagination

Pagination can also just be directly used from the main Boundless library. This is recommended when you're getting started to avoid maintaining the package versions of several components:

npm i boundless --save

the ES6 import statement then becomes like:

import { Pagination } from 'boundless';

Demo

Louise Fernandez
Database Administrator I
5049 Barnett Road
Nglengkir, Indonesia
p: 6-(697)972-8601
e: lfernandez1@opera.com
Dennis Nichols
Nurse
0 Drewry Drive
Canggetelo, Indonesia
p: 9-(896)552-6623
e: dnichols0@ycombinator.com
Stephen Hamilton
Dental Hygienist
11 David Crossing
Kotabaru, Indonesia
p: 1-(274)517-4270
e: shamilton2@amazon.co.jp
Shawn Richards
Librarian
47533 Sherman Street
Viengxay, Laos
p: 1-(173)205-8062
e: srichards3@4shared.com
John Hansen
Staff Scientist
955 Jackson Park
South Tangerang, Indonesia
p: 5-(650)401-5661
e: jhansen4@sfgate.com
Show Implementation

Component Instance Methods#

When using Pagination in your project, you may call the following methods on a rendered instance of the component. Use refs to get the instance.

  • currentPage() returns the one-indexed page number currently in view

  • jumpToIndex(index: number) renders the page that contains the zero-indexed item

Props#

Required Props#

NameImplementationDescription
getItem
Expects
function
Default Value
() => {}

called with a desired item index when that item comes into view; accepts a Promise if you need to fetch the row asynchronously

identifier
Expects
string
Default Value
uuid()

a unique name for the data source being consumed; pass a different name to cause the view to fully reset and pull fresh data

totalItems
Expects
number
Default Value
null

the total number of items to be displayed in the view

Optional Props#

NameImplementationDescription
*
Expects
any

any React-supported attribute

after
Expects
any renderable
Default Value
null

arbitrary content to be rendered after the items in the DOM

before
Expects
any renderable
Default Value
null

arbitrary content to be rendered before the items in the DOM

controlWrapperProps
Expects
object
Default Value
{}
*
Expects
any

any React-supported attribute

customControlContent
Expects
any renderable
Default Value
null

allows for arbitrary content to be rendered into the control area

hidePagerIfNotNeeded
Expects
bool
Default Value
false

does not render the paging controls if the number of items supplied to the view is less-than-or-equal-to the number of items to show per page via props.numItemsPerPage

initialPage
Expects
custom
Default Value
1

the (one-indexed) number of the page that should be initially displayed; must be a positive integer less than or equal to the total number of pages

itemLoadingContent
Expects
any renderable
Default Value
undefined

allows for arbitrary content to be rendered into pagination items as they're loading if the backing data is a Promise

itemToJSXConverter
Expects
function
Default Value
(x) => x

an function to specify how an item should be converted to JSX, if it is not already renderable by React

const getItem = () => ({id: 1234, text: 'foo'});
const objToJSX = ({id, text}) => <div data-id={id}>{text}</div>;

<Pagination
    getItem={getItem}
    identifer='foo'
    itemToJSXConverter={objToJSX}
    totalItems={1} />
itemWrapperProps
Expects
object
Default Value
{}
*
Expects
any

any React-supported attribute

jumpToFirstPageControlContent
Expects
any renderable
Default Value
'⇤'

content to be displayed inside of the "First page" control button

jumpToLastPageControlContent
Expects
any renderable
Default Value
'⇥'

content to be displayed inside of the "Last page" control button

jumpToNextPageControlContent
Expects
any renderable
Default Value
'→'

content to be displayed inside of the "Next page" control button

jumpToPreviousPageControlContent
Expects
any renderable
Default Value
'←'

content to be displayed inside of the "Previous page" control button

numItemsPerPage
Expects
custom
Default Value
10

the maximum number of items to be displayed on each page; must be greater than zero

numPageToggles
Expects
number
Default Value
5

the maximum number of pages to be displayed in the control bar at one time

position
Expects
Pagination.position.ABOVE or
Pagination.position.BELOW or
Pagination.position.BOTH
Default Value
Pagination.position.ABOVE

determines whether the pagination controls are displayed above, below, or both above and below the content

showJumpToFirstPageControl
Expects
bool
Default Value
true

whether the "first page" control button should be displayed

showJumpToLastPageControl
Expects
bool
Default Value
true

whether the "last page" control button should be displayed

showJumpToNextPageControl
Expects
bool
Default Value
true

whether the "next page" control button should be displayed

showJumpToPreviousPageControl
Expects
bool
Default Value
true

whether the "previous page" control button should be displayed

showPaginationState
Expects
bool or function
Default Value
true

renders an element called .b-pagination-control-state that contains the current state of the pagination like "1 of 10"; alternatively, this prop also accepts a function that it will call with the currentPage and totalPages for you to format:

showPaginatedState={
    (currentPage, totalPages) => (
        <div className='foo'>
            You're on page {currentPage} of {totalPages} pages!
        </div>
    )
}