@npm.tangocode/tc_ui_components
Version:
[<img src="https://s3.amazonaws.com/tc-ui-components/documentationImages/tangoCodeLogo.png">](https://tangocode.com/) # TangoCode React UI Components #
80 lines (56 loc) • 2.85 kB
Markdown
A customizable pagination component.
1. __pagesToShow__ (number) : Defines how many pages are to be shown. For example, if the totalItems prop is 100, and the itemsPerPage prop is 20, that means that there will be a total of 5 pages. If the pagesToShow prop is 3, then the pager will start out looking like the depiction below.
2. __itemsPerPage__ (number) : Defines how many items per page are to be shown.
3. __totalItems__ (number) : Defines how many items there are total.
4. __onPageChange__ (`(newPage: number) => void` ) : This callback sends back the currentPageNumber. Since the totalItems and itemsPerPage were provided by the parent, the parent should be able to decide what items are to be displayed with the current page number. Simple math.
5. __startingPage ?__ (number) : This functionality allows for the pager to be set to any page.
6. __styles ?__ (Pager.Styles) : Custom stylings that will overwrite the default styles. Must be an object of styled components with properties that match one or several of the options below.
```ts
interface Styles {
Container?: <styled component>;
PagerContainer?: <styled component>;
PagerItemSelected?: <styled component>;
PagerItemUnselected?: <styled component>;
PagerItemContent?: <styled component>;
}
```
7. __id ?__ (string): A prefix id for all the html elements of the component
8. __name ?__ (string): A prefix name for all the html elements of the component
The following pager was created with the props:
```jsx
<Pager
pagesToShow={3}
totalItems={200}
itemsPerPage={20}
onPageChange={() => {}}
/>
```
Resulting with an inital render of:
Clicking the three dots makes the pager shift to the next page set or previous page set depending on what position they are relative to the number set. Since the prop passed in for `pagesToShow` was 3, a good guess for the resulting render would be pages ranging from 4 to 6 as depicted in the following:
Clicking the double arrows makes the pager go to either the first page
```jsx
const newStyles = {
Container: styles.pager.Container.extend`
width: 70px;
height: 38px; `
}
render() {
return (
<Pager
pagesToShow={3}
totalItems={200}
itemsPerPage={20}
onPageChange={() => {}}
styles={newStyles}
/>
)
}
```