{"id":13683554,"url":"https://github.com/szmslab/material-ui-flat-pagination","last_synced_at":"2025-04-30T13:31:14.194Z","repository":{"id":21687109,"uuid":"93708947","full_name":"szmslab/material-ui-flat-pagination","owner":"szmslab","description":"A pagination component for Material-UI using Button component.","archived":false,"fork":false,"pushed_at":"2023-01-07T03:56:16.000Z","size":3432,"stargazers_count":94,"open_issues_count":20,"forks_count":12,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-18T14:06:25.222Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/szmslab.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-06-08T04:58:35.000Z","updated_at":"2023-12-06T14:38:27.000Z","dependencies_parsed_at":"2023-01-11T21:19:08.988Z","dependency_job_id":null,"html_url":"https://github.com/szmslab/material-ui-flat-pagination","commit_stats":null,"previous_names":[],"tags_count":19,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/szmslab%2Fmaterial-ui-flat-pagination","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/szmslab%2Fmaterial-ui-flat-pagination/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/szmslab%2Fmaterial-ui-flat-pagination/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/szmslab%2Fmaterial-ui-flat-pagination/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/szmslab","download_url":"https://codeload.github.com/szmslab/material-ui-flat-pagination/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251134652,"owners_count":21541376,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-02T13:02:15.312Z","updated_at":"2025-04-30T13:31:13.788Z","avatar_url":"https://github.com/szmslab.png","language":"TypeScript","funding_links":[],"categories":["TypeScript","Components"],"sub_categories":[],"readme":"# material-ui-flat-pagination\n\n[![Build Status](https://travis-ci.org/szmslab/material-ui-flat-pagination.svg?branch=master)](https://travis-ci.org/szmslab/material-ui-flat-pagination)\n[![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)\n[![npm version](https://img.shields.io/npm/v/material-ui-flat-pagination.svg)](https://www.npmjs.com/package/material-ui-flat-pagination)\n\nA pagination component for [Material-UI](https://material-ui.com/) using Button component.\n\n## Compatibility\n\n#### Supported Versions\n\n| material-ui-flat-pagination | Material-UI |\n| --------------------------- | ----------- |\n| \u0026gt;=4.0.0 | \u0026gt;=4.0.0 |\n| \u0026gt;=3.0.0 | \u0026gt;=1.0.0 |\n| 2.x | 0.x |\n\n## Installation\n\n```bash\nnpm install material-ui-flat-pagination\n```\n\n## Demo\n\n[![Demo](./docs/demo.gif)](https://szmslab.github.io/material-ui-flat-pagination/)\n\n#### [Demo](https://szmslab.github.io/material-ui-flat-pagination/)\n\n## Example\n\n```javascript\nimport React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport CssBaseline from \"@material-ui/core/CssBaseline\";\nimport { createMuiTheme, MuiThemeProvider } from \"@material-ui/core/styles\";\nimport Pagination from \"material-ui-flat-pagination\";\n\nconst theme = createMuiTheme();\n\nclass Example extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = { offset: 0 };\n  }\n\n  handleClick(offset) {\n    this.setState({ offset });\n  }\n\n  render() {\n    return (\n      \u003cMuiThemeProvider theme={theme}\u003e\n        \u003cCssBaseline /\u003e\n        \u003cPagination\n          limit={10}\n          offset={this.state.offset}\n          total={100}\n          onClick={(e, offset) =\u003e this.handleClick(offset)}\n        /\u003e\n      \u003c/MuiThemeProvider\u003e\n    );\n  }\n}\n\nReactDOM.render(\u003cExample /\u003e, document.getElementById(\"root\"));\n```\n\n## Props\n\n| Name | Type | Default | Description |\n| ---- | ---- | ------- | ----------- |\n| **`limit`** * | number |  | The number of rows per page. Allow a number greater than or equal to `1`. |\n| **`offset`** * | number |  | The number of rows to skip. Allow a number greater than or equal to `0`. |\n| **`total`** * | number |  | The total number of rows. Allow a number greater than or equal to `0`. |\n| `centerRipple` | bool | false | If true, the ripples of all buttons will be centered. |\n| `classes` | object |  | Override or extend the styles applied to the component. See [CSS API](#user-content-css-api) below for more details. |\n| `component` | union:\u003cbr\u003e\u0026nbsp;string \u0026#124;\u003cbr\u003e\u0026nbsp;func \u0026#124;\u003cbr\u003e\u0026nbsp;object | 'div' | The component used for the root node. Either a string to use a DOM element or a component. |\n| `currentPageColor` | enum:\u003cbr\u003e\u0026nbsp;'default' \u0026#124;\u003cbr\u003e\u0026nbsp;'inherit' \u0026#124;\u003cbr\u003e\u0026nbsp;'primary' \u0026#124;\u003cbr\u003e\u0026nbsp;'secondary' | 'secondary' | The color of the current page button. |\n| `disabled` | bool | false | If true, all buttons will be disabled. |\n| `disableFocusRipple` | bool | false | If true, the keyboard focus ripple of all buttons will be disabled. |\n| `disableRipple` | bool | false | If true, the ripple effect of all buttons will be disabled. |\n| `fullWidth` | bool | false | If true, all buttons will take up the full width of its container. |\n| `innerButtonCount` | number | 2 | The number of displayed standard page buttons adjacent to the current button. Allow a number greater than or equal to `0`. |\n| `nextPageLabel` | node | '\u003e' | The content of the next page button. |\n| `onClick` | func |  | Callback fired when the button is clicked.\u003cbr\u003e\u003cbr\u003eSignature:\u003cbr\u003e`function(event: object, offset: number, page: number) =\u003e void`\u003cbr\u003eevent: The event source of the callback.\u003cbr\u003eoffset: The number of new offset.\u003cbr\u003epage: The number of new page. |\n| `otherPageColor` | enum:\u003cbr\u003e\u0026nbsp;'default' \u0026#124;\u003cbr\u003e\u0026nbsp;'inherit' \u0026#124;\u003cbr\u003e\u0026nbsp;'primary' \u0026#124;\u003cbr\u003e\u0026nbsp;'secondary' | 'primary' | The color of the buttons of other pages excluding the current page. |\n| `outerButtonCount` | number | 2 | The number of standard page buttons displayed at the end. Allow a number greater than or equal to `1`. |\n| `previousPageLabel` | node | '\u003c' | The content of the previous page button. |\n| `reduced` | bool | false | If true, the number of displayed buttons will be reduced. Equivalent to `innerButtonCount=1` and `outerButtonCount=1`. |\n| `renderButton` | func |  | Callback fired when the button is rendered. Main use case is to use anchor for pagination: ``({ page, children }) =\u003e React.cloneElement(children as React.ReactElement, { href: `?page=${page}` })``\u003cbr\u003e\u003cbr\u003eSignature:\u003cbr\u003e`function({ offset: number, page: number, children: node}) =\u003e ReactElement`\u003cbr\u003eoffset: The number of new offset.\u003cbr\u003epage: The number of new page.\u003cbr\u003echildren: The page button component. |\n| `size` | enum:\u003cbr\u003e\u0026nbsp;'small' \u0026#124;\u003cbr\u003e\u0026nbsp;'medium' \u0026#124;\u003cbr\u003e\u0026nbsp;'large' | 'medium' | The size of all buttons. |\n\nAny other properties supplied will be spread to the root element.\n\n## CSS API\n\n| Name | Description |\n| ---- | ----------- |\n| `root` | Styles applied to the root element. |\n| `rootCurrent` | Styles applied to the root element of the current page button. |\n| `rootEllipsis` | Styles applied to the root element of the ellipsis page button. |\n| `rootEnd` | Styles applied to the root element of the end page button. |\n| `rootStandard` | Styles applied to the root element of the standard page button. |\n| `label` | Styles applied to the span element of the page button that wraps the children. |\n| `text` | Styles applied to the root element of the page button. |\n| `textPrimary` | Styles applied to the root element of the page button if `currentPageColor=\"primary\"` or `otherPageColor=\"primary\"`. |\n| `textSecondary` | Styles applied to the root element of the page button if `currentPageColor=\"secondary\"` or `otherPageColor=\"secondary\"`. |\n| `colorInherit` | Styles applied to the root element of the page button if `currentPageColor=\"inherit\"` or `otherPageColor=\"inherit\"`. |\n| `colorInheritCurrent` | Styles applied to the root element of the current page button if `currentPageColor=\"inherit\"`. |\n| `colorInheritOther` | Styles applied to the root element of the other page button if `otherPageColor=\"inherit\"`. |\n| `disabled` | Styles applied to the root element of the page button if `disabled={true}`. |\n| `sizeSmall` | Styles applied to the root element of the page button if `size=\"small\"`. |\n| `sizeSmallCurrent` | Styles applied to the root element of the current page button if `size=\"small\"`. |\n| `sizeSmallEllipsis` | Styles applied to the root element of the ellipsis page button if `size=\"small\"`. |\n| `sizeSmallEnd` | Styles applied to the root element of the end page button if `size=\"small\"`. |\n| `sizeSmallStandard` | Styles applied to the root element of the standard page button if `size=\"small\"`. |\n| `sizeLarge` | Styles applied to the root element of the page button if `size=\"large\"`. |\n| `sizeLargeCurrent` | Styles applied to the root element of the current page button if `size=\"large\"`. |\n| `sizeLargeEllipsis` | Styles applied to the root element of the ellipsis page button if `size=\"large\"`. |\n| `sizeLargeEnd` | Styles applied to the root element of the end page button if `size=\"large\"`. |\n| `sizeLargeStandard` | Styles applied to the root element of the standard page button if `size=\"large\"`. |\n| `fullWidth` | Styles applied to the root element of the page button if `fullWidth={true}.` |\n\n## License\n\nMIT, see [LICENSE](https://github.com/szmslab/material-ui-flat-pagination/blob/master/LICENSE) for details.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fszmslab%2Fmaterial-ui-flat-pagination","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fszmslab%2Fmaterial-ui-flat-pagination","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fszmslab%2Fmaterial-ui-flat-pagination/lists"}