@kayord/ui 0.15.6 → 0.15.7

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

@@ -12,10 +12,10 @@
 	import { cn } from "../../../utils";
 	import { tableStore } from "./table.svelte";
 	import DataTableHeader from "./DataTableHeader.svelte";
-	import type { ShadTable } from "./shad-table.svelte";
 
 	interface Props<T> {
-		tableState: ShadTable<T>;
+		table: TableType<T>;
+		columns: ColumnDef<T>[];
 		isLoading?: boolean;
 		header?: Snippet;
 		subHeader?: Snippet;
@@ -32,7 +32,8 @@
 	}
 
 	let {
-		tableState = $bindable(),
+		table = $bindable(),
+		columns,
 		isLoading = false,
 		header,
 		subHeader,
@@ -48,8 +49,8 @@
 		disableUISorting = false,
 	}: Props<T> = $props();
 
-	const isPaginationEnabled = tableState.table.options.getPaginationRowModel !== undefined;
-	const enableRowSelection = tableState.table.options.enableRowSelection;
+	const isPaginationEnabled = table.options.getPaginationRowModel !== undefined;
+	const enableRowSelection = table.options.enableRowSelection;
 
 	if (enableRowSelection) {
 		const rowSelectionColumn: ColumnDef<T> = {
@@ -57,8 +58,8 @@
 			// cell: (info) => "[]",
 			header: () =>
 				renderComponent(DataTableCheckbox, {
-					checked: tableState.table.getIsAllPageRowsSelected(),
-					onCheckedChange: () => tableState.table.toggleAllPageRowsSelected(),
+					checked: table.getIsAllPageRowsSelected(),
+					onCheckedChange: () => table.toggleAllPageRowsSelected(),
 				}),
 			cell: (r) =>
 				renderComponent(DataTableCheckbox, {
@@ -68,7 +69,7 @@
 			enableResizing: false,
 			enableSorting: false,
 		};
-		tableState.columns.unshift(rowSelectionColumn);
+		columns.unshift(rowSelectionColumn);
 	}
 </script>
 
@@ -96,7 +97,7 @@
 					{/if}
 					{#if enableVisibility}
 						<div>
-							<VisibilitySelect bind:tableState />
+							<VisibilitySelect bind:table />
 						</div>
 					{/if}
 					{#if enableFullscreen}
@@ -123,10 +124,10 @@
 		<Table.Root class="table-auto">
 			{#if !hideHeader}
 				<Table.Header>
-					{#each tableState.table.getHeaderGroups() as headerGroup, headerGroupIndex}
+					{#each table.getHeaderGroups() as headerGroup, headerGroupIndex}
 						<Table.Row>
 							{#each headerGroup.headers as header, headerIndex}
-								<DataTableHeader {headerGroupIndex} {headerIndex} bind:tableState {disableUISorting} />
+								<DataTableHeader {headerGroupIndex} {headerIndex} bind:table {disableUISorting} />
 							{/each}
 						</Table.Row>
 					{/each}
@@ -134,10 +135,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 columns as _cell}
 								<Table.Cell>
 									<Skeleton class="h-4" />
 								</Table.Cell>
@@ -145,14 +146,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 +174,7 @@
 		{/if}
 	</div>
 	{#if isPaginationEnabled}
-		<Pagination bind:tableState />
+		<Pagination bind:table />
 	{/if}
 
 	{#if footer}

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

@@ -1,7 +1,8 @@
+import { type ColumnDef, 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>;
+    columns: ColumnDef<T>[];
     isLoading?: boolean;
     header?: Snippet;
     subHeader?: Snippet;
@@ -20,7 +21,7 @@ declare class __sveltets_Render<T> {
     props(): Props<T>;
     events(): {};
     slots(): {};
-    bindings(): "tableState";
+    bindings(): "table";
     exports(): {};
 }
 interface $$IsomorphicComponent {

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

@@ -2,22 +2,19 @@
 	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>;
+		table: TypeType<T>;
 		disableUISorting?: boolean;
 	}
 
-	let { headerGroupIndex, headerIndex, tableState = $bindable(), disableUISorting = false }: Props<T> = $props();
+	let { headerGroupIndex, headerIndex, table = $bindable(), disableUISorting = false }: Props<T> = $props();
 
-	const isSortingEnabled = $derived(
-		tableState.table.options.getSortedRowModel !== undefined && disableUISorting !== true
-	);
+	const isSortingEnabled = $derived(table.options.getSortedRowModel !== undefined && disableUISorting !== true);
 
-	const header = tableState.table.getHeaderGroups()[headerGroupIndex].headers[headerIndex];
+	const header = table.getHeaderGroups()[headerGroupIndex].headers[headerIndex];
 </script>
 
 <Table.Head

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

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

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

@@ -5,23 +5,22 @@
 	import DoubleArrowLeft from "@lucide/svelte/icons/arrow-left";
 	import DoubleArrowRight from "@lucide/svelte/icons/arrow-right";
 	import { Select, Button } from "../../..";
-	import type { ShadTable } from "./shad-table.svelte";
 
 	interface Props<T> {
-		tableState: ShadTable<T>;
+		table: Table<T>;
 		canChangePageSize?: boolean;
 	}
 
-	let { tableState = $bindable(), canChangePageSize = false }: Props<T> = $props();
+	let { table = $bindable(), 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 +31,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 +46,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 +62,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,13 +1,13 @@
-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> {
     props(): Props<T>;
     events(): {};
     slots(): {};
-    bindings(): "tableState";
+    bindings(): "table";
     exports(): {};
 }
 interface $$IsomorphicComponent {

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 = $bindable() }: 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(): "table";
     exports(): {};
 }
 interface $$IsomorphicComponent {

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

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

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

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

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

@@ -13,5 +13,4 @@ export declare class ShadTable<TData extends RowData> {
     updateOptions(): void;
     features(): void;
 }
-export declare const createShadTable: <TData extends RowData>(options: ShadTableOptions<TData>) => Table<TData>;
 export {};

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

@@ -131,129 +131,6 @@ export class ShadTable {
         }
     }
 }
-export const createShadTable = (options) => {
-    // Set the default getCoreRowModel
-    if (!options.getCoreRowModel) {
-        options.getCoreRowModel = getCoreRowModel();
-    }
-    const plainOptions = options;
-    const resolvedOptions = mergeObjects({
-        state: {},
-        onStateChange() { },
-        renderFallbackValue: null,
-        mergeOptions: (defaultOptions, options) => {
-            return mergeObjects(defaultOptions, options);
-        },
-    }, plainOptions);
-    const table = createTable(resolvedOptions);
-    let state = $state(table.initialState);
-    function updateOptions() {
-        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);
-                },
-            });
-        });
-    }
-    // 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 ((options.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;
-                }
-            }
-        };
-    }
-    // Column Visibility
-    if ((options.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;
-                }
-            }
-        };
-    }
-    updateOptions();
-    $effect.pre(() => {
-        updateOptions();
-    });
-    return table;
-};
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 function mergeObjects(...sources) {
     const target = {};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@kayord/ui",
   "private": false,
-  "version": "0.15.6",
+  "version": "0.15.7",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",