https://github.com/trendmicro-frontend/react-paginations

React Paginations component
https://github.com/trendmicro-frontend/react-paginations

Last synced: about 1 month ago
JSON representation

React Paginations component

• Host: GitHub
• URL: https://github.com/trendmicro-frontend/react-paginations
• Owner: trendmicro-frontend
• License: mit
• Created: 2016-12-20T14:59:57.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2023-09-22T14:01:03.000Z (over 1 year ago)
• Last Synced: 2024-12-05T19:49:16.402Z (2 months ago)
• Language: JavaScript
• Homepage: https://trendmicro-frontend.github.io/react-paginations
• Size: 1.49 MB
• Stars: 4
• Watchers: 19
• Forks: 2
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome - react-paginations - React Paginations component ([demo](https://trendmicro-frontend.github.io/react-paginations/)). (Trend Micro / React Components)
• awesome_frontend_development_resources - react-paginations - React Paginations component ([demo](https://trendmicro-frontend.github.io/react-paginations/)). (Trend Micro / React Components)
• awesome_frontend_development_resources - react-paginations - React Paginations component ([demo](https://trendmicro-frontend.github.io/react-paginations/)). (Trend Micro / React Components)

README

        
# react-paginations [![build status](https://travis-ci.org/trendmicro-frontend/react-paginations.svg?branch=master)](https://travis-ci.org/trendmicro-frontend/react-paginations) [![Coverage Status](https://coveralls.io/repos/github/trendmicro-frontend/react-paginations/badge.svg?branch=master)](https://coveralls.io/github/trendmicro-frontend/react-paginations?branch=master)

[![NPM](https://nodei.co/npm/@trendmicro/react-paginations.png?downloads=true&stars=true)](https://nodei.co/npm/@trendmicro/react-paginations/)

React Paginations

Demo: https://trendmicro-frontend.github.io/react-paginations

## Installation

1. Install the latest version of [react](https://github.com/facebook/react) and [react-paginations](https://github.com/trendmicro-frontend/react-paginations):

  ```

  npm install --save react @trendmicro/react-paginations

  ```

2. At this point you can import `@trendmicro/react-paginations` and its styles in your application as follows:

  ```js

  import { TablePagination } from '@trendmicro/react-paginations';

  // Be sure to include styles at some point, probably during your bootstraping

  import '@trendmicro/react-paginations/dist/react-paginations.css';

  ```

## Usage

#### TablePagination

```js

 {

        this.setState({ page, pageLength })

    }}

    prevPageRenderer={() => }

    nextPageRenderer={() => }

/>

```

## API

### Properties

#### TablePagination

Name | Type | Default | Description 

:--- | :--- | :------ | :----------

type | String | 'full' | 'full', 'reduced', or 'minor'

page | Number | 1 |

pageLength | Number | 10 |

pageLengthMenu | Array | [10, 25, 50, 100] |

dropup | Boolean | false | The menu will open above the dropdown toggle, instead of below it.

totalRecords | Number | 0 |

onPageChange | Function | |

prevPageRenderer | Function | |

nextPageRenderer | Function | |

pageRecordsRenderer | Function({ totalRecords, from, to }) | |

pageLengthRenderer | Function({ pageLength }) |

## License

MIT