compote-ui 0.56.1 → 0.57.0

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

@@ -1,6 +1,6 @@
 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 { onDestroy, untrack } from 'svelte';
 import { renderComponent, renderSnippet } from '@tanstack/svelte-table';
 import { dataTableFeatures } from './features';
 import { TYPE_NUMBER_FORMAT_DEFAULTS } from './data-table-utils';
@@ -72,22 +72,23 @@ export function createTable(options) {
             }));
         });
     });
-    // 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).
-    // The callback runs untracked: it must only depend on the visibility atom,
-    // otherwise consumer-side reads (e.g. a persisted-state proxy the callback
-    // writes into) become dependencies of this effect and re-trigger it forever.
+    // Notify consumers of visibility changes without taking control of the slice
+    // (overriding the table's own `onColumnVisibilityChange` option would suppress
+    // internal updates). The atom's `subscribe` is an explicit observer that runs
+    // the callback outside Svelte's dependency tracking, so consumer-side reads
+    // (e.g. a persisted-state proxy the callback writes into) can never become
+    // dependencies that re-trigger the notification — the failure mode of
+    // observing via $effect. The initial-replay guard compares by reference:
+    // table state updates are immutable, so only the subscription's initial
+    // emission (if the atom flavor emits one) can match the snapshot.
     if (options.onColumnVisibilityChange) {
-        let first = true;
-        $effect(() => {
-            const visibility = table.atoms.columnVisibility.get();
-            if (first) {
-                first = false;
+        const initialVisibility = table.atoms.columnVisibility.get();
+        const subscription = table.atoms.columnVisibility.subscribe((visibility) => {
+            if (visibility === initialVisibility)
                 return;
-            }
-            untrack(() => options.onColumnVisibilityChange?.(visibility));
+            options.onColumnVisibilityChange?.(visibility);
         });
+        onDestroy(() => subscription.unsubscribe());
     }
     return table;
 }

package/dist/index.d.ts

@@ -25,8 +25,6 @@ export { default as AlertDialog } from './components/dialog/alert-dialog.svelte'
 export type { AlertDialogProps } from './components/dialog/dialog.types';
 export * as DataTable from './components/data-table-v9';
 export * as VirtualDataTable from './components/data-table-v9/virtual';
-export * as DataTableV8 from './components/data-table-v8';
-export * as VirtualDataTableV8 from './components/data-table-v8/virtual';
 export * as Drawer from './components/drawer';
 export { default as FileUploadDropzone } from './components/file-upload/file-upload-dropzone.svelte';
 export { default as FileUpload } from './components/file-upload/file-upload.svelte';

package/dist/index.js

@@ -19,8 +19,6 @@ export * as Dialog from './components/dialog';
 export { default as AlertDialog } from './components/dialog/alert-dialog.svelte';
 export * as DataTable from './components/data-table-v9';
 export * as VirtualDataTable from './components/data-table-v9/virtual';
-export * as DataTableV8 from './components/data-table-v8';
-export * as VirtualDataTableV8 from './components/data-table-v8/virtual';
 export * as Drawer from './components/drawer';
 export { default as FileUploadDropzone } from './components/file-upload/file-upload-dropzone.svelte';
 export { default as FileUpload } from './components/file-upload/file-upload.svelte';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "compote-ui",
-	"version": "0.56.1",
+	"version": "0.57.0",
 	"license": "MIT",
 	"scripts": {
 		"dev": "vite dev --open",
@@ -40,26 +40,14 @@
 			"types": "./dist/components/data-table-v9/virtual/index.d.ts",
 			"svelte": "./dist/components/data-table-v9/virtual/index.js"
 		},
-		"./data-table-v8": {
-			"types": "./dist/components/data-table-v8/index.d.ts",
-			"svelte": "./dist/components/data-table-v8/index.js"
-		},
-		"./data-table-v8/virtual": {
-			"types": "./dist/components/data-table-v8/virtual/index.d.ts",
-			"svelte": "./dist/components/data-table-v8/virtual/index.js"
-		},
 		"./theme.css": "./dist/theme.css"
 	},
 	"peerDependencies": {
 		"@tanstack/svelte-table": ">=9.0.0-beta.6 <10",
-		"@tanstack/table-core": ">=8.0.0",
 		"@tanstack/svelte-virtual": ">=3.0.0",
 		"svelte": "^5.0.0"
 	},
 	"peerDependenciesMeta": {
-		"@tanstack/table-core": {
-			"optional": true
-		},
 		"@tanstack/svelte-virtual": {
 			"optional": true
 		}
@@ -70,28 +58,27 @@
 		"@iconify-json/ph": "^1.2.2",
 		"@sveltejs/adapter-auto": "^7.0.0",
 		"@sveltejs/adapter-cloudflare": "^7.2.8",
-		"@sveltejs/kit": "^2.63.0",
+		"@sveltejs/kit": "^2.65.0",
 		"@sveltejs/package": "^2.5.8",
 		"@sveltejs/vite-plugin-svelte": "7.1.2",
 		"@tailwindcss/vite": "^4.2.4",
 		"@tanstack/svelte-table": "9.0.0-beta.6",
 		"@tanstack/svelte-virtual": "^3.13.28",
-		"@tanstack/table-core": "^8.21.3",
 		"@types/node": "^22.19.18",
 		"eslint": "^10.4.1",
 		"eslint-config-prettier": "^10.1.8",
 		"eslint-plugin-svelte": "^3.19.0",
 		"globals": "^17.5.0",
-		"prettier": "^3.8.3",
+		"prettier": "^3.8.4",
 		"prettier-plugin-svelte": "^4.1.0",
 		"prettier-plugin-tailwindcss": "^0.8.0",
 		"publint": "^0.3.21",
-		"svelte": "^5.56.2",
+		"svelte": "^5.56.3",
 		"svelte-check": "^4.6.0",
 		"tailwindcss": "^4.2.4",
 		"tw-animate-css": "^1.4.0",
 		"typescript": "^6.0.3",
-		"typescript-eslint": "^8.60.1",
+		"typescript-eslint": "^8.61.0",
 		"unplugin-icons": "^23.0.1",
 		"vite": "^8.0.16"
 	},
@@ -99,7 +86,7 @@
 		"svelte"
 	],
 	"dependencies": {
-		"@ark-ui/svelte": "^5.22.0",
+		"@ark-ui/svelte": "^5.22.1",
 		"@fontsource-variable/nunito-sans": "^5.2.7",
 		"@iconify/svelte": "^5.2.1",
 		"@internationalized/date": "^3.12.2",

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

@@ -1,12 +0,0 @@
-import type { RowData } from '@tanstack/table-core';
-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-v8/column-helper.js

@@ -1,42 +0,0 @@
-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-v8/create-svelte-table.svelte.d.ts

@@ -1,8 +0,0 @@
-import { type RowData, type TableOptions } from '@tanstack/table-core';
-export declare function createSvelteTable<TData extends RowData>(options: TableOptions<TData>): import("@tanstack/table-core").Table<TData>;
-type MaybeThunk<T extends object> = T | (() => T | null | undefined);
-type Intersection<T extends readonly unknown[]> = (T extends [infer H, ...infer R] ? H & Intersection<R> : unknown) & {};
-export declare function mergeObjects<Sources extends readonly MaybeThunk<any>[]>(...sources: Sources): Intersection<{
-    [K in keyof Sources]: Sources[K];
-}>;
-export {};

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

@@ -1,85 +0,0 @@
-import { createTable } from '@tanstack/table-core';
-export function createSvelteTable(options) {
-    const resolvedOptions = mergeObjects({
-        state: {},
-        onStateChange() { },
-        renderFallbackValue: null,
-        mergeOptions: (defaultOptions, options) => {
-            return mergeObjects(defaultOptions, options);
-        }
-    }, options);
-    const table = createTable(resolvedOptions);
-    let state = $state(table.initialState);
-    function updateOptions() {
-        table.setOptions(() => {
-            return mergeObjects(resolvedOptions, options, {
-                state: mergeObjects(() => state, options.state || {}),
-                onStateChange: (updater) => {
-                    if (typeof updater === 'function')
-                        state = updater(state);
-                    else
-                        state = mergeObjects(state, updater);
-                    options.onStateChange?.(updater);
-                }
-            });
-        });
-    }
-    updateOptions();
-    $effect.pre(() => {
-        updateOptions();
-    });
-    Object.defineProperty(table, '_svelteState', {
-        get() {
-            return state;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    return table;
-}
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export function mergeObjects(...sources) {
-    const resolve = (src) => typeof src === 'function' ? (src() ?? undefined) : src;
-    const findSourceWithKey = (key) => {
-        for (let i = sources.length - 1; i >= 0; i--) {
-            const obj = resolve(sources[i]);
-            if (obj && key in obj)
-                return obj;
-        }
-        return undefined;
-    };
-    return new Proxy(Object.create(null), {
-        get(_, key) {
-            const src = findSourceWithKey(key);
-            return src?.[key];
-        },
-        has(_, key) {
-            return !!findSourceWithKey(key);
-        },
-        ownKeys() {
-            // eslint-disable-next-line svelte/prefer-svelte-reactivity
-            const all = new Set();
-            for (const s of sources) {
-                const obj = resolve(s);
-                if (obj) {
-                    for (const k of Reflect.ownKeys(obj)) {
-                        all.add(k);
-                    }
-                }
-            }
-            return [...all];
-        },
-        getOwnPropertyDescriptor(_, key) {
-            const src = findSourceWithKey(key);
-            if (!src)
-                return undefined;
-            return {
-                configurable: true,
-                enumerable: true,
-                // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                value: src[key],
-                writable: true
-            };
-        }
-    });
-}

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

@@ -1,35 +0,0 @@
-import { type ColumnPinningState, type ColumnResizeMode, type ColumnSizingState, type VisibilityState, type FilterFn, type Row, type RowData, type Table } from '@tanstack/table-core';
-import type { DataTableColumn, DataTableLeafColumn } from './types';
-declare module '@tanstack/table-core' {
-    interface FilterFns {
-        oneOf: FilterFn<unknown>;
-    }
-}
-export type DataTableInstance<T extends RowData> = Table<T>;
-export type CreateDataTableOptions<T extends RowData> = {
-    data: T[];
-    columns: DataTableColumn<T>[];
-    columnResizeMode?: ColumnResizeMode;
-    initialState?: {
-        columnVisibility?: VisibilityState;
-        columnSizing?: ColumnSizingState;
-        columnPinning?: ColumnPinningState;
-        rowSelection?: Record<string, boolean>;
-        sorting?: {
-            id: string;
-            desc: boolean;
-        }[];
-        columnFilters?: {
-            id: string;
-            value: unknown;
-        }[];
-    };
-    getRowId?: (row: T, index: number, parent?: Row<T>) => string;
-    enableRowSelection?: boolean | ((row: Row<T>) => boolean);
-    enableMultiRowSelection?: boolean | ((row: Row<T>) => boolean);
-    enableSorting?: boolean;
-    debugTable?: boolean;
-    onColumnVisibilityChange?: (visibility: VisibilityState) => void;
-};
-export declare function createTable<T extends RowData>(options: CreateDataTableOptions<T>): Table<T>;
-export declare function getColumnId<T extends RowData>(column: DataTableLeafColumn<T>): string;

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

@@ -1,234 +0,0 @@
-import { getCoreRowModel, getSortedRowModel, getFilteredRowModel, getFacetedRowModel, getFacetedUniqueValues, getFacetedMinMaxValues } from '@tanstack/table-core';
-import { useLocaleContext } from '@ark-ui/svelte/locale';
-import { createSvelteTable } from './create-svelte-table.svelte';
-import { renderComponent, renderSnippet } from './render-helpers';
-function 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({
-        get data() {
-            return options.data;
-        },
-        get columns() {
-            return columnDefs;
-        },
-        getCoreRowModel: getCoreRowModel(),
-        getSortedRowModel: getSortedRowModel(),
-        getFilteredRowModel: getFilteredRowModel(),
-        getFacetedRowModel: getFacetedRowModel(),
-        getFacetedUniqueValues: getFacetedUniqueValues(),
-        getFacetedMinMaxValues: getFacetedMinMaxValues(),
-        columnResizeMode: options.columnResizeMode,
-        getRowId: options.getRowId,
-        enableRowSelection: options.enableRowSelection ?? false,
-        enableMultiRowSelection: options.enableMultiRowSelection,
-        enableSorting: options.enableSorting,
-        debugTable: options.debugTable,
-        filterFns: {
-            oneOf: oneOfFilterFn
-        },
-        onColumnVisibilityChange: (updater) => {
-            // Without this, overriding onColumnVisibilityChange bypasses makeStateUpdater,
-            // so createSvelteTable's $state never updates and Svelte doesn't re-render.
-            table.options.onStateChange?.((old) => {
-                const columnVisibility = typeof updater === 'function' ? updater(old.columnVisibility) : updater;
-                options.onColumnVisibilityChange?.(columnVisibility);
-                return {
-                    ...old,
-                    columnVisibility
-                };
-            });
-        },
-        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 ?? []
-        }
-    });
-    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: getColumnEnableHiding(column, columnId),
-            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;
-}
-function getColumnEnableHiding(column, columnId) {
-    if (column.enableHiding !== undefined)
-        return column.enableHiding;
-    if (columnId === 'id')
-        return false;
-    return undefined;
-}
-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_FORMAT_DEFAULTS = {
-    currency: { style: 'currency', currency: 'USD' },
-    percent: { style: 'percent' },
-    number: {}
-};
-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 'oneOf';
-        default:
-            return undefined;
-    }
-}
-function applyTypeFormat(column, value, localeCtx) {
-    if (value === null || value === undefined || value === '')
-        return undefined;
-    const numDefaults = column.type ? TYPE_FORMAT_DEFAULTS[column.type] : undefined;
-    if (numDefaults !== undefined) {
-        const locale = column.formatLocale ?? localeCtx().locale;
-        return new Intl.NumberFormat(locale, {
-            ...numDefaults,
-            ...column.formatOptions
-        }).format(Number(value));
-    }
-    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-v8/data-table-foot.svelte

@@ -1,96 +0,0 @@
-<script lang="ts" generics="T extends RowData">
-	import type { Column, Row, RowData } from '@tanstack/table-core';
-	import { useLocaleContext } from '@ark-ui/svelte/locale';
-	import { cn } from 'tailwind-variants';
-	import type { DataTableInstance } from './data-table-utils';
-	import {
-		alignClass,
-		formatColumnFooter,
-		getColumnMeta,
-		getPinningStyle,
-		justifyClass,
-		joinStyles,
-		virtualColumnSizeStyle,
-		virtualGrowColumnSizeStyle,
-		virtualSelectionColumnSizeStyle
-	} from './data-table-utils';
-
-	type Props = {
-		table: DataTableInstance<T>;
-		visibleLeafColumns: Column<T, unknown>[];
-		rows: Row<T>[];
-		isRowSelectionEnabled: boolean;
-		hasGrowColumn: boolean;
-		isVirtual?: boolean;
-	};
-
-	let {
-		table,
-		visibleLeafColumns,
-		rows,
-		isRowSelectionEnabled,
-		hasGrowColumn,
-		isVirtual = false
-	}: Props = $props();
-
-	const localeCtx = useLocaleContext();
-	const locale = $derived(localeCtx().locale);
-
-	function footCellStyle(column: Column<T, unknown>) {
-		const meta = getColumnMeta(column.columnDef);
-		if (!isVirtual) return getPinningStyle(column, table, true, isRowSelectionEnabled);
-		return joinStyles(
-			meta?.grow ? virtualGrowColumnSizeStyle() : virtualColumnSizeStyle(column.getSize()),
-			getPinningStyle(column, table, true, 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 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 visibleLeafColumns as column (column.id)}
-			{@const meta = getColumnMeta(column.columnDef)}
-			{@const values = rows.map((row) => row.getValue(column.id))}
-			{@const footerText = formatColumnFooter(meta ?? {}, values, locale)}
-			<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)}
-			>
-				{footerText ?? ''}
-			</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>