@kayord/ui 0.16.3 → 0.16.4

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

@@ -1,21 +1,19 @@
 <script lang="ts" generics="T">
-	import { type ColumnDef, type Table as TableType } from "@tanstack/table-core";
-	import { FlexRender, renderComponent } from "../../ui/data-table";
+	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 type { Snippet } from "svelte";
 	import { fade } from "svelte/transition";
 	import { ProgressLoading } from "../progress-loading";
-	import DataTableCheckbox from "./DataTableCheckbox.svelte";
-	import VisibilitySelect from "./VisibilitySelect.svelte";
 	import FullscreenModeToggle from "./FullscreenModeToggle.svelte";
 	import { cn } from "../../../utils";
 	import { tableStore } from "./table.svelte";
 	import DataTableHeader from "./DataTableHeader.svelte";
-	import type { ShadTable } from "./shad-table.svelte";
+	import VisibilitySelect from "./VisibilitySelect.svelte";
 
 	interface Props<T> {
-		tableState: ShadTable<T>;
+		table: TableType<T>;
 		isLoading?: boolean;
 		header?: Snippet;
 		subHeader?: Snippet;
@@ -32,7 +30,7 @@
 	}
 
 	let {
-		tableState,
+		table,
 		isLoading = false,
 		header,
 		subHeader,
@@ -48,28 +46,7 @@
 		disableUISorting = false,
 	}: Props<T> = $props();
 
-	const isPaginationEnabled = tableState.table.options.getPaginationRowModel !== undefined;
-	const enableRowSelection = tableState.table.options.enableRowSelection;
-
-	if (enableRowSelection) {
-		const rowSelectionColumn: ColumnDef<T> = {
-			id: "select",
-			// cell: (info) => "[]",
-			header: () =>
-				renderComponent(DataTableCheckbox, {
-					checked: tableState.table.getIsAllPageRowsSelected(),
-					onCheckedChange: () => tableState.table.toggleAllPageRowsSelected(),
-				}),
-			cell: (r) =>
-				renderComponent(DataTableCheckbox, {
-					checked: r.row.getIsSelected(),
-					onCheckedChange: () => r.row.toggleSelected(),
-				}),
-			enableResizing: false,
-			enableSorting: false,
-		};
-		tableState.columns.unshift(rowSelectionColumn);
-	}
+	const isPaginationEnabled = table.options.getPaginationRowModel !== undefined;
 </script>
 
 <div
@@ -96,7 +73,7 @@
 					{/if}
 					{#if enableVisibility}
 						<div>
-							<VisibilitySelect bind:tableState />
+							<VisibilitySelect {table} />
 						</div>
 					{/if}
 					{#if enableFullscreen}
@@ -123,10 +100,10 @@
 		<Table.Root class="table-auto">
 			{#if !hideHeader}
 				<Table.Header>
-					{#each tableState.table.getHeaderGroups() as headerGroup, headerGroupIndex}
+					{#each table.getHeaderGroups() as headerGroup}
 						<Table.Row>
-							{#each headerGroup.headers as header, headerIndex}
-								<DataTableHeader {headerGroupIndex} {headerIndex} {tableState} {disableUISorting} />
+							{#each headerGroup.headers as header}
+								<DataTableHeader {header} {table} {disableUISorting} />
 							{/each}
 						</Table.Row>
 					{/each}
@@ -134,10 +111,10 @@
 			{/if}
 
 			<Table.Body>
-				{#if isLoading && tableState.table.getRowModel().rows.length == 0}
+				{#if isLoading && table.getRowModel().rows.length == 0}
 					{#each { length: 5 } as _, i}
 						<Table.Row>
-							{#each tableState.columns as _cell}
+							{#each table.getAllColumns() as _cell}
 								<Table.Cell>
 									<Skeleton class="h-4" />
 								</Table.Cell>
@@ -145,14 +122,14 @@
 						</Table.Row>
 					{/each}
 				{:else}
-					{#if tableState.table.getRowModel().rows.length == 0}
+					{#if table.getRowModel().rows.length == 0}
 						<Table.Row>
-							<Table.Cell colspan={tableState.table.getAllColumns().length}>
+							<Table.Cell colspan={table.getAllColumns().length}>
 								<div class="text-center">{noDataMessage}</div>
 							</Table.Cell>
 						</Table.Row>
 					{/if}
-					{#each tableState.table.getRowModel().rows as row}
+					{#each table.getRowModel().rows as row}
 						<Table.Row data-state={row.getIsSelected() && "selected"}>
 							{#each row.getVisibleCells() as cell}
 								<Table.Cell
@@ -173,7 +150,7 @@
 		{/if}
 	</div>
 	{#if isPaginationEnabled}
-		<Pagination {tableState} />
+		<Pagination {table} />
 	{/if}
 
 	{#if footer}

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

@@ -1,7 +1,7 @@
+import { type Table as TableType } from "@tanstack/table-core";
 import type { Snippet } from "svelte";
-import type { ShadTable } from "./shad-table.svelte";
 interface Props<T> {
-    tableState: ShadTable<T>;
+    table: TableType<T>;
     isLoading?: boolean;
     header?: Snippet;
     subHeader?: Snippet;

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

@@ -2,22 +2,16 @@
 	import { FlexRender, Table } from "../../..";
 	import { type Header, type Table as TypeType } from "@tanstack/table-core";
 	import { ArrowUpDownIcon, ArrowDownIcon, ArrowUpIcon } from "@lucide/svelte";
-	import type { ShadTable } from "./shad-table.svelte";
 
 	interface Props<T> {
-		headerGroupIndex: number;
-		headerIndex: number;
-		tableState: ShadTable<T>;
+		header: Header<T, unknown>;
+		table: TypeType<T>;
 		disableUISorting?: boolean;
 	}
 
-	let { headerGroupIndex, headerIndex, tableState, disableUISorting = false }: Props<T> = $props();
+	let { header, table, disableUISorting = false }: Props<T> = $props();
 
-	const isSortingEnabled = $derived(
-		tableState.table.options.getSortedRowModel !== undefined && disableUISorting !== true
-	);
-
-	const header = tableState.table.getHeaderGroups()[headerGroupIndex].headers[headerIndex];
+	const isSortingEnabled = $derived(table.options.getSortedRowModel !== undefined && disableUISorting !== true);
 </script>
 
 <Table.Head

package/dist/components/custom/data-table/DataTableHeader.svelte.d.ts

@@ -1,8 +1,7 @@
-import type { ShadTable } from "./shad-table.svelte";
+import { type Header, type Table as TypeType } from "@tanstack/table-core";
 interface Props<T> {
-    headerGroupIndex: number;
-    headerIndex: number;
-    tableState: ShadTable<T>;
+    header: Header<T, unknown>;
+    table: TypeType<T>;
     disableUISorting?: boolean;
 }
 declare class __sveltets_Render<T> {

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

@@ -8,20 +8,20 @@
 	import type { ShadTable } from "./shad-table.svelte";
 
 	interface Props<T> {
-		tableState: ShadTable<T>;
+		table: Table<T>;
 		canChangePageSize?: boolean;
 	}
 
-	let { tableState, canChangePageSize = false }: Props<T> = $props();
+	let { table, canChangePageSize = false }: Props<T> = $props();
 
-	let value = $state(tableState.table.getState().pagination.pageSize.toString());
+	let value = $state(table.getState().pagination.pageSize.toString());
 </script>
 
 <div class="flex items-center justify-between py-2">
 	<div class="text-muted-foreground flex-1 text-sm">
-		{#if tableState.table.options.enableRowSelection}
-			{tableState.table.getFilteredSelectedRowModel().rows.length} of
-			{tableState.table.getFilteredRowModel().rows.length} row(s) selected.
+		{#if table.options.enableRowSelection}
+			{table.getFilteredSelectedRowModel().rows.length} of
+			{table.getFilteredRowModel().rows.length} row(s) selected.
 		{/if}
 	</div>
 	<div class="flex items-center space-x-6 lg:space-x-8">
@@ -32,7 +32,7 @@
 					type="single"
 					bind:value
 					onValueChange={(value) => {
-						tableState.table.setPageSize(Number(value));
+						table.setPageSize(Number(value));
 					}}
 				>
 					<Select.Trigger class="h-8 w-[70px]">Select page size</Select.Trigger>
@@ -47,15 +47,15 @@
 			{/if}
 		</div>
 		<div class="flex w-[100px] items-center justify-center text-sm font-medium">
-			Page {tableState.table.getState().pagination.pageIndex + 1} of
-			{tableState.table.getPageCount()}
+			Page {table.getState().pagination.pageIndex + 1} of
+			{table.getPageCount()}
 		</div>
 		<div class="flex items-center space-x-2">
 			<Button
 				variant="outline"
 				class="hidden size-8 p-0 lg:flex"
-				onclick={() => tableState.table.setPageIndex(0)}
-				disabled={!tableState.table.getCanPreviousPage()}
+				onclick={() => table.setPageIndex(0)}
+				disabled={!table.getCanPreviousPage()}
 			>
 				<span class="sr-only">Go to first page</span>
 				<DoubleArrowLeft class="size-4" />
@@ -63,26 +63,21 @@
 			<Button
 				variant="outline"
 				class="size-8 p-0"
-				onclick={() => tableState.table.previousPage()}
-				disabled={!tableState.table.getCanPreviousPage()}
+				onclick={() => table.previousPage()}
+				disabled={!table.getCanPreviousPage()}
 			>
 				<span class="sr-only">Go to previous page</span>
 				<ChevronLeft class="size-4" />
 			</Button>
-			<Button
-				variant="outline"
-				class="size-8 p-0"
-				onclick={() => tableState.table.nextPage()}
-				disabled={!tableState.table.getCanNextPage()}
-			>
+			<Button variant="outline" class="size-8 p-0" onclick={() => table.nextPage()} disabled={!table.getCanNextPage()}>
 				<span class="sr-only">Go to next page</span>
 				<ChevronRight class="size-4" />
 			</Button>
 			<Button
 				variant="outline"
 				class="hidden size-8 p-0 lg:flex"
-				onclick={() => tableState.table.setPageIndex(tableState.table.getPageCount() - 1)}
-				disabled={!tableState.table.getCanNextPage()}
+				onclick={() => table.setPageIndex(table.getPageCount() - 1)}
+				disabled={!table.getCanNextPage()}
 			>
 				<span class="sr-only">Go to last page</span>
 				<DoubleArrowRight class="size-4" />

package/dist/components/custom/data-table/Pagination.svelte.d.ts

@@ -1,6 +1,6 @@
-import type { ShadTable } from "./shad-table.svelte";
+import type { Table } from "@tanstack/table-core";
 interface Props<T> {
-    tableState: ShadTable<T>;
+    table: Table<T>;
     canChangePageSize?: boolean;
 }
 declare class __sveltets_Render<T> {

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

@@ -2,13 +2,13 @@
 	import * as DropdownMenu from "../../ui/dropdown-menu";
 	import { Button } from "../../ui/button";
 	import { Settings2Icon } from "@lucide/svelte";
-	import type { ShadTable } from "./shad-table.svelte";
+	import type { Table } from "@tanstack/table-core";
 
 	interface Props<T> {
-		tableState: ShadTable<T>;
+		table: Table<T>;
 	}
 
-	let { tableState = $bindable() }: Props<T> = $props();
+	let { table }: Props<T> = $props();
 </script>
 
 <DropdownMenu.Root>
@@ -20,7 +20,7 @@
 	<DropdownMenu.Content>
 		<DropdownMenu.Label>Toggle columns</DropdownMenu.Label>
 		<DropdownMenu.Separator />
-		{#each tableState.table.getAllLeafColumns() as column}
+		{#each table.getAllLeafColumns() as column}
 			<DropdownMenu.CheckboxItem checked={column.getIsVisible()} onCheckedChange={() => column.toggleVisibility()}>
 				{column.id}
 			</DropdownMenu.CheckboxItem>

package/dist/components/custom/data-table/VisibilitySelect.svelte.d.ts

@@ -1,12 +1,12 @@
-import type { ShadTable } from "./shad-table.svelte";
+import type { Table } from "@tanstack/table-core";
 interface Props<T> {
-    tableState: ShadTable<T>;
+    table: Table<T>;
 }
 declare class __sveltets_Render<T> {
     props(): Props<T>;
     events(): {};
     slots(): {};
-    bindings(): "tableState";
+    bindings(): "";
     exports(): {};
 }
 interface $$IsomorphicComponent {

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

@@ -1,2 +1,2 @@
 export { default as DataTable } from "./DataTable.svelte";
-export { ShadTable } from "./shad-table.svelte";
+export { ShadTable, createShadSvelteTable } from "./shad-table.svelte";

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

@@ -1,2 +1,2 @@
 export { default as DataTable } from "./DataTable.svelte";
-export { ShadTable } from "./shad-table.svelte";
+export { ShadTable, createShadSvelteTable } from "./shad-table.svelte";

package/dist/components/custom/data-table/shad-table.svelte.d.ts

@@ -3,7 +3,9 @@ interface ShadTableOptions<TData extends RowData> extends Omit<TableOptions<TDat
     getCoreRowModel?: (table: Table<any>) => () => RowModel<any>;
     enablePaging?: boolean;
     enableVisibility?: boolean;
+    enableRowSelectionUI?: boolean;
 }
+export declare function createShadSvelteTable<TData extends RowData>(shadOptions: ShadTableOptions<TData>, stateUpdate?: (state: Partial<TableState>) => void): Table<TData>;
 export declare class ShadTable<TData extends RowData> {
     #private;
     columns: ColumnDef<TData>[];

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

@@ -1,4 +1,153 @@
 import { createTable, getCoreRowModel, getPaginationRowModel, getSortedRowModel, } from "@tanstack/table-core";
+import DataTableCheckbox from "./DataTableCheckbox.svelte";
+import { renderComponent } from "../../ui";
+export function createShadSvelteTable(shadOptions, stateUpdate) {
+    if (!shadOptions.getCoreRowModel) {
+        shadOptions.getCoreRowModel = getCoreRowModel();
+    }
+    if ((shadOptions.enablePaging ?? true) == false) {
+        shadOptions.manualPagination = true;
+    }
+    const options = shadOptions;
+    // Features
+    // Sorting
+    if ((options.enableSorting ?? true) && !options.getSortedRowModel) {
+        options.getSortedRowModel = getSortedRowModel();
+        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();
+        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);
+                }
+            }
+            else {
+                if (options.state?.rowSelection) {
+                    options.state.rowSelection = updater;
+                }
+                else {
+                    state.rowSelection = 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);
+                }
+            }
+            else {
+                if (options.state?.columnVisibility) {
+                    options.state.columnVisibility = updater;
+                }
+                else {
+                    state.columnVisibility = updater;
+                }
+            }
+        };
+    }
+    const resolvedOptions = mergeObjects({
+        state: {},
+        onStateChange() { },
+        renderFallbackValue: null,
+        mergeOptions: (defaultOptions, options) => {
+            return mergeObjects(defaultOptions, options);
+        },
+    }, options);
+    const table = createTable(resolvedOptions);
+    let state = $state(table.initialState);
+    const updateOptions = (table, state) => {
+        table.setOptions((prev) => {
+            return mergeObjects(prev, options, {
+                state: mergeObjects(state, options.state || {}),
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                onStateChange: (updater) => {
+                    if (updater instanceof Function)
+                        state = updater(state);
+                    else
+                        state = mergeObjects(state, updater);
+                    options.onStateChange?.(updater);
+                },
+            });
+        });
+    };
+    updateOptions(table, state);
+    // $effect.pre(() => {
+    // 	updateOptions(table, state);
+    // });
+    if (stateUpdate) {
+        $effect.pre(() => {
+            stateUpdate(state);
+        });
+    }
+    return table;
+}
 export class ShadTable {
     columns;
     table;
@@ -11,7 +160,6 @@ export class ShadTable {
         }
         else {
             this.#stateUpdate = (state) => {
-                console.log("state updated boii");
                 this.#state = state;
             };
         }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@kayord/ui",
   "private": false,
-  "version": "0.16.3",
+  "version": "0.16.4",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -46,7 +46,7 @@
     "vaul-svelte": "1.0.0-next.7"
   },
   "devDependencies": {
-    "@lucide/svelte": "^0.484.0",
+    "@lucide/svelte": "^0.485.0",
     "@sveltejs/adapter-auto": "^5.0.0",
     "@sveltejs/kit": "^2.20.2",
     "@sveltejs/package": "^2.3.10",
@@ -68,7 +68,7 @@
     "svelte-check": "^4.1.5",
     "tailwindcss": "^4.0.17",
     "tslib": "^2.8.1",
-    "tw-animate-css": "1.2.4",
+    "tw-animate-css": "1.2.5",
     "typescript": "^5.8.2",
     "vite": "^6.2.3",
     "vitest": "^3.0.9",