Material-ui-arrowy-pagination NPM

material-ui-arrowy-pagination

An easy to use and customizable pagination component for Material-UI.

Demonstration

Notice

This component require material-ui version >= v1.0.0

FYI

Quick Start

npm install material-ui-arrowy-pagination

import Pagination from 'material-ui-arrowy-pagination';

Usage

material-ui-pagination exposes one module called, Pagination, which accepts a few props:

Option	Description
`total`	Total number of pages
`display`	Number of pages you want to show in the panel
`current`	Current page selected
`onChange`	Handles the change event of selected page: `function(pageNumber: integer, previousPageNumber: integer) => void`
`style`	Styles for root element
`styleFirstPageButton`	Styles for `FirstPageButton`. If not provided, a custom `IconButton` from `Material UI` will be rendered as default, otherwise `<div>` with styles will show up instead
`stylePreviousPageButton`	Styles for `PreviousPageButton`. If not provided, a custom `IconButton` from `Material UI` will be rendered as default, otherwise `<div>` with styles will show up instead
`styleNextPageButton`	Styles for `NextPageButton`. If not provided, a custom `IconButton` from `Material UI` will be rendered as default, otherwise `<div>` with styles will show up instead
`styleLastPageButton`	Styles for `LastPageBottub`. If not provided, a custom `IconButton` from `Material UI` will be rendered as default, otherwise `<div>` with styles will show up instead
`styleButton`	Styles for page number button. If not provided, a `IconButton` from `Material UI` will be rendered as default, otherwise `<div>` with styles will show up instead
`stylePrimary`	Styles for active page element. Requires the `styleButton`
`showFirstPageButton`	control render `FirstPageButton`, default is `false`
`showPreviousPageButton`	control render `PreviousPageButton`, default is `false`
`showPageNumberButton`	control render `showPageNumberButton`, default is `true`
`showNextPageButton`	control render `NextPageButton`, default is `false`
`showLastPageButton`	control render `LastPageButton`, default is `false`

Run Local Demo

git clone https://github.com/shenxdtw/material-ui-arrowy-pagination
npm install
npm run dev-server
# visit http://localhost:7890/

Run Test

git clone https://github.com/shenxdtw/material-ui-arrowy-pagination
npm install
npm run test

Code Example

import Pagination from 'material-ui-arrowy-pagination';

<Pagination 
    total={10}
    current={1}
    display={5}
    onChange={(pageNumber, previousPageNumber) => {}}
    showFirstPageButton
    showPreviousPageButton
    showNextPageButton
    showLastPageButton
/>

Thanks

This project is modified with reference to material-ui-pagination.

Thanks to the author of material-ui-pagination.

License

MIT licensed.

material-ui material-ui-next material-ui@next material-ui-v1.0.0 pagination

prop-types

@everything-registry/sub-chunk-2138 @zalastax/nolb-material-

1.0.1

7 years ago

1.0.0

7 years ago