compote-ui 0.55.3 → 0.56.0

package/dist/components/data-table-v8/create-table.svelte.js

@@ -12,11 +12,18 @@ export function createTable(options) {
         ...createColumnVisibility(options.columns),
         ...options.initialState?.columnVisibility
     };
+    // Recompute the resolved column defs only when the source columns change.
+    // $derived keeps the reference stable between changes so TanStack's column
+    // memoization isn't invalidated on every access. Pass `columns` through a
+    // getter (like `data`) to make adding/removing/reordering columns reactive.
+    const columnDefs = $derived(createColumns(options.columns, localeCtx));
     const table = createSvelteTable({
         get data() {
             return options.data;
         },
-        columns: createColumns(options.columns, localeCtx),
+        get columns() {
+            return columnDefs;
+        },
         getCoreRowModel: getCoreRowModel(),
         getSortedRowModel: getSortedRowModel(),
         getFilteredRowModel: getFilteredRowModel(),

package/dist/components/data-table-v9/column-helper.d.ts

@@ -0,0 +1,12 @@
+import type { RowData } from '@tanstack/svelte-table';
+import type { DataTableAccessorFnColumn, DataTableAccessorKeyColumn, DataTableColumn, DataTableGroupColumn } from './types';
+type AccessorKeyColumnOptions<T extends RowData> = Omit<DataTableAccessorKeyColumn<T>, 'accessorKey' | 'accessorFn' | 'columns'>;
+type AccessorFnColumnOptions<T extends RowData> = Omit<DataTableAccessorFnColumn<T>, 'accessorFn' | 'accessorKey' | 'columns'>;
+type GroupColumnOptions<T extends RowData> = Omit<DataTableGroupColumn<T>, 'columns' | 'accessorKey' | 'accessorFn' | 'cell' | 'cellComponent' | 'cellProps' | 'cellSnippet' | 'type' | 'formatOptions' | 'formatLocale'>;
+export declare function createDataTableColumnHelper<T extends RowData>(): {
+    accessor<K extends Extract<keyof T, string>>(accessorKey: K, options: AccessorKeyColumnOptions<T>): DataTableAccessorKeyColumn<T>;
+    accessorFn(accessorFn: (row: T) => unknown, options: AccessorFnColumnOptions<T>): DataTableAccessorFnColumn<T>;
+    group(header: string, columns: DataTableColumn<T>[], options?: Omit<GroupColumnOptions<T>, "header">): DataTableGroupColumn<T>;
+    columns(columns: DataTableColumn<T>[]): DataTableColumn<T>[];
+};
+export {};

package/dist/components/data-table-v9/column-helper.js

@@ -0,0 +1,42 @@
+const TYPE_DEFAULTS = {
+    number: { align: 'right', size: 120 },
+    currency: { align: 'right', size: 120 },
+    percent: { align: 'right', size: 100 },
+    date: { align: 'center', size: 110 },
+    time: { align: 'center', size: 80 },
+    'date-time': { align: 'center', size: 160 },
+    boolean: { align: 'center', size: 90 },
+    url: { align: 'center', size: 60, enableSorting: false }
+};
+function applyTypeDefaults(options) {
+    const defaults = options.type ? TYPE_DEFAULTS[options.type] : undefined;
+    if (!defaults)
+        return options;
+    return { ...defaults, ...options };
+}
+export function createDataTableColumnHelper() {
+    return {
+        accessor(accessorKey, options) {
+            return {
+                ...applyTypeDefaults(options),
+                accessorKey
+            };
+        },
+        accessorFn(accessorFn, options) {
+            return {
+                ...applyTypeDefaults(options),
+                accessorFn
+            };
+        },
+        group(header, columns, options = {}) {
+            return {
+                ...options,
+                header,
+                columns
+            };
+        },
+        columns(columns) {
+            return columns;
+        }
+    };
+}

package/dist/components/data-table-v9/create-table.svelte.d.ts

@@ -0,0 +1,42 @@
+import { type ColumnPinningState, type ColumnResizeMode, type ColumnSizingState, type ColumnVisibilityState, type Row, type RowData, type RowSelectionState } from '@tanstack/svelte-table';
+import { type DataTableFeatures } from './features';
+import { type DataTableInstance } from './data-table-utils';
+import type { DataTableColumn, DataTableLeafColumn } from './types';
+export type { DataTableInstance };
+export type CreateDataTableOptions<T extends RowData> = {
+    data: T[];
+    columns: DataTableColumn<T>[];
+    columnResizeMode?: ColumnResizeMode;
+    initialState?: {
+        columnVisibility?: ColumnVisibilityState;
+        columnSizing?: ColumnSizingState;
+        columnPinning?: ColumnPinningState;
+        rowSelection?: RowSelectionState;
+        sorting?: {
+            id: string;
+            desc: boolean;
+        }[];
+        columnFilters?: {
+            id: string;
+            value: unknown;
+        }[];
+    };
+    getRowId?: (row: T, index: number, parent?: Row<DataTableFeatures, T>) => string;
+    enableRowSelection?: boolean | ((row: Row<DataTableFeatures, T>) => boolean);
+    enableMultiRowSelection?: boolean | ((row: Row<DataTableFeatures, T>) => boolean);
+    enableSorting?: boolean;
+    debugTable?: boolean;
+    onColumnVisibilityChange?: (visibility: ColumnVisibilityState) => void;
+};
+export declare function createTable<T extends RowData>(options: CreateDataTableOptions<T>): import("@tanstack/svelte-table").SvelteTable<{
+    rowSortingFeature: import("@tanstack/svelte-table").TableFeature;
+    rowSelectionFeature: import("@tanstack/svelte-table").TableFeature;
+    columnFilteringFeature: import("@tanstack/svelte-table").TableFeature;
+    columnFacetingFeature: import("@tanstack/svelte-table").TableFeature;
+    globalFilteringFeature: import("@tanstack/svelte-table").TableFeature;
+    columnVisibilityFeature: import("@tanstack/svelte-table").TableFeature;
+    columnPinningFeature: import("@tanstack/svelte-table").TableFeature;
+    columnSizingFeature: import("@tanstack/svelte-table").TableFeature;
+    columnResizingFeature: import("@tanstack/svelte-table").TableFeature;
+}, T, import("@tanstack/svelte-table").TableState_ColumnFiltering & import("@tanstack/svelte-table").TableState_ColumnPinning & import("@tanstack/svelte-table").TableState_ColumnResizing & import("@tanstack/svelte-table").TableState_ColumnSizing & import("@tanstack/svelte-table").TableState_ColumnVisibility & import("@tanstack/svelte-table").TableState_GlobalFiltering & import("@tanstack/svelte-table").TableState_RowSelection & import("@tanstack/svelte-table").TableState_RowSorting>;
+export declare function getColumnId<T extends RowData>(column: DataTableLeafColumn<T>): string;

package/dist/components/data-table-v9/create-table.svelte.js

@@ -0,0 +1,248 @@
+import { createTable as createSvelteTable, createSortedRowModel, createFilteredRowModel, createFacetedRowModel, createFacetedUniqueValues, createFacetedMinMaxValues, sortFns, filterFns } from '@tanstack/svelte-table';
+import { useLocaleContext } from '@ark-ui/svelte/locale';
+import { untrack } from 'svelte';
+import { renderComponent, renderSnippet } from '@tanstack/svelte-table';
+import { dataTableFeatures } from './features';
+import { TYPE_NUMBER_FORMAT_DEFAULTS } from './data-table-utils';
+const oneOfFilterFn = (row, columnId, filterValue) => {
+    return filterValue.includes(String(row.getValue(columnId)));
+};
+oneOfFilterFn.autoRemove = (val) => !Array.isArray(val) || val.length === 0;
+export function createTable(options) {
+    const localeCtx = useLocaleContext();
+    const initialColumnVisibility = {
+        ...createColumnVisibility(options.columns),
+        ...options.initialState?.columnVisibility
+    };
+    // Recompute the resolved column defs only when the source columns change.
+    // $derived keeps the reference stable between changes so TanStack's column
+    // memoization isn't invalidated on every access. Pass `columns` through a
+    // getter (like `data`) to make adding/removing/reordering columns reactive.
+    const columnDefs = $derived(createColumns(options.columns, localeCtx));
+    const table = createSvelteTable({
+        features: dataTableFeatures,
+        rowModels: {
+            sortedRowModel: createSortedRowModel(sortFns),
+            filteredRowModel: createFilteredRowModel(filterFns),
+            facetedRowModel: createFacetedRowModel(),
+            facetedUniqueValues: createFacetedUniqueValues(),
+            facetedMinMaxValues: createFacetedMinMaxValues()
+        },
+        get data() {
+            return options.data;
+        },
+        get columns() {
+            return columnDefs;
+        },
+        columnResizeMode: options.columnResizeMode,
+        getRowId: options.getRowId,
+        enableRowSelection: options.enableRowSelection ?? false,
+        enableMultiRowSelection: options.enableMultiRowSelection,
+        enableSorting: options.enableSorting,
+        debugTable: options.debugTable,
+        initialState: {
+            columnVisibility: initialColumnVisibility,
+            columnSizing: {
+                ...createColumnSizing(options.columns),
+                ...options.initialState?.columnSizing
+            },
+            columnPinning: options.initialState?.columnPinning ?? createColumnPinning(options.columns),
+            rowSelection: options.initialState?.rowSelection ?? {},
+            sorting: options.initialState?.sorting ?? [],
+            columnFilters: options.initialState?.columnFilters ?? []
+        }
+    });
+    // The svelte adapter's internal $effect.pre only tracks `data` and `state` — not
+    // `columns` — so reactive add/remove/reorder of columns never reaches the table.
+    // Track the derived column defs here and push them through setOptions ourselves.
+    // Re-supply the `data` getter so spreading `prev` doesn't freeze data reactivity.
+    // CAUTION: upstream guidance says a second setOptions sync can race the adapter's
+    // own $effect.pre (which getter-merges the original options on data/state change).
+    // Both syncs write consistent values here, but revisit if the beta adapter ever
+    // starts tracking `columns` itself.
+    $effect.pre(() => {
+        const columns = columnDefs;
+        untrack(() => {
+            table.setOptions((prev) => ({
+                ...prev,
+                get data() {
+                    return options.data;
+                },
+                columns
+            }));
+        });
+    });
+    // Notify consumers of visibility changes without taking control of the slice.
+    // v9 setters are atom-aware, so we observe the reactive state instead of
+    // overriding `onColumnVisibilityChange` (which would suppress internal updates).
+    if (options.onColumnVisibilityChange) {
+        let first = true;
+        $effect(() => {
+            const visibility = table.atoms.columnVisibility.get();
+            if (first) {
+                first = false;
+                return;
+            }
+            options.onColumnVisibilityChange?.(visibility);
+        });
+    }
+    return table;
+}
+function createColumnVisibility(columns) {
+    return getLeafColumns(columns).reduce((visibility, column) => {
+        visibility[getColumnId(column)] = true;
+        return visibility;
+    }, {});
+}
+function createColumnSizing(columns) {
+    return getLeafColumns(columns).reduce((sizes, column) => {
+        if (typeof column.size === 'number') {
+            sizes[getColumnId(column)] = column.size;
+        }
+        return sizes;
+    }, {});
+}
+function createColumnPinning(columns) {
+    const leafCols = getLeafColumns(columns);
+    return {
+        left: leafCols.filter((c) => c.pinned === 'left').map(getColumnId),
+        right: leafCols.filter((c) => c.pinned === 'right').map(getColumnId)
+    };
+}
+function createColumns(columns, localeCtx) {
+    return columns.map((column) => {
+        if (isGroupColumn(column)) {
+            return {
+                id: getGroupColumnId(column),
+                header: column.header,
+                columns: createColumns(column.columns, localeCtx),
+                meta: {
+                    align: column.align
+                }
+            };
+        }
+        const columnId = getColumnId(column);
+        const derivedFilterFn = column.filterFn ?? getFilterFnForType(column.type);
+        const columnDef = {
+            id: columnId,
+            header: column.header,
+            size: column.size,
+            minSize: column.minSize,
+            maxSize: column.maxSize,
+            enableResizing: column.enableResizing,
+            enableHiding: column.enableHiding,
+            enableSorting: column.enableSorting,
+            sortDescFirst: column.sortDescFirst,
+            enableColumnFilter: column.enableColumnFilter,
+            ...(derivedFilterFn !== undefined ? { filterFn: derivedFilterFn } : {}),
+            meta: {
+                align: column.align,
+                type: column.type,
+                formatOptions: column.formatOptions,
+                formatLocale: column.formatLocale,
+                grow: column.grow,
+                sum: column.sum,
+                footer: column.footer
+            }
+        };
+        if (typeof column.accessorFn === 'function') {
+            return {
+                ...columnDef,
+                accessorFn: column.accessorFn,
+                cell: (context) => formatCellValue(column, context.getValue(), context.row.original, localeCtx)
+            };
+        }
+        return {
+            ...columnDef,
+            accessorKey: column.accessorKey,
+            cell: (context) => formatCellValue(column, context.getValue(), context.row.original, localeCtx)
+        };
+    });
+}
+function isGroupColumn(column) {
+    return Array.isArray(column.columns);
+}
+function getLeafColumns(columns) {
+    return columns.flatMap((column) => isGroupColumn(column) ? getLeafColumns(column.columns) : column);
+}
+function getGroupColumnId(column) {
+    return column.id ?? column.header;
+}
+export function getColumnId(column) {
+    if (column.id !== undefined)
+        return column.id;
+    if ('accessorKey' in column && column.accessorKey !== undefined)
+        return column.accessorKey;
+    throw new Error('DataTableColumn with accessorFn requires an id.');
+}
+const TYPE_DATE_FORMAT_DEFAULTS = {
+    date: { day: '2-digit', month: '2-digit', year: 'numeric' },
+    time: { hour: '2-digit', minute: '2-digit' },
+    'date-time': {
+        day: '2-digit',
+        month: '2-digit',
+        year: 'numeric',
+        hour: '2-digit',
+        minute: '2-digit'
+    }
+};
+function getFilterFnForType(type) {
+    switch (type) {
+        case 'number':
+        case 'currency':
+        case 'percent':
+            return 'inNumberRange';
+        case 'boolean':
+            return 'equals';
+        case 'select':
+            return oneOfFilterFn;
+        default:
+            return undefined;
+    }
+}
+function applyTypeFormat(column, value, localeCtx) {
+    if (value === null || value === undefined || value === '')
+        return undefined;
+    const numDefaults = column.type ? TYPE_NUMBER_FORMAT_DEFAULTS[column.type] : undefined;
+    if (numDefaults !== undefined) {
+        const numericValue = Number(value);
+        if (isNaN(numericValue))
+            return undefined;
+        const locale = column.formatLocale ?? localeCtx().locale;
+        return new Intl.NumberFormat(locale, {
+            ...numDefaults,
+            ...column.formatOptions
+        }).format(numericValue);
+    }
+    if (column.type === 'date' || column.type === 'time' || column.type === 'date-time') {
+        const dateValue = value instanceof Date ? value : new Date(value);
+        if (isNaN(dateValue.getTime()))
+            return undefined;
+        const locale = column.formatLocale ?? localeCtx().locale;
+        return new Intl.DateTimeFormat(locale, {
+            ...TYPE_DATE_FORMAT_DEFAULTS[column.type],
+            ...column.formatOptions
+        }).format(dateValue);
+    }
+    if (column.type === 'boolean')
+        return value ? 'Yes' : 'No';
+    return value;
+}
+function formatCellValue(column, value, row, localeCtx) {
+    if (column.cellComponent) {
+        return renderComponent(column.cellComponent, getCellComponentProps(column, value, row));
+    }
+    if (column.cellSnippet) {
+        return renderSnippet(column.cellSnippet, { value, row });
+    }
+    const rendered = column.cell
+        ? column.cell(value, row)
+        : applyTypeFormat(column, value, localeCtx);
+    if (rendered === null || rendered === undefined || rendered === '') {
+        return '-';
+    }
+    return String(rendered);
+}
+function getCellComponentProps(column, value, row) {
+    return column.cellProps ? column.cellProps(value, row) : { value, row };
+}

package/dist/components/data-table-v9/data-table-cell-content.svelte

@@ -0,0 +1,66 @@
+<script lang="ts" generics="T extends RowData">
+	import type { Cell, RowData } from '@tanstack/svelte-table';
+	import { FlexRender } from '@tanstack/svelte-table';
+	import { cn } from 'tailwind-variants';
+	import { PhArrowSquareOut, PhCheck, PhX } from '../../icons';
+	import type { DataTableFeatures } from './features';
+	import {
+		getBooleanCellValue,
+		getColumnMeta,
+		getUrlCellValue,
+		justifyClass,
+		openUrlCell
+	} from './data-table-utils';
+
+	type Props = {
+		cell: Cell<DataTableFeatures, T, unknown>;
+	};
+
+	let { cell }: Props = $props();
+
+	const meta = $derived(getColumnMeta(cell.column.columnDef));
+</script>
+
+{#if meta?.type === 'boolean'}
+	{@const value = getBooleanCellValue(cell.getValue())}
+	{#if value === true}
+		<span
+			class="inline-flex size-5 items-center justify-center text-success"
+			role="img"
+			aria-label="Yes"
+		>
+			<PhCheck class="size-4" />
+		</span>
+	{:else if value === false}
+		<span
+			class="inline-flex size-5 items-center justify-center text-danger"
+			role="img"
+			aria-label="No"
+		>
+			<PhX class="size-4" />
+		</span>
+	{:else}
+		-
+	{/if}
+{:else if meta?.type === 'url'}
+	{@const value = getUrlCellValue(cell.getValue())}
+	{#if value}
+		<button
+			type="button"
+			class={cn(
+				'inline-flex max-w-full appearance-none items-center gap-1.5 rounded-sm border-0 bg-transparent p-0 align-middle leading-5 font-medium text-ink underline decoration-border decoration-dotted underline-offset-4 outline-none hover:text-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring',
+				justifyClass(meta.align)
+			)}
+			onclick={(event) => {
+				event.stopPropagation();
+				openUrlCell(value);
+			}}
+		>
+			<PhArrowSquareOut class="size-3.5 shrink-0" />
+		</button>
+	{:else}
+		-
+	{/if}
+{:else}
+	<FlexRender {cell} />
+{/if}

package/dist/components/data-table-v9/data-table-cell-content.svelte.d.ts

@@ -0,0 +1,28 @@
+import type { Cell, RowData } from '@tanstack/svelte-table';
+import type { DataTableFeatures } from './features';
+declare function $$render<T extends RowData>(): {
+    props: {
+        cell: Cell<DataTableFeatures, T, unknown>;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+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'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    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 extends RowData>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const DataTableCellContent: $$IsomorphicComponent;
+type DataTableCellContent<T extends RowData> = InstanceType<typeof DataTableCellContent<T>>;
+export default DataTableCellContent;

package/dist/components/data-table-v9/data-table-foot.svelte

@@ -0,0 +1,111 @@
+<script lang="ts" generics="T extends RowData">
+	import type { Column, RowData } from '@tanstack/svelte-table';
+	import { useLocaleContext } from '@ark-ui/svelte/locale';
+	import { cn } from 'tailwind-variants';
+	import type { DataTableInstance } from './data-table-utils';
+	import type { DataTableViewState } from './table-view-state.svelte';
+	import type { DataTableFeatures } from './features';
+	import {
+		alignClass,
+		formatColumnFooter,
+		getColumnMeta,
+		getPinningStyle,
+		justifyClass,
+		joinStyles,
+		virtualColumnSizeStyle,
+		virtualGrowColumnSizeStyle,
+		virtualSelectionColumnSizeStyle
+	} from './data-table-utils';
+
+	type Props = {
+		table: DataTableInstance<T>;
+		view: DataTableViewState<T>;
+		hasGrowColumn: boolean;
+		isVirtual?: boolean;
+	};
+
+	let { table, view, hasGrowColumn, isVirtual = false }: Props = $props();
+
+	const localeCtx = useLocaleContext();
+	const locale = $derived(localeCtx().locale);
+
+	// One pass over the rows collects values for every footer column, instead of
+	// re-reading all rows per column on each render.
+	const footerTexts = $derived.by(() => {
+		const footerColumns = view.visibleLeafColumns.filter((column) => {
+			const meta = getColumnMeta(column.columnDef);
+			return !!(meta?.sum || meta?.footer);
+		});
+		const valuesByColumn: Record<string, unknown[]> = {};
+		for (const column of footerColumns) {
+			valuesByColumn[column.id] = [];
+		}
+		for (const row of view.rowModel.rows) {
+			for (const columnId in valuesByColumn) {
+				valuesByColumn[columnId].push(row.getValue(columnId));
+			}
+		}
+		const texts: Record<string, string | undefined> = {};
+		for (const column of footerColumns) {
+			const meta = getColumnMeta(column.columnDef);
+			texts[column.id] = formatColumnFooter(meta ?? {}, valuesByColumn[column.id], locale);
+		}
+		return texts;
+	});
+
+	function footCellStyle(column: Column<DataTableFeatures, T, unknown>) {
+		const meta = getColumnMeta(column.columnDef);
+		if (!isVirtual) return getPinningStyle(column, table, view, true, view.isRowSelectionEnabled);
+		return joinStyles(
+			meta?.grow ? virtualGrowColumnSizeStyle() : virtualColumnSizeStyle(column.getSize()),
+			getPinningStyle(column, table, view, true, view.isRowSelectionEnabled)
+		);
+	}
+
+	function selectionCellStyle() {
+		return isVirtual
+			? joinStyles(
+					virtualSelectionColumnSizeStyle(),
+					'min-width: 40px',
+					'max-width: 40px',
+					'position: sticky',
+					'left: 0',
+					'z-index: 15'
+				)
+			: 'width: 40px; min-width: 40px; max-width: 40px; position: sticky; left: 0; z-index: 15';
+	}
+</script>
+
+<tfoot
+	class="sticky bottom-0 z-20 bg-surface-2 text-ink-dim"
+	style={isVirtual ? 'display: grid; position: sticky; bottom: 0; z-index: 20' : undefined}
+>
+	<tr class="h-9" style={isVirtual ? 'display: flex; width: 100%' : undefined}>
+		{#if view.isRowSelectionEnabled}
+			<td
+				class={cn(
+					'h-9 border-t border-surface-3 bg-surface-2 px-3 py-0',
+					isVirtual && 'flex items-center'
+				)}
+				style={selectionCellStyle()}
+			></td>
+		{/if}
+		{#each view.visibleLeafColumns as column (column.id)}
+			{@const meta = getColumnMeta(column.columnDef)}
+			<td
+				class={cn(
+					'h-9 truncate border-t border-surface-3 bg-surface-2 px-3 py-0 align-middle text-sm font-medium',
+					alignClass(meta?.align),
+					isVirtual && 'flex items-center',
+					isVirtual && justifyClass(meta?.align)
+				)}
+				style={footCellStyle(column)}
+			>
+				{footerTexts[column.id] ?? ''}
+			</td>
+		{/each}
+		{#if !isVirtual && !hasGrowColumn}
+			<td aria-hidden="true" class="h-9 border-t border-surface-3 bg-surface-2 p-0"></td>
+		{/if}
+	</tr>
+</tfoot>

package/dist/components/data-table-v9/data-table-foot.svelte.d.ts

@@ -0,0 +1,32 @@
+import type { RowData } from '@tanstack/svelte-table';
+import type { DataTableInstance } from './data-table-utils';
+import type { DataTableViewState } from './table-view-state.svelte';
+declare function $$render<T extends RowData>(): {
+    props: {
+        table: DataTableInstance<T>;
+        view: DataTableViewState<T>;
+        hasGrowColumn: boolean;
+        isVirtual?: boolean;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+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'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    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 extends RowData>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const DataTableFoot: $$IsomorphicComponent;
+type DataTableFoot<T extends RowData> = InstanceType<typeof DataTableFoot<T>>;
+export default DataTableFoot;