{"id":26096160,"url":"https://github.com/titanve/react-next-paging","last_synced_at":"2025-04-12T11:35:14.734Z","repository":{"id":57341853,"uuid":"107065480","full_name":"titanve/react-next-paging","owner":"titanve","description":"Pagination react component","archived":false,"fork":false,"pushed_at":"2024-08-28T15:23:38.000Z","size":928,"stargazers_count":9,"open_issues_count":1,"forks_count":2,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-26T06:22:36.084Z","etag":null,"topics":["javascript","paging","react","reactjs","render-props"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/titanve.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-10-16T01:50:41.000Z","updated_at":"2023-02-21T08:21:16.000Z","dependencies_parsed_at":"2024-12-14T15:34:01.300Z","dependency_job_id":"055633cd-1c74-42c3-adea-4abc6debb08b","html_url":"https://github.com/titanve/react-next-paging","commit_stats":{"total_commits":99,"total_committers":1,"mean_commits":99.0,"dds":0.0,"last_synced_commit":"b953064b4201e0d05c7a4c4c980395f6c72b9b83"},"previous_names":[],"tags_count":21,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/titanve%2Freact-next-paging","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/titanve%2Freact-next-paging/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/titanve%2Freact-next-paging/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/titanve%2Freact-next-paging/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/titanve","download_url":"https://codeload.github.com/titanve/react-next-paging/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248305845,"owners_count":21081575,"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":["javascript","paging","react","reactjs","render-props"],"created_at":"2025-03-09T14:35:32.247Z","updated_at":"2025-04-12T11:35:14.710Z","avatar_url":"https://github.com/titanve.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003e\nreact-next-paging\n\n\u003cbr\u003e\n\u003cimg src=\"https://cdn.rawgit.com/titanve/react-next-paging/788358af/other/demo/demo.PNG?raw=true\" alt=\"react-next-paging demo\" title=\"react-next-paging demo\" width=\"300\"\u003e\n\u003cbr\u003e\n\n\u003c/h1\u003e\n\u003cp align=\"center\" style=\"font-size: 1.2rem;\"\u003ePagination react component\u003c/p\u003e\n\n[![NPM total downloads](https://img.shields.io/npm/dt/react-next-paging.svg?style=flat)](https://npmcharts.com/compare/react-next-paging?minimal=true)\n[![NPM monthly downloads](https://img.shields.io/npm/dm/react-next-paging.svg?style=flat)](https://npmcharts.com/compare/react-next-paging?minimal=true)\n[![NPM version](https://badge.fury.io/js/react-next-paging.svg)](http://badge.fury.io/js/react-next-paging)\n[![Build Status](https://travis-ci.org/titanve/react-next-paging.svg?branch=master)](https://travis-ci.org/titanve/react-next-paging)\n[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)\n\n## Installation\n\nThis module is distributed via [npm](https://www.npmjs.com) which is bundled\nwith [node](https://nodejs.org) and should be installed as one of your project's\n`dependencies`:\n\n```shell\nnpm install --save react-next-paging\n```\n\nor if you use `yarn`:\n\n```shell\nyarn add react-next-paging\n```\n\nThe UMD build is also available on [unpkg](https://unpkg.com):\n\n```html\n\u003cscript src=\"https://unpkg.com/react-next-paging/dist/index.umd.min.js\"\u003e\u003c/script\u003e\n```\n\nYou can find the library on `window.ReactNextPaging`.\n\n\u003e This package also depends on `react` and `prop-types`. Please make sure you\n\u003e have those installed as well.\n\n## Usage\n\n```jsx\nimport React from \"react\";\nimport ReactNextPaging from \"react-next-paging\";\n\nconst buttonStyles = {\n  border: \"1px solid #ccc\",\n  background: \"#fff\",\n  fontSize: \"1em\",\n  padding: 10,\n  margin: 5,\n  width: 70\n};\n\nconst PaginacionTabla = ({ itemsperpage, nocolumns, items, pagesspan }) =\u003e {\n  return (\n    \u003cReactNextPaging\n      itemsperpage={itemsperpage}\n      nocolumns={nocolumns}\n      items={items}\n      pagesspan={pagesspan}\n    \u003e\n      {({\n        getBackButtonProps,\n        getFastBackButtonProps,\n        getFwdButtonProps,\n        getFastFwdButtonProps,\n        getSelPageButtonProps,\n        nopages,\n        inipagearray,\n        pagesforarray,\n        currentpage,\n        noitems,\n        initialitem,\n        lastitem,\n        goBackBdisabled,\n        goFastBackBdisabled,\n        goFwdBdisabled,\n        goFastFwdBdisabled\n      }) =\u003e (\n        \u003ctbody\u003e\n          {items.slice(initialitem, lastitem).map((item, index) =\u003e {\n            return item;\n          })}\n          {noitems \u003e 0\n            ? [\n                \u003ctr key={\"pagingrow\" + 100}\u003e\n                  \u003ctd colSpan={nocolumns} style={{ textAlign: \"center\" }}\u003e\n                    \u003cbutton\n                      style={buttonStyles}\n                      {...getFastBackButtonProps()}\n                      disabled={goFastBackBdisabled}\n                    \u003e\n                      {\"\u003c\u003c\"}\n                    \u003c/button\u003e\n                    \u003cbutton\n                      style={buttonStyles}\n                      {...getBackButtonProps()}\n                      disabled={goBackBdisabled}\n                    \u003e\n                      {\"\u003c\"}\n                    \u003c/button\u003e\n                    {Array.from(\n                      { length: pagesforarray },\n                      (v, i) =\u003e i + inipagearray\n                    ).map(page =\u003e {\n                      return (\n                        \u003cbutton\n                          key={page}\n                          {...getSelPageButtonProps({ page: page })}\n                          disabled={currentpage == page}\n                        \u003e\n                          {page}\n                        \u003c/button\u003e\n                      );\n                    })}\n                    \u003cbutton\n                      style={buttonStyles}\n                      {...getFwdButtonProps()}\n                      disabled={goFwdBdisabled}\n                    \u003e\n                      {\"\u003e\"}\n                    \u003c/button\u003e\n                    \u003cbutton\n                      style={buttonStyles}\n                      {...getFastFwdButtonProps()}\n                      disabled={goFastFwdBdisabled}\n                    \u003e\n                      {\"\u003e\u003e\"}\n                    \u003c/button\u003e\n                  \u003c/td\u003e\n                \u003c/tr\u003e\n              ]\n            : null}\n        \u003c/tbody\u003e\n      )}\n    \u003c/ReactNextPaging\u003e\n  );\n};\n\nexport default PaginacionTabla;\n```\n\nand in the main app file\n\n```jsx\nimport React, { Component } from \"react\";\nimport PaginacionTabla from \"PaginacionTabla/PaginacionTabla\";\n.\n.\n.\n\u003ctable className=\"table table-hover\"\u003e\n  \u003cthead\u003e\n    \u003ctr\u003e\n      \u003cth\u003eId. pedido\u003c/th\u003e\n      \u003cth\u003eAgregado\u003c/th\u003e\n      \u003cth\u003eDespacho\u003c/th\u003e\n      \u003cth\u003eCliente\u003c/th\u003e\n      \u003cth /\u003e\n    \u003c/tr\u003e\n  \u003c/thead\u003e\n  \u003cPaginacionTabla\n    itemsperpage={this.state.itemsperpage}\n    nocolumns={this.state.nocolumns}\n    items={filas}\n    pagesspan={4}\n  /\u003e\n\u003c/table\u003e\n```\n\n## Props\n\n### itemsperpage\n\n\u003e `number` | defaults to `10`\n\nPass a number which represents the number of items per page.\n\n### nocolumns\n\n\u003e `number`\n\nPass a number which represents the number of columns for the `\u003ctd/\u003e` `colSpan`\nproperty.\n\n### pagesspan\n\n\u003e `number` | defaults to `10`\n\nPass a number which represents the pages span.\n\n### items\n\n\u003e `any` | defaults to `[]`\n\nPass an array of table row items that should be rendered.\n\n## License\n\n_react-next-paging_ is available under the MIT License.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftitanve%2Freact-next-paging","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftitanve%2Freact-next-paging","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftitanve%2Freact-next-paging/lists"}