@gemcook/pagination
TypeScript icon, indicating that this package has built-in type declarations

1.21.0 • Public • Published

@gemcook/pagination


npm version

React Pagination Component.

Online Demo

Installation

npm install --save @gemcook/pagination

or

yarn add @gemcook/pagination

Usage

SCSS

Import @gemcook/pagination/lib/styles/index.scss to your SCSS.

@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.

Readme

Keywords

none

Package Sidebar

Install

npm i @gemcook/pagination

Weekly Downloads

2

Version

1.21.0

License

MIT

Unpacked Size

879 kB

Total Files

43

Last publish

Collaborators

  • tfrcm
  • k.okayama
  • s.nishimura
  • gcshiro