react-paginator

Basic paginator component for React. This component is designed to be used with Bootstrap but you can use it with your own style.

Install

npm install @doctolib/react-paginator

Examples

Usage

class MyComponent extends React.Component {
  state = { page: 1 }

  onPageChange = (page) => this.setState({page})

  render() {
    return (
      <Paginator
        nbRowsPerPage={20}
        onPageChange={this.onPageChange}
        page={this.state.page}
        total={200}
      />
    );
  }
}

Properties

condensed

Display a condensed version of the paginator.

<Paginator
  condensed
  nbRowsPerPage={20}
  page={1}
  total={200}
/>

size

You can specify the size to display the paginator, values accepted are small, medium, large. Default is medium.

<Paginator
  nbRowsPerPage={20}
  page={1}
  size="small"
  total={200}
/>

showInfos

Display additionnal informations next to paginator (ex: 181-200 / 300).

<Paginator
  nbRowsPerPage={20}
  page={1}
  showInfos
  total={200}
/>

labels

You can use custom labels for the paginator:

<Paginator
  breakLabel="..."
  firstAriaLabel="Premier"
  firstLabel="<<"
  lastAriaLabel="Dernier"
  lastLabel=">>"
  nbRowsPerPage={20}
  nextAriaLabel="Suivant"
  nextLabel=">"
  page={1}
  previousAriaLabel="Précédent"
  previousLabel="<"
  total={300}
/>

disabled

The paginator can be displayed in disabled mode.

<Paginator
  disabled
  nbRowsPerPage={20}
  page={1}
  total={200}
/>

License

MIT