📖 Pagination component for Svelte

npm i @jill64/svelte-pagination

<!-- /src/route/[page=int]/+page.svelte -->
<script>
  import { PaginateItems } from '@jill64/svelte-pagination'

  export let data

  $: ({ lastPage } = data)
</script>

<div>
  <PaginateItems {lastPage} slug="[page=int]" />
</div>

<style>
  div {
    /* Your Navigation Box Style */
  }
  div :global(.paginate-page-link) {
    /* Page Link Style */
  }
  div :global(.paginate-navigation) {
    /* Navigation Link Style */
  }
  div :global(.paginate-rest-indicator) {
    /* Rest Indicator (...) Style */
  }
  div :global(.paginate-current-page) {
    /* Current Page Indicator Style */
  }
</style>

This component uses SvelteKit route parameters for page management.
This enables SvelteKit features like preloading and prefetching when out of the box.
Therefore, it is necessary to pass the ID of the route parameter that manages the number of pages to the Paginate component as the slug property.

By default, the PaginateItems component is keyboard navigable.

This behavior can be disabled by passing disableKeyboardNavigationprop.

[!NOTE] You can always hide that label by setting the value of the label prop to Falsy.

You can also use the included utility functions to calculate the last page.

<!-- /src/route/[page=int]/+page.svelte -->
<script>
  import { PaginateItems, calcLastPage } from '@jill64/svelte-pagination'

  export let data

  $: ({ totalCount } = data)
</script>

<div>
  <PaginateItems
    lastPage={calcLastPage({
      total: totalCount
      per: 30 // Count per page
    })}
    slug="[page=int]"
  />
</div>

Integer parameter matcher (commonly used for pagination) is available.

// /src/params/int.js
export { int as match } from '@jill64/svelte-pagination'

In v2, container elements are now user-managed.
Instead of <Paginate>, you must use <PaginateItems> and wrap it with any element.
This allows for more fine-grained styling and manipulation of container elements.

• The .paginate-container class is no longer used.

<script>
-  import { Paginate } from '@jill64/svelte-pagination'
+  import { PaginateItems } from '@jill64/svelte-pagination'

  export let data

  $: ({ lastPage } = data)
</script>

+ <div>
-  <Paginate {lastPage} slug="[page=int]" />
+  <PaginateItems {lastPage} slug="[page=int]" />
+ </div>

MIT