{"id":15064445,"url":"https://github.com/mpdaugherty/svelte-paginator","last_synced_at":"2025-07-29T11:04:42.090Z","repository":{"id":47244238,"uuid":"308809433","full_name":"mpdaugherty/svelte-paginator","owner":"mpdaugherty","description":"Unopinionated pagination component for Svelte that allows customizing data sources \u0026 styles.","archived":false,"fork":false,"pushed_at":"2022-11-19T19:07:36.000Z","size":76,"stargazers_count":3,"open_issues_count":2,"forks_count":2,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-07-14T04:44:23.027Z","etag":null,"topics":["paginating","pagination","svelte","svelte-components","sveltejs"],"latest_commit_sha":null,"homepage":"","language":"Svelte","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/mpdaugherty.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":"2020-10-31T05:17:32.000Z","updated_at":"2023-01-30T16:01:58.000Z","dependencies_parsed_at":"2023-01-23T09:30:07.832Z","dependency_job_id":null,"html_url":"https://github.com/mpdaugherty/svelte-paginator","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/mpdaugherty/svelte-paginator","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mpdaugherty%2Fsvelte-paginator","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mpdaugherty%2Fsvelte-paginator/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mpdaugherty%2Fsvelte-paginator/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mpdaugherty%2Fsvelte-paginator/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mpdaugherty","download_url":"https://codeload.github.com/mpdaugherty/svelte-paginator/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mpdaugherty%2Fsvelte-paginator/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":267676915,"owners_count":24126303,"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-07-29T02:00:12.549Z","response_time":2574,"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":["paginating","pagination","svelte","svelte-components","sveltejs"],"created_at":"2024-09-25T00:18:34.549Z","updated_at":"2025-07-29T11:04:41.983Z","avatar_url":"https://github.com/mpdaugherty.png","language":"Svelte","funding_links":[],"categories":[],"sub_categories":[],"readme":"# svelte-paginator\n\nAn unopinionated paginator component for Svelte.\n\n![Svelte-Paginator Example](https://github.com/mpdaugherty/svelte-paginator/raw/main/README_images/example.png \"Svelte Paginator Example\")\n\n## Example\n\n```svelte\n\u003cscript\u003e\n import Paginator from 'svelte-paginator'\n\n // Create test data\n let letters = '1234567890abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('')\n\n // Function to that loads the test data\n const loadLetters = (page, perPage) =\u003e {\n   const start = perPage * (page-1)\n   const end = start + perPage\n   return {\n     items: letters.slice(start, end), // The items to display for `page`\n     numItems: letters.length // The total number of items available across all pages\n   }\n }\n\u003c/script\u003e\n\n\u003cPaginator loadItems={loadLetters} let:items let:loading\u003e\n  \u003c!-- Write code here for whatever you want to do with items, e.g. a list, a table, etc. --\u003e\n\n  \u003cdiv\u003e\n    {#if loading}\n      Loading...\n    {:else}\n      {#each items as letter}\n        {letter}\u0026nbsp;\n      {:else}\n        None\n      {/each}\n    {/if}\n  \u003c/div\u003e\n\u003c/Paginator\u003e\n```\n\n## Usage\n\n### Required\n\nThere are two required elements for using `svelte-paginator`.\n\n#### `async loadItems(page, perPage)`\n\n`loadItems` should calculate an object of the form\n\n```javascript\n{\n  item: ['...'], // an array of items to display on this page\n  numItems: 99 // the total number of items available\n}\n```\n\nIf you're loading these from a server, `loadItems` can also be an async function or return a promise that resolves to the object.\n\n#### `let:items`\n\n`svelte-paginator` doesn't define anything to do with the items that you're paginating. That's up to you.\n\nTo make use of this, add `let:items` to your paginator instance. `items` will be an array of items to display on the current page (it's returned from `loadItems()` above).\n\n### Optional\n\n| Parameter | Definition | Example |\n| --- | --- | --- |\n| `perPage` | How many items to display per page; defaults to 40 | `\u003cPaginator loadItems perPage={4}\u003e` |\n| `numPageLinks` | How many links to display (does not include left \u0026 right buttons). Minimum 5. Defaults to 9. | `\u003cPaginator loadItems numPageLinks={7}\u003e` |\n| `currentPage` | The current / initial page to load. Defaults to 1. | `\u003cPaginator loadItems bind:currentPage\u003e` |\n| `bind:reset` | Exposed function that lets you reset the paginator. | `\u003cPaginator loadItems bind:reset\u003e` |\n| `let:loading` | Within the component slot, the value is true if actively loading | `\u003cPaginator loadItems let:loading\u003e{#if loading}...{/if}\u003c/Paginator\u003e` |\n\n#### Example with all options\n\nYou can see this in action at https://github.com/mpdaugherty/svelte-paginator-test\n\n```svelte\n\u003cscript\u003e\n import Paginator from 'svelte-paginator'\n\n let letters = '1234567890abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('')\n const loadLetters = async (page=1, perPage=10) =\u003e {\n   await new Promise(resolve =\u003e setTimeout(resolve, 1500)) // Simulate a delay, e.g. loading from a server\n   const start = perPage * (page-1)\n   const end = start + perPage\n   return {\n     items: letters.slice(start, end),\n     numItems: letters.length\n   }\n }\n\n let reset = null\n const switchToGreek = () =\u003e {\n   letters = 'αβγδεζηθικλμνξοπρστυφχψωΑΒΓΔΕΖΗΘΙΚΛΜΝΞΟΠΡΣΤΥΦΧΨΩ'\n   reset()\n }\n\u003c/script\u003e\n\n\u003cbutton on:click={switchToGreek}\u003eSwitch to Greek\u003c/button\u003e\n\n\u003cPaginator loadItems={loadLetters} perPage={4} numPageLinks={12} currentPage={2} let:items let:loading bind:reset\u003e\n  \u003cdiv\u003e\n    {#if loading}\n      Loading...\n    {:else}\n      {#each items as letter}\n        {letter}\u0026nbsp;\n      {:else}\n        None\n      {/each}\n    {/if}\n  \u003c/div\u003e\n\u003c/Paginator\u003e\n```\n\n## Styles\n\nIf the default styles of `svelte-paginator` are not to your taste, you can override the classes that are used. If you do this, none of the default styles will survive.\n\nAvailable classes are:\n\n * `class_button`\n * `class_current_page`\n * `class_button_group`\n\nFor example, if you'd like to use Bootstrap classes, you might do something like this:\n\n```svelte\n\u003cPaginator loadItems let:items\n  class_button=\"btn btn-outline-secondary\"\n  class_current_page=\"btn btn-secondary\"\n  class_button_group=\"btn-group\"\u003e\n  ...\n\u003c/Paginator\u003e\n```\n\n# Developing `svelte-paginator`\n\nThere is an accompanying test project at [svelte-paginator-test](https://github.com/mpdaugherty/svelte-paginator-test). That project will both test installing this npm module \u0026 allow you to set up a dev server that automatically reloads as you update your code.\n\n```shell\ngit clone git@github.com:mpdaugherty/svelte-paginator.git\ngit clone git@github.com:mpdaugherty/svelte-paginator-test.git\n\ncd svelte-paginator\nnpm install\n\ncd ../svelte-paginator-test\nnpm install\nnpm run dev\n```\n\nThen visit [http://localhost:5000](http://localhost:5000)\n\n## Project structure\n\n### `src/Component.svelte`\n\nThis is the file that defines the `Paginator` component. As with all Svelte components, this file is divided into three sections, `\u003cscript\u003e`, `\u003cstyle\u003e`, and the element definition itself.\n\n### [svelte-paginator-test](https://github.com/mpdaugherty/svelte-paginator-test)`/src/App.svelte`\n\nThis is an example page that imports \u0026 uses `Paginator`. You can modify this to quickly test your work.\n\n## Issues \u0026 Dev Process\n\nIssues are tracked with Github Issues. When completing issues, please develop on a branch and create a pull request linked to the issue you are working on.\n\nFor issue discussions, generally use comments on the Github issues so we have documentation of the decisions we've made - but SMS or email is fine as well if you need a response quickly.\n\n## Publishing to npm\n\n```shell\nnpm publish\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmpdaugherty%2Fsvelte-paginator","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmpdaugherty%2Fsvelte-paginator","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmpdaugherty%2Fsvelte-paginator/lists"}