Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/szmslab/material-ui-flat-pagination

A pagination component for Material-UI using Button component.
https://github.com/szmslab/material-ui-flat-pagination

Last synced: 3 months ago
JSON representation

A pagination component for Material-UI using Button component.

Awesome Lists containing this project

README 

        
# material-ui-flat-pagination



[![Build Status](https://travis-ci.org/szmslab/material-ui-flat-pagination.svg?branch=master)](https://travis-ci.org/szmslab/material-ui-flat-pagination)

[![Coverage Status](https://coveralls.io/repos/github/szmslab/material-ui-flat-pagination/badge.svg?branch=master)](https://coveralls.io/github/szmslab/material-ui-flat-pagination?branch=master)

[![npm version](https://img.shields.io/npm/v/material-ui-flat-pagination.svg)](https://www.npmjs.com/package/material-ui-flat-pagination)



A pagination component for [Material-UI](https://material-ui.com/) using Button component.



## Compatibility



#### Supported Versions



| material-ui-flat-pagination | Material-UI |

| --------------------------- | ----------- |

| >=4.0.0 | >=4.0.0 |

| >=3.0.0 | >=1.0.0 |

| 2.x | 0.x |



## Installation



```bash

npm install material-ui-flat-pagination

```



## Demo



[![Demo](./docs/demo.gif)](https://szmslab.github.io/material-ui-flat-pagination/)



#### [Demo](https://szmslab.github.io/material-ui-flat-pagination/)



## Example



```javascript

import React from "react";

import ReactDOM from "react-dom";

import CssBaseline from "@material-ui/core/CssBaseline";

import { createMuiTheme, MuiThemeProvider } from "@material-ui/core/styles";

import Pagination from "material-ui-flat-pagination";



const theme = createMuiTheme();



class Example extends React.Component {

  constructor(props) {

    super(props);

    this.state = { offset: 0 };

  }



  handleClick(offset) {

    this.setState({ offset });

  }



  render() {

    return (

      

        

         this.handleClick(offset)}

        />

      

    );

  }

}



ReactDOM.render(, document.getElementById("root"));

```



## Props



| Name | Type | Default | Description |

| ---- | ---- | ------- | ----------- |

| **`limit`** * | number |  | The number of rows per page. Allow a number greater than or equal to `1`. |

| **`offset`** * | number |  | The number of rows to skip. Allow a number greater than or equal to `0`. |

| **`total`** * | number |  | The total number of rows. Allow a number greater than or equal to `0`. |

| `centerRipple` | bool | false | If true, the ripples of all buttons will be centered. |

| `classes` | object |  | Override or extend the styles applied to the component. See [CSS API](#user-content-css-api) below for more details. |

| `component` | union:
 string |
 func |
 object | 'div' | The component used for the root node. Either a string to use a DOM element or a component. |

| `currentPageColor` | enum:
 'default' |
 'inherit' |
 'primary' |
 'secondary' | 'secondary' | The color of the current page button. |

| `disabled` | bool | false | If true, all buttons will be disabled. |

| `disableFocusRipple` | bool | false | If true, the keyboard focus ripple of all buttons will be disabled. |

| `disableRipple` | bool | false | If true, the ripple effect of all buttons will be disabled. |

| `fullWidth` | bool | false | If true, all buttons will take up the full width of its container. |

| `innerButtonCount` | number | 2 | The number of displayed standard page buttons adjacent to the current button. Allow a number greater than or equal to `0`. |

| `nextPageLabel` | node | '>' | The content of the next page button. |

| `onClick` | func |  | Callback fired when the button is clicked.

Signature:
`function(event: object, offset: number, page: number) => void`
event: The event source of the callback.
offset: The number of new offset.
page: The number of new page. |

| `otherPageColor` | enum:
 'default' |
 'inherit' |
 'primary' |
 'secondary' | 'primary' | The color of the buttons of other pages excluding the current page. |

| `outerButtonCount` | number | 2 | The number of standard page buttons displayed at the end. Allow a number greater than or equal to `1`. |

| `previousPageLabel` | node | '<' | The content of the previous page button. |

| `reduced` | bool | false | If true, the number of displayed buttons will be reduced. Equivalent to `innerButtonCount=1` and `outerButtonCount=1`. |

| `renderButton` | func |  | Callback fired when the button is rendered. Main use case is to use anchor for pagination: ``({ page, children }) => React.cloneElement(children as React.ReactElement, { href: `?page=${page}` })``

Signature:
`function({ offset: number, page: number, children: node}) => ReactElement`
offset: The number of new offset.
page: The number of new page.
children: The page button component. |

| `size` | enum:
 'small' |
 'medium' |
 'large' | 'medium' | The size of all buttons. |



Any other properties supplied will be spread to the root element.



## CSS API



| Name | Description |

| ---- | ----------- |

| `root` | Styles applied to the root element. |

| `rootCurrent` | Styles applied to the root element of the current page button. |

| `rootEllipsis` | Styles applied to the root element of the ellipsis page button. |

| `rootEnd` | Styles applied to the root element of the end page button. |

| `rootStandard` | Styles applied to the root element of the standard page button. |

| `label` | Styles applied to the span element of the page button that wraps the children. |

| `text` | Styles applied to the root element of the page button. |

| `textPrimary` | Styles applied to the root element of the page button if `currentPageColor="primary"` or `otherPageColor="primary"`. |

| `textSecondary` | Styles applied to the root element of the page button if `currentPageColor="secondary"` or `otherPageColor="secondary"`. |

| `colorInherit` | Styles applied to the root element of the page button if `currentPageColor="inherit"` or `otherPageColor="inherit"`. |

| `colorInheritCurrent` | Styles applied to the root element of the current page button if `currentPageColor="inherit"`. |

| `colorInheritOther` | Styles applied to the root element of the other page button if `otherPageColor="inherit"`. |

| `disabled` | Styles applied to the root element of the page button if `disabled={true}`. |

| `sizeSmall` | Styles applied to the root element of the page button if `size="small"`. |

| `sizeSmallCurrent` | Styles applied to the root element of the current page button if `size="small"`. |

| `sizeSmallEllipsis` | Styles applied to the root element of the ellipsis page button if `size="small"`. |

| `sizeSmallEnd` | Styles applied to the root element of the end page button if `size="small"`. |

| `sizeSmallStandard` | Styles applied to the root element of the standard page button if `size="small"`. |

| `sizeLarge` | Styles applied to the root element of the page button if `size="large"`. |

| `sizeLargeCurrent` | Styles applied to the root element of the current page button if `size="large"`. |

| `sizeLargeEllipsis` | Styles applied to the root element of the ellipsis page button if `size="large"`. |

| `sizeLargeEnd` | Styles applied to the root element of the end page button if `size="large"`. |

| `sizeLargeStandard` | Styles applied to the root element of the standard page button if `size="large"`. |

| `fullWidth` | Styles applied to the root element of the page button if `fullWidth={true}.` |



## License



MIT, see [LICENSE](https://github.com/szmslab/material-ui-flat-pagination/blob/master/LICENSE) for details.