Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/lo-tp/material-ui-pagination
An easy to use and customizable pagination component for material ui.
https://github.com/lo-tp/material-ui-pagination
Last synced: about 2 months ago
JSON representation
An easy to use and customizable pagination component for material ui.
- Host: GitHub
- URL: https://github.com/lo-tp/material-ui-pagination
- Owner: lo-tp
- License: mit
- Created: 2017-01-03T08:25:38.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2018-03-22T15:33:18.000Z (over 6 years ago)
- Last Synced: 2024-07-22T11:15:40.377Z (2 months ago)
- Language: JavaScript
- Homepage: http://blog.lotp.xyz/demo/material-ui-pagination/
- Size: 152 KB
- Stars: 32
- Watchers: 2
- Forks: 20
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# material-ui-pagination
[](https://travis-ci.org/lo-tp/material-ui-pagination)
An easy to use and customizable pagination component for material ui.
Play with this [demo](http://blog.lotp.xyz/demo/material-ui-pagination/) to see how it works.
### Notice
---
Because of some upstream [modifications about the click event](https://github.com/callemall/material-ui/releases/tag/v0.19.0) made to the `material-ui` repo, I have to make some changes in response.
You can check what I have done in [issue16](https://github.com/lo-tp/material-ui-pagination/issues/16#issuecomment-323790709).
- Now for the newest version, you can install by `npm install material-ui-pagination@next`(the next version also includes support for react and react-dom version 16).
- Otherwise go with the stable version by `npm install material-ui-pagination`.
### Quick Start
---
- `npm install material-ui-pagination`
- `import Pagination from 'material-ui-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(value: integer) => void`
`styleRoot` | Styles for root element
`styleFirstPageLink` | Styles for `FirstPageLink`. If not provided, a `NavigationFirstPage` from `Material UI` will be rendered as default, otherwise `
` with styles will show up instead
`styleLastPageLink` | Styles for `LastPageLink`. If not provided, a `NavigationLastPage` from `Material UI` will be rendered as default, otherwise `` with styles will show up instead
`styleButton` | Styles for page number button. If not provided, a `FlatButton` from `Material UI` will be rendered as default, otherwise `` with styles will show up instead
`stylePrimary` | Styles for active page element. Requires the `styleButton`
### Run Local Demo
---
- `git clone https://github.com/lo-tp/material-ui-pagination`
- `npm install`
- `npm run dev-server`
- visit `http://localhost:7890/`
### Run test
---
- `git clone https://github.com/lo-tp/material-ui-pagination`
- `npm install`
- `npm run test`
### Code Example
---
``` javascript
import React from 'react';
import ReactDOM from 'react-dom';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import injectTapEventPlugin from 'react-tap-event-plugin';
import Pagination from 'material-ui-pagination';
injectTapEventPlugin();
class App extends React.Component {
constructor(props) {
super(props);
this.setTotal = this.setTotal.bind(this);
this.setDisplay = this.setDisplay.bind(this);
this.state = {
total: 20,
display: 7,
number: 7,
};
}
setTotal(event, total) {
// eslint-disable-next-line no-param-reassign
total = total.trim();
if (total.match(/^\d*$/)) {
if (total !== '') {
// eslint-disable-next-line no-param-reassign
total = parseInt(total, 10);
} else {
// eslint-disable-next-line no-param-reassign
total = 0;
}
this.setState({ total });
}
}
setDisplay(event, display) {
// eslint-disable-next-line no-param-reassign
display = display.trim();
if (display.match(/^\d*$/)) {
if (display !== '') {
// eslint-disable-next-line no-param-reassign
display = parseInt(display, 10);
} else {
// eslint-disable-next-line no-param-reassign
display = 0;
}
this.setState({ display });
}
}
render() {
return (
Now you are at
{` ${this.state.number} ` }
page
this.setState({ number }) }
/>
);
}
}
ReactDOM.render(
,
document.getElementById('root')
);
```