@kevinwang0316/react-materialui-pagination

A pagination component for React and Material-UI (version > 1.0.0).

Stats

StarsIssuesVersionUpdatedCreatedSize
@kevinwang0316/react-materialui-pagination
201.1.43 years ago3 years agoMinified + gzip package size for @kevinwang0316/react-materialui-pagination in KB

Readme

React-materialui-pigination

A simple react component with Material-UI for pagination

Build Status Coverage Status

Installing

npm install --save @kevinwang0316/react-materialui-pagination

Dependencies requirement

Due to this library is using React and Material-ui, some libraries are required. Usually, the project needs this component has already installed these libraries. Please check your package.json file.

  • @material-ui/core
  • react
  • prop-types

Usage

import Pagination from '@kevinwang0316/react-materialui-pagination';

// In your component
<Pagination
  offset={startOffsetNumber}
  limit={limitationForEachPage}
  total={totalNumber}
  onClick={onClickCallBackFunction}
/>

A mini example

import React from 'react';
import ReactDOM from 'react-dom';
import MuiThemeProvider from '@material-ui/core/styles/MuiThemeProvider';
import Pagination from '@kevinwang0316/react-materialui-pagination';
 
class PaginationExample extends React.Component {
  
  handleClick = offset => {
    // Do your data loading or whatever you want here with the offset.
  };
 
  render() {
    return (
      <MuiThemeProvider>
        <Pagination
          offset={0}
          limit={10}
          total={100}
          onClick={this.handleClick}
        />
      </MuiThemeProvider>
    );
  }
}
 
ReactDOM.render(
  <PaginationExample/>,
  document.getElementById('app')
);

Props explaination

Name Type Desription
offset (required) number This tells the pagination how many rows will be skipped when initializes the component. It should be equal or greater than 0.
limit (required) number The number of rows will be showed in one page. It should be equal or greater than 1.
total (required) number The total number of rows. It should be greater than 0.
onClick (required) function The callback function will be called when a user click a page number. The function will be: function(offset) => void offset: A number of new offset

License

React-materialui-pagination is licensed under MIT License - see the License file.

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.