material-ui-arrowy-pagination

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

Notice

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

FYI

material-ui@next

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.