office-ui-fabric-react-pagination

React.js pagination component with office-ui-fabric style, based on react-ultimate-pagination.

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
office-ui-fabric-react-pagination
0.0.85 years ago5 years agoMinified + gzip package size for office-ui-fabric-react-pagination in KB

Readme

How it looks

https://i.imgur.com/aPCyBeo.jpg

Example usage

``` import React, { Component } from 'react'; import Pagination from 'office-ui-fabric-react-pagination'; class App extends Component { render() {
return (
<Pagination
currentPage={1}
totalPages={10}
onChange={(page) => {alert('Send user to page: ' + page)}}
/>
);
} } export default App; ```

Example usage with fabric icons

If you're missing the chevron icons you need to install the '@uifabric/icons' npm package, and call initializeIcons(). Eg.: ``` import React, { Component } from 'react'; import { initializeIcons } from '@uifabric/icons'; import Pagination from 'office-ui-fabric-react-pagination'; initializeIcons(); class App extends Component { render() {
return (
<Pagination
currentPage={1}
totalPages={10}
onChange={(page) => {alert('Send user to page: ' + page)}}
/>
);
} } export default App; ``` Pagination component has the following interface: (copied from react-ultimate-pagination)
  • currentPage: number - current page number
  • totalPages: number - total number of pages
  • boundaryPagesRange: number, optional, default: 1 - number of always visible pages at the beginning and end
  • siblingPagesRange: number, optional, default: 1 - number of always visible pages before and after the current one
  • hideEllipsis: bool, optional, default: false - boolean flag to hide ellipsis
  • hidePreviousAndNextPageLinks: bool, optional, default: false - boolean flag to hide previous and next page links
  • hideFirstAndLastPageLinks: bool, optional, default: false - boolean flag to hide first and last page links
  • onChange: function - callback that will be called with new page when it should be changed by user interaction (optional)