Replace pagination event dispatcher with callback prop

README.md

@@ -49,19 +49,17 @@ The pagination component can be rendered as follows:
 
 ```html
 {#if pages > 1}
-    <Pagination {pages} {page} {params} {limit}
-        on:limitChanged={handleLimitChange}
-    />
+    <Pagination {pages} {page} {params} {limit} {limitChanged} />
 {/if}
 ```
 
 The limit change handler could be defined as follows:
 
 ```ts
-function handleLimitChange(event: CustomEvent<{ limit: number }>) {
-    localStorage.setItem("pageSize", event.detail.limit.toString());
+function limitChanged(limit: number) {
+    localStorage.setItem("pageSize", limit.toString());
     const search = new URLSearchParams(params);
-    search.set("limit", event.detail.limit.toString());
+    search.set("limit", limit.toString());
     search.delete("page");
     goto("?" + search.toString());
 }

src/lib/Pagination.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
-    import { createEventDispatcher } from "svelte";
-
     export let pages: number;
     export let page: number;
+    export let limitChanged: (limit: number) => void;
+
     export let params: { [key: string]: string } = {};
     export let label = "Table page navigation";
     export let paramName = "page";
@@ -13,8 +13,6 @@
     export let limit = 25;
     export let limits = [10, 25, 50, 100, 200];
 
-    const dispatch = createEventDispatcher<{ limitChanged: { limit: number } }>();
-
     $: if (page > pages) {
         page = pages;
     }
@@ -40,10 +38,6 @@
         pageArr = allPages;
     }
 
-    function limitChanged() {
-        dispatch("limitChanged", { limit });
-    }
-
     function getLink(page: number, params: { [key: string]: string }) {
         const search = new URLSearchParams(params);
         search.set(paramName, page.toString());
@@ -116,7 +110,7 @@
                     aria-label={limitLabel}
                     class="form-select float-sm-end w-auto"
                     bind:value={limit}
-                    on:change={limitChanged}
+                    on:change={() => limitChanged(limit)}
                 >
                     <option value="" disabled>{limitLabel}</option>
                     {#each limits as limit}

src/routes/+page.svelte

@@ -88,9 +88,10 @@
         return formatter.format(date);
     }
 
-    function handleLimitChange(event: CustomEvent<{ limit: number }>) {
+    function limitChanged(limit: number) {
         const search = new URLSearchParams(data.params);
-        search.set("limit", event.detail.limit.toString());
+        search.set("limit", limit.toString());
+        search.delete("page");
         goto("?" + search.toString());
     }
 </script>
@@ -114,8 +115,9 @@
             pages={data.pages}
             params={data.params}
             useIcons={paginationIcons}
-            limit={+(data.params.limit ?? 25)}
-            on:limitChanged={handleLimitChange}
+            limit={data.limit}
+            limits={[5, 25, 50, 100, 200]}
+            {limitChanged}
         />
 
         <div class="form-check mb-2">

src/routes/+page.ts

@@ -3,6 +3,7 @@ import { exampleData } from "./exampleData.js";
 
 export async function load({ url }) {
     const page = +(url.searchParams.get("page") ?? 1);
+    const limit = +(url.searchParams.get("limit") ?? 5);
     const data = [...exampleData];
 
     for (const p of url.searchParams) {
@@ -14,9 +15,10 @@ export async function load({ url }) {
 
     return {
         page,
-        pages: 2,
+        pages: Math.ceil(data.length / limit),
         params: Object.fromEntries(url.searchParams),
-        data: page === 1 ? data.slice(0, 6) : data.slice(6, 7),
+        limit,
+        data: data.slice((page - 1) * limit, limit * page),
     };
 }