@kayord/ui 2.1.3 → 2.1.4

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

@@ -2,173 +2,103 @@ import { createTable, getCoreRowModel, getFilteredRowModel, getPaginationRowMode
 import DataTableCheckbox from "./DataTableCheckbox.svelte";
 import { renderComponent } from "../../../data-table";
 import { mergeObjects } from "../../ui/data-table/data-table.svelte";
+import { createSubscriber } from "svelte/reactivity";
 export function createShadTable(shadOptions) {
-    if (!shadOptions.getCoreRowModel) {
-        shadOptions.getCoreRowModel = getCoreRowModel();
-    }
-    if ((shadOptions.enablePaging ?? true) == false) {
-        shadOptions.manualPagination = true;
-    }
-    if (shadOptions.useURLSearchParams) {
-        shadOptions.autoResetPageIndex = false;
-    }
-    const options = shadOptions;
-    // Features
-    // Sorting
-    if ((options.enableSorting ?? true) && !options.getSortedRowModel) {
-        options.getSortedRowModel = getSortedRowModel();
-        if (!options.onSortingChange) {
-            options.onSortingChange = (updater) => {
-                if (typeof updater === "function") {
-                    if (options.state?.sorting) {
-                        options.state.sorting = updater(options.state.sorting);
-                    }
-                    else if (state.sorting) {
-                        state.sorting = updater(state.sorting);
-                    }
-                }
-                else {
-                    if (options.state?.sorting) {
-                        options.state.sorting = updater;
-                    }
-                    else {
-                        state.sorting = updater;
-                    }
-                }
-            };
-        }
-    }
-    // Paging
-    if ((shadOptions.enablePaging ?? true) && !options.getPaginationRowModel) {
-        options.getPaginationRowModel = getPaginationRowModel();
-        if (!options.onPaginationChange) {
-            options.onPaginationChange = (updater) => {
-                if (typeof updater === "function") {
-                    if (options.state?.pagination) {
-                        options.state.pagination = updater(options.state.pagination);
-                    }
-                    else if (state.pagination) {
-                        state.pagination = updater(state.pagination);
-                    }
-                }
-                else {
-                    if (options.state?.pagination) {
-                        options.state.pagination = updater;
-                    }
-                    else {
-                        state.pagination = updater;
-                    }
-                }
-            };
-        }
-    }
-    // Row Selection
-    if ((options.enableRowSelection ?? true) && !options.onRowSelectionChange) {
-        options.onRowSelectionChange = (updater) => {
-            if (typeof updater === "function") {
-                if (options.state?.rowSelection) {
-                    options.state.rowSelection = updater(options.state.rowSelection);
-                }
-                else if (state.rowSelection) {
-                    state.rowSelection = updater(state.rowSelection);
-                }
+    let notifyTableUpdate;
+    const subscribeToTable = createSubscriber((update) => {
+        notifyTableUpdate = update;
+        return () => { };
+    });
+    const defaultOptions = {
+        columns: shadOptions.columns,
+        get data() {
+            return shadOptions.data;
+        },
+        getCoreRowModel: getCoreRowModel(),
+        getPaginationRowModel: getPaginationRowModel(),
+        getSortedRowModel: getSortedRowModel(),
+        getFilteredRowModel: getFilteredRowModel(),
+        globalFilterFn: "auto",
+        columnResizeMode: "onChange",
+        // enableColumnResizing: true
+        enableRowSelection: false,
+        // enableFilters: true,
+        enableGlobalFilter: true,
+        onSortingChange: (updater) => {
+            if (options.state?.sorting) {
+                options.state.sorting = typeof updater === "function" ? updater(options.state.sorting) : updater;
             }
-            else {
-                if (options.state?.rowSelection) {
-                    options.state.rowSelection = updater;
-                }
-                else {
-                    state.rowSelection = updater;
-                }
+            else if (state.sorting) {
+                state.sorting = typeof updater === "function" ? updater(state.sorting) : updater;
             }
-        };
-    }
-    if (options.enableRowSelection && (shadOptions.enableRowSelectionUI ?? true)) {
-        const rowSelectionColumn = {
-            id: "select",
-            header: () => renderComponent(DataTableCheckbox, {
-                checked: table.getIsAllPageRowsSelected(),
-                onCheckedChange: () => table.toggleAllPageRowsSelected(),
-            }),
-            cell: (r) => renderComponent(DataTableCheckbox, {
-                checked: r.row.getIsSelected(),
-                onCheckedChange: () => r.row.toggleSelected(),
-            }),
-            enableResizing: false,
-            enableSorting: false,
-        };
-        options.columns.unshift(rowSelectionColumn);
-    }
-    // Column Visibility
-    if ((shadOptions.enableVisibility ?? false) && !options.onColumnVisibilityChange) {
-        options.onColumnVisibilityChange = (updater) => {
-            if (typeof updater === "function") {
-                if (options.state?.columnVisibility) {
-                    options.state.columnVisibility = updater(options.state.columnVisibility);
-                }
-                else if (state.columnVisibility) {
-                    state.columnVisibility = updater(state.columnVisibility);
-                }
+            notifyTableUpdate?.();
+        },
+        // onColumnSizingChange: (updater) => {
+        // 	columnSizing = typeof updater === "function" ? updater(columnSizing) : updater;
+        // },
+        // onColumnSizingInfoChange: (updater) => {
+        // 	columnSizingInfo = typeof updater === "function" ? updater(columnSizingInfo) : updater;
+        // },
+        // onColumnPinningChange: (updater) => {
+        // 	columnPinning = typeof updater === "function" ? updater(columnPinning) : updater;
+        // },
+        onColumnVisibilityChange: (updater) => {
+            if (options.state?.columnVisibility) {
+                options.state.columnVisibility =
+                    typeof updater === "function" ? updater(options.state.columnVisibility) : updater;
             }
-            else {
-                if (options.state?.columnVisibility) {
-                    options.state.columnVisibility = updater;
-                }
-                else {
-                    state.columnVisibility = updater;
-                }
+            else if (state.columnVisibility) {
+                state.columnVisibility = typeof updater === "function" ? updater(state.columnVisibility) : updater;
             }
-        };
-    }
-    // Filtering
-    if ((options.enableFilters ?? true) && !options.getFilteredRowModel) {
-        options.getFilteredRowModel = getFilteredRowModel();
-        // Global Filtering
-        if (options.enableGlobalFilter ?? false) {
-            if (!options.onGlobalFilterChange) {
-                options.onGlobalFilterChange = (updater) => {
-                    if (typeof updater === "function") {
-                        if (options.state?.globalFilter) {
-                            options.state.globalFilter = updater(options.state.globalFilter);
-                        }
-                        else if (state.globalFilter) {
-                            state.globalFilter = updater(state.globalFilter);
-                        }
-                    }
-                    else {
-                        if (options.state?.globalFilter) {
-                            options.state.globalFilter = updater;
-                        }
-                        else {
-                            state.globalFilter = updater;
-                        }
-                    }
-                };
+            notifyTableUpdate?.();
+        },
+        onPaginationChange: (updater) => {
+            if (options.state?.pagination) {
+                options.state.pagination = typeof updater === "function" ? updater(options.state.pagination) : updater;
+            }
+            else if (state.pagination) {
+                state.pagination = typeof updater === "function" ? updater(state.pagination) : updater;
             }
-        }
-        else {
-            if (!options.onColumnFiltersChange) {
-                options.onColumnFiltersChange = (updater) => {
-                    if (typeof updater === "function") {
-                        if (options.state?.columnFilters) {
-                            options.state.columnFilters = updater(options.state.columnFilters);
-                        }
-                        else if (state.columnFilters) {
-                            state.columnFilters = updater(state.columnFilters);
-                        }
-                    }
-                    else {
-                        if (options.state?.columnFilters) {
-                            options.state.columnFilters = updater;
-                        }
-                        else {
-                            state.columnFilters = updater;
-                        }
-                    }
-                };
+            notifyTableUpdate?.();
+        },
+        onColumnFiltersChange: (updater) => {
+            if (options.state?.columnFilters) {
+                options.state.columnFilters = typeof updater === "function" ? updater(options.state.columnFilters) : updater;
+            }
+            else if (state.columnFilters) {
+                state.columnFilters = typeof updater === "function" ? updater(state.columnFilters) : updater;
+            }
+            notifyTableUpdate?.();
+        },
+        onRowSelectionChange: (updater) => {
+            if (options.state?.rowSelection) {
+                options.state.rowSelection = typeof updater === "function" ? updater(options.state.rowSelection) : updater;
+            }
+            else if (state.rowSelection) {
+                state.rowSelection = typeof updater === "function" ? updater(state.rowSelection) : updater;
+            }
+            notifyTableUpdate?.();
+        },
+        onGlobalFilterChange: (updater) => {
+            if (options.state?.globalFilter) {
+                options.state.globalFilter = typeof updater === "function" ? updater(options.state.globalFilter) : updater;
+            }
+            else {
+                state.globalFilter = typeof updater === "function" ? updater(state.globalFilter) : updater;
             }
-        }
+            notifyTableUpdate?.();
+        },
+    };
+    if (shadOptions.useURLSearchParams) {
+        shadOptions.autoResetPageIndex = false;
+    }
+    if ((shadOptions.enablePaging ?? true) == false) {
+        defaultOptions.getPaginationRowModel = undefined;
+        defaultOptions.manualPagination = true;
     }
+    // Use default but extend with shadOptions, excluding data to preserve reactivity.
+    // Using mergeObjects to keep getter in tact
+    const options = mergeObjects(defaultOptions, shadOptions ?? {});
     const resolvedOptions = mergeObjects({
         state: {},
         onStateChange() { },
@@ -178,7 +108,31 @@ export function createShadTable(shadOptions) {
         },
     }, options);
     const table = createTable(resolvedOptions);
-    let state = $state(table.initialState);
+    const state = $state(table.initialState);
+    // Row Selection
+    if (options.enableRowSelection && (shadOptions.enableRowSelectionUI ?? true)) {
+        const rowSelectionColumn = {
+            id: "select",
+            header: () => {
+                subscribeToTable();
+                return renderComponent(DataTableCheckbox, {
+                    checked: table.getIsAllPageRowsSelected(),
+                    indeterminate: table.getIsSomePageRowsSelected(),
+                    onCheckedChange: () => table.toggleAllPageRowsSelected(),
+                });
+            },
+            cell: (r) => {
+                subscribeToTable();
+                return renderComponent(DataTableCheckbox, {
+                    checked: r.row.getIsSelected(),
+                    onCheckedChange: () => r.row.toggleSelected(),
+                });
+            },
+            enableResizing: false,
+            enableSorting: false,
+        };
+        options.columns.unshift(rowSelectionColumn);
+    }
     const updateOptions = (table, state) => {
         table.setOptions((prev) => {
             return mergeObjects(prev, options, {
@@ -198,5 +152,111 @@ export function createShadTable(shadOptions) {
     $effect.pre(() => {
         updateOptions(table, state);
     });
-    return table;
+    const reactiveTable = {
+        // Expose all original table methods and properties
+        ...table,
+        // Override methods that depend on state to create reactive dependencies
+        getRowModel: () => {
+            subscribeToTable();
+            return table.getRowModel();
+        },
+        getHeaderGroups: () => {
+            subscribeToTable();
+            return table.getHeaderGroups();
+        },
+        getAllColumns: () => {
+            subscribeToTable();
+            return table.getAllColumns();
+        },
+        getVisibleLeafColumns: () => {
+            subscribeToTable();
+            return table.getVisibleLeafColumns();
+        },
+        getState: () => {
+            subscribeToTable();
+            return table.getState();
+        },
+        getPageCount: () => {
+            subscribeToTable();
+            return table.getPageCount();
+        },
+        getColumn: (columnId) => {
+            subscribeToTable();
+            return table.getColumn(columnId);
+        },
+        // Forward all other methods to the original table
+        setColumnFilters: table.setColumnFilters.bind(table),
+        setSorting: table.setSorting.bind(table),
+        setPagination: table.setPagination.bind(table),
+        setPageIndex: table.setPageIndex.bind(table),
+        setPageSize: table.setPageSize.bind(table),
+        setColumnPinning: table.setColumnPinning.bind(table),
+        setColumnVisibility: table.setColumnVisibility.bind(table),
+        setRowSelection: table.setRowSelection.bind(table),
+        setColumnSizing: table.setColumnSizing.bind(table),
+        setOptions: table.setOptions.bind(table),
+        setGlobalFilter: table.setGlobalFilter.bind(table),
+        getFlatHeaders: () => {
+            subscribeToTable();
+            return table.getFlatHeaders();
+        },
+        getTotalSize: () => {
+            subscribeToTable();
+            return table.getTotalSize();
+        },
+        getLeftLeafColumns: () => {
+            subscribeToTable();
+            return table.getLeftLeafColumns();
+        },
+        getRowCount: () => {
+            subscribeToTable();
+            return table.getRowCount();
+        },
+        getRightLeafColumns: () => {
+            subscribeToTable();
+            return table.getRightLeafColumns();
+        },
+        getCenterLeafColumns: () => {
+            subscribeToTable();
+            return table.getCenterLeafColumns();
+        },
+        getIsAllRowsSelected: () => {
+            subscribeToTable();
+            return table.getIsAllRowsSelected();
+        },
+        getIsSomeRowsSelected: () => {
+            subscribeToTable();
+            return table.getIsSomeRowsSelected();
+        },
+        getIsAllPageRowsSelected: () => {
+            subscribeToTable();
+            return table.getIsAllPageRowsSelected();
+        },
+        getIsSomePageRowsSelected: () => {
+            subscribeToTable();
+            return table.getIsSomePageRowsSelected();
+        },
+        getCanPreviousPage: () => {
+            subscribeToTable();
+            return table.getCanPreviousPage();
+        },
+        getCanNextPage: () => {
+            subscribeToTable();
+            return table.getCanNextPage();
+        },
+        getFilteredSelectedRowModel: () => {
+            subscribeToTable();
+            return table.getFilteredSelectedRowModel();
+        },
+        toggleAllRowsSelected: table.toggleAllRowsSelected.bind(table),
+        toggleAllPageRowsSelected: table.toggleAllPageRowsSelected.bind(table),
+        // Keep table reference for any other property access
+        _getDefaultColumnDef: table._getDefaultColumnDef.bind(table),
+        get options() {
+            subscribeToTable();
+            return table.options;
+        },
+        initialState: table.initialState,
+    };
+    return reactiveTable;
 }

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

@@ -1,6 +1,14 @@
+import z from "zod";
 export interface CustomOptions {
     useURLSearchParams?: boolean;
 }
 export interface CustomColumnMeta {
     className?: string;
 }
+export declare const defaultSearchParamSchema: z.ZodObject<{
+    search: z.ZodDefault<z.ZodAny>;
+    page: z.ZodDefault<z.ZodCoercedNumber<unknown>>;
+    filter: z.ZodDefault<z.ZodString>;
+    sort: z.ZodDefault<z.ZodString>;
+}, z.core.$strip>;
+export type SearchParamSchema = z.infer<typeof defaultSearchParamSchema>;

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

@@ -1 +1,7 @@
-export {};
+import z from "zod";
+export const defaultSearchParamSchema = z.object({
+    search: z.any().default(""),
+    page: z.coerce.number().default(0),
+    filter: z.string().default(""),
+    sort: z.string().default(""),
+});

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@kayord/ui",
   "private": false,
-  "version": "2.1.3",
+  "version": "2.1.4",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -23,10 +23,6 @@
       "types": "./dist/data-table/index.d.ts",
       "default": "./dist/data-table/index.js"
     },
-    "./data-grid": {
-      "types": "./dist/data-grid/index.d.ts",
-      "default": "./dist/data-grid/index.js"
-    },
     "./drawer": {
       "types": "./dist/drawer/index.d.ts",
       "default": "./dist/drawer/index.js"
@@ -122,8 +118,8 @@
     "@tailwindcss/vite": "^4.1.18",
     "@types/d3-scale": "^4.0.9",
     "@types/d3-shape": "^3.1.8",
-    "@vitest/browser": "^4.0.17",
-    "@vitest/browser-playwright": "^4.0.17",
+    "@vitest/browser": "^4.0.18",
+    "@vitest/browser-playwright": "^4.0.18",
     "d3-scale": "^4.0.2",
     "d3-shape": "^3.2.0",
     "embla-carousel-svelte": "^8.6.0",
@@ -135,12 +131,12 @@
     "layerchart": "2.0.0-next.40",
     "mode-watcher": "^1.1.0",
     "paneforge": "^1.0.2",
-    "prettier": "^3.8.0",
+    "prettier": "^3.8.1",
     "prettier-plugin-svelte": "^3.4.1",
     "prettier-plugin-tailwindcss": "^0.7.2",
-    "publint": "^0.3.16",
+    "publint": "^0.3.17",
     "runed": "^0.37.1",
-    "svelte": "5.47.1",
+    "svelte": "5.48.0",
     "svelte-check": "^4.3.5",
     "svelte-sonner": "^1.0.7",
     "sveltekit-superforms": "^2.29.1",
@@ -151,9 +147,9 @@
     "typescript-eslint": "^8.53.1",
     "vaul-svelte": "1.0.0-next.7",
     "vite": "^7.3.1",
-    "vitest": "^4.0.17",
-    "vitest-browser-svelte": "^2.0.0",
-    "zod": "4.3.5"
+    "vitest": "^4.0.18",
+    "vitest-browser-svelte": "^2.0.2",
+    "zod": "4.3.6"
   },
   "svelte": "./dist/index.js",
   "types": "./dist/index.d.ts",

package/dist/components/custom/data-grid/DataGrid.svelte

@@ -1,183 +0,0 @@
-<script lang="ts" generics="T">
-	import { type Table as TableType } from "@tanstack/table-core";
-	import { FlexRender } from "../../ui/data-table";
-	import { Skeleton, Table } from "../../ui";
-	import Pagination from "./Pagination.svelte";
-	import { onMount, type Snippet } from "svelte";
-	import { fade } from "svelte/transition";
-	import { ProgressLoading } from "../progress-loading";
-	import { cn } from "../../../utils";
-	import DataGridHeader from "./DataGridHeader.svelte";
-	import DataGridFooter from "./DataGridFooter.svelte";
-	import { defaultDataGridProps, defaultSearchParamSchema, type DataGridProps } from "./types";
-	import DataGridView from "./DataGridView.svelte";
-	import { useSearchParams } from "runed/kit";
-	import { untrack } from "svelte";
-	import { decodeColumnFilters, decodeSorting, encodeColumnFilters, encodeSorting } from "../data-table";
-
-	interface Props<T> {
-		table: TableType<T>;
-		dataGridProps?: DataGridProps;
-		isLoading?: boolean;
-		header?: Snippet;
-		subHeader?: Snippet;
-		footer?: Snippet;
-		leftToolbar?: Snippet;
-		rightToolbar?: Snippet;
-		noDataMessage?: string;
-		hideHeader?: boolean;
-		enableVisibility?: boolean;
-		class?: string;
-		headerClass?: string;
-		disableUISorting?: boolean;
-	}
-
-	let {
-		table,
-		dataGridProps = defaultDataGridProps,
-		isLoading = false,
-		header,
-		subHeader,
-		footer,
-		leftToolbar,
-		rightToolbar,
-		noDataMessage = "No data",
-		hideHeader = false,
-		enableVisibility = false,
-		class: className,
-		headerClass,
-		disableUISorting = false,
-	}: Props<T> = $props();
-
-	let end: HTMLElement | undefined = $state();
-
-	const tableState = $derived(table.getState());
-	const columnVisibility = $derived(tableState.columnVisibility);
-
-	const params = useSearchParams(defaultSearchParamSchema, { pushHistory: false });
-
-	// Load current url search params
-	onMount(() => {
-		if (dataGridProps.useURLSearchParams) {
-			table.setGlobalFilter(params.search);
-			table.setSorting(decodeSorting() ?? []);
-			table.setPageIndex(params.page);
-			table.setColumnFilters(decodeColumnFilters() ?? []);
-		}
-	});
-
-	// Set url search params
-	$effect(() => {
-		if (dataGridProps.useURLSearchParams) {
-			const tableState = table.getState();
-			untrack(() => {
-				params.search = tableState.globalFilter;
-				params.page = tableState.pagination.pageIndex;
-				params.sort = encodeSorting(tableState);
-				params.filter = encodeColumnFilters(tableState);
-			});
-		}
-	});
-</script>
-
-<div class={cn("w-full", className)}>
-	<div class={cn(headerClass)}>
-		{#if header}
-			{@render header()}
-		{:else}
-			<div class="flex items-center justify-between gap-2 pb-2">
-				<div>
-					{#if leftToolbar}
-						{@render leftToolbar()}
-					{/if}
-				</div>
-				<div></div>
-				<div class="flex items-center justify-between gap-2">
-					{#if rightToolbar}
-						{@render rightToolbar()}
-					{/if}
-					{#if enableVisibility}
-						<DataGridView {table} />
-					{/if}
-				</div>
-			</div>
-		{/if}
-	</div>
-
-	<div class="rounded-md border">
-		{#if isLoading}
-			<span in:fade={{ duration: 300 }}>
-				<ProgressLoading class="h-1" />
-			</span>
-		{/if}
-
-		{#if subHeader}
-			{@render subHeader()}
-		{/if}
-
-		<Table.Root class="table-auto">
-			{#if !hideHeader}
-				<Table.Header>
-					{#each table.getHeaderGroups() as headerGroup (headerGroup.id)}
-						<Table.Row>
-							{#each headerGroup.headers.filter((h) => columnVisibility[h.column.id] !== false) as header (header.id)}
-								<DataGridHeader {header} {table} {disableUISorting} />
-							{/each}
-						</Table.Row>
-					{/each}
-				</Table.Header>
-			{/if}
-
-			<Table.Body>
-				{#if isLoading && table.getRowModel().rows.length == 0}
-					{#each { length: 5 }}
-						<Table.Row>
-							{#each table.getAllColumns() as _cell (_cell.id)}
-								<Table.Cell>
-									<Skeleton class="h-4" />
-								</Table.Cell>
-							{/each}
-						</Table.Row>
-					{/each}
-				{:else}
-					{#if table.getRowModel().rows.length == 0}
-						<Table.Row>
-							<Table.Cell colspan={table.getAllColumns().length}>
-								<div class="text-center">{noDataMessage}</div>
-							</Table.Cell>
-						</Table.Row>
-					{/if}
-					{#each table.getRowModel().rows as row (row.id)}
-						<Table.Row data-state={row.getIsSelected() && "selected"}>
-							{#each row.getVisibleCells() as cell (cell.id)}
-								<Table.Cell
-									class={cell.column.columnDef.meta?.className}
-									style={`width: ${cell.column.getSize()}px; min-width:${cell.column.columnDef.minSize}px; max-width:${cell.column.columnDef.maxSize}px`}
-								>
-									<FlexRender content={cell.column.columnDef.cell} context={cell.getContext()} />
-								</Table.Cell>
-							{/each}
-						</Table.Row>
-					{/each}
-				{/if}
-			</Table.Body>
-			<DataGridFooter {table} />
-		</Table.Root>
-		{#if isLoading}
-			<span in:fade={{ duration: 300 }}>
-				<ProgressLoading class="h-1" />
-			</span>
-		{/if}
-	</div>
-	{#if dataGridProps.isPaginationEnabled}
-		<Pagination {table} {dataGridProps} />
-	{/if}
-
-	{#if footer}
-		<div class="overflow-hidden rounded-b-md">
-			{@render footer()}
-		</div>
-	{/if}
-</div>
-
-<div bind:this={end} aria-hidden="true"></div>