@gradio/dataframe 0.23.1 → 0.23.3

package/dist/shared/HeaderCell.svelte

@@ -5,6 +5,7 @@
 	import FilterIcon from "./icons/FilterIcon.svelte";
 	import SortButtonUp from "./icons/SortButtonUp.svelte";
 	import SortButtonDown from "./icons/SortButtonDown.svelte";
+	import { BaseCheckbox } from "@gradio/checkbox";
 	import type { I18nFormatter } from "js/core/src/gradio_helper";
 	import type { SortDirection } from "./types";
 
@@ -14,6 +15,8 @@
 		is_editing = false,
 		is_selected = false,
 		is_static = false,
+		is_bool = false,
+		select_all_state = "unchecked",
 		sort_direction = null,
 		sort_priority = null,
 		multi_sort = false,
@@ -25,15 +28,19 @@
 		editable = true,
 		max_chars = undefined,
 		i18n,
+		wrap_text = false,
 		onclick,
 		on_menu_click,
-		on_end_edit
+		on_end_edit,
+		on_select_all
 	}: {
 		value: string;
 		col_idx: number;
 		is_editing?: boolean;
 		is_selected?: boolean;
 		is_static?: boolean;
+		is_bool?: boolean;
+		select_all_state?: "checked" | "unchecked" | "indeterminate";
 		sort_direction?: SortDirection | null;
 		sort_priority?: number | null;
 		multi_sort?: boolean;
@@ -45,10 +52,16 @@
 		editable?: boolean;
 		max_chars?: number | undefined;
 		i18n: I18nFormatter;
+		wrap_text?: boolean;
 		onclick: (event: MouseEvent, col: number) => void;
 		on_menu_click: (event: MouseEvent, col: number) => void;
 		on_end_edit: (key: string) => void;
+		on_select_all?: (col: number, checked: boolean) => void;
 	} = $props();
+
+	let show_select_all = $derived(
+		is_bool && editable && !is_static && !!on_select_all
+	);
 </script>
 
 <th
@@ -57,6 +70,7 @@
 	class:sorted={sort_direction !== null}
 	class:filtered={is_filtered}
 	class:first-column={is_first_column}
+	data-heading={col_idx}
 	onclick={(e) => onclick(e, col_idx)}
 	onmousedown={(e) => {
 		e.preventDefault();
@@ -66,6 +80,25 @@
 >
 	<div class="cell-wrap">
 		<div class="header-content">
+			{#if show_select_all}
+				<div
+					class="select-all-checkbox"
+					role="button"
+					tabindex="-1"
+					onclick={(e) => e.stopPropagation()}
+					onmousedown={(e) => e.stopPropagation()}
+					onkeydown={(e) => e.stopPropagation()}
+				>
+					<BaseCheckbox
+						value={select_all_state === "checked"}
+						indeterminate={select_all_state === "indeterminate"}
+						label={`Toggle all: ${value}`}
+						interactive={true}
+						on_select={() =>
+							on_select_all?.(col_idx, select_all_state !== "checked")}
+					/>
+				</div>
+			{/if}
 			<EditableCell
 				{value}
 				{latex_delimiters}
@@ -81,7 +114,9 @@
 				{is_static}
 				{i18n}
 				{max_chars}
+				{wrap_text}
 				coords={[col_idx, 0]}
+				pad_left={show_select_all ? true : false}
 			/>
 		</div>
 		{#if sort_direction || is_filtered || is_static}
@@ -129,6 +164,13 @@
 		padding: 0;
 		background: var(--table-even-background-fill) !important;
 		font-weight: var(--weight-bold, 700);
+		outline: none;
+		box-shadow:
+			inset 1px 0 0 var(--border-color-primary),
+			inset 0 0 0 1px var(--ring-color);
+		padding: 0;
+		overflow: visible;
+		box-sizing: border-box;
 	}
 
 	.header-cell.first-column {
@@ -142,10 +184,14 @@
 
 	.header-cell.focus {
 		--ring-color: var(--color-accent);
+		--sel-top: inset 0 2px 0 0 var(--ring-color);
+		--sel-bottom: inset 0 -2px 0 0 var(--ring-color);
+		--sel-left: inset 2px 0 0 0 var(--ring-color);
+		--sel-right: inset -2px 0 0 0 var(--ring-color);
 		box-shadow:
-			inset 1px 0 0 var(--border-color-primary),
-			inset 0 0 0 2px var(--ring-color);
-		z-index: 4;
+			var(--sel-top), var(--sel-bottom), var(--sel-left), var(--sel-right);
+		z-index: 2;
+		position: relative;
 	}
 
 	.header-cell.focus.first-column {
@@ -155,7 +201,7 @@
 	.header-content {
 		display: flex;
 		align-items: center;
-		gap: var(--size-1);
+		gap: var(--size-3);
 		overflow: hidden;
 		min-width: 0;
 	}
@@ -215,4 +261,20 @@
 		overflow: visible;
 		min-width: 0;
 	}
+
+	.select-all-checkbox {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		flex-shrink: 0;
+		width: var(--size-4);
+	}
+
+	.select-all-checkbox :global(label) {
+		margin: 0;
+	}
+
+	.select-all-checkbox :global(span) {
+		display: none;
+	}
 </style>

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

@@ -6,6 +6,8 @@ type $$ComponentProps = {
     is_editing?: boolean;
     is_selected?: boolean;
     is_static?: boolean;
+    is_bool?: boolean;
+    select_all_state?: "checked" | "unchecked" | "indeterminate";
     sort_direction?: SortDirection | null;
     sort_priority?: number | null;
     multi_sort?: boolean;
@@ -21,9 +23,11 @@ type $$ComponentProps = {
     editable?: boolean;
     max_chars?: number | undefined;
     i18n: I18nFormatter;
+    wrap_text?: boolean;
     onclick: (event: MouseEvent, col: number) => void;
     on_menu_click: (event: MouseEvent, col: number) => void;
     on_end_edit: (key: string) => void;
+    on_select_all?: (col: number, checked: boolean) => void;
 };
 declare const HeaderCell: import("svelte").Component<$$ComponentProps, {}, "">;
 type HeaderCell = ReturnType<typeof HeaderCell>;

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[];