@gradio/dataframe 0.22.0 → 0.23.0

package/shared/Toolbar.svelte

@@ -1,25 +1,33 @@
 <script lang="ts">
 	import { Copy, Check } from "@gradio/icons";
 	import { FullscreenButton } from "@gradio/atoms";
-	import { onDestroy } from "svelte";
-	import { createEventDispatcher } from "svelte";
 	import { IconButton } from "@gradio/atoms";
 
-	export let show_fullscreen_button = false;
-	export let show_copy_button = false;
-	export let show_search: "none" | "search" | "filter" = "none";
-	export let fullscreen = false;
-	export let on_copy: () => Promise<void>;
-	export let on_commit_filter: () => void;
-
-	const dispatch = createEventDispatcher<{
-		search: string | null;
-	}>();
-
-	let copied = false;
+	let {
+		show_fullscreen_button = false,
+		show_copy_button = false,
+		show_search = "none",
+		fullscreen = false,
+		on_copy,
+		on_commit_filter,
+		current_search_query = null,
+		onsearch,
+		onfullscreen
+	}: {
+		show_fullscreen_button?: boolean;
+		show_copy_button?: boolean;
+		show_search?: "none" | "search" | "filter";
+		fullscreen?: boolean;
+		on_copy: () => Promise<void>;
+		on_commit_filter: () => void;
+		current_search_query?: string | null;
+		onsearch?: (query: string | null) => void;
+		onfullscreen?: () => void;
+	} = $props();
+
+	let copied = $state(false);
 	let timer: ReturnType<typeof setTimeout>;
-	export let current_search_query: string | null = null;
-	let input_value = "";
+	let input_value = $state("");
 
 	function handle_search_input(e: Event): void {
 		const target = e.target as HTMLTextAreaElement;
@@ -27,7 +35,7 @@
 		const new_query = input_value || null;
 		if (current_search_query !== new_query) {
 			current_search_query = new_query;
-			dispatch("search", current_search_query);
+			onsearch?.(current_search_query);
 		}
 	}
 
@@ -44,8 +52,10 @@
 		copy_feedback();
 	}
 
-	onDestroy(() => {
-		if (timer) clearTimeout(timer);
+	$effect(() => {
+		return () => {
+			if (timer) clearTimeout(timer);
+		};
 	});
 </script>
 
@@ -56,7 +66,7 @@
 				<input
 					type="text"
 					value={current_search_query || ""}
-					on:input={handle_search_input}
+					oninput={handle_search_input}
 					placeholder={show_search === "filter" ? "Filter..." : "Search..."}
 					class="search-input"
 					class:filter-mode={show_search === "filter"}
@@ -65,7 +75,7 @@
 				{#if current_search_query && show_search === "filter"}
 					<button
 						class="toolbar-button check-button"
-						on:click={on_commit_filter}
+						onclick={on_commit_filter}
 						aria-label="Apply filter and update dataframe values"
 						title="Apply filter and update dataframe values"
 					>
@@ -82,7 +92,7 @@
 			/>
 		{/if}
 		{#if show_fullscreen_button}
-			<FullscreenButton {fullscreen} on:fullscreen />
+			<FullscreenButton {fullscreen} onclick={(_fs) => onfullscreen?.()} />
 		{/if}
 	</div>
 </div>

package/shared/column_measurement.svelte.ts

@@ -0,0 +1,103 @@
+/**
+ * measures header cell positions/widths and provides inline styles
+ * for absolutely-positioned body cells to match.
+ */
+export function create_column_measurement(opts: {
+	header_row_el: () => HTMLTableRowElement | undefined;
+	header_table_el: () => HTMLTableElement | undefined;
+	resolved_headers: () => string[];
+	row_data: () => any[];
+	show_row_numbers: () => boolean;
+	column_widths: () => string[];
+	on_resize?: () => void;
+}): {
+	readonly col_widths: number[];
+	readonly col_lefts: number[];
+	readonly total_header_width: number;
+	readonly header_height: number;
+	readonly row_num_width: number;
+	get_col_style: (index: number) => string;
+} {
+	let col_widths: number[] = $state([]);
+	let total_header_width: number = $state(0);
+	let header_height: number = $state(0);
+
+	// use offsets (not just widths) avoids accumulated subpixel rounding errors
+	let col_lefts: number[] = $state([]);
+
+	function measure(): void {
+		const current_row_el = opts.header_row_el();
+		const current_table_el = opts.header_table_el();
+		if (!current_row_el) return;
+
+		const cells = current_row_el.querySelectorAll<HTMLElement>(".header-cell");
+		const table_rect = current_table_el?.getBoundingClientRect();
+		const table_left = table_rect?.left ?? 0;
+
+		col_lefts = Array.from(cells).map(
+			(c) => c.getBoundingClientRect().left - table_left
+		);
+		col_widths = Array.from(cells).map((c) => c.getBoundingClientRect().width);
+		if (current_table_el) {
+			total_header_width = table_rect?.width ?? 0;
+			header_height = table_rect?.height ?? 0;
+		}
+		opts.on_resize?.();
+	}
+
+	$effect(() => {
+		const table_el = opts.header_table_el();
+		const row_el = opts.header_row_el();
+		if (!table_el || !row_el) return;
+
+		// re-run when columns change so we observe new cells
+		opts.resolved_headers();
+
+		const ro = new ResizeObserver(measure);
+		ro.observe(table_el);
+
+		// observe individual header cells so content-driven column
+		// width changes (editing, data updates) trigger a re-measure
+		// even when the overall table dimensions stay the same
+		const cells = row_el.querySelectorAll<HTMLElement>(".header-cell");
+		cells.forEach((cell) => ro.observe(cell));
+
+		return () => ro.disconnect();
+	});
+
+	let row_num_width = $derived.by(() => {
+		if (!opts.show_row_numbers()) return 0;
+		const row_el = opts.header_row_el();
+		if (!row_el) return 0;
+		const el = row_el.querySelector<HTMLElement>(".row-number-header");
+		return el?.getBoundingClientRect().width ?? 48;
+	});
+
+	function get_col_style(index: number): string {
+		if (col_widths[index] !== undefined) {
+			return `width: ${col_widths[index]}px; flex: 0 0 ${col_widths[index]}px;`;
+		}
+		const user_widths = opts.column_widths();
+		if (user_widths[index]) return `width: ${user_widths[index]};`;
+		return "width: 150px;";
+	}
+
+	return {
+		get col_widths() {
+			return col_widths;
+		},
+		get col_lefts() {
+			return col_lefts;
+		},
+		get total_header_width() {
+			return total_header_width;
+		},
+		get header_height() {
+			return header_height;
+		},
+		get row_num_width() {
+			return row_num_width;
+		},
+		get_col_style
+	};
+}

package/shared/icons/FilterIcon.svelte

@@ -1,12 +1,20 @@
-<script lang="ts">
-</script>
-
-<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg viewBox="0 0 24 24" width="20" height="20">
 	<path
-		d="M4 4h16v2.67l-6.67 6.67v8L9.33 19v-5.66L2.67 6.67V4h1.33z"
+		d="M5 5H19"
+		stroke="currentColor"
+		stroke-width="2"
+		stroke-linecap="round"
+	/>
+	<path
+		d="M8 9H16"
+		stroke="currentColor"
+		stroke-width="2"
+		stroke-linecap="round"
+	/>
+	<path
+		d="M11 13H13"
 		stroke="currentColor"
 		stroke-width="2"
 		stroke-linecap="round"
-		stroke-linejoin="round"
 	/>
 </svg>

package/shared/icons/Padlock.svelte

@@ -1,8 +1,12 @@
+<script lang="ts">
+	let { size = 16 } = $props();
+</script>
+
 <div class="wrapper" aria-label="Static column">
 	<svg
 		xmlns="http://www.w3.org/2000/svg"
-		width="13"
-		height="13"
+		width={size}
+		height={size}
 		viewBox="0 0 24 24"
 		fill="none"
 		stroke="currentColor"

package/shared/icons/SelectionButtons.svelte

@@ -1,25 +1,36 @@
 <script lang="ts">
-	export let position: "column" | "row";
-	export let coords: [number, number];
-	export let on_click: (() => void) | null = null;
+	let {
+		position,
+		coords,
+		on_click = null
+	}: {
+		position: "column" | "row";
+		coords: [number, number];
+		on_click?: (() => void) | null;
+	} = $props();
 
-	$: is_first_position =
-		position === "column" ? coords[0] === 0 : coords[1] === 0;
-	$: direction =
+	let is_first_position = $derived(
+		position === "column" ? coords[0] === 0 : coords[1] === 0
+	);
+	let direction = $derived(
 		position === "column"
 			? is_first_position
 				? "down"
 				: "up"
 			: is_first_position
 				? "right"
-				: "left";
+				: "left"
+	);
 </script>
 
 <button
 	class="selection-button selection-button-{position} {is_first_position
 		? `move-${direction}`
 		: ''}"
-	on:click|stopPropagation={() => on_click && on_click()}
+	onclick={(e: MouseEvent) => {
+		e.stopPropagation();
+		on_click && on_click();
+	}}
 	aria-label={`Select ${position}`}
 >
 	<span class={direction}>
@@ -50,6 +61,8 @@
 
 	.selection-button-row {
 		left: calc(var(--size-2-5) * -1);
+		top: 50%;
+		transform: translateY(-50%);
 		border-radius: var(--radius-sm) 0 0 var(--radius-sm);
 	}
 
@@ -62,6 +75,8 @@
 	.move-right {
 		left: auto;
 		right: calc(var(--size-2-5) * -1);
+		top: 50%;
+		transform: translateY(-50%);
 		border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
 	}
 

package/shared/icons/SortButtonDown.svelte

@@ -1,14 +1,25 @@
+<script lang="ts">
+	let { size = 16 } = $props();
+</script>
+
 <svg
-	viewBox="0 0 24 24"
+	width={size}
+	height={size}
+	viewBox="0 0 16 16"
 	fill="none"
 	xmlns="http://www.w3.org/2000/svg"
-	focusable="false"
 >
 	<path
-		d="M7 10l5 5 5-5"
+		d="M4 8L8 12L12 8"
 		stroke="currentColor"
-		stroke-width="2"
+		stroke-width="1.5"
 		stroke-linecap="round"
 		stroke-linejoin="round"
 	/>
+	<path
+		d="M8 12V4"
+		stroke="currentColor"
+		stroke-width="1.5"
+		stroke-linecap="round"
+	/>
 </svg>

package/shared/icons/SortButtonUp.svelte

@@ -1,15 +1,25 @@
+<script lang="ts">
+	let { size = 16 } = $props();
+</script>
+
 <svg
-	viewBox="0 0 24 24"
+	width={size}
+	height={size}
+	viewBox="0 0 16 16"
 	fill="none"
 	xmlns="http://www.w3.org/2000/svg"
-	aria-hidden="true"
-	focusable="false"
 >
 	<path
-		d="M7 14l5-5 5 5"
+		d="M4 8L8 4L12 8"
 		stroke="currentColor"
-		stroke-width="2"
+		stroke-width="1.5"
 		stroke-linecap="round"
 		stroke-linejoin="round"
 	/>
+	<path
+		d="M8 4V12"
+		stroke="currentColor"
+		stroke-width="1.5"
+		stroke-linecap="round"
+	/>
 </svg>

package/shared/icons/SortIcon.svelte

@@ -1,15 +1,21 @@
 <script lang="ts">
-	import { createEventDispatcher } from "svelte";
 	import type { I18nFormatter } from "@gradio/utils";
 	import SortButtonUp from "./SortButtonUp.svelte";
 	import SortButtonDown from "./SortButtonDown.svelte";
 	import { IconButton } from "@gradio/atoms";
 	type SortDirection = "asc" | "desc";
-	export let direction: SortDirection | null = null;
-	export let priority: number | null = null;
-	export let i18n: I18nFormatter;
 
-	const dispatch = createEventDispatcher<{ sort: SortDirection }>();
+	let {
+		direction = null,
+		priority = null,
+		i18n,
+		onsort
+	}: {
+		direction?: SortDirection | null;
+		priority?: number | null;
+		i18n: I18nFormatter;
+		onsort?: (direction: SortDirection) => void;
+	} = $props();
 </script>
 
 <div class="sort-icons" role="group" aria-label={i18n("dataframe.sort_column")}>
@@ -25,7 +31,7 @@
 		highlight={direction === "asc"}
 		onclick={(event) => {
 			event.stopPropagation();
-			dispatch("sort", "asc");
+			onsort?.("asc");
 		}}
 	></IconButton>
 	<IconButton
@@ -35,7 +41,7 @@
 		highlight={direction === "desc"}
 		onclick={(event) => {
 			event.stopPropagation();
-			dispatch("sort", "desc");
+			onsort?.("desc");
 		}}
 	></IconButton>
 </div>

package/shared/tanstack/index.ts

@@ -0,0 +1,23 @@
+export { createSvelteTable } from "./table.svelte.js";
+
+export { createSvelteVirtualizer, type VirtualItem } from "./virtual.svelte.js";
+
+export {
+	createColumnHelper,
+	getCoreRowModel,
+	getSortedRowModel,
+	getFilteredRowModel,
+	type ColumnDef,
+	type TableOptions,
+	type Table,
+	type Header,
+	type Cell,
+	type Row,
+	type SortingState,
+	type ColumnFiltersState,
+	type ColumnPinningState,
+	type FilterFn,
+	type SortingFn,
+	type CellContext,
+	type HeaderContext
+} from "@tanstack/table-core";

package/shared/tanstack/table.svelte.ts

@@ -0,0 +1,117 @@
+import {
+	createTable,
+	type RowData,
+	type TableOptions,
+	type TableOptionsResolved,
+	type TableState
+} from "@tanstack/table-core";
+
+/**
+ * Merges objects while preserving property getters for lazy evaluation.
+ * Properties are defined as getters that look up values from sources in
+ * reverse order at access time. This is critical: it means reading a
+ * property from the merged result doesn't happen until the property is
+ * actually accessed, not when mergeObjects is called.
+ */
+export function mergeObjects(...sources: any): any {
+	const target: Record<string, any> = {};
+	for (let i = 0; i < sources.length; i++) {
+		let source = sources[i];
+		if (typeof source === "function") source = source();
+		if (source) {
+			const descriptors = Object.getOwnPropertyDescriptors(source);
+			for (const key in descriptors) {
+				if (key in target) continue;
+				Object.defineProperty(target, key, {
+					enumerable: true,
+					get() {
+						for (let j = sources.length - 1; j >= 0; j--) {
+							let s = sources[j];
+							if (typeof s === "function") s = s();
+							const v = (s || {})[key];
+							if (v !== undefined) return v;
+						}
+					}
+				});
+			}
+		}
+	}
+	return target;
+}
+
+/**
+ * Creates a reactive TanStack Table for Svelte 5.
+ *
+ * The reactivity works through mergeObjects' lazy getters:
+ * - $effect.pre calls table.setOptions() with a merged object
+ * - The merged object has lazy getters for `data`, `columns`, `state`, etc.
+ * - TanStack stores this object but doesn't deep-read all properties immediately
+ * - When getRowModel() is called (in $derived), TanStack reads `data` and `columns`
+ *   through the lazy getters, which read the reactive $state/$derived values
+ * - onStateChange fires when TanStack mutates its own state → bumps version
+ * - version is read by getRowModel/getHeaderGroups → $derived re-evaluates
+ */
+export function createSvelteTable<TData extends RowData>(
+	options: TableOptions<TData>
+) {
+	const resolvedOptions: TableOptionsResolved<TData> = mergeObjects(
+		{
+			state: {},
+			onStateChange() {},
+			renderFallbackValue: null,
+			mergeOptions: (
+				defaultOptions: TableOptions<TData>,
+				opts: Partial<TableOptions<TData>>
+			) => {
+				return mergeObjects(defaultOptions, opts);
+			}
+		},
+		options
+	);
+
+	const table = createTable(resolvedOptions);
+	let state = $state<Partial<TableState>>(table.initialState);
+	let version = $state(0);
+
+	function updateOptions(): void {
+		table.setOptions((prev) => {
+			// mergeObjects creates lazy getters — `state` is NOT read here,
+			// only when TanStack accesses the `state` property later.
+			return mergeObjects(prev, options, {
+				state: mergeObjects(state, options.state || {}),
+				onStateChange: (updater: any) => {
+					if (updater instanceof Function) state = updater(state);
+					else state = mergeObjects(state, updater);
+					version += 1;
+					options.onStateChange?.(updater);
+				}
+			});
+		});
+	}
+
+	// Initial sync
+	updateOptions();
+
+	// Re-sync when options change. Because mergeObjects uses lazy getters,
+	// this effect's tracked dependencies are only the properties that
+	// table.setOptions() eagerly reads (which is minimal — mostly just
+	// checking if the options object reference changed).
+	$effect.pre(() => {
+		updateOptions();
+	});
+
+	return {
+		getRowModel: () => {
+			void version;
+			return table.getRowModel();
+		},
+		getHeaderGroups: () => {
+			void version;
+			return table.getHeaderGroups();
+		},
+		getColumn: (id: string) => {
+			void version;
+			return table.getColumn(id);
+		}
+	};
+}

package/shared/tanstack/virtual.svelte.ts

@@ -0,0 +1,105 @@
+import {
+	Virtualizer,
+	elementScroll,
+	observeElementOffset,
+	observeElementRect,
+	type PartialKeys,
+	type VirtualizerOptions
+} from "@tanstack/virtual-core";
+import { untrack } from "svelte";
+
+export type { VirtualItem } from "@tanstack/virtual-core";
+
+/**
+ * Creates a reactive TanStack Virtualizer for Svelte 5.
+ *
+ * Returns a getter function that returns the virtualizer instance.
+ * Call the getter inside $derived or template expressions to create
+ * reactive dependencies on the virtualizer state.
+ */
+export function createSvelteVirtualizer<
+	TScrollElement extends Element,
+	TItemElement extends Element
+>(
+	options: PartialKeys<
+		VirtualizerOptions<TScrollElement, TItemElement>,
+		"observeElementRect" | "observeElementOffset" | "scrollToFn"
+	>
+): {
+	instance: Virtualizer<TScrollElement, TItemElement>;
+	virtualItems: () => ReturnType<
+		Virtualizer<TScrollElement, TItemElement>["getVirtualItems"]
+	>;
+	totalSize: () => number;
+} {
+	let version = $state(0);
+
+	const virtualizer = new Virtualizer<TScrollElement, TItemElement>({
+		observeElementRect: observeElementRect,
+		observeElementOffset: observeElementOffset,
+		scrollToFn: elementScroll,
+		...options,
+		onChange: (instance, sync) => {
+			if (sync) {
+				version += 1;
+			} else {
+				queueMicrotask(() => {
+					version += 1;
+				});
+			}
+			options.onChange?.(instance, sync);
+		}
+	});
+
+	$effect(() => {
+		const cleanup = virtualizer._didMount();
+		untrack(() => {
+			version += 1;
+		});
+		return cleanup;
+	});
+
+	let prev_count = 0;
+
+	$effect(() => {
+		const current_count = options.count;
+		virtualizer.setOptions({
+			observeElementRect: observeElementRect,
+			observeElementOffset: observeElementOffset,
+			scrollToFn: elementScroll,
+			...options,
+			onChange: (instance, sync) => {
+				if (sync) {
+					version += 1;
+				} else {
+					queueMicrotask(() => {
+						version += 1;
+					});
+				}
+				options.onChange?.(instance, sync);
+			}
+		});
+
+		if (prev_count === 0 && current_count > 0) {
+			virtualizer.measure();
+		}
+		prev_count = current_count;
+	});
+
+	$effect.pre(() => {
+		void version;
+		virtualizer._willUpdate();
+	});
+
+	return {
+		instance: virtualizer,
+		virtualItems: () => {
+			void version;
+			return virtualizer.getVirtualItems();
+		},
+		totalSize: () => {
+			void version;
+			return virtualizer.getTotalSize();
+		}
+	};
+}

package/shared/types.ts

@@ -29,3 +29,6 @@ export type ElementRefs = Record<
 >;
 
 export type DataBinding = Record<string, TableCell>;
+
+export type SortDirection = "asc" | "desc";
+export type FilterDatatype = "string" | "number";