@jill64/svelte-pagination

📖 Pagination component for Svelte

Demo

Installation

npm i @jill64/svelte-pagination

Quick Example

<!-- /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>

Key Feature

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.

Keyboard Navigation

By default, the PaginateItems component is keyboard navigable.

This behavior can be disabled by passing disableKeyboardNavigationprop.

Optional Props

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

Calculate Last Page

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>

Prepared Page Param Matcher

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

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

Migrate from v1

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>

License

MIT