compote-ui 0.52.6 → 0.53.0

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

@@ -110,7 +110,9 @@ function createColumns(columns, localeCtx) {
                 type: column.type,
                 formatOptions: column.formatOptions,
                 formatLocale: column.formatLocale,
-                grow: column.grow
+                grow: column.grow,
+                sum: column.sum,
+                footer: column.footer
             }
         };
         if (typeof column.accessorFn === 'function') {

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

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

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

@@ -0,0 +1,33 @@
+import type { Column, Row, RowData } from '@tanstack/table-core';
+import type { DataTableInstance } from './data-table-utils';
+declare function $$render<T extends RowData>(): {
+    props: {
+        table: DataTableInstance<T>;
+        visibleLeafColumns: Column<T, unknown>[];
+        rows: Row<T>[];
+        isRowSelectionEnabled: boolean;
+        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;

package/dist/components/data-table-v8/data-table-utils.d.ts

@@ -29,3 +29,4 @@ export declare function getColumnMeta(columnDef: {
     meta?: unknown;
 }): DataTableColumnMeta | undefined;
 export declare function joinStyles(...styles: Array<string | undefined>): string;
+export declare function formatColumnFooter(meta: DataTableColumnMeta, values: unknown[], locale: string): string | undefined;

package/dist/components/data-table-v8/data-table-utils.js

@@ -133,3 +133,28 @@ export function getColumnMeta(columnDef) {
 export function joinStyles(...styles) {
     return styles.filter(Boolean).join('; ');
 }
+const FOOTER_SUM_FORMAT_DEFAULTS = {
+    currency: { style: 'currency', currency: 'USD' },
+    percent: { style: 'percent' },
+    number: {}
+};
+export function formatColumnFooter(meta, values, locale) {
+    if (meta.footer) {
+        const result = meta.footer(values);
+        if (result === null || result === undefined)
+            return undefined;
+        return String(result);
+    }
+    if (meta.sum) {
+        const sum = values.reduce((acc, val) => acc + (typeof val === 'number' ? val : Number(val) || 0), 0);
+        const numDefaults = meta.type ? FOOTER_SUM_FORMAT_DEFAULTS[meta.type] : undefined;
+        if (numDefaults !== undefined) {
+            return new Intl.NumberFormat(meta.formatLocale ?? locale, {
+                ...numDefaults,
+                ...meta.formatOptions
+            }).format(sum);
+        }
+        return String(sum);
+    }
+    return undefined;
+}

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

@@ -5,6 +5,7 @@
 	import { PhArrowSquareOut, PhCheck, PhX } from '../../icons';
 	import type { DataTableInstance } from './data-table-utils';
 	import DataTableHead from './data-table-head.svelte';
+	import DataTableFoot from './data-table-foot.svelte';
 	import FlexRender from './flex-render.svelte';
 	import {
 		alignClass,
@@ -105,6 +106,12 @@
 		return getSelectedRowCount(table);
 	});
 	const isColumnResizing = $derived(tableState.columnSizingInfo.isResizingColumn !== false);
+	const hasFooter = $derived(
+		visibleLeafColumns.some((col) => {
+			const meta = getColumnMeta(col.columnDef);
+			return !!(meta?.sum || meta?.footer);
+		})
+	);
 </script>
 
 <div
@@ -244,6 +251,15 @@
 					</tr>
 				{/each}
 			</tbody>
+			{#if hasFooter}
+				<DataTableFoot
+					{table}
+					{visibleLeafColumns}
+					rows={rowModel.rows}
+					{isRowSelectionEnabled}
+					{hasGrowColumn}
+				/>
+			{/if}
 		</table>
 	</div>
 

package/dist/components/data-table-v8/types.d.ts

@@ -33,6 +33,8 @@ export type DataTableLeafColumnBase<T extends RowData> = DataTableColumnOptions<
     formatLocale?: string;
     pinned?: 'left' | 'right';
     grow?: boolean;
+    sum?: boolean;
+    footer?: (values: unknown[]) => string | number | undefined;
     columns?: never;
 };
 export type DataTableAccessorKeyColumn<T extends RowData> = DataTableLeafColumnBase<T> & {
@@ -66,4 +68,6 @@ export type DataTableColumnMeta = {
     formatOptions?: Intl.NumberFormatOptions | Intl.DateTimeFormatOptions;
     formatLocale?: string;
     grow?: boolean;
+    sum?: boolean;
+    footer?: (values: unknown[]) => string | number | undefined;
 };

package/dist/components/data-table-v8/virtual/data-table-virtualized.svelte

@@ -4,9 +4,11 @@
 	import { cn, type ClassValue } from 'tailwind-variants';
 	import type { DataTableInstance } from '../data-table-utils';
 	import DataTableHead from '../data-table-head.svelte';
+	import DataTableFoot from '../data-table-foot.svelte';
 	import DataTableVirtualRows from './data-table-virtual-rows.svelte';
 	import {
 		getAllRowsSelectionState,
+		getColumnMeta,
 		getReactiveTableState,
 		getSelectedRowCount,
 		tableSizeStyle
@@ -69,6 +71,17 @@
 		return getSelectedRowCount(table);
 	});
 	const isColumnResizing = $derived(tableState.columnSizingInfo.isResizingColumn !== false);
+	const visibleLeafColumns = $derived.by(() => {
+		const { columnVisibility } = getReactiveTableState(table);
+		void columnVisibility;
+		return table.getVisibleLeafColumns();
+	});
+	const hasFooter = $derived(
+		visibleLeafColumns.some((col) => {
+			const meta = getColumnMeta(col.columnDef);
+			return !!(meta?.sum || meta?.footer);
+		})
+	);
 </script>
 
 <div
@@ -110,6 +123,16 @@
 					{onRowDoubleClick}
 				/>
 			{/if}
+			{#if hasFooter}
+				<DataTableFoot
+					{table}
+					{visibleLeafColumns}
+					rows={rowModel.rows}
+					{isRowSelectionEnabled}
+					hasGrowColumn={false}
+					isVirtual
+				/>
+			{/if}
 		</table>
 	</div>
 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "compote-ui",
-	"version": "0.52.6",
+	"version": "0.53.0",
 	"license": "MIT",
 	"scripts": {
 		"dev": "vite dev --open",