@kayord/ui 3.0.11 → 4.0.0

package/README.md

@@ -10,7 +10,7 @@ Pnpm command to install ui library.
 # create a new project in the current directory
 pnpm add -D @kayord/ui
 # install minimal dependencies
-pnpm add -D @lucide/svelte tw-animate-css
+pnpm add -D @lucide/svelte tw-animate-css shadcn-svelte
 # install other dependencies as required
 pnpm add -D zod sveltekit-superforms
 # include charts
@@ -24,6 +24,7 @@ Kayord UI exports components individually. Some components require additional pe
 ### Core Peer Dependencies (required for most components)
 
 - `svelte`
+- `@sveltejs/kit`
 - `@lucide/svelte`
 - `mode-watcher`
 
@@ -33,23 +34,23 @@ Kayord UI exports components individually. Some components require additional pe
 | ------------------------------- | -------------------------------------------------------------------------- |
 | **Charts** (`chart/`)           | `layerchart`, `d3-scale`, `d3-shape`, `@types/d3-scale`, `@types/d3-shape` |
 | **Carousel** (`carousel/`)      | `embla-carousel-svelte`                                                    |
-| **Data Table** (`data-table/`)  | `@tanstack/table-core`                                                     |
+| **Data Table** (`data-table/`)  | `@tanstack/svelte-table`, `runed`, `zod`                                   |
 | **Drawer** (`drawer/`)          | `vaul-svelte`                                                              |
 | **Form** (`form/`)              | `formsnap`, `sveltekit-superforms`                                         |
 | **Date/Calendar** (`calendar/`) | `@internationalized/date`                                                  |
 | **Resizable** (`resizable/`)    | `paneforge`                                                                |
 | **Notifications** (`sonner/`)   | `svelte-sonner`                                                            |
 
-> **Note:** All above dependencies are listed as optional peer dependencies. Only install those required for the components you use.
+> **Note:** Optional peers are marked optional in `package.json`. The core peers (`svelte`, `@sveltejs/kit`, `@lucide/svelte`, and `mode-watcher`) are required. Install the others only if you use the corresponding feature.
 
 ### Example Installation
 
 ```bash
 # Core dependencies
-pnpm add -D svelte @lucide/svelte tailwindcss-animate mode-watcher
+pnpm add -D svelte @sveltejs/kit @lucide/svelte tw-animate-css mode-watcher shadcn-svelte
 
 # Most likely dependencies
-pnpm add -D svelte @lucide/svelte tailwindcss-animate mode-watcher formsnap zod sveltekit-superforms @internationalized/date svelte-sonner
+pnpm add -D svelte @sveltejs/kit @lucide/svelte tw-animate-css mode-watcher formsnap zod sveltekit-superforms @internationalized/date svelte-sonner
 
 # For charts
 pnpm add -D layerchart d3-scale d3-shape @types/d3-scale @types/d3-shape
@@ -58,7 +59,7 @@ pnpm add -D layerchart d3-scale d3-shape @types/d3-scale @types/d3-shape
 pnpm add -D embla-carousel-svelte
 
 # For data table
-pnpm add -D @tanstack/table-core
+pnpm add -D @tanstack/svelte-table runed zod
 
 # For drawer @next for now
 pnpm add -D vaul-svelte@next
@@ -76,12 +77,13 @@ pnpm add -D paneforge
 pnpm add -D svelte-sonner
 ```
 
-### Add app.css and also include tailwindcss-animate
+### Add app.css and also include tw-animate-css
 
 ```css
 @import "tailwindcss";
 @source "../node_modules/@kayord/ui";
 @import "tw-animate-css";
+@import "shadcn-svelte/tailwind.css";
 
 @custom-variant dark (&:where(.dark, .dark *));
 
@@ -93,6 +95,46 @@ pnpm add -D svelte-sonner
  }
 }
 
+@theme inline {
+	--color-background: var(--background);
+	--color-foreground: var(--foreground);
+	--font-sans: "Inter Variable", sans-serif;
+	--font-mono: var(--font-geist-mono);
+	--color-sidebar-ring: var(--sidebar-ring);
+	--color-sidebar-border: var(--sidebar-border);
+	--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+	--color-sidebar-accent: var(--sidebar-accent);
+	--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+	--color-sidebar-primary: var(--sidebar-primary);
+	--color-sidebar-foreground: var(--sidebar-foreground);
+	--color-sidebar: var(--sidebar);
+	--color-chart-5: var(--chart-5);
+	--color-chart-4: var(--chart-4);
+	--color-chart-3: var(--chart-3);
+	--color-chart-2: var(--chart-2);
+	--color-chart-1: var(--chart-1);
+	--color-ring: var(--ring);
+	--color-input: var(--input);
+	--color-border: var(--border);
+	--color-destructive: var(--destructive);
+	--color-accent-foreground: var(--accent-foreground);
+	--color-accent: var(--accent);
+	--color-muted-foreground: var(--muted-foreground);
+	--color-muted: var(--muted);
+	--color-secondary-foreground: var(--secondary-foreground);
+	--color-secondary: var(--secondary);
+	--color-primary-foreground: var(--primary-foreground);
+	--color-primary: var(--primary);
+	--color-popover-foreground: var(--popover-foreground);
+	--color-popover: var(--popover);
+	--color-card-foreground: var(--card-foreground);
+	--color-card: var(--card);
+	--radius-sm: calc(var(--radius) - 4px);
+	--radius-md: calc(var(--radius) - 2px);
+	--radius-lg: var(--radius);
+	--radius-xl: calc(var(--radius) + 4px);
+}
+
 :root {
  --accent-foreground: 240 5.9% 10%;
  --accent: 240 4.8% 95.9%;
@@ -153,59 +195,6 @@ pnpm add -D svelte-sonner
  --sidebar-ring: 217.2 91.2% 59.8%;
 }
 
-@theme inline {
- /* Fonts */
- --font-sans:
-  "Inter Variable", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
-  "Noto Color Emoji";
- --font-mono:
-  "Source Code Pro Variable", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
-  monospace;
-
- /* Colors */
- --color-border: hsl(var(--border));
- --color-input: hsl(var(--input));
- --color-ring: hsl(var(--ring));
- --color-background: hsl(var(--background));
- --color-foreground: hsl(var(--foreground));
- --color-primary: hsl(var(--primary));
- --color-primary-foreground: hsl(var(--primary-foreground));
- --color-secondary: hsl(var(--secondary));
- --color-secondary-foreground: hsl(var(--secondary-foreground));
- --color-destructive: hsl(var(--destructive));
- --color-destructive-foreground: hsl(var(--destructive-foreground));
- --color-caution: var(--color-red-500);
- --color-warning: var(--color-amber-500);
- --color-info: var(--color-sky-500);
- --color-muted: hsl(var(--muted));
- --color-muted-foreground: hsl(var(--muted-foreground));
- --color-accent: hsl(var(--accent));
- --color-accent-foreground: hsl(var(--accent-foreground));
- --color-popover: hsl(var(--popover));
- --color-popover-foreground: hsl(var(--popover-foreground));
- --color-card: hsl(var(--card));
- --color-card-foreground: hsl(var(--card-foreground));
- --color-sidebar: hsl(var(--sidebar-background));
- --color-sidebar-foreground: hsl(var(--sidebar-foreground));
- --color-sidebar-primary: hsl(var(--sidebar-primary));
- --color-sidebar-primary-foreground: hsl(var(--sidebar-primary-foreground));
- --color-sidebar-accent: hsl(var(--sidebar-accent));
- --color-sidebar-accent-foreground: hsl(var(--sidebar-accent-foreground));
- --color-sidebar-border: hsl(var(--sidebar-border));
- --color-sidebar-ring: hsl(var(--sidebar-ring));
-
-	/* Custom Colors */
-	--color-info: var(--chart-1);
-	--color-success: var(--chart-2);
-	--color-warning: var(--chart-3);
-
-	/* Radius */
-	--radius-sm: calc(var(--radius) - 4px);
-	--radius-md: calc(var(--radius) - 2px);
-	--radius-lg: var(--radius);
-	--radius-xl: calc(var(--radius) + 4px);
-}
-
 @layer base {
  * {
   @apply border-border;
@@ -214,108 +203,33 @@ pnpm add -D svelte-sonner
   @apply bg-background text-foreground;
  }
 }
+```
 
-@custom-variant data-open {
-	&:where([data-state="open"]),
-	&:where([data-open]:not([data-open="false"])) {
-		@slot;
-	}
-	&:where([data-state="open"]),
-	&:where([data-open]:not([data-open="false"])) {
-		@slot;
-	}
-}
-
-@custom-variant data-closed {
-	&:where([data-state="closed"]),
-	&:where([data-closed]:not([data-closed="false"])) {
-		@slot;
-	}
-	&:where([data-state="closed"]),
-	&:where([data-closed]:not([data-closed="false"])) {
-		@slot;
-	}
-}
-
-@custom-variant data-checked {
-	&:where([data-state="checked"]),
-	&:where([data-checked]:not([data-checked="false"])) {
-		@slot;
-	}
-	&:where([data-state="checked"]),
-	&:where([data-checked]:not([data-checked="false"])) {
-		@slot;
-	}
-}
-
-@custom-variant data-unchecked {
-	&:where([data-state="unchecked"]),
-	&:where([data-unchecked]:not([data-unchecked="false"])) {
-		@slot;
-	}
-	&:where([data-state="unchecked"]),
-	&:where([data-unchecked]:not([data-unchecked="false"])) {
-		@slot;
-	}
-}
-
-@custom-variant data-selected {
-	&:where([data-selected]) {
-		@slot;
-	}
-}
+## Data Table Types
 
-@custom-variant data-disabled {
-	&:where([data-disabled="true"]),
-	&:where([data-disabled]:not([data-disabled="false"])) {
-		@slot;
-	}
-	&:where([data-disabled="true"]),
-	&:where([data-disabled]:not([data-disabled="false"])) {
-		@slot;
-	}
-}
+v9 types column/table metadata through the library's feature set, so **no
+`app.d.ts` module augmentation is needed**. Type your columns and tables with
+the exported `DataTableFeatures`:
 
-@custom-variant data-active {
-	&:where([data-state="active"]),
-	&:where([data-active]:not([data-active="false"])) {
-		@slot;
-	}
-	&:where([data-state="active"]),
-	&:where([data-active]:not([data-active="false"])) {
-		@slot;
-	}
-}
+```ts
+import {
+	createShadTable,
+	type ColumnDef,
+	type DataTableFeatures,
+} from "@kayord/ui/data-table";
 
-@custom-variant data-horizontal {
-	&:where([data-orientation="horizontal"]) {
-		@slot;
-	}
+interface Row {
+	id: number;
+	name: string;
 }
 
-@custom-variant data-vertical {
-	&:where([data-orientation="vertical"]) {
-		@slot;
-	}
-}
+const columns: ColumnDef<DataTableFeatures, Row>[] = [
+	{ accessorKey: "id", header: "ID" },
+	{ accessorKey: "name", header: "Name" },
+];
 
-@utility no-scrollbar {
-	-ms-overflow-style: none;
-	scrollbar-width: none;
-	&::-webkit-scrollbar {
-		display: none;
-	}
-}
+const table = createShadTable({ columns, data });
 ```
 
-## Data Table Types
-
-```ts
-// Add to app.d.ts
-import { CustomOptions, CustomColumnMeta } from "@kayord/ui/data-table";
-
-declare module "@tanstack/table-core" {
- interface ColumnMeta<TData extends RowData, TValue> extends CustomColumnMeta {}
- interface TableOptionsResolved<TData extends RowData> extends CustomOptions {}
-}
-```
+Per-column `meta.className` and the table flags (`useURLSearchParams`,
+`enablePaging`) are typed automatically through the feature set.

package/dist/components/custom/action/Actions.svelte

@@ -23,7 +23,7 @@
 		{text}
 	</DropdownMenu.Trigger>
 	<DropdownMenu.Content>
-		{#each actions as action}
+		{#each actions as action, i (i)}
 			{#if isActionType(action)}
 				<Action {...action} />
 			{:else if isActionGroup(action)}

package/dist/components/custom/animations/NumberTicker.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
 	import { cubicOut } from "svelte/easing";
-	import { onMount } from "svelte";
 	import { Tween } from "svelte/motion";
 	import { cn } from "../../../utils";
 
@@ -19,8 +18,8 @@
 		easing: cubicOut,
 	});
 
-	onMount(() => {
-		num.set(value);
+	$effect(() => {
+		num.set(value, { duration, easing: cubicOut });
 	});
 </script>
 

package/dist/components/custom/copy-button/CopyButton.svelte

@@ -35,7 +35,6 @@
 	class={cn(className)}
 	type="button"
 	name="copy"
-	tabindex={-1}
 	onclick={async () => {
 		const status = await clipboard.copy(text);
 

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

@@ -1,9 +1,10 @@
-<script lang="ts" generics="T">
-	import { type Table as TableType } from "@tanstack/table-core";
+<script lang="ts" generics="T extends RowData">
+	import type { RowData, Table as TableType } from "@tanstack/svelte-table";
+	import type { DataTableFeatures } from "./features";
 	import { FlexRender } from "../../ui/data-table";
 	import { Skeleton, Table } from "../../ui";
 	import Pagination from "./Pagination.svelte";
-	import { onMount, untrack, type Snippet } from "svelte";
+	import { type Snippet } from "svelte";
 	import { fade } from "svelte/transition";
 	import { ProgressLoading } from "../progress-loading";
 	import FullscreenModeToggle from "./FullscreenModeToggle.svelte";
@@ -11,27 +12,27 @@
 	import { TableStore } from "./table.svelte";
 	import DataTableHeader from "./DataTableHeader.svelte";
 	import DataTableFooter from "./DataTableFooter.svelte";
-	import { beforeNavigate } from "$app/navigation";
-	import { decodeColumnFilters, decodeSorting, encodeColumnFilters, encodeSorting } from "./table-search-params";
-	import { useSearchParams } from "runed/kit";
-	import { defaultSearchParamSchema } from "./types";
 	import DataTableView from "./DataTableView.svelte";
 
-	interface Props<T> {
-		table: TableType<T>;
+	interface Props<T extends RowData> {
+		table: TableType<DataTableFeatures, T>;
 		isLoading?: boolean;
 		header?: Snippet;
 		subHeader?: Snippet;
 		footer?: Snippet;
 		leftToolbar?: Snippet;
 		rightToolbar?: Snippet;
+		/** Rich empty state; falls back to `noDataMessage` when not provided. */
+		emptyState?: Snippet;
 		noDataMessage?: string;
 		hideHeader?: boolean;
 		enableVisibility?: boolean;
 		enableFullscreen?: boolean;
+		/** Show the pagination bar (default `true`). */
+		pagination?: boolean;
+		disableUISorting?: boolean;
 		class?: string;
 		headerClass?: string;
-		disableUISorting?: boolean;
 	}
 
 	let {
@@ -42,70 +43,32 @@
 		footer,
 		leftToolbar,
 		rightToolbar,
+		emptyState,
 		noDataMessage = "No data",
 		hideHeader = false,
 		enableVisibility = false,
 		enableFullscreen = false,
+		pagination = true,
+		disableUISorting = false,
 		class: className,
 		headerClass,
-		disableUISorting = false,
 	}: Props<T> = $props();
 
 	const tableStore = new TableStore();
-	// svelte-ignore state_referenced_locally
-	const isPaginationEnabled = table.options.getPaginationRowModel !== undefined;
-
-	const params = useSearchParams(defaultSearchParamSchema, { pushHistory: false });
-	// Load current url search params
-	onMount(() => {
-		if (table.options.useURLSearchParams) {
-			table.setGlobalFilter(params.search);
-			table.setSorting(decodeSorting() ?? []);
-			table.setPageIndex(params.page);
-			table.setColumnFilters(decodeColumnFilters() ?? []);
-		}
-	});
-
-	// Reset pageIndex
-	beforeNavigate((navigation) => {
-		if (table.options.useURLSearchParams) {
-			if (Number(navigation.to?.url.searchParams.get("page") ?? "0") > 0) {
-				if (
-					navigation.from?.url.searchParams.get("sort") != navigation.to?.url.searchParams.get("sort") ||
-					navigation.from?.url.searchParams.get("search") != navigation.to?.url.searchParams.get("search") ||
-					navigation.from?.url.searchParams.get("filter") != navigation.to?.url.searchParams.get("filter")
-				) {
-					table.resetPageIndex();
-				}
-			}
-		}
-	});
-
-	// Set url search params
-	$effect(() => {
-		if (table.options.useURLSearchParams) {
-			const search = table.getState().globalFilter;
-			const page = table.getState().pagination.pageIndex;
-			const sort = encodeSorting(table.getState());
-			const filter = encodeColumnFilters(table.getState());
-			untrack(() => {
-				params.search = search;
-				params.page = page;
-				params.sort = sort;
-				params.filter = filter;
-			});
-		}
-	});
-
 	let end: HTMLElement | undefined = $state();
+
+	function cellSizeStyle(width: number, min?: number, max?: number) {
+		const styles = [`width: ${width}px`];
+		if (min !== undefined) styles.push(`min-width: ${min}px`);
+		if (max !== undefined) styles.push(`max-width: ${max}px`);
+		return styles.join("; ");
+	}
 </script>
 
 <div
 	class={cn(
 		"w-full",
-		tableStore.isFullscreen
-			? "bg-background b-0 absolute inset-0 top-0 left-0 z-20 overflow-auto  p-2 transition-all"
-			: "w-full",
+		tableStore.isFullscreen ? "bg-background absolute inset-0 z-20 overflow-auto p-2 transition-all" : "w-full",
 		className
 	)}
 >
@@ -139,10 +102,10 @@
 		{/if}
 	</div>
 
-	<div class="overflow-hidden rounded-md border">
+	<div class="relative overflow-hidden rounded-md border">
 		{#if isLoading}
-			<span in:fade={{ duration: 300 }}>
-				<ProgressLoading class="h-1" />
+			<span class="absolute inset-x-0 top-0 z-10" in:fade={{ duration: 300 }}>
+				<ProgressLoading class="h-1 rounded-none" />
 			</span>
 		{/if}
 
@@ -156,7 +119,7 @@
 					{#each table.getHeaderGroups() as headerGroup (headerGroup)}
 						<Table.Row>
 							{#each headerGroup.headers as header (header)}
-								<DataTableHeader {header} {table} {disableUISorting} />
+								<DataTableHeader {header} {disableUISorting} />
 							{/each}
 						</Table.Row>
 					{/each}
@@ -178,7 +141,13 @@
 					{#if table.getRowModel().rows.length == 0}
 						<Table.Row>
 							<Table.Cell colspan={table.getAllColumns().length}>
-								<div class="text-center">{noDataMessage}</div>
+								<div class="text-center">
+									{#if emptyState}
+										{@render emptyState()}
+									{:else}
+										{noDataMessage}
+									{/if}
+								</div>
 							</Table.Cell>
 						</Table.Row>
 					{/if}
@@ -187,9 +156,13 @@
 							{#each row.getVisibleCells() as cell (cell)}
 								<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`}
+									style={cellSizeStyle(
+										cell.column.getSize(),
+										cell.column.columnDef.minSize,
+										cell.column.columnDef.maxSize
+									)}
 								>
-									<FlexRender content={cell.column.columnDef.cell} context={cell.getContext()} />
+									<FlexRender {cell} />
 								</Table.Cell>
 							{/each}
 						</Table.Row>
@@ -199,12 +172,12 @@
 			<DataTableFooter {table} />
 		</Table.Root>
 		{#if isLoading}
-			<span in:fade={{ duration: 300 }}>
-				<ProgressLoading class="h-1" />
+			<span class="absolute inset-x-0 bottom-0 z-10" in:fade={{ duration: 300 }}>
+				<ProgressLoading class="h-1 rounded-none" />
 			</span>
 		{/if}
 	</div>
-	{#if isPaginationEnabled}
+	{#if pagination}
 		<Pagination {table} />
 	{/if}
 

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

@@ -1,29 +1,34 @@
-import { type Table as TableType } from "@tanstack/table-core";
+import type { RowData, Table as TableType } from "@tanstack/svelte-table";
+import type { DataTableFeatures } from "./features";
 import { type Snippet } from "svelte";
-interface Props<T> {
-    table: TableType<T>;
+interface Props<T extends RowData> {
+    table: TableType<DataTableFeatures, T>;
     isLoading?: boolean;
     header?: Snippet;
     subHeader?: Snippet;
     footer?: Snippet;
     leftToolbar?: Snippet;
     rightToolbar?: Snippet;
+    /** Rich empty state; falls back to `noDataMessage` when not provided. */
+    emptyState?: Snippet;
     noDataMessage?: string;
     hideHeader?: boolean;
     enableVisibility?: boolean;
     enableFullscreen?: boolean;
+    /** Show the pagination bar (default `true`). */
+    pagination?: boolean;
+    disableUISorting?: boolean;
     class?: string;
     headerClass?: string;
-    disableUISorting?: boolean;
 }
-declare function $$render<T>(): {
+declare function $$render<T extends RowData>(): {
     props: Props<T>;
     exports: {};
     bindings: "";
     slots: {};
     events: {};
 };
-declare class __sveltets_Render<T> {
+declare class __sveltets_Render<T extends RowData> {
     props(): ReturnType<typeof $$render<T>>['props'];
     events(): ReturnType<typeof $$render<T>>['events'];
     slots(): ReturnType<typeof $$render<T>>['slots'];
@@ -31,12 +36,12 @@ declare class __sveltets_Render<T> {
     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']>> & {
+    new <T extends RowData>(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']>;
+    <T extends RowData>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
     z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
 }
 declare const DataTable: $$IsomorphicComponent;
-type DataTable<T> = InstanceType<typeof DataTable<T>>;
+type DataTable<T extends RowData> = InstanceType<typeof DataTable<T>>;
 export default DataTable;

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

@@ -1,10 +1,11 @@
-<script lang="ts" generics="T">
+<script lang="ts" generics="T extends RowData">
 	import { Table } from "../../..";
-	import { FlexRender } from "../../../data-table";
-	import { type Header, type Table as TypeType } from "@tanstack/table-core";
+	import { FlexRender } from "../../ui/data-table";
+	import type { RowData, Table as TanstackTable } from "@tanstack/svelte-table";
+	import type { DataTableFeatures } from "./features";
 
-	interface Props<T> {
-		table: TypeType<T>;
+	interface Props<T extends RowData> {
+		table: TanstackTable<DataTableFeatures, T>;
 	}
 
 	let { table }: Props<T> = $props();
@@ -20,12 +21,12 @@
 
 {#if hasFooterContent}
 	<Table.Footer class="bg-muted/20 border-t-1 font-bold">
-		{#each table.getFooterGroups() as footerGroup}
+		{#each table.getFooterGroups() as footerGroup (footerGroup.id)}
 			<Table.Row>
-				{#each footerGroup.headers as header}
+				{#each footerGroup.headers as header (header.id)}
 					<Table.Cell colspan={header.colSpan}>
 						{#if !header.isPlaceholder}
-							<FlexRender content={header.column.columnDef.footer} context={header.getContext()} />
+							<FlexRender footer={header} />
 						{/if}
 					</Table.Cell>
 				{/each}

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

@@ -1,15 +1,16 @@
-import { type Table as TypeType } from "@tanstack/table-core";
-interface Props<T> {
-    table: TypeType<T>;
+import type { RowData, Table as TanstackTable } from "@tanstack/svelte-table";
+import type { DataTableFeatures } from "./features";
+interface Props<T extends RowData> {
+    table: TanstackTable<DataTableFeatures, T>;
 }
-declare function $$render<T>(): {
+declare function $$render<T extends RowData>(): {
     props: Props<T>;
     exports: {};
     bindings: "";
     slots: {};
     events: {};
 };
-declare class __sveltets_Render<T> {
+declare class __sveltets_Render<T extends RowData> {
     props(): ReturnType<typeof $$render<T>>['props'];
     events(): ReturnType<typeof $$render<T>>['events'];
     slots(): ReturnType<typeof $$render<T>>['slots'];
@@ -17,12 +18,12 @@ declare class __sveltets_Render<T> {
     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']>> & {
+    new <T extends RowData>(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']>;
+    <T extends RowData>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
     z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
 }
 declare const DataTableFooter: $$IsomorphicComponent;
-type DataTableFooter<T> = InstanceType<typeof DataTableFooter<T>>;
+type DataTableFooter<T extends RowData> = InstanceType<typeof DataTableFooter<T>>;
 export default DataTableFooter;