@kayord/ui 2.0.13 → 2.1.1

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

@@ -0,0 +1,183 @@
+<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>

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

@@ -0,0 +1,43 @@
+import { type Table as TableType } from "@tanstack/table-core";
+import { type Snippet } from "svelte";
+import { type DataGridProps } from "./types";
+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;
+}
+declare function $$render<T>(): {
+    props: Props<T>;
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const DataGrid: $$IsomorphicComponent;
+type DataGrid<T> = InstanceType<typeof DataGrid<T>>;
+export default DataGrid;

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

@@ -0,0 +1,15 @@
+<script lang="ts">
+	import { Checkbox } from "../../ui/checkbox";
+	import { cn } from "../../../utils";
+	import type { ComponentProps } from "svelte";
+
+	interface Props extends ComponentProps<typeof Checkbox> {
+		checked?: boolean;
+		indeterminate?: boolean;
+		class?: string;
+	}
+
+	let { checked, class: className, ...rest }: Props = $props();
+</script>
+
+<Checkbox bind:checked class={cn("rounded-[5px]", className)} {...rest} />

package/dist/components/custom/data-grid/DataGridCheckbox.svelte.d.ts

@@ -0,0 +1,10 @@
+import { Checkbox } from "../../ui/checkbox";
+import type { ComponentProps } from "svelte";
+interface Props extends ComponentProps<typeof Checkbox> {
+    checked?: boolean;
+    indeterminate?: boolean;
+    class?: string;
+}
+declare const DataGridCheckbox: import("svelte").Component<Props, {}, "">;
+type DataGridCheckbox = ReturnType<typeof DataGridCheckbox>;
+export default DataGridCheckbox;

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

@@ -0,0 +1,35 @@
+<script lang="ts" generics="T">
+	import { Table } from "../../..";
+	import { FlexRender } from "../../../data-table";
+	import { type Table as TypeType } from "@tanstack/table-core";
+
+	interface Props<T> {
+		table: TypeType<T>;
+	}
+
+	let { table }: Props<T> = $props();
+
+	const hasFooterContent = $derived(
+		table
+			.getFooterGroups()
+			.some((footerGroup) =>
+				footerGroup.headers.some((header) => !header.isPlaceholder && header.column.columnDef.footer)
+			)
+	);
+</script>
+
+{#if hasFooterContent}
+	<Table.Footer class="bg-muted/20 border-t-1 font-bold">
+		{#each table.getFooterGroups() as footerGroup}
+			<Table.Row>
+				{#each footerGroup.headers as header}
+					<Table.Cell colspan={header.colSpan}>
+						{#if !header.isPlaceholder}
+							<FlexRender content={header.column.columnDef.footer} context={header.getContext()} />
+						{/if}
+					</Table.Cell>
+				{/each}
+			</Table.Row>
+		{/each}
+	</Table.Footer>
+{/if}

package/dist/components/custom/data-grid/DataGridFooter.svelte.d.ts

@@ -0,0 +1,28 @@
+import { type Table as TypeType } from "@tanstack/table-core";
+interface Props<T> {
+    table: TypeType<T>;
+}
+declare function $$render<T>(): {
+    props: Props<T>;
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const DataGridFooter: $$IsomorphicComponent;
+type DataGridFooter<T> = InstanceType<typeof DataGridFooter<T>>;
+export default DataGridFooter;

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

@@ -0,0 +1,48 @@
+<script lang="ts" generics="T">
+	import { Table } from "../../..";
+	import { FlexRender } from "../../../data-table";
+	import { type Header, type Table as TypeType } from "@tanstack/table-core";
+	import { ArrowUpDownIcon, ArrowDownIcon, ArrowUpIcon } from "@lucide/svelte";
+
+	interface Props<T> {
+		header: Header<T, unknown>;
+		table: TypeType<T>;
+		disableUISorting?: boolean;
+	}
+
+	let { header, table, disableUISorting = false }: Props<T> = $props();
+
+	const isSortingEnabled = $derived(table.options.getSortedRowModel !== undefined && disableUISorting !== true);
+
+	const column = $derived(header.column);
+
+	const currentSort = $derived.by(() => {
+		const sortState = table.getState().sorting;
+		return sortState.find((sort) => sort.id === column.id);
+	});
+
+	const sortDirection = $derived(currentSort ? (currentSort.desc ? "desc" : "asc") : null);
+</script>
+
+<Table.Head
+	colspan={header.colSpan}
+	class="bg-muted/20"
+	style={`width: ${header.getSize()}px; min-width:${header.column.columnDef.minSize}px; max-width:${header.column.columnDef.maxSize}px`}
+>
+	{#if !header.isPlaceholder}
+		<div class="flex items-center gap-1">
+			<FlexRender content={header.column.columnDef.header} context={header.getContext()} />
+			{#if isSortingEnabled && header.column.getCanSort()}
+				<button onclick={header.column.getToggleSortingHandler()}>
+					{#if sortDirection == "asc"}
+						<ArrowDownIcon class="size-4" />
+					{:else if sortDirection == "desc"}
+						<ArrowUpIcon class="size-4" />
+					{:else}
+						<ArrowUpDownIcon class="text-muted size-4" />
+					{/if}
+				</button>
+			{/if}
+		</div>
+	{/if}
+</Table.Head>

package/dist/components/custom/data-grid/DataGridHeader.svelte.d.ts

@@ -0,0 +1,30 @@
+import { type Header, type Table as TypeType } from "@tanstack/table-core";
+interface Props<T> {
+    header: Header<T, unknown>;
+    table: TypeType<T>;
+    disableUISorting?: boolean;
+}
+declare function $$render<T>(): {
+    props: Props<T>;
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const DataGridHeader: $$IsomorphicComponent;
+type DataGridHeader<T> = InstanceType<typeof DataGridHeader<T>>;
+export default DataGridHeader;

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

@@ -0,0 +1,77 @@
+<script lang="ts" generics="TData">
+	import type { Table } from "@tanstack/table-core";
+	import { cn } from "../../../utils.js";
+	import { Button } from "../../ui/button";
+	import { Popover, PopoverContent, PopoverTrigger } from "../../ui/popover";
+	import {
+		Command,
+		CommandEmpty,
+		CommandGroup,
+		CommandInput,
+		CommandItem,
+		CommandList,
+	} from "../../ui/command/index.js";
+
+	// Icons
+	import Settings2 from "@lucide/svelte/icons/settings-2";
+	import Check from "@lucide/svelte/icons/check";
+
+	interface Props {
+		table: Table<TData>;
+		align?: "start" | "center" | "end";
+		class?: string;
+	}
+
+	let { table, align = "start", class: className }: Props = $props();
+
+	// Get columns - table.getAllColumns() is reactive via our wrapper
+	const columns = $derived(
+		table.getAllColumns().filter((column) => typeof column.accessorFn !== "undefined" && column.getCanHide())
+	);
+
+	// Get visibility state reactively
+	const columnVisibility = $derived(table.getState().columnVisibility);
+
+	// Helper to check if column is visible - reads from reactive state
+	function isColumnVisible(columnId: string): boolean {
+		// If not in visibility state, default to visible (true)
+		return columnVisibility[columnId] !== false;
+	}
+</script>
+
+<Popover>
+	<PopoverTrigger>
+		{#snippet child({ props })}
+			<Button
+				{...props}
+				aria-label="Toggle columns"
+				role="combobox"
+				variant="outline"
+				size="sm"
+				class={cn("ml-auto hidden h-8 font-normal lg:flex", className)}
+			>
+				<Settings2 class="text-muted-foreground" />
+				View
+			</Button>
+		{/snippet}
+	</PopoverTrigger>
+	<PopoverContent {align} class="w-44 p-0">
+		<Command>
+			<CommandInput placeholder="Search columns..." />
+			<CommandList>
+				<CommandEmpty>No columns found.</CommandEmpty>
+				<CommandGroup>
+					{#each columns as column (column.id)}
+						{@const isVisible = isColumnVisible(column.id)}
+						<CommandItem value={column.id} onSelect={() => column.toggleVisibility(!isVisible)}>
+							<span class="truncate">
+								{column.id}
+							</span>
+							<Check class={cn("ml-auto size-4 shrink-0", isVisible ? "opacity-100" : "opacity-0")} />
+						</CommandItem>
+					{/each}
+				</CommandGroup>
+			</CommandList>
+		</Command>
+	</PopoverContent>
+</Popover>

package/dist/components/custom/data-grid/DataGridView.svelte.d.ts

@@ -0,0 +1,29 @@
+import type { Table } from "@tanstack/table-core";
+declare function $$render<TData>(): {
+    props: {
+        table: Table<TData>;
+        align?: "start" | "center" | "end";
+        class?: string;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<TData> {
+    props(): ReturnType<typeof $$render<TData>>['props'];
+    events(): ReturnType<typeof $$render<TData>>['events'];
+    slots(): ReturnType<typeof $$render<TData>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <TData>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TData>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TData>['props']>, ReturnType<__sveltets_Render<TData>['events']>, ReturnType<__sveltets_Render<TData>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<TData>['bindings']>;
+    } & ReturnType<__sveltets_Render<TData>['exports']>;
+    <TData>(internal: unknown, props: ReturnType<__sveltets_Render<TData>['props']> & {}): ReturnType<__sveltets_Render<TData>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const DataGridView: $$IsomorphicComponent;
+type DataGridView<TData> = InstanceType<typeof DataGridView<TData>>;
+export default DataGridView;

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

@@ -0,0 +1,89 @@
+<script lang="ts" generics="T">
+	import type { Table } from "@tanstack/table-core";
+	import ChevronLeft from "@lucide/svelte/icons/chevron-left";
+	import ChevronRight from "@lucide/svelte/icons/chevron-right";
+	import DoubleArrowLeft from "@lucide/svelte/icons/arrow-left";
+	import DoubleArrowRight from "@lucide/svelte/icons/arrow-right";
+	import { Select, Button } from "../../..";
+	import type { DataGridProps } from "./types";
+
+	interface Props<T> {
+		table: Table<T>;
+		dataGridProps?: DataGridProps;
+		canChangePageSize?: boolean;
+	}
+
+	let { table, dataGridProps, canChangePageSize = false }: Props<T> = $props();
+
+	// svelte-ignore state_referenced_locally
+	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 dataGridProps?.enableRowSelectionUI}
+			{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">
+		<div class="flex items-center space-x-2">
+			{#if canChangePageSize}
+				<p class="text-sm font-medium">Page size</p>
+				<Select.Root
+					type="single"
+					bind:value
+					onValueChange={(value) => {
+						table.setPageSize(Number(value));
+					}}
+				>
+					<Select.Trigger class="h-8 w-20">Rows</Select.Trigger>
+					<Select.Content side="top">
+						{#each [10, 20, 30, 40, 50] as pageSize (pageSize)}
+							<Select.Item value={pageSize.toString()}>
+								{pageSize}
+							</Select.Item>
+						{/each}
+					</Select.Content>
+				</Select.Root>
+			{/if}
+		</div>
+		<div class="flex w-25 items-center justify-center text-sm font-medium">
+			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={() => table.setPageIndex(0)}
+				disabled={!table.getCanPreviousPage()}
+			>
+				<span class="sr-only">Go to first page</span>
+				<DoubleArrowLeft class="size-4" />
+			</Button>
+			<Button
+				variant="outline"
+				class="size-8 p-0"
+				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={() => 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={() => table.setPageIndex(table.getPageCount() - 1)}
+				disabled={!table.getCanNextPage()}
+			>
+				<span class="sr-only">Go to last page</span>
+				<DoubleArrowRight class="size-4" />
+			</Button>
+		</div>
+	</div>
+</div>

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

@@ -0,0 +1,31 @@
+import type { Table } from "@tanstack/table-core";
+import type { DataGridProps } from "./types";
+interface Props<T> {
+    table: Table<T>;
+    dataGridProps?: DataGridProps;
+    canChangePageSize?: boolean;
+}
+declare function $$render<T>(): {
+    props: Props<T>;
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const Pagination: $$IsomorphicComponent;
+type Pagination<T> = InstanceType<typeof Pagination<T>>;
+export default Pagination;

package/dist/components/custom/data-grid/createGrid.svelte.d.ts

@@ -0,0 +1,3 @@
+import { type RowData } from "@tanstack/table-core";
+import type { DataGridOptions, DataGridResponse } from "./types";
+export declare function createGrid<TData extends RowData>(options: DataGridOptions<TData>): DataGridResponse<TData>;

package/dist/components/custom/data-grid/createGrid.svelte.js

@@ -0,0 +1,292 @@
+import { createSubscriber } from "svelte/reactivity";
+import { createTable, getCoreRowModel, getSortedRowModel, getFilteredRowModel, getPaginationRowModel, } from "@tanstack/table-core";
+import { defaultDataGridProps } from "./types";
+import { renderComponent } from "../../../data-table";
+import DataGridCheckbox from "./DataGridCheckbox.svelte";
+export function createGrid(options) {
+    // Merge provided dataGridProps with defaults. If none provided, use defaults.
+    options.dataGridProps = { ...defaultDataGridProps, ...(options.dataGridProps ?? {}) };
+    const { columns, data: dataProp, initialState, dataGridProps } = options;
+    // Support both direct data array and getter function for reactivity
+    // Using a getter function () => data allows Svelte 5 to track changes
+    const getData = typeof dataProp === "function" ? dataProp : () => dataProp;
+    // ========================================
+    // Reactive State using Svelte 5 runes
+    // ========================================
+    // Table state - use initialState if provided
+    let sorting = $state(initialState?.sorting ?? []);
+    let globalFilter = $state(initialState?.globalFilter);
+    let pagination = $state(initialState?.pagination ?? { pageIndex: 0, pageSize: 10 });
+    let columnFilters = $state(initialState?.columnFilters ?? []);
+    let rowSelection = $state(initialState?.rowSelection ?? {});
+    let columnPinning = $state(initialState?.columnPinning ?? {});
+    let columnVisibility = $state(initialState?.columnVisibility ?? {});
+    let columnSizing = $state(initialState?.columnSizing ?? {});
+    let columnSizingInfo = $state({
+        startOffset: null,
+        startSize: null,
+        deltaOffset: null,
+        deltaPercentage: null,
+        isResizingColumn: false,
+        columnSizingStart: [],
+    });
+    // ========================================
+    // Create TanStack Table
+    // ========================================
+    // Initialize column sizing state from column definitions (only if not provided in initialState)
+    $effect.pre(() => {
+        if (Object.keys(columnSizing).length === 0) {
+            const sizing = {};
+            for (const col of columns) {
+                if (col.size) {
+                    sizing[col.id] = col.size;
+                }
+            }
+            if (Object.keys(sizing).length > 0) {
+                columnSizing = sizing;
+            }
+        }
+    });
+    // Row Selection
+    if (dataGridProps.enableRowSelectionUI) {
+        const rowSelectionColumn = {
+            id: "select",
+            header: () => {
+                subscribeToTable();
+                return renderComponent(DataGridCheckbox, {
+                    checked: table.getIsAllPageRowsSelected(),
+                    indeterminate: table.getIsSomePageRowsSelected(),
+                    onCheckedChange: () => table.toggleAllPageRowsSelected(),
+                });
+            },
+            cell: (r) => {
+                subscribeToTable();
+                return renderComponent(DataGridCheckbox, {
+                    checked: r.row.getIsSelected(),
+                    onCheckedChange: () => r.row.toggleSelected(),
+                });
+            },
+            enableResizing: false,
+            enableSorting: false,
+            size: 0,
+        };
+        options.columns.unshift(rowSelectionColumn);
+    }
+    // Create the base table options
+    const baseTableOptions = {
+        data: getData(),
+        columns,
+        state: {
+            sorting,
+            pagination,
+            columnFilters,
+            rowSelection,
+            columnPinning,
+            columnVisibility,
+            columnSizing,
+            columnSizingInfo,
+            globalFilter,
+        },
+        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) => {
+            columnVisibility = typeof updater === "function" ? updater(columnVisibility) : updater;
+            // No version counter needed - visibilityKey is derived from columnVisibility
+            // and will automatically update when visibility changes
+        },
+        onSortingChange: (updater) => {
+            sorting = typeof updater === "function" ? updater(sorting) : updater;
+        },
+        onPaginationChange: (updater) => {
+            pagination = typeof updater === "function" ? updater(pagination) : updater;
+        },
+        onColumnFiltersChange: (updater) => {
+            columnFilters = typeof updater === "function" ? updater(columnFilters) : updater;
+        },
+        onRowSelectionChange: (updater) => {
+            rowSelection = typeof updater === "function" ? updater(rowSelection) : updater;
+        },
+        onGlobalFilterChange: (updater) => {
+            globalFilter = typeof updater === "function" ? updater(globalFilter) : updater;
+        },
+        getCoreRowModel: getCoreRowModel(),
+        getPaginationRowModel: getPaginationRowModel(),
+        getSortedRowModel: getSortedRowModel(),
+        getFilteredRowModel: getFilteredRowModel(),
+        globalFilterFn: "auto",
+        manualFiltering: dataGridProps.manualFiltering,
+        manualPagination: (dataGridProps?.isPaginationEnabled ?? true) == false ? true : dataGridProps?.manualPagination,
+        manualSorting: dataGridProps.manualSorting,
+        columnResizeMode: "onChange",
+        enableColumnResizing: true,
+        defaultColumn: {
+            minSize: 0,
+            maxSize: 1000,
+            size: 150,
+        },
+        enableRowSelection: true,
+        enableColumnFilters: true,
+        enableFilters: true,
+        enableGlobalFilter: true,
+        renderFallbackValue: null,
+        onStateChange: () => { },
+        mergeOptions: (defaultOptions, newOptions) => {
+            return { ...defaultOptions, ...newOptions };
+        },
+    };
+    const table = createTable(baseTableOptions);
+    // Create a subscriber to notify effects when table data changes
+    // This is the key to making TanStack Table reactive in Svelte 5
+    // When data comes from async sources (like database queries), the table needs
+    // to notify consuming components that data has changed so they can re-render
+    let notifyTableUpdate;
+    const subscribeToTable = createSubscriber((update) => {
+        notifyTableUpdate = update;
+        return () => { };
+    });
+    // This is the key to reactivity: update table options in $effect.pre
+    // whenever any of the state values change
+    $effect.pre(() => {
+        // Read all reactive state to create dependencies
+        const currentState = {
+            sorting,
+            pagination,
+            columnFilters,
+            rowSelection,
+            columnPinning,
+            columnVisibility,
+            columnSizing,
+            columnSizingInfo,
+            globalFilter,
+        };
+        const currentData = getData();
+        // Update table with current state
+        table.setOptions((prev) => ({
+            ...prev,
+            data: currentData,
+            state: {
+                ...prev.state,
+                ...currentState,
+            },
+        }));
+        // Notify any subscribers that table data has changed
+        // This triggers re-runs of effects/derived that called subscribeToTable()
+        notifyTableUpdate?.();
+    });
+    // ========================================
+    // Return
+    // ========================================
+    // Create a reactive table wrapper that exposes state-dependent getters
+    // This is key to making the table reactive in Svelte 5
+    // We use subscribeToTable() to register effects as subscribers, so they
+    // re-run when notifyTableUpdate() is called after data changes
+    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();
+        },
+        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();
+        },
+        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 {
+        table: reactiveTable,
+        dataGridProps: dataGridProps,
+    };
+}

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

@@ -0,0 +1,5 @@
+export { default as DataGrid } from "./DataGrid.svelte";
+export { createGrid } from "./createGrid.svelte";
+export { aggregationFns } from "../data-table/data-table-utils";
+export { decodeColumnFilters, decodeGlobalFilter, decodePageIndex, decodeSorting, decodeTableState, encodeColumnFilters, encodeGlobalFilter, encodePageIndex, encodeSorting, encodeTableState, } from "../data-table/table-search-params";
+export type { CustomColumnMeta, CustomOptions } from "./types";

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

@@ -0,0 +1,4 @@
+export { default as DataGrid } from "./DataGrid.svelte";
+export { createGrid } from "./createGrid.svelte";
+export { aggregationFns } from "../data-table/data-table-utils";
+export { decodeColumnFilters, decodeGlobalFilter, decodePageIndex, decodeSorting, decodeTableState, encodeColumnFilters, encodeGlobalFilter, encodePageIndex, encodeSorting, encodeTableState, } from "../data-table/table-search-params";

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

@@ -0,0 +1,43 @@
+import type { ColumnDef, ColumnFiltersState, ColumnPinningState, ColumnSizingState, GlobalFilterTableState, PaginationState, RowData, RowSelectionState, SortingState, Table, VisibilityState } from "@tanstack/table-core";
+import z from "zod";
+export interface DataGridOptions<TData extends RowData> {
+    columns: ColumnDef<TData, unknown>[];
+    data: TData[] | (() => TData[]);
+    initialState?: {
+        sorting?: SortingState;
+        pagination?: PaginationState;
+        columnFilters?: ColumnFiltersState;
+        columnVisibility?: VisibilityState;
+        columnPinning?: ColumnPinningState;
+        columnSizing?: ColumnSizingState;
+        rowSelection?: RowSelectionState;
+        globalFilter?: GlobalFilterTableState;
+    };
+    dataGridProps?: DataGridProps;
+}
+export interface DataGridProps {
+    isPaginationEnabled?: boolean;
+    manualPagination?: boolean;
+    enableRowSelectionUI?: boolean;
+    manualFiltering?: boolean;
+    manualSorting?: boolean;
+    useURLSearchParams?: boolean;
+}
+export declare const defaultDataGridProps: DataGridProps;
+export interface DataGridResponse<TData extends RowData> {
+    table: Table<TData>;
+    dataGridProps?: DataGridProps;
+}
+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>;
+export interface CustomOptions {
+    useURLSearchParams?: boolean;
+}
+export interface CustomColumnMeta {
+    className?: string;
+}

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

@@ -0,0 +1,15 @@
+import z from "zod";
+export const defaultDataGridProps = {
+    isPaginationEnabled: true,
+    manualPagination: false,
+    enableRowSelectionUI: false,
+    manualFiltering: false,
+    manualSorting: false,
+    useURLSearchParams: false,
+};
+export const defaultSearchParamSchema = z.object({
+    search: z.any().default(""),
+    page: z.coerce.number().default(0),
+    filter: z.string().default(""),
+    sort: z.string().default(""),
+});

package/dist/components/ui/separator/separator.svelte

@@ -14,7 +14,7 @@
 	bind:ref
 	data-slot={dataSlot}
 	class={cn(
-		"bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
+		"bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:min-h-full data-[orientation=vertical]:w-px",
 		className
 	)}
 	{...restProps}

package/dist/data-grid/index.d.ts

@@ -0,0 +1,2 @@
+export { FlexRender, renderComponent, renderSnippet } from "../components/ui/data-table/index.js";
+export * from "../components/custom/data-grid/index.js";

package/dist/data-grid/index.js

@@ -0,0 +1,2 @@
+export { FlexRender, renderComponent, renderSnippet } from "../components/ui/data-table/index.js";
+export * from "../components/custom/data-grid/index.js";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@kayord/ui",
   "private": false,
-  "version": "2.0.13",
+  "version": "2.1.1",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -23,6 +23,10 @@
       "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"
@@ -110,9 +114,9 @@
     "@eslint/compat": "^2.0.1",
     "@eslint/js": "^9.39.2",
     "@internationalized/date": "^3.10.1",
-    "@lucide/svelte": "^0.561.0",
+    "@lucide/svelte": "^0.562.0",
     "@sveltejs/adapter-auto": "^7.0.0",
-    "@sveltejs/kit": "^2.49.4",
+    "@sveltejs/kit": "^2.50.0",
     "@sveltejs/package": "^2.5.7",
     "@sveltejs/vite-plugin-svelte": "^6.2.4",
     "@tailwindcss/vite": "^4.1.18",
@@ -131,11 +135,12 @@
     "layerchart": "2.0.0-next.40",
     "mode-watcher": "^1.1.0",
     "paneforge": "^1.0.2",
-    "prettier": "^3.7.4",
+    "prettier": "^3.8.0",
     "prettier-plugin-svelte": "^3.4.1",
     "prettier-plugin-tailwindcss": "^0.7.2",
     "publint": "^0.3.16",
-    "svelte": "5.46.3",
+    "runed": "^0.37.1",
+    "svelte": "5.47.1",
     "svelte-check": "^4.3.5",
     "svelte-sonner": "^1.0.7",
     "sveltekit-superforms": "^2.29.1",
@@ -143,7 +148,7 @@
     "tslib": "^2.8.1",
     "tw-animate-css": "1.4.0",
     "typescript": "^5.9.3",
-    "typescript-eslint": "^8.53.0",
+    "typescript-eslint": "^8.53.1",
     "vaul-svelte": "1.0.0-next.7",
     "vite": "^7.3.1",
     "vitest": "^4.0.17",