@gradio/dataframe 0.24.4 → 0.24.5

package/dist/shared/Table.svelte

@@ -252,6 +252,10 @@
 
 	let selected_cells: CellCoordinate[] = $state([]);
 	let selected: CellCoordinate | false = $state(false);
+	// where a shift+click range starts. `selected` cannot serve, because it
+	// follows every click, the shift+clicks that extend the range included.
+	// nothing renders from it, so it does not need to be reactive
+	let range_anchor: CellCoordinate | false = false;
 	let editing: CellCoordinate | false = $state(false);
 	let header_edit: number | false = $state(false);
 	let selected_header: number | false = $state(false);
@@ -295,6 +299,12 @@
 		return rows.findIndex((row) => row.original._index === row_index);
 	}
 
+	// for the whole-selection sweeps, where one findIndex per cell would make
+	// Delete and copy quadratic on a column selection
+	function visible_row_set(): Set<number> {
+		return new Set(rows.map((row) => row.original._index));
+	}
+
 	function is_active_cell(row: number, col: number): boolean {
 		return !!(
 			keyboard_active &&
@@ -322,6 +332,7 @@
 
 	function set_active_cell(coord: CellCoordinate, move_focus = true): void {
 		selected = coord;
+		range_anchor = coord;
 		selected_cells = [coord];
 		selected_header = false;
 		header_edit = false;
@@ -341,6 +352,7 @@
 	function handle_header_focus(col: number): void {
 		if (header_edit !== false) return;
 		selected = false;
+		range_anchor = false;
 		selected_cells = [];
 		selected_header = col;
 	}
@@ -513,7 +525,8 @@
 	function handle_cell_click(
 		event: MouseEvent,
 		row: number,
-		col: number
+		col: number,
+		view_index: number
 	): void {
 		const col_is_static =
 			!editable ||
@@ -525,25 +538,37 @@
 		event.stopPropagation();
 
 		const coord: CellCoordinate = [row, col];
-		if (event.shiftKey && selected) {
-			// range select
-			const [r1, c1] = selected;
-			const [r2, c2] = coord;
-			const new_cells: CellCoordinate[] = [];
-			for (let r = Math.min(r1, r2); r <= Math.max(r1, r2); r++) {
-				for (let c = Math.min(c1, c2); c <= Math.max(c1, c2); c++) {
-					new_cells.push([r, c]);
+		if (event.shiftKey && range_anchor) {
+			// the range runs from the anchor, and the search may have hidden its
+			// row since
+			const from_row = visible_row_position(range_anchor[0]);
+			if (from_row === -1) {
+				selected_cells = [coord];
+				range_anchor = coord;
+			} else {
+				const c1 = range_anchor[1];
+				const new_cells: CellCoordinate[] = [];
+				for (
+					let p = Math.min(from_row, view_index);
+					p <= Math.max(from_row, view_index);
+					p++
+				) {
+					for (let c = Math.min(c1, col); c <= Math.max(c1, col); c++) {
+						new_cells.push([rows[p].original._index, c]);
+					}
 				}
+				selected_cells = new_cells;
 			}
-			selected_cells = new_cells;
 		} else if (event.metaKey || event.ctrlKey) {
 			// toggle select
 			const exists = selected_cells.some(([r, c]) => r === row && c === col);
 			selected_cells = exists
 				? selected_cells.filter(([r, c]) => !(r === row && c === col))
 				: [...selected_cells, coord];
+			range_anchor = coord;
 		} else {
 			selected_cells = [coord];
+			range_anchor = coord;
 		}
 
 		selected = coord;
@@ -607,6 +632,7 @@
 
 		editing = false;
 		selected = false;
+		range_anchor = false;
 		selected_cells = [];
 		active_cell_menu = null;
 		active_header_menu = null;
@@ -803,20 +829,40 @@
 		push_change(filtered_values);
 	}
 
-	async function handle_copy(): Promise<void> {
+	// false when nothing reached the clipboard, so the toolbar can hold back its
+	// "Copied to clipboard" state
+	async function handle_copy(): Promise<boolean> {
+		const visible = visible_row_set();
+		const cells =
+			selected_cells.length > 0
+				? selected_cells.filter(([r]) => visible.has(r))
+				: rows.flatMap((row) => {
+						const r = row.original._index;
+						return (values[r] ?? []).map((_, c) => [r, c] as CellCoordinate);
+					});
+		if (cells.length === 0) return false;
+
 		const data_for_copy = values.map((row) =>
 			row.map((val, j) => ({ id: `${j}`, value: val }))
 		);
-		const cells_to_copy = selected_cells.length > 0 ? selected_cells : null;
-		await copy_table_data(data_for_copy, cells_to_copy);
+		try {
+			await copy_table_data(data_for_copy, cells);
+		} catch (err) {
+			// the write can be refused outright, on an insecure origin or without
+			// permission. logged because this catches anything else thrown too
+			console.error(err);
+			return false;
+		}
 		copy_flash = true;
 		setTimeout(() => (copy_flash = false), 800);
+		return true;
 	}
 
 	function handle_click_outside(event: Event): void {
 		if (handle_click_outside_util(event, parent)) {
 			selected_cells = [];
 			selected = false;
+			range_anchor = false;
 			editing = false;
 			header_edit = false;
 			selected_header = false;
@@ -895,6 +941,7 @@
 					set_active_cell([rows[row_position - 1].original._index, col]);
 				} else {
 					selected = false;
+					range_anchor = false;
 					selected_cells = [];
 					selected_header = col;
 					focus_header(col);
@@ -1001,13 +1048,28 @@
 				if (!editing && editable) {
 					e.preventDefault();
 					const new_values = values.map((value_row) => [...value_row]);
+					const visible = visible_row_set();
+					let cleared = false;
 					selected_cells.forEach(([selected_row, selected_col]) => {
-						if (!is_static_column(selected_col)) {
+						// undefined is a cell past the end of a short row, or a row a
+						// shrunk table no longer has; a null is a value, so it is cleared
+						const current = new_values[selected_row]?.[selected_col];
+						if (
+							!is_static_column(selected_col) &&
+							visible.has(selected_row) &&
+							current !== "" &&
+							current !== undefined
+						) {
 							new_values[selected_row][selected_col] = "";
+							cleared = true;
 						}
 					});
-					values = new_values;
-					push_change(new_values);
+					// pushing with nothing written would fire change and input for an
+					// identical table
+					if (cleared) {
+						values = new_values;
+						push_change(new_values);
+					}
 				}
 				break;
 			default:
@@ -1133,7 +1195,11 @@
 	}}
 />
 
-<div class="table-container" class:fullscreen>
+<div
+	class="table-container"
+	class:fullscreen
+	class:no-rows={values.length === 0}
+>
 	{#if (label && label.length !== 0 && show_label) || (buttons === null ? true : buttons.includes("fullscreen")) || (buttons === null ? true : buttons.includes("copy")) || show_search !== "none"}
 		<div class="header-row">
 			{#if label && label.length !== 0 && show_label}
@@ -1281,6 +1347,10 @@
 					{#each virtual_items as virtual_row (virtual_row.key)}
 						{@const row = rows[virtual_row.index]}
 						{@const row_idx = row?.original._index ?? virtual_row.index}
+						{@const row_above =
+							rows[virtual_row.index - 1]?.original._index ?? null}
+						{@const row_below =
+							rows[virtual_row.index + 1]?.original._index ?? null}
 						{#if row}
 							<div
 								class="virtual-row"
@@ -1325,7 +1395,9 @@
 										cell_style={get_styling(row_idx, col_idx)}
 										selection_classes={is_cell_selected(
 											[row_idx, col_idx],
-											selected_cells
+											selected_cells,
+											row_above,
+											row_below
 										)}
 										is_active={is_active_cell(row_idx, col_idx)}
 										aria_row_index={virtual_row.index + 2}
@@ -1357,7 +1429,8 @@
 										{components}
 										{is_dragging}
 										wrap_text={wrap}
-										onmousedown={(e) => handle_cell_click(e, row_idx, col_idx)}
+										onmousedown={(e) =>
+											handle_cell_click(e, row_idx, col_idx, virtual_row.index)}
 										ondblclick={(e) =>
 											handle_cell_dblclick(e, row_idx, col_idx)}
 										oncontextmenu={(e) => {
@@ -1396,6 +1469,10 @@
 			<button class="scroll-top-button" onclick={scroll_to_top}>&uarr;</button>
 		{/if}
 	</div>
+
+	{#if values.length === 0 && editable && row_count[1] === "dynamic"}
+		<EmptyRowButton on_click={() => add_row()} />
+	{/if}
 </div>
 
 {#if active_cell_menu || active_header_menu}
@@ -1462,10 +1539,6 @@
 	/>
 {/if}
 
-{#if values.length === 0 && editable && row_count[1] === "dynamic"}
-	<EmptyRowButton on_click={() => add_row()} />
-{/if}
-
 <style>
 	.table-container {
 		display: flex;
@@ -1502,6 +1575,14 @@
 		min-height: 0;
 	}
 
+	/* An empty body would otherwise fill the screen and carry the add-row button off it.
+	   Gated on the data alone, so empty tables that show no button stop stretching too. */
+	.table-container.fullscreen.no-rows .table-wrap,
+	.table-container.fullscreen.no-rows .table-wrap > :global(*),
+	.table-container.fullscreen.no-rows .virtual-table-viewport {
+		flex: 0 0 auto;
+	}
+
 	.table-wrap {
 		position: relative;
 		transition: 150ms;

package/dist/shared/Toolbar.svelte

@@ -18,7 +18,7 @@
 		show_copy_button?: boolean;
 		show_search?: "none" | "search" | "filter";
 		fullscreen?: boolean;
-		on_copy: () => Promise<void>;
+		on_copy: () => Promise<boolean>;
 		on_commit_filter: () => void;
 		current_search_query?: string | null;
 		onsearch?: (query: string | null) => void;
@@ -48,8 +48,7 @@
 	}
 
 	async function handle_copy(): Promise<void> {
-		await on_copy();
-		copy_feedback();
+		if (await on_copy()) copy_feedback();
 	}
 
 	$effect(() => {

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

@@ -3,7 +3,7 @@ type $$ComponentProps = {
     show_copy_button?: boolean;
     show_search?: "none" | "search" | "filter";
     fullscreen?: boolean;
-    on_copy: () => Promise<void>;
+    on_copy: () => Promise<boolean>;
     on_commit_filter: () => void;
     current_search_query?: string | null;
     onsearch?: (query: string | null) => void;

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

@@ -4,7 +4,7 @@ export type CellData = {
     value: CellValue;
 };
 export declare function is_cell_in_selection(coords: [number, number], selected_cells: [number, number][]): boolean;
-export declare function is_cell_selected(cell: CellCoordinate, selected_cells: CellCoordinate[]): string;
+export declare function is_cell_selected(cell: CellCoordinate, selected_cells: CellCoordinate[], row_above: number | null, row_below: number | null): string;
 export declare function get_range_selection(start: CellCoordinate, end: CellCoordinate): CellCoordinate[];
 export declare function handle_selection(current: CellCoordinate, selected_cells: CellCoordinate[], event: {
     shiftKey: boolean;

package/dist/shared/utils/selection_utils.js

@@ -2,12 +2,15 @@ export function is_cell_in_selection(coords, selected_cells) {
     const [row, col] = coords;
     return selected_cells.some(([r, c]) => r === row && c === col);
 }
-export function is_cell_selected(cell, selected_cells) {
+// row_above/row_below are the data indices of the rows the caller is rendering
+// on either side of `cell`, or null at an edge of the view. A search or a sort
+// makes them differ from row ± 1, so only the caller knows them.
+export function is_cell_selected(cell, selected_cells, row_above, row_below) {
     const [row, col] = cell;
     if (!selected_cells.some(([r, c]) => r === row && c === col))
         return "";
-    const up = selected_cells.some(([r, c]) => r === row - 1 && c === col);
-    const down = selected_cells.some(([r, c]) => r === row + 1 && c === col);
+    const up = selected_cells.some(([r, c]) => r === row_above && c === col);
+    const down = selected_cells.some(([r, c]) => r === row_below && c === col);
     const left = selected_cells.some(([r, c]) => r === row && c === col - 1);
     const right = selected_cells.some(([r, c]) => r === row && c === col + 1);
     return `cell-selected${up ? " no-top" : ""}${down ? " no-bottom" : ""}${left ? " no-left" : ""}${right ? " no-right" : ""}`;

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

@@ -1,7 +1,7 @@
 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 copy_table_data(data: TableData, selected_cells: [number, number][] | null): Promise<void>;
+export declare function copy_table_data(data: TableData, selected_cells: [number, number][]): Promise<void>;
 export declare function guess_delimiter(text: string, possibleDelimiters: string[]): string[];
 export declare function data_uri_to_blob(data_uri: string): Blob;
 export declare function handle_file_upload(data_uri: string, update_headers: (headers: Headers) => HeadersWithIDs[], update_values: (values: CellValue[][]) => void): void;

package/dist/shared/utils/table_utils.js

@@ -8,11 +8,12 @@ export function make_header_id(col) {
 export async function copy_table_data(data, selected_cells) {
     if (!data || !data.length)
         return;
-    const cells_to_copy = selected_cells ||
-        data.flatMap((row, r) => row.map((_, c) => [r, c]));
-    const csv = cells_to_copy.reduce((acc, [row, col]) => {
+    const csv = selected_cells.reduce((acc, [row, col]) => {
         acc[row] = acc[row] || {};
-        const value = String(data[row][col].value);
+        // only the headers are padded out to the column count on the way in, so
+        // a selection can name a cell a short row does not have
+        const cell = data[row]?.[col];
+        const value = cell ? String(cell.value) : "";
         acc[row][col] =
             value.includes(",") || value.includes('"') || value.includes("\n")
                 ? `"${value.replace(/"/g, '""')}"`
@@ -22,7 +23,9 @@ export async function copy_table_data(data, selected_cells) {
     const rows = Object.keys(csv).sort((a, b) => +a - +b);
     if (!rows.length)
         return;
-    const cols = Object.keys(csv[rows[0]]).sort((a, b) => +a - +b);
+    // every column any selected row contributes: taking them from the first row
+    // alone drops the rest of a selection that is not rectangular there
+    const cols = Array.from(new Set(rows.flatMap((r) => Object.keys(csv[r])))).sort((a, b) => +a - +b);
     const text = rows
         .map((r) => cols.map((c) => csv[r][c] || "").join(","))
         .join("\n");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gradio/dataframe",
-  "version": "0.24.4",
+  "version": "0.24.5",
   "description": "Gradio UI packages",
   "type": "module",
   "author": "",
@@ -18,12 +18,12 @@
     "@gradio/atoms": "^0.26.2",
     "@gradio/checkbox": "^0.8.3",
     "@gradio/button": "^0.8.2",
-    "@gradio/icons": "^0.16.0",
-    "@gradio/client": "^2.6.0",
+    "@gradio/client": "^2.7.0",
     "@gradio/markdown-code": "^0.10.1",
+    "@gradio/icons": "^0.16.0",
     "@gradio/upload": "^0.18.3",
     "@gradio/statustracker": "^0.15.3",
-    "@gradio/utils": "^0.14.1"
+    "@gradio/utils": "^0.14.2"
   },
   "exports": {
     ".": {
@@ -42,7 +42,7 @@
     "svelte": "^5.48.0"
   },
   "devDependencies": {
-    "@gradio/preview": "^0.17.0"
+    "@gradio/preview": "^0.17.1"
   },
   "repository": {
     "type": "git",

package/shared/EmptyRowButton.svelte

@@ -16,7 +16,6 @@
 		color: var(--body-text-color);
 		cursor: pointer;
 		transition: all 150ms;
-		margin-top: var(--size-2);
 		z-index: 10;
 		position: relative;
 		pointer-events: auto;

package/shared/Table.svelte

@@ -252,6 +252,10 @@
 
 	let selected_cells: CellCoordinate[] = $state([]);
 	let selected: CellCoordinate | false = $state(false);
+	// where a shift+click range starts. `selected` cannot serve, because it
+	// follows every click, the shift+clicks that extend the range included.
+	// nothing renders from it, so it does not need to be reactive
+	let range_anchor: CellCoordinate | false = false;
 	let editing: CellCoordinate | false = $state(false);
 	let header_edit: number | false = $state(false);
 	let selected_header: number | false = $state(false);
@@ -295,6 +299,12 @@
 		return rows.findIndex((row) => row.original._index === row_index);
 	}
 
+	// for the whole-selection sweeps, where one findIndex per cell would make
+	// Delete and copy quadratic on a column selection
+	function visible_row_set(): Set<number> {
+		return new Set(rows.map((row) => row.original._index));
+	}
+
 	function is_active_cell(row: number, col: number): boolean {
 		return !!(
 			keyboard_active &&
@@ -322,6 +332,7 @@
 
 	function set_active_cell(coord: CellCoordinate, move_focus = true): void {
 		selected = coord;
+		range_anchor = coord;
 		selected_cells = [coord];
 		selected_header = false;
 		header_edit = false;
@@ -341,6 +352,7 @@
 	function handle_header_focus(col: number): void {
 		if (header_edit !== false) return;
 		selected = false;
+		range_anchor = false;
 		selected_cells = [];
 		selected_header = col;
 	}
@@ -513,7 +525,8 @@
 	function handle_cell_click(
 		event: MouseEvent,
 		row: number,
-		col: number
+		col: number,
+		view_index: number
 	): void {
 		const col_is_static =
 			!editable ||
@@ -525,25 +538,37 @@
 		event.stopPropagation();
 
 		const coord: CellCoordinate = [row, col];
-		if (event.shiftKey && selected) {
-			// range select
-			const [r1, c1] = selected;
-			const [r2, c2] = coord;
-			const new_cells: CellCoordinate[] = [];
-			for (let r = Math.min(r1, r2); r <= Math.max(r1, r2); r++) {
-				for (let c = Math.min(c1, c2); c <= Math.max(c1, c2); c++) {
-					new_cells.push([r, c]);
+		if (event.shiftKey && range_anchor) {
+			// the range runs from the anchor, and the search may have hidden its
+			// row since
+			const from_row = visible_row_position(range_anchor[0]);
+			if (from_row === -1) {
+				selected_cells = [coord];
+				range_anchor = coord;
+			} else {
+				const c1 = range_anchor[1];
+				const new_cells: CellCoordinate[] = [];
+				for (
+					let p = Math.min(from_row, view_index);
+					p <= Math.max(from_row, view_index);
+					p++
+				) {
+					for (let c = Math.min(c1, col); c <= Math.max(c1, col); c++) {
+						new_cells.push([rows[p].original._index, c]);
+					}
 				}
+				selected_cells = new_cells;
 			}
-			selected_cells = new_cells;
 		} else if (event.metaKey || event.ctrlKey) {
 			// toggle select
 			const exists = selected_cells.some(([r, c]) => r === row && c === col);
 			selected_cells = exists
 				? selected_cells.filter(([r, c]) => !(r === row && c === col))
 				: [...selected_cells, coord];
+			range_anchor = coord;
 		} else {
 			selected_cells = [coord];
+			range_anchor = coord;
 		}
 
 		selected = coord;
@@ -607,6 +632,7 @@
 
 		editing = false;
 		selected = false;
+		range_anchor = false;
 		selected_cells = [];
 		active_cell_menu = null;
 		active_header_menu = null;
@@ -803,20 +829,40 @@
 		push_change(filtered_values);
 	}
 
-	async function handle_copy(): Promise<void> {
+	// false when nothing reached the clipboard, so the toolbar can hold back its
+	// "Copied to clipboard" state
+	async function handle_copy(): Promise<boolean> {
+		const visible = visible_row_set();
+		const cells =
+			selected_cells.length > 0
+				? selected_cells.filter(([r]) => visible.has(r))
+				: rows.flatMap((row) => {
+						const r = row.original._index;
+						return (values[r] ?? []).map((_, c) => [r, c] as CellCoordinate);
+					});
+		if (cells.length === 0) return false;
+
 		const data_for_copy = values.map((row) =>
 			row.map((val, j) => ({ id: `${j}`, value: val }))
 		);
-		const cells_to_copy = selected_cells.length > 0 ? selected_cells : null;
-		await copy_table_data(data_for_copy, cells_to_copy);
+		try {
+			await copy_table_data(data_for_copy, cells);
+		} catch (err) {
+			// the write can be refused outright, on an insecure origin or without
+			// permission. logged because this catches anything else thrown too
+			console.error(err);
+			return false;
+		}
 		copy_flash = true;
 		setTimeout(() => (copy_flash = false), 800);
+		return true;
 	}
 
 	function handle_click_outside(event: Event): void {
 		if (handle_click_outside_util(event, parent)) {
 			selected_cells = [];
 			selected = false;
+			range_anchor = false;
 			editing = false;
 			header_edit = false;
 			selected_header = false;
@@ -895,6 +941,7 @@
 					set_active_cell([rows[row_position - 1].original._index, col]);
 				} else {
 					selected = false;
+					range_anchor = false;
 					selected_cells = [];
 					selected_header = col;
 					focus_header(col);
@@ -1001,13 +1048,28 @@
 				if (!editing && editable) {
 					e.preventDefault();
 					const new_values = values.map((value_row) => [...value_row]);
+					const visible = visible_row_set();
+					let cleared = false;
 					selected_cells.forEach(([selected_row, selected_col]) => {
-						if (!is_static_column(selected_col)) {
+						// undefined is a cell past the end of a short row, or a row a
+						// shrunk table no longer has; a null is a value, so it is cleared
+						const current = new_values[selected_row]?.[selected_col];
+						if (
+							!is_static_column(selected_col) &&
+							visible.has(selected_row) &&
+							current !== "" &&
+							current !== undefined
+						) {
 							new_values[selected_row][selected_col] = "";
+							cleared = true;
 						}
 					});
-					values = new_values;
-					push_change(new_values);
+					// pushing with nothing written would fire change and input for an
+					// identical table
+					if (cleared) {
+						values = new_values;
+						push_change(new_values);
+					}
 				}
 				break;
 			default:
@@ -1133,7 +1195,11 @@
 	}}
 />
 
-<div class="table-container" class:fullscreen>
+<div
+	class="table-container"
+	class:fullscreen
+	class:no-rows={values.length === 0}
+>
 	{#if (label && label.length !== 0 && show_label) || (buttons === null ? true : buttons.includes("fullscreen")) || (buttons === null ? true : buttons.includes("copy")) || show_search !== "none"}
 		<div class="header-row">
 			{#if label && label.length !== 0 && show_label}
@@ -1281,6 +1347,10 @@
 					{#each virtual_items as virtual_row (virtual_row.key)}
 						{@const row = rows[virtual_row.index]}
 						{@const row_idx = row?.original._index ?? virtual_row.index}
+						{@const row_above =
+							rows[virtual_row.index - 1]?.original._index ?? null}
+						{@const row_below =
+							rows[virtual_row.index + 1]?.original._index ?? null}
 						{#if row}
 							<div
 								class="virtual-row"
@@ -1325,7 +1395,9 @@
 										cell_style={get_styling(row_idx, col_idx)}
 										selection_classes={is_cell_selected(
 											[row_idx, col_idx],
-											selected_cells
+											selected_cells,
+											row_above,
+											row_below
 										)}
 										is_active={is_active_cell(row_idx, col_idx)}
 										aria_row_index={virtual_row.index + 2}
@@ -1357,7 +1429,8 @@
 										{components}
 										{is_dragging}
 										wrap_text={wrap}
-										onmousedown={(e) => handle_cell_click(e, row_idx, col_idx)}
+										onmousedown={(e) =>
+											handle_cell_click(e, row_idx, col_idx, virtual_row.index)}
 										ondblclick={(e) =>
 											handle_cell_dblclick(e, row_idx, col_idx)}
 										oncontextmenu={(e) => {
@@ -1396,6 +1469,10 @@
 			<button class="scroll-top-button" onclick={scroll_to_top}>&uarr;</button>
 		{/if}
 	</div>
+
+	{#if values.length === 0 && editable && row_count[1] === "dynamic"}
+		<EmptyRowButton on_click={() => add_row()} />
+	{/if}
 </div>
 
 {#if active_cell_menu || active_header_menu}
@@ -1462,10 +1539,6 @@
 	/>
 {/if}
 
-{#if values.length === 0 && editable && row_count[1] === "dynamic"}
-	<EmptyRowButton on_click={() => add_row()} />
-{/if}
-
 <style>
 	.table-container {
 		display: flex;
@@ -1502,6 +1575,14 @@
 		min-height: 0;
 	}
 
+	/* An empty body would otherwise fill the screen and carry the add-row button off it.
+	   Gated on the data alone, so empty tables that show no button stop stretching too. */
+	.table-container.fullscreen.no-rows .table-wrap,
+	.table-container.fullscreen.no-rows .table-wrap > :global(*),
+	.table-container.fullscreen.no-rows .virtual-table-viewport {
+		flex: 0 0 auto;
+	}
+
 	.table-wrap {
 		position: relative;
 		transition: 150ms;