@gemcook/pagination
React Pagination Component.
Online Demo
Installation
npm install --save @gemcook/pagination
or
yarn add @gemcook/pagination
Usage
SCSS
@gemcook/pagination/lib/styles/index.scss
to your SCSS.
Import @import '~@gemcook/pagination/lib/styles/index';
Overried Styles
$pagination__main-color: #fa6681 !default;
$pagination__options-active-color: #ecf0f1 !default;
State & Store
pages: {
active: [],
first: [],
last: [],
before_distant: [],
before_near: [],
after_near: [],
after_distant: [],
},
totalCount: 0,
totalPages: 0,
Examples
default
<Pagination
total={1234}
current={store.state.current}
pageSize={10}
changePage={current => {
store.set({current});
}}
/>
size of mini
<Pagination
total={1234}
current={store.state.current}
pageSize={10}
changePage={current => {
store.set({current});
}}
size="mini"
/>
change page size
<Pagination
total={1234}
current={store.state.current}
pageSize={store.state.pageSize}
changePage={current => {
store.set({current});
}}
showSizeChanger
changePageSize={(current, pageSize) => {
store.set({pageSize});
}}
/>
Documentaion
Props
Parameter | Type | Required | Default | Description |
---|---|---|---|---|
totalCount | number | true | undefined | - |
current | number | true | undefined | - |
changePage | (current: number) => void | true | undefined | - |
pageSize | number | false | 10 | current page size. It is a required item if showSizeChanger is true . |
showSizeChanger | boolean | false | false | - |
changePageSize | (current: number, pageSize: number) => void | false | undefined | Required when 'showSizeChanger' is true. |
disabled | boolean | false | false | disabled mode. |
size | enum | false | undefined | Enums: 'mini'
|
locale | enum | false | 'ja_JP' | Enums: 'ja_JP' 'us_EN'
|
scrollTop | boolean | false | false | - |
API
makeLocalActive
- 'makeLocalActive' generates 'activeData' from the target data.
args
makeLocalActive(
data: Array<Object>,
current: number,
pageSize: number,
): Array<Object>
makeRemoteActive
- 'makeRemoteActive' generates 'activeData' from the target data.
args
makeRemoteActive(
pages: Object,
current: number,
nextCurrent: number,
totalPages: number,
): Array<Object>
makeRemoteActiveWithImmutable
- 'makeRemoteActiveWithImmutable' generates 'active' from the target data.
- Return 'Record' of 'immutable.js'
args
makeRemoteActiveWithImmutable(
state: any,
keyPathToPages: [string],
current: number,
nextCurrent: number,
totalPages: number,
): Array<Object>
License
@gemcook/pagination is released under the MIT license.