office-ui-fabric-react-pagination

0.0.8 • Public • Published

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)

Readme

Keywords

none

Package Sidebar

Install

npm i office-ui-fabric-react-pagination

Weekly Downloads

163

Version

0.0.8

License

none

Last publish

Collaborators

  • reecreatepatrik