https://github.com/suhdev/stickyants-ui-pagination
A pagination UI component for React apps
https://github.com/suhdev/stickyants-ui-pagination
Last synced: 10 months ago
JSON representation
A pagination UI component for React apps
- Host: GitHub
- URL: https://github.com/suhdev/stickyants-ui-pagination
- Owner: suhdev
- Created: 2018-12-11T22:56:28.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2019-01-31T11:11:34.000Z (over 7 years ago)
- Last Synced: 2025-03-18T14:12:13.039Z (over 1 year ago)
- Language: JavaScript
- Homepage:
- Size: 73.2 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# sa-pagination
A pagination component for React/mobx applications that uses the MVVM structure.
## Usage
Typical usage is for a model that wraps a list of items. See the example below:
```typescript
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import {observable,computed,action} from 'mobx';
import {Pagination,IPaginationModel} from 'stickyants-ui-pagination';
class MockModel implements IPaginationModel {
@observable.ref itemsPerPage: number = 10;
@observable.ref page:number = 1;
@observable.ref items:any = [1,2,3,4,5,6,7,8,9,10];
@observable.ref totalCount:number = 100;
@computed get totalPages(){
return Math.ceil(this.totalCount/this.itemsPerPage);
}
@action.bound
onNextPage(){
if (this.page < (this.totalPages - 1)){
this.page++;
}
}
@action.bound
onPrevPage(){
if (this.page > 1){
this.page--;
}
}
initReactions(){
}
}
const model = new MockModel();
function fetchData(page){
setTimeout(()=>{
if (page === model.page){
model.items = model.items.map(e=>e * page);
}
},200);
}
reaction(()=>model.page,fetchData);
ReactDOM.render(,
document.getElementById("Pagination"));
```