@kevinwang0316/react-materialui-pagination

React-materialui-pigination

A simple react component with Material-UI for pagination

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.