@gradio/dataframe 0.23.0 → 0.23.2

package/dist/shared/Table.svelte

@@ -13,6 +13,7 @@
 	import { tick, onMount } from "svelte";
 	import { Upload } from "@gradio/upload";
 
+	import { MarkdownCode } from "@gradio/markdown-code";
 	import HeaderCell from "./HeaderCell.svelte";
 	import DataCell from "./DataCell.svelte";
 	import EmptyRowButton from "./EmptyRowButton.svelte";
@@ -147,7 +148,7 @@
 			id: `col_${j}`,
 			accessorKey: `col_${j}`,
 			header: header_value,
-			size: column_widths[j] ? parseInt(column_widths[j]) || 150 : 150,
+			size: 150,
 			minSize: 45,
 			filterFn: gradio_filter_fn,
 			meta: {
@@ -263,6 +264,82 @@
 		return Array.isArray(datatype) ? (datatype[col] ?? "str") : datatype;
 	}
 
+	type SizingEntry = { val: string; col_idx: number; dtype: Datatype };
+
+	// heading multipliers for markdown/html block elements that render
+	// at a larger font size than body text.
+	const HEADING_MULT = [2.2, 1.7, 1.4, 1.2, 1.1, 1.05];
+
+	function md_visual_length(s: string): number {
+		const heading = s.match(/^\s*(#{1,6})\s+(.+)/);
+		if (heading) {
+			const lvl = heading[1].length;
+			const text = heading[2].replace(/[*_`[\]()]/g, "");
+			return text.length * HEADING_MULT[lvl - 1];
+		}
+		return s.replace(/[*_`#[\]()]/g, "").length;
+	}
+
+	function html_visual_length(s: string): number {
+		const stripped = s.replace(/<[^>]+>/g, "").length;
+		const h = s.match(/<h([1-6])\b/i);
+		if (h) return stripped * HEADING_MULT[parseInt(h[1]) - 1];
+		return stripped;
+	}
+
+	// mirror EditableCell.truncate_text so the sizing row reserves width
+	// for the truncated ("…") string, not the full source
+	function apply_truncation(s: string, dtype: Datatype): string {
+		if (
+			max_chars &&
+			max_chars > 0 &&
+			dtype !== "image" &&
+			s.length > max_chars
+		) {
+			return s.slice(0, max_chars) + "...";
+		}
+		return s;
+	}
+
+	// find the widest rendered value per visible column for the sizing row
+	function compute_sizing_row(): SizingEntry[] {
+		const headers = header_groups[0]?.headers ?? [];
+		return headers.map((header) => {
+			const col_idx = (header.column.columnDef.meta as any)?.colIndex ?? 0;
+			const dtype = get_dtype(col_idx);
+			const accessor = `col_${col_idx}`;
+
+			if (dtype === "bool") {
+				return { val: "false", col_idx, dtype };
+			}
+
+			const visual_len =
+				dtype === "markdown"
+					? md_visual_length
+					: dtype === "html"
+						? html_visual_length
+						: (s: string) => s.length;
+
+			let best = "";
+			let best_len = -1;
+			for (const r of rows) {
+				const row_idx = r.original._index;
+				const rendered = editable
+					? r.original[accessor]
+					: (display_value?.[row_idx]?.[col_idx] ??
+						values?.[row_idx]?.[col_idx]);
+				if (rendered == null) continue;
+				const v = apply_truncation(String(rendered), dtype);
+				const len = visual_len(v);
+				if (len > best_len) {
+					best_len = len;
+					best = v;
+				}
+			}
+			return { val: best, col_idx, dtype };
+		});
+	}
+
 	function get_display_value(row: number, col: number): string {
 		if (display_value?.[row]?.[col] !== undefined)
 			return display_value[row][col];
@@ -291,7 +368,13 @@
 		row: number,
 		col: number
 	): void {
-		event.preventDefault();
+		const col_is_static =
+			!editable ||
+			static_columns.includes(col) ||
+			static_columns.includes(resolved_headers[col]);
+		if (!col_is_static) {
+			event.preventDefault();
+		}
 		event.stopPropagation();
 
 		const coord: CellCoordinate = [row, col];
@@ -332,7 +415,9 @@
 			col_value: values?.map((r) => r[col]) ?? []
 		} as any);
 
-		tick().then(() => parent?.focus());
+		if (!col_is_static) {
+			tick().then(() => parent?.focus());
+		}
 	}
 
 	function handle_cell_dblclick(
@@ -340,15 +425,14 @@
 		row: number,
 		col: number
 	): void {
-		event.preventDefault();
-		event.stopPropagation();
-		if (!editable) return;
 		const col_is_static =
+			!editable ||
 			static_columns.includes(col) ||
 			static_columns.includes(resolved_headers[col]);
-		if (!col_is_static) {
-			editing = [row, col];
-		}
+		if (col_is_static) return;
+		event.preventDefault();
+		event.stopPropagation();
+		editing = [row, col];
 	}
 
 	function handle_blur(detail: {
@@ -529,14 +613,29 @@
 		active_cell_menu = null;
 	}
 
-	// function handle_select_all(col: number, checked: boolean): void {
-	// 	values = values.map((row) => {
-	// 		const new_row = [...row];
-	// 		new_row[col] = checked;
-	// 		return new_row;
-	// 	});
-	// 	push_change(values);
-	// }
+	function handle_select_all(col: number, checked: boolean): void {
+		const new_values = values.map((row) => {
+			const new_row = [...row];
+			new_row[col] = checked;
+			return new_row;
+		});
+		values = new_values;
+		push_change(new_values);
+	}
+
+	function get_select_all_state(
+		col: number
+	): "checked" | "unchecked" | "indeterminate" {
+		if (!values.length) return "unchecked";
+		let true_count = 0;
+		for (const row of values) {
+			const v = row[col];
+			if (v === true || v === "true" || v === "True") true_count++;
+		}
+		if (true_count === 0) return "unchecked";
+		if (true_count === values.length) return "checked";
+		return "indeterminate";
+	}
 
 	function commit_filter(): void {
 		if (!global_filter || show_search !== "filter") return;
@@ -581,13 +680,22 @@
 		if (selected) {
 			const [row, col] = selected;
 
+			if (
+				editing &&
+				(e.key === "ArrowUp" ||
+					e.key === "ArrowDown" ||
+					e.key === "ArrowLeft" ||
+					e.key === "ArrowRight")
+			) {
+				return;
+			}
+
 			switch (e.key) {
 				case "ArrowUp":
 					e.preventDefault();
 					if (row > 0) {
 						selected = [row - 1, col];
 						selected_cells = [selected];
-						editing = false;
 						virtualizer.instance.scrollToIndex(row - 1, { align: "auto" });
 					}
 					break;
@@ -596,7 +704,6 @@
 					if (row < num_rows - 1) {
 						selected = [row + 1, col];
 						selected_cells = [selected];
-						editing = false;
 						virtualizer.instance.scrollToIndex(row + 1, { align: "auto" });
 					}
 					break;
@@ -605,7 +712,6 @@
 					if (col > 0) {
 						selected = [row, col - 1];
 						selected_cells = [selected];
-						editing = false;
 					}
 					break;
 				case "ArrowRight":
@@ -613,7 +719,6 @@
 					if (col < num_cols - 1) {
 						selected = [row, col + 1];
 						selected_cells = [selected];
-						editing = false;
 					}
 					break;
 				case "Tab": {
@@ -758,6 +863,7 @@
 
 	let header_row_el: HTMLTableRowElement;
 	let header_table_el: HTMLTableElement;
+	let viewport_width = $state(0);
 
 	const measurement = create_column_measurement({
 		header_row_el: () => header_row_el,
@@ -766,6 +872,7 @@
 		row_data: () => row_data,
 		show_row_numbers: () => show_row_numbers,
 		column_widths: () => column_widths,
+		viewport_width: () => viewport_width,
 		on_resize: undefined
 	});
 
@@ -828,11 +935,11 @@
 		bind:this={parent}
 		class="table-wrap"
 		class:dragging={is_dragging}
-		class:no-wrap={!wrap}
 		class:menu-open={active_cell_menu || active_header_menu}
 		onkeydown={handle_keydown}
 		role="grid"
 		tabindex="0"
+		style="--df-max-col-width: {viewport_width}px;"
 	>
 		<Upload
 			{upload}
@@ -850,6 +957,7 @@
 				class="virtual-table-viewport"
 				class:disable-scroll={disable_scroll}
 				bind:this={scroll_container}
+				bind:clientWidth={viewport_width}
 				onscroll={handle_scroll}
 				style="max-height: {max_height}px;"
 				role="grid"
@@ -875,6 +983,8 @@
 										is_selected={selected_header === col_idx}
 										is_static={!!(header.column.columnDef.meta as any)
 											?.isStatic}
+										is_bool={get_dtype(col_idx) === "bool"}
+										select_all_state={get_select_all_state(col_idx)}
 										sort_direction={get_sort_info(col_idx).direction}
 										sort_priority={get_sort_info(col_idx).priority}
 										multi_sort={sorting.length > 1}
@@ -886,36 +996,39 @@
 										{editable}
 										{max_chars}
 										{i18n}
+										wrap_text={wrap}
 										onclick={handle_header_click}
 										on_menu_click={toggle_header_menu}
 										on_end_edit={end_header_edit}
+										on_select_all={handle_select_all}
 									/>
 								{/each}
 							{/each}
 						</tr>
 					</thead>
-					<!-- hidden sizing row: lets table-layout:auto consider body content widths too -->
+
 					<tbody class="sizing-body" aria-hidden="true">
 						{#if rows.length > 0}
-							{@const sizing_row = rows.reduce((widest, row) => {
-								const cells = row.getVisibleCells();
-								cells.forEach((cell, i) => {
-									const val = String(cell.getValue() ?? "");
-									if (!widest[i] || val.length > widest[i].length) {
-										widest[i] = val;
-									}
-								});
-								return widest;
-							}, [] as string[])}
+							{@const sizing_row = compute_sizing_row()}
 							<tr>
 								{#if show_row_numbers}
 									<td class="row-number-cell">{rows.length}</td>
 								{/if}
-								{#each sizing_row as val, ci}
-									{@const dtype = get_dtype(ci)}
+								{#each sizing_row as entry (entry.col_idx)}
 									<td
 										><div class="cell-wrap">
-											{#if dtype === "html" || dtype === "markdown"}{@html val}{:else}{val}{/if}
+											{#if entry.dtype === "markdown"}
+												<MarkdownCode
+													message={entry.val}
+													{latex_delimiters}
+													{line_breaks}
+													chatbot={false}
+												/>
+											{:else if entry.dtype === "html"}
+												{@html entry.val}
+											{:else}
+												{entry.val}
+											{/if}
 										</div></td
 									>
 								{/each}
@@ -981,14 +1094,19 @@
 											editing[1] === col_idx
 										)}
 										is_flash={copy_flash && is_sel}
-										is_static={!!(cell.column.columnDef.meta as any)?.isStatic}
+										is_static={!editable ||
+											!!(cell.column.columnDef.meta as any)?.isStatic}
 										show_menu_button={editable &&
+											!(cell.column.columnDef.meta as any)?.isStatic &&
 											selected_cells.length === 1 &&
 											selected_cells[0][0] === row_idx &&
 											selected_cells[0][1] === col_idx}
 										show_selection_buttons={selected_cells.length === 1 &&
 											selected_cells[0][0] === row_idx &&
 											selected_cells[0][1] === col_idx}
+										is_solo={selected_cells.length === 1 &&
+											selected_cells[0][0] === row_idx &&
+											selected_cells[0][1] === col_idx}
 										is_first_column={ci === 0 && !show_row_numbers}
 										{latex_delimiters}
 										{line_breaks}
@@ -1002,6 +1120,10 @@
 										ondblclick={(e) =>
 											handle_cell_dblclick(e, row_idx, col_idx)}
 										oncontextmenu={(e) => {
+											const is_static_cell = !!(
+												cell.column.columnDef.meta as any
+											)?.isStatic;
+											if (!editable || is_static_cell) return;
 											e.preventDefault();
 											toggle_cell_menu(e, row_idx, col_idx);
 										}}
@@ -1109,7 +1231,7 @@
 		gap: var(--size-2);
 		position: relative;
 		max-width: 100%;
-		overflow: hidden;
+		overflow-x: hidden;
 	}
 
 	.table-container.fullscreen {
@@ -1229,6 +1351,12 @@
 		padding: var(--size-2);
 		border: none;
 		white-space: nowrap;
+		max-width: var(--df-max-col-width);
+		overflow: hidden;
+	}
+
+	.header-table :global(.header-cell) {
+		max-width: var(--df-max-col-width);
 	}
 
 	/* Virtual body */
@@ -1304,18 +1432,6 @@
 		justify-content: center;
 	}
 
-	.no-wrap {
-		white-space: nowrap;
-	}
-
-	div:not(.no-wrap) :global(td) {
-		overflow-wrap: anywhere;
-	}
-
-	div.no-wrap :global(td) {
-		overflow-x: hidden;
-	}
-
 	.header-row {
 		display: flex;
 		justify-content: flex-end;

package/dist/shared/column_measurement.svelte.d.ts

@@ -9,6 +9,7 @@ export declare function create_column_measurement(opts: {
     row_data: () => any[];
     show_row_numbers: () => boolean;
     column_widths: () => string[];
+    viewport_width: () => number;
     on_resize?: () => void;
 }): {
     readonly col_widths: number[];

package/dist/shared/column_measurement.svelte.js

@@ -8,20 +8,87 @@ export function create_column_measurement(opts) {
     let header_height = $state(0);
     // use offsets (not just widths) avoids accumulated subpixel rounding errors
     let col_lefts = $state([]);
+    function resolve_user_width(raw, vw) {
+        if (!raw || raw === "auto")
+            return null;
+        if (raw.endsWith("%")) {
+            const pct = parseFloat(raw);
+            if (!isFinite(pct) || vw <= 0)
+                return null;
+            return (pct / 100) * vw;
+        }
+        if (raw.endsWith("px")) {
+            const n = parseFloat(raw);
+            return isFinite(n) ? n : null;
+        }
+        const n = parseFloat(raw);
+        return isFinite(n) ? n : null;
+    }
+    function clear_pin(el) {
+        if (el.style.width)
+            el.style.width = "";
+        if (el.style.minWidth)
+            el.style.minWidth = "";
+        if (el.style.maxWidth)
+            el.style.maxWidth = "";
+    }
+    function pin(el, target) {
+        if (el.style.width !== target)
+            el.style.width = target;
+        if (el.style.minWidth !== target)
+            el.style.minWidth = target;
+        if (el.style.maxWidth !== target)
+            el.style.maxWidth = target;
+    }
     function measure() {
         const current_row_el = opts.header_row_el();
         const current_table_el = opts.header_table_el();
-        if (!current_row_el)
+        if (!current_row_el || !current_table_el)
             return;
-        const cells = current_row_el.querySelectorAll(".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;
+        const cells = Array.from(current_row_el.querySelectorAll(".header-cell"));
+        // sizing-body mirrors the data columns to give auto-layout a read on
+        // body-content widths. we also pin its cells so user widths are
+        // honored exactly (otherwise the sizing row's nowrap min-content
+        // forces the column wider than the user asked for).
+        const sizing_tds_all = Array.from(current_table_el.querySelectorAll(".sizing-body > tr > td"));
+        const sizing_data_tds = opts.show_row_numbers()
+            ? sizing_tds_all.slice(1)
+            : sizing_tds_all;
+        cells.forEach(clear_pin);
+        sizing_data_tds.forEach(clear_pin);
+        current_table_el.style.width = "auto";
+        current_table_el.getBoundingClientRect(); // force layout flush
+        const vw = opts.viewport_width();
+        const user_widths = opts.column_widths();
+        const next_widths = cells.map((cell, i) => {
+            const resolved = resolve_user_width(user_widths[i], vw);
+            if (resolved != null)
+                return resolved;
+            // cap auto-sized columns at the viewport so a single column
+            // can never be wider than the visible scroll area
+            const measured = cell.getBoundingClientRect().width;
+            return vw > 0 ? Math.min(measured, vw) : measured;
+        });
+        cells.forEach((cell, i) => pin(cell, `${next_widths[i]}px`));
+        sizing_data_tds.forEach((cell, i) => {
+            if (next_widths[i] == null)
+                return;
+            pin(cell, `${next_widths[i]}px`);
+        });
+        // set the table width to the sum of columns so auto-layout
+        // has no extra space to redistribute
+        let table_w = next_widths.reduce((a, b) => a + b, 0);
+        if (opts.show_row_numbers()) {
+            const rn = current_row_el.querySelector(".row-number-header");
+            if (rn)
+                table_w += rn.getBoundingClientRect().width;
         }
+        current_table_el.style.width = `${table_w}px`;
+        const after_rect = current_table_el.getBoundingClientRect();
+        col_lefts = cells.map((c) => c.getBoundingClientRect().left - after_rect.left);
+        col_widths = next_widths;
+        total_header_width = after_rect.width;
+        header_height = after_rect.height;
         opts.on_resize?.();
     }
     $effect(() => {
@@ -40,6 +107,11 @@ export function create_column_measurement(opts) {
         cells.forEach((cell) => ro.observe(cell));
         return () => ro.disconnect();
     });
+    $effect(() => {
+        opts.viewport_width();
+        opts.column_widths();
+        measure();
+    });
     let row_num_width = $derived.by(() => {
         if (!opts.show_row_numbers())
             return 0;
@@ -53,10 +125,11 @@ export function create_column_measurement(opts) {
         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;";
+        const resolved = resolve_user_width(opts.column_widths()[index], opts.viewport_width());
+        if (resolved != null) {
+            return `width: ${resolved}px; flex: 0 0 ${resolved}px;`;
+        }
+        return "width: 150px; flex: 0 0 150px;";
     }
     return {
         get col_widths() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gradio/dataframe",
-  "version": "0.23.0",
+  "version": "0.23.2",
   "description": "Gradio UI packages",
   "type": "module",
   "author": "",
@@ -15,15 +15,15 @@
     "dequal": "^2.0.3",
     "@tanstack/table-core": "^8.21.3",
     "@tanstack/virtual-core": "^3.13.6",
-    "@gradio/atoms": "^0.23.0",
+    "@gradio/atoms": "^0.24.0",
+    "@gradio/checkbox": "^0.7.0",
+    "@gradio/client": "^2.2.0",
     "@gradio/button": "^0.6.6",
-    "@gradio/checkbox": "^0.6.6",
-    "@gradio/client": "^2.1.0",
     "@gradio/icons": "^0.15.1",
-    "@gradio/statustracker": "^0.13.1",
-    "@gradio/upload": "^0.17.8",
+    "@gradio/markdown-code": "^0.7.0",
+    "@gradio/statustracker": "^0.14.1",
     "@gradio/utils": "^0.12.2",
-    "@gradio/markdown-code": "^0.6.1"
+    "@gradio/upload": "^0.17.9"
   },
   "exports": {
     ".": {

package/shared/BooleanCell.svelte

@@ -34,7 +34,6 @@
 		justify-content: center;
 		width: min-content;
 		height: var(--size-full);
-		margin: 0 auto;
 	}
 
 	.bool-cell :global(input:disabled) {