@element-public/react-pagination v1.0.0
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
Install bundle from npm-e
npm i @element-public/react-components @element-public/themesOptional: install the component individually
npm i @element-public/react-pagination @element-public/themesOpen ~/.npmrc in an editor and add the following line to enable the @element-public
scope:
@element-public:registry=https://npm.platforms.engineeringTroubleshooting
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 loginSetup 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. |
11 months ago