@kayord/ui 1.0.11 → 1.0.13

package/README.md

@@ -200,3 +200,15 @@ pnpm i
 	}
 }
 ```
+
+## Data Table Types
+
+```ts
+// Add to app.d.ts
+import { CustomOptions, CustomColumnMeta } from "@kayord/ui";
+
+declare module "@tanstack/table-core" {
+	interface ColumnMeta<TData extends RowData, TValue> extends CustomColumnMeta {}
+	interface TableOptionsResolved<TData extends RowData> extends CustomOptions {}
+}
+```

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,
@@ -57,6 +57,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/table-search-params.d.ts

@@ -3,16 +3,16 @@ export declare const encodeSorting: (state: Partial<TableState>) => string;
 export declare const decodeSorting: () => {
     id: string;
     desc: boolean;
-}[];
+}[] | undefined;
 export declare const encodeGlobalFilter: (state: Partial<TableState>) => any;
-export declare const decodeGlobalFilter: () => string;
+export declare const decodeGlobalFilter: () => string | undefined;
 export declare const encodePageIndex: (state: Partial<TableState>) => string;
 export declare const decodePageIndex: () => number;
 export declare const encodeColumnFilters: (state: Partial<TableState>) => string;
 export declare const decodeColumnFilters: () => {
     id: string;
     value: any;
-}[];
+}[] | undefined;
 interface Options {
     sorting?: boolean;
     globalFilter?: boolean;

package/dist/components/custom/data-table/table-search-params.js

@@ -9,16 +9,17 @@ export const encodeSorting = (state) => {
     return state.sorting?.map((s) => `${s.desc ? "-" : ""}${s.id}`).join(",") ?? "";
 };
 export const decodeSorting = () => {
-    return (page.url.searchParams
+    return page.url.searchParams
         .get("sort")
         ?.split(",")
-        .map((s) => ({ id: s[0] === "-" ? s.slice(1) : s.slice(0), desc: s[0] === "-" })) ?? []);
+        .map((s) => ({ id: s[0] === "-" ? s.slice(1) : s.slice(0), desc: s[0] === "-" }));
 };
 export const encodeGlobalFilter = (state) => {
     return state.globalFilter;
 };
 export const decodeGlobalFilter = () => {
-    return page.url.searchParams.get("globalFilter") ?? "";
+    const globalFilter = page.url.searchParams.get("globalFilter");
+    return globalFilter != null ? globalFilter : undefined;
 };
 export const encodePageIndex = (state) => {
     return state.pagination?.pageIndex?.toString() ?? "";
@@ -32,7 +33,7 @@ export const encodeColumnFilters = (state) => {
         .join(",") ?? "");
 };
 export const decodeColumnFilters = () => {
-    return (page.url.searchParams
+    return page.url.searchParams
         .get("columnFilters")
         ?.split(",")
         .map((v) => {
@@ -46,7 +47,7 @@ export const decodeColumnFilters = () => {
             value: stringValue === "undefined" ? undefined : JSON.parse(decodeURIComponent(stringValue)),
         };
     })
-        .filter((x) => x !== null) ?? []);
+        .filter((x) => x !== null);
 };
 export const decodeTableState = () => {
     return {

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.13",
   "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",