Pagination

Description

Pagination is used for dividing content or data among several pages with control for navigation between pages, both backwards and forwards.

See live demos on storybook

Storybook Pagination Demos

Install bundle from npm-e

npm i @element-public/react-components @element-public/themes

Optional: install the component individually

npm i @element-public/react-pagination @element-public/themes

Open ~/.npmrc in an editor and add the following line to enable the @element-public scope:

@element-public:registry=https://npm.platforms.engineering

Troubleshooting

See below if you have never installed a package from Bayer's npm-enterprise or run into the following error:

npm ERR! code E401
npm ERR! Unable to authenticate, your authentication token seems to be invalid.
npm ERR! To correct this please trying logging in again with:
npm ERR!     npm login

Setup an access token

See the devtools npm-e guide to learn how to create an access token if this is the first time you are using a npm-e package at Bayer or you do not have a line that starts with the following in your ~/.npmrc file:

//npm.platforms.engineering/:_authToken=

Notes

Many important props exist for Pagination, as well as many methods for dictating how a user navigates information or data. Vital props include controlled, which disables internal state tracking in favor of programmatic control, directNavigation, which enables a Select list of pages for direct navigation, and initialPage, to set the current page on mount. Besides these props, totalItems and itemsPerPage are values that impact how a user navigates data by dictating how much data can be accessed at a time.

Usage

Pagination is used with large amounts of data, usually within a Table or other large data container.

Pagination Props

| Name | Type | Default | Required | Description | | ------------------------- | -------- | ---------------------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | controlled | boolean | false | false | Disables internal state tracking in favor of programmatic control. | | currentPage | number | 0 | false | When using Pagination in controlled mode, this will set the currently selected data page. | | directNavigation | boolean | false | false | Enables a Select list of pages for direct navigation. If the number of pages is below the directNavigationThreshold, numbered buttons will displayed instead. | | directNavigationThreshold | number | 4 | false | When using directNavigation, this is number of pages above which a Select list of pages will be presented instead of number buttons. | | disableNextPage | boolean | false | false | When using Pagination in controlled mode, this controls enabled or disabled the next page button. | | disablePreviousPage | boolean | false | false | When using Pagination in controlled mode, this controls enabled or disabled the previous page button. | | disabled | boolean | false | false | Prevent the user from interacting with the component. | | hideFirstLast | boolean | false | false | Hide the first and last buttons. | | hideItemsPerPage | boolean | false | false | Hide the Items Per Page component. | | hideNextPrev | boolean | false | false | Hide the next and previous buttons. | | hideRowsPerPage | boolean | false | false | Hide the Rows Per Page component. | | id | string | undefined | false | Randomly generated id. May be overwritten. | | initialItemsPerPage | number | 10 | false | Sets item per page. Defaults to first index in itemsPerPageOptions array if value is not available array. | | initialPage | number | 0 | false | Sets the current page on mount. | | itemsPerPage | number | undefined | false | Sets item per page. | | itemsPerPageOptions | [number] | [10, 25, 50, 100, 200] | false | Number of items per page. | | localize | Function | null | false | A customizable function to enable text translation services. Possible string values are 'Page', 'of', and 'Rows per page'. | | selectProps | object | undefined | false | Props to be passed directly to the itemsPerPage and directNavigation Select components. May be used to override the opening direction or enable hoisting. See Select for a full list of props. | | totalItems | number | 0 | false | Total count of the total number of items to paginate through. | | totalPages | number | 0 | false | When using Pagination in controlled mode, this will override the total number of pages. |

Pagination Events

| Name | Default | Required | Params | Description | | -------------------- | ------- | -------- | ------ | ----------------------------------------------------------------- | | onFirstPage | null | false | | Fired with the first page button is clicked. | | onItemsPerPageChange | null | false | | Returns item per page selected. | | onLastPage | null | false | | Fired with the last page button is clicked. Returns the new page. | | onNextPage | null | false | | Fired with the next page button is clicked. Returns the new page. | | onPageChange | null | false | | Fired when any page change occurs. Returns the new page. | | onPreviousPage | null | false | | Fired with the previous page button is clicked. |