@kayord/ui 1.0.11 → 1.0.12

package/dist/components/custom/data-table/DataTable.svelte

@@ -12,7 +12,7 @@
 	import DataTableHeader from "./DataTableHeader.svelte";
 	import VisibilitySelect from "./VisibilitySelect.svelte";
 	import DataTableFooter from "./DataTableFooter.svelte";
-	import { goto } from "$app/navigation";
+	import { beforeNavigate, goto } from "$app/navigation";
 	import {
 		decodeColumnFilters,
 		decodeGlobalFilter,
@@ -20,6 +20,7 @@
 		decodeSorting,
 		encodeTableState,
 	} from "./table-search-params";
+	import { de } from "zod/v4/locales";
 
 	interface Props<T> {
 		table: TableType<T>;
@@ -57,6 +58,45 @@
 
 	const tableStore = new TableStore();
 	const isPaginationEnabled = table.options.getPaginationRowModel !== undefined;
+
+	// Load Default Values from Page Params
+	onMount(() => {
+		if (table.options.useURLSearchParams) {
+			table.setPageIndex(decodePageIndex());
+			table.setSorting(decodeSorting());
+			table.setGlobalFilter(decodeGlobalFilter());
+			table.setColumnFilters(decodeColumnFilters());
+		}
+	});
+
+	// Reset pageIndex
+	beforeNavigate((navigation) => {
+		if (table.options.useURLSearchParams) {
+			if (Number(navigation.to?.url.searchParams.get("page") ?? "0") > 0) {
+				if (
+					navigation.from?.url.searchParams.get("sort") != navigation.to?.url.searchParams.get("sort") ||
+					navigation.from?.url.searchParams.get("globalFilter") !=
+						navigation.to?.url.searchParams.get("globalFilter") ||
+					navigation.from?.url.searchParams.get("columnFilters") != navigation.to?.url.searchParams.get("columnFilters")
+				) {
+					table.resetPageIndex();
+				}
+			}
+		}
+	});
+
+	// Set URL Page Params
+	$effect(() => {
+		if (table.options.useURLSearchParams) {
+			const params = encodeTableState(table.getState());
+			goto(params, {
+				replaceState: true,
+				keepFocus: true,
+				noScroll: true,
+			});
+		}
+	});
+
 	let end: HTMLElement | undefined = $state();
 </script>
 

package/dist/components/custom/data-table/index.d.ts

@@ -2,3 +2,4 @@ export { default as DataTable } from "./DataTable.svelte";
 export { createShadTable } from "./shad-table.svelte";
 export { max, min, sum, uniqueCount } from "./data-table-utils";
 export { decodeColumnFilters, decodeGlobalFilter, decodePageIndex, decodeSorting, decodeTableState, encodeColumnFilters, encodeGlobalFilter, encodePageIndex, encodeSorting, encodeTableState, } from "./table-search-params";
+export type { CustomColumnMeta, CustomOptions } from "./types";

package/dist/components/custom/data-table/shad-table.svelte.js

@@ -9,6 +9,9 @@ export function createShadTable(shadOptions) {
     if ((shadOptions.enablePaging ?? true) == false) {
         shadOptions.manualPagination = true;
     }
+    if (shadOptions.useURLSearchParams) {
+        shadOptions.autoResetPageIndex = false;
+    }
     const options = shadOptions;
     // Features
     // Sorting

package/dist/components/custom/data-table/types.d.ts

@@ -0,0 +1,6 @@
+export interface CustomOptions {
+    useURLSearchParams?: boolean;
+}
+export interface CustomColumnMeta {
+    className?: string;
+}

package/dist/components/custom/data-table/types.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@kayord/ui",
   "private": false,
-  "version": "1.0.11",
+  "version": "1.0.12",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -49,7 +49,7 @@
   "devDependencies": {
     "@lucide/svelte": "^0.523.0",
     "@sveltejs/adapter-auto": "^6.0.1",
-    "@sveltejs/kit": "^2.22.1",
+    "@sveltejs/kit": "^2.22.2",
     "@sveltejs/package": "^2.3.12",
     "@sveltejs/vite-plugin-svelte": "^5.1.0",
     "@tailwindcss/vite": "^4.1.10",