{"id":20795787,"url":"https://github.com/sun0fabeach/vue-use-paginator","last_synced_at":"2025-10-15T15:26:47.339Z","repository":{"id":48277440,"uuid":"432826555","full_name":"Sun0fABeach/vue-use-paginator","owner":"Sun0fABeach","description":"Vue 3 use-hook to reactively paginate data and arrange paginator buttons","archived":false,"fork":false,"pushed_at":"2025-02-27T12:15:08.000Z","size":278,"stargazers_count":18,"open_issues_count":0,"forks_count":3,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-08-23T10:09:23.255Z","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/Sun0fABeach.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2021-11-28T21:14:26.000Z","updated_at":"2025-02-27T12:15:11.000Z","dependencies_parsed_at":"2024-04-27T05:32:13.427Z","dependency_job_id":"cb8a0a4b-9d05-4c25-87d6-b48e860152c4","html_url":"https://github.com/Sun0fABeach/vue-use-paginator","commit_stats":{"total_commits":35,"total_committers":1,"mean_commits":35.0,"dds":0.0,"last_synced_commit":"664aac7e47be71c76e56adc8fd1460e37e45665f"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Sun0fABeach/vue-use-paginator","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Sun0fABeach%2Fvue-use-paginator","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Sun0fABeach%2Fvue-use-paginator/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Sun0fABeach%2Fvue-use-paginator/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Sun0fABeach%2Fvue-use-paginator/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Sun0fABeach","download_url":"https://codeload.github.com/Sun0fABeach/vue-use-paginator/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Sun0fABeach%2Fvue-use-paginator/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279086592,"owners_count":26100191,"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","status":"online","status_checked_at":"2025-10-15T02:00:07.814Z","response_time":56,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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-11-17T16:24:00.065Z","updated_at":"2025-10-15T15:26:47.286Z","avatar_url":"https://github.com/Sun0fABeach.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# vue-use-paginator\n\nVue 3 composition API hook function to reactively paginate data and arrange paginator buttons. Completely renderless.\n\n## Demo\n\n* [Live demo](https://demo-vue-use-paginator.netlify.app/)\n* [Demo code](https://github.com/Sun0fABeach/demo-vue-use-paginator/blob/master/src/components/Demo.vue)\n\n## Installation\n\n```shell\n$ npm install vue-use-paginator\n```\n\n## Basic Setup\n\n```html\n\u003cscript setup lang=\"ts\"\u003e\nimport usePaginator from 'vue-use-paginator'\n\nconst {\n  page,\n  pageSize,\n  numPages,\n  numItems,\n  numButtons,\n  slice,\n  buttons,\n  hasPrev,\n  hasNext,\n  goStart,\n  goPrev,\n  goNext,\n  goEnd,\n} = usePaginator({\n  pageSize: 10,\n  numItems: 70,\n  numButtons: 5,\n})\n\u003c/script\u003e\n```\n\n## Details\n\n### Hook API\n\nFunction `usePaginator` returns an object of type [`IPagination`](\u003c#user-content-definitions\u003e \"IPagination\") which contains the following reactive data plus some convenience functions. You can initialize `page`, `pageSize`, `numItems` and `numButtons` by passing an object of type [`IOptions`](\u003c#user-content-definitions\u003e \"IOptions\"). Otherwise, default initial values will be used.\n\n| Name           | Type                               | Description\n| -------------- | ---------------------------------- | -----------\n| `page`         | `Ref\u003cnumber\u003e`                     | Current active page (default initial value: 1)\n| `pageSize`     | `Ref\u003cnumber\u003e`                     | Size of each page (default initial value: 5)\n| `numItems`     | `Ref\u003cnumber\u003e`                     | Total number of items to paginate (default initial value: 0)\n| `numButtons`   | `Ref\u003cnumber\u003e`                     | Number of paginator buttons to display (default initial value: 5)\n| `numPages`     | `ComputedRef\u003cnumber\u003e`             | Total number of pages\n| `slice`        | `ComputedRef\u003c[number, number]\u003e`    | Tuple containing start and end index delimiting the currently active page (0 based, end index is exclusive). For example, given you are on page 2, `pageSize` is 10 and `numItems` is greater than or equal to 20, `slice` will be `[10, 20]`.\n| `buttons`      | `ComputedRef\u003cIPaginatorButton[]\u003e` | Array of objects usable for displaying paginator buttons (details below)\n| `hasPrev`      | `ComputedRef\u003cboolean\u003e`            | Whether the currently active page is the first page\n| `hasNext`      | `ComputedRef\u003cboolean\u003e`            | Whether the currently active page is the last page\n| `goPrev`       | `() =\u003e number`                     | Go to next page\n| `goNext`       | `() =\u003e number`                     | Go to previous page\n| `goStart`      | `() =\u003e 1`                          | Go to first page\n| `goEnd`        | `() =\u003e number`                     | Go to last page\n\n* `page`, `pageSize`, `numItems`, as well as `numButtons` are writable refs that will cause the other reactive properties to adjust when changed. Once you know how many items to paginate, you need to set `numItems` at least.\n* You can move to another page by either calling `goPrev`, `goNext`, `goStart`, `goEnd`, or by assigning to `page` directly. Note that assigning a value outside of 1 and `numPages` will be ignored.\n\n### Paginator buttons\n\nWhen displaying paginator buttons, you often don't have enough slots for each page and therefore need to use a placeholder like '...'. Calculating the positions of these placeholders is not trivial. Fortunately, `buttons` is an array of [`IPaginatorButton`](\u003c#user-content-definitions\u003e \"IPaginatorButton\") where each item contains the following properties to help you out.\n\n| Name       | Type       | Description\n| ---------- | ---------- | -----------\n| `page`     | `number`   | The page to navigate to when clicking this button\n| `active`   | `boolean`  | Whether this button shows the currently active page\n| `ellipsis` | `boolean`  | Whether this button is a placeholder for omitted pages\n\n#### Template example\n\nHere is a minimal example how you could write your paginator markup.\n\n```vue\n\u003col\u003e\n  \u003cli :class=\"{ disabled: !hasPrev }\" @click=\"goStart\"\u003e\n    {{ '\u003c\u003c' }}\n  \u003c/li\u003e\n  \u003cli :class=\"{ disabled: !hasPrev }\" @click=\"goPrev\"\u003e\n    {{ '\u003c' }}\n  \u003c/li\u003e\n  \u003cli\n    v-for=\"button in buttons\"\n    :key=\"button.page\"\n    :class=\"{ 'current-page': button.active }\"\n    @click=\"page = button.page\"\n  \u003e\n    {{ button.ellipsis ? '...' : button.page }}\n  \u003c/li\u003e\n  \u003cli :class=\"{ disabled: !hasNext }\" @click=\"goNext\"\u003e\n    {{ '\u003e' }}\n  \u003c/li\u003e\n  \u003cli :class=\"{ disabled: !hasNext }\" @click=\"goEnd\"\u003e\n    {{ '\u003e\u003e' }}\n  \u003c/li\u003e\n\u003c/ol\u003e\n```\n\nNotice how certain classes and texts are set based on the values of `hasPrev`, `hasNext`, `button.active` and `button.ellipsis`. How you style these elements is completely up to you.\n\n### API integration\n\nThis library doesn't make any assumptions about whether you paginate in the frontend or call a paginated endpoint.\n\nIf you paginate in the frontend, just assign the length of your collection to  `numItems` and use the values from `slice` to slice out the items to display for your current page.\n\nIf you call a paginated endpoint, it needs to tell you the total number of items in order to set `numItems`. You can then use `slice` or `page`/`pageSize` to fetch a page. You will normally want to set up a watcher in order to fetch a new page when `page` or `pageSize` changes.\n\n```typescript\nwatch([page, pageSize], ([newPage, newPageSize]) =\u003e {\n  fetchPage(newPage, newPageSize);\n})\n```\n\n### Types\n\n#### Definitions\n\n```typescript\ninterface IOptions {\n  page?: number | Ref\u003cnumber\u003e\n  pageSize?: number | Ref\u003cnumber\u003e\n  numItems?: number | Ref\u003cnumber\u003e\n  numButtons?: number | Ref\u003cnumber\u003e\n}\n\ninterface IPagination {\n  page: Ref\u003cnumber\u003e\n  pageSize: Ref\u003cnumber\u003e\n  numItems: Ref\u003cnumber\u003e\n  numButtons: Ref\u003cnumber\u003e\n  numPages: ComputedRef\u003cnumber\u003e\n  slice: ComputedRef\u003c[number, number]\u003e\n  buttons: ComputedRef\u003cIPaginatorButton[]\u003e\n  hasPrev: ComputedRef\u003cboolean\u003e\n  hasNext: ComputedRef\u003cboolean\u003e\n  goPrev: () =\u003e number\n  goNext: () =\u003e number\n  goStart: () =\u003e 1\n  goEnd: () =\u003e number\n}\n\ninterface IButton {\n  page: number\n}\n\ninterface IPageButton extends IButton {\n  active: boolean\n  ellipsis: false\n}\n\ninterface IEllipsisButton extends IButton {\n  active: false\n  ellipsis: true\n}\n\ntype IPaginatorButton = IPageButton | IEllipsisButton\n```\n\n#### Importing Types\n\n```typescript\nimport type { IOptions, IPagination, IPaginatorButton } from 'vue-use-paginator'\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsun0fabeach%2Fvue-use-paginator","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsun0fabeach%2Fvue-use-paginator","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsun0fabeach%2Fvue-use-paginator/lists"}