@gradio/dataframe 0.22.0 → 0.23.0

package/dist/shared/icons/SortIcon.svelte.d.ts

@@ -1,25 +1,11 @@
 import type { I18nFormatter } from "@gradio/utils";
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const SortIcon: $$__sveltets_2_IsomorphicComponent<{
-    direction?: ("asc" | "desc") | null;
+type SortDirection = "asc" | "desc";
+type $$ComponentProps = {
+    direction?: SortDirection | null;
     priority?: number | null;
     i18n: I18nFormatter;
-}, {
-    sort: CustomEvent<"asc" | "desc">;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type SortIcon = InstanceType<typeof SortIcon>;
+    onsort?: (direction: SortDirection) => void;
+};
+declare const SortIcon: import("svelte").Component<$$ComponentProps, {}, "">;
+type SortIcon = ReturnType<typeof SortIcon>;
 export default SortIcon;

package/dist/shared/tanstack/index.d.ts

@@ -0,0 +1,3 @@
+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/dist/shared/tanstack/index.js

@@ -0,0 +1,3 @@
+export { createSvelteTable } from "./table.svelte.js";
+export { createSvelteVirtualizer } from "./virtual.svelte.js";
+export { createColumnHelper, getCoreRowModel, getSortedRowModel, getFilteredRowModel } from "@tanstack/table-core";

package/dist/shared/tanstack/table.svelte.d.ts

@@ -0,0 +1,26 @@
+import { type RowData, type TableOptions } 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 declare function mergeObjects(...sources: any): any;
+/**
+ * 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 declare function createSvelteTable<TData extends RowData>(options: TableOptions<TData>): {
+    getRowModel: () => import("@tanstack/table-core").RowModel<TData>;
+    getHeaderGroups: () => import("@tanstack/table-core").HeaderGroup<TData>[];
+    getColumn: (id: string) => import("@tanstack/table-core").Column<TData, unknown> | undefined;
+};

package/dist/shared/tanstack/table.svelte.js

@@ -0,0 +1,102 @@
+import { createTable } 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) {
+    const target = {};
+    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(options) {
+    const resolvedOptions = mergeObjects({
+        state: {},
+        onStateChange() { },
+        renderFallbackValue: null,
+        mergeOptions: (defaultOptions, opts) => {
+            return mergeObjects(defaultOptions, opts);
+        }
+    }, options);
+    const table = createTable(resolvedOptions);
+    let state = $state(table.initialState);
+    let version = $state(0);
+    function updateOptions() {
+        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) => {
+                    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) => {
+            void version;
+            return table.getColumn(id);
+        }
+    };
+}

package/dist/shared/tanstack/virtual.svelte.d.ts

@@ -0,0 +1,14 @@
+import { Virtualizer, type PartialKeys, type VirtualizerOptions } from "@tanstack/virtual-core";
+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 declare 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;
+};

package/dist/shared/tanstack/virtual.svelte.js

@@ -0,0 +1,76 @@
+import { Virtualizer, elementScroll, observeElementOffset, observeElementRect } from "@tanstack/virtual-core";
+import { untrack } from "svelte";
+/**
+ * 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(options) {
+    let version = $state(0);
+    const virtualizer = new Virtualizer({
+        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/dist/shared/types.d.ts

@@ -17,3 +17,5 @@ export type ElementRefs = Record<string, {
     input: null | HTMLTextAreaElement;
 }>;
 export type DataBinding = Record<string, TableCell>;
+export type SortDirection = "asc" | "desc";
+export type FilterDatatype = "string" | "number";

package/dist/shared/utils/filter.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Custom filter function for TanStack Table that handles Gradio's
+ * { dtype, filter, value } column filter format.
+ */
+export declare function gradio_filter_fn(row: any, columnId: string, filterValue: any): boolean;

package/dist/shared/utils/filter.js

@@ -0,0 +1,62 @@
+/**
+ * Custom filter function for TanStack Table that handles Gradio's
+ * { dtype, filter, value } column filter format.
+ */
+export function gradio_filter_fn(row, columnId, filterValue) {
+    const { dtype, filter, value: fval } = filterValue;
+    const cell_value = String(row.getValue(columnId) ?? "");
+    const compare_val = fval ?? "";
+    if (dtype === "number") {
+        const num = parseFloat(cell_value);
+        const target = parseFloat(compare_val);
+        if (isNaN(num) || isNaN(target)) {
+            if (filter === "Is empty")
+                return cell_value.trim() === "";
+            if (filter === "Is not empty")
+                return cell_value.trim() !== "";
+            return true;
+        }
+        switch (filter) {
+            case "=":
+                return num === target;
+            case "≠":
+                return num !== target;
+            case ">":
+                return num > target;
+            case "<":
+                return num < target;
+            case "≥":
+                return num >= target;
+            case "≤":
+                return num <= target;
+            case "Is empty":
+                return cell_value.trim() === "";
+            case "Is not empty":
+                return cell_value.trim() !== "";
+            default:
+                return true;
+        }
+    }
+    const lower = cell_value.toLowerCase();
+    const target_lower = compare_val.toLowerCase();
+    switch (filter) {
+        case "Contains":
+            return lower.includes(target_lower);
+        case "Does not contain":
+            return !lower.includes(target_lower);
+        case "Starts with":
+            return lower.startsWith(target_lower);
+        case "Ends with":
+            return lower.endsWith(target_lower);
+        case "Is":
+            return lower === target_lower;
+        case "Is not":
+            return lower !== target_lower;
+        case "Is empty":
+            return cell_value.trim() === "";
+        case "Is not empty":
+            return cell_value.trim() !== "";
+        default:
+            return true;
+    }
+}

package/dist/shared/utils/selection_utils.js

@@ -20,7 +20,7 @@ export function get_range_selection(start, end) {
     const min_col = Math.min(start_col, end_col);
     const max_col = Math.max(start_col, end_col);
     const cells = [];
-    // Add the start cell as the "anchor" cell so that when
+    // add the start cell as the "anchor" cell so that when
     // we press shift+arrow keys, the selection will always
     // include the anchor cell.
     cells.push(start);

package/dist/shared/utils/table_utils.d.ts

@@ -1,19 +1,6 @@
-import type { CellValue, Headers, HeadersWithIDs, TableCell, TableData } from "../types";
-import type { SortDirection } from "./sort_utils";
-import type { FilterDatatype } from "./filter_utils";
+import type { CellValue, Headers, HeadersWithIDs, TableData } from "../types";
 export declare function make_cell_id(row: number, col: number): string;
 export declare function make_header_id(col: number): string;
-export declare function get_max(data: TableData): TableCell[];
-export declare function sort_table_data(data: TableData, display_value: string[][] | null, styling: string[][] | null, sort_columns: {
-    col: number;
-    direction: SortDirection;
-}[]): void;
-export declare function filter_table_data(data: TableData, display_value: string[][] | null, styling: string[][] | null, filter_columns: {
-    col: number;
-    datatype: FilterDatatype;
-    filter: string;
-    value: string;
-}[], original_data?: TableData, original_display_value?: string[][] | null, original_styling?: string[][] | null): void;
 export declare function copy_table_data(data: TableData, selected_cells: [number, number][] | null): Promise<void>;
 export declare function guess_delimiter(text: string, possibleDelimiters: string[]): string[];
 export declare function data_uri_to_blob(data_uri: string): Blob;

package/dist/shared/utils/table_utils.js

@@ -1,5 +1,3 @@
-import { sort_data } from "./sort_utils";
-import { filter_data } from "./filter_utils";
 import { dsvFormat } from "d3-dsv";
 export function make_cell_id(row, col) {
     return `cell-${row}-${col}`;
@@ -7,64 +5,6 @@ export function make_cell_id(row, col) {
 export function make_header_id(col) {
     return `header-${col}`;
 }
-export function get_max(data) {
-    if (!data || !data.length)
-        return [];
-    let max = data[0].slice();
-    for (let i = 0; i < data.length; i++) {
-        for (let j = 0; j < data[i].length; j++) {
-            if (`${max[j].value}`.length < `${data[i][j].value}`.length) {
-                max[j] = data[i][j];
-            }
-        }
-    }
-    return max;
-}
-export function sort_table_data(data, display_value, styling, sort_columns) {
-    if (!sort_columns.length)
-        return;
-    if (!data || !data.length)
-        return;
-    const indices = sort_data(data, sort_columns);
-    const new_data = indices.map((i) => data[i]);
-    data.splice(0, data.length, ...new_data);
-    if (display_value) {
-        const new_display = indices.map((i) => display_value[i]);
-        display_value.splice(0, display_value.length, ...new_display);
-    }
-    if (styling) {
-        const new_styling = indices.map((i) => styling[i]);
-        styling.splice(0, styling.length, ...new_styling);
-    }
-}
-export function filter_table_data(data, display_value, styling, filter_columns, original_data, original_display_value, original_styling) {
-    const base_data = original_data ?? data;
-    const base_display_value = original_display_value ?? display_value;
-    const base_styling = original_styling ?? styling;
-    if (!filter_columns.length) {
-        data.splice(0, data.length, ...base_data.map((row) => [...row]));
-        if (display_value && base_display_value) {
-            display_value.splice(0, display_value.length, ...base_display_value.map((row) => [...row]));
-        }
-        if (styling && base_styling) {
-            styling.splice(0, styling.length, ...base_styling.map((row) => [...row]));
-        }
-        return;
-    }
-    if (!data || !data.length)
-        return;
-    const indices = filter_data(base_data, filter_columns);
-    const new_data = indices.map((i) => base_data[i]);
-    data.splice(0, data.length, ...new_data);
-    if (display_value && base_display_value) {
-        const new_display = indices.map((i) => base_display_value[i]);
-        display_value.splice(0, display_value.length, ...new_display);
-    }
-    if (styling && base_styling) {
-        const new_styling = indices.map((i) => base_styling[i]);
-        styling.splice(0, styling.length, ...new_styling);
-    }
-}
 export async function copy_table_data(data, selected_cells) {
     if (!data || !data.length)
         return;
@@ -93,7 +33,6 @@ export async function copy_table_data(data, selected_cells) {
         throw new Error("Failed to copy to clipboard: " + err.message);
     }
 }
-// File Import/Export
 export function guess_delimiter(text, possibleDelimiters) {
     return possibleDelimiters.filter(weedOut);
     function weedOut(delimiter) {

package/dist/standalone/Index.svelte

@@ -5,7 +5,52 @@
 	import type { I18nFormatter } from "@gradio/utils";
 	import { default_i18n } from "./default_i18n";
 
-	export let i18n: I18nFormatter | undefined = undefined;
+	let {
+		i18n = undefined,
+		value = $bindable({
+			data: [["", "", ""]],
+			headers: ["1", "2", "3"],
+			metadata: null
+		}),
+		datatype = "str",
+		interactive = true,
+		show_row_numbers = false,
+		max_height = 500,
+		show_search = "none",
+		wrap = false,
+		line_breaks = true,
+		column_widths = [],
+		max_chars = undefined,
+		pinned_columns = 0,
+		static_columns = [],
+		fullscreen = $bindable(false),
+		label = null,
+		show_label = true,
+		latex_delimiters = [],
+		col_count = undefined,
+		row_count = undefined
+	}: {
+		i18n?: I18nFormatter | undefined;
+		value?: DataframeValue;
+		datatype?: Datatype | Datatype[];
+		interactive?: boolean;
+		show_row_numbers?: boolean;
+		max_height?: number;
+		show_search?: "none" | "search" | "filter";
+		wrap?: boolean;
+		line_breaks?: boolean;
+		column_widths?: string[];
+		max_chars?: number | undefined;
+		pinned_columns?: number;
+		static_columns?: (string | number)[];
+		fullscreen?: boolean;
+		label?: string | null;
+		show_label?: boolean;
+		latex_delimiters?: any[];
+		col_count?: [number, "fixed" | "dynamic"] | undefined;
+		row_count?: [number, "fixed" | "dynamic"] | undefined;
+	} = $props();
+
 	const i18n_fn = (key: string | null | undefined): string => {
 		if (!key) return "";
 		if (typeof i18n === "function") return (i18n as any)(key);
@@ -14,31 +59,7 @@
 		return default_i18n[key] ?? key;
 	};
 
-	export let value: DataframeValue = {
-		data: [["", "", ""]],
-		headers: ["1", "2", "3"],
-		metadata: null
-	};
-	export let datatype: Datatype | Datatype[] = "str";
-	export let interactive = true;
-	export let show_row_numbers = false;
-	export let max_height = 500;
-	export let show_search: "none" | "search" | "filter" = "none";
-	export let wrap = false;
-	export let line_breaks = true;
-	export let column_widths: string[] = [];
-	export let max_chars: number | undefined = undefined;
-	export let pinned_columns = 0;
-	export let static_columns: (string | number)[] = [];
-	export let fullscreen = false;
-	export let label: string | null = null;
-	export let show_label = true;
-	export let latex_delimiters: any[] = [];
-	export let col_count: [number, "fixed" | "dynamic"] | undefined = undefined;
-	export let row_count: [number, "fixed" | "dynamic"] | undefined = undefined;
-
-	// mirrors default row count and column count logic in dataframe.py
-	$: resolved_row_count = (() => {
+	let resolved_row_count = $derived.by(() => {
 		if (
 			row_count &&
 			Array.isArray(row_count) &&
@@ -49,8 +70,9 @@
 			return row_count as [number, "fixed" | "dynamic"];
 		}
 		return [1, "dynamic"] as [number, "fixed" | "dynamic"];
-	})();
-	$: resolved_col_count = (() => {
+	});
+
+	let resolved_col_count_base = $derived.by(() => {
 		if (
 			col_count &&
 			Array.isArray(col_count) &&
@@ -65,14 +87,21 @@
 				? value.headers.length
 				: 3;
 		return [headerLength, "dynamic"] as [number, "fixed" | "dynamic"];
-	})();
-	$: if (
-		static_columns &&
-		static_columns.length > 0 &&
-		resolved_col_count[1] !== "fixed"
-	) {
-		resolved_col_count = [resolved_col_count[0], "fixed"];
-	}
+	});
+
+	let resolved_col_count = $derived.by(() => {
+		if (
+			static_columns &&
+			static_columns.length > 0 &&
+			resolved_col_count_base[1] !== "fixed"
+		) {
+			return [resolved_col_count_base[0], "fixed"] as [
+				number,
+				"fixed" | "dynamic"
+			];
+		}
+		return resolved_col_count_base;
+	});
 
 	let root = "";
 
@@ -91,8 +120,8 @@
 	<Table
 		values={value.data}
 		headers={value.headers}
-		display_value={value?.metadata?.display_value}
-		styling={value?.metadata?.styling}
+		display_value={value?.metadata?.display_value ?? null}
+		styling={value?.metadata?.styling ?? null}
 		{datatype}
 		editable={interactive}
 		{show_row_numbers}
@@ -113,15 +142,11 @@
 		row_count={resolved_row_count}
 		{root}
 		i18n={i18n_fn}
-		on:change={(e) => {
-			value.data = e.detail.data;
-			value.headers = e.detail.headers;
+		onchange={(detail) => {
+			value.data = detail.data;
+			value.headers = detail.headers;
 		}}
-		on:blur
-		on:keydown
-		on:input
-		on:select
-		on:fullscreen={(e) => (fullscreen = e.detail)}
+		onfullscreen={() => (fullscreen = !fullscreen)}
 		upload={async () => null}
 		stream_handler={() => new EventSource("about:blank")}
 	/>

package/dist/standalone/Index.svelte.d.ts

@@ -1,19 +1,6 @@
 import type { Datatype, DataframeValue } from "../shared/utils/utils";
 import type { I18nFormatter } from "@gradio/utils";
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const Index: $$__sveltets_2_IsomorphicComponent<{
+type $$ComponentProps = {
     i18n?: I18nFormatter | undefined;
     value?: DataframeValue;
     datatype?: Datatype | Datatype[];
@@ -33,13 +20,7 @@ declare const Index: $$__sveltets_2_IsomorphicComponent<{
     latex_delimiters?: any[];
     col_count?: [number, "fixed" | "dynamic"] | undefined;
     row_count?: [number, "fixed" | "dynamic"] | undefined;
-}, {
-    blur: CustomEvent<any>;
-    keydown: CustomEvent<any>;
-    input: CustomEvent<undefined>;
-    select: CustomEvent<import("@gradio/utils").SelectData>;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type Index = InstanceType<typeof Index>;
+};
+declare const Index: import("svelte").Component<$$ComponentProps, {}, "value" | "fullscreen">;
+type Index = ReturnType<typeof Index>;
 export default Index;