@gradio/dataframe 0.13.1 → 0.15.0

package/shared/Table.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
 	import { afterUpdate, createEventDispatcher, tick, onMount } from "svelte";
-	import { dsvFormat } from "d3-dsv";
 	import { dequal } from "dequal/lite";
 	import { Upload } from "@gradio/upload";
 
@@ -17,6 +16,19 @@
 	} from "./utils";
 	import CellMenu from "./CellMenu.svelte";
 	import Toolbar from "./Toolbar.svelte";
+	import type { CellCoordinate, EditingState } from "./types";
+	import {
+		is_cell_selected,
+		handle_selection,
+		handle_delete_key,
+		should_show_cell_menu,
+		get_next_cell_coordinates,
+		get_range_selection,
+		move_cursor,
+		get_current_indices,
+		handle_click_outside as handle_click_outside_util
+	} from "./selection_utils";
+	import { copy_table_data, get_max, handle_file_upload } from "./table_utils";
 
 	export let datatype: Datatype | Datatype[];
 	export let label: string | null = null;
@@ -43,13 +55,26 @@
 	export let upload: Client["upload"];
 	export let stream_handler: Client["stream"];
 	export let show_fullscreen_button = false;
+	export let show_copy_button = false;
 	export let value_is_output = false;
+	export let max_chars: number | undefined = undefined;
+
+	let selected_cells: CellCoordinate[] = [];
+	$: selected_cells = [...selected_cells];
+	let selected: CellCoordinate | false = false;
+	$: selected =
+		selected_cells.length > 0
+			? selected_cells[selected_cells.length - 1]
+			: false;
 
-	let selected: false | [number, number] = false;
-	let clicked_cell: { row: number; col: number } | undefined = undefined;
 	export let display_value: string[][] | null = null;
 	export let styling: string[][] | null = null;
 	let t_rect: DOMRectReadOnly;
+	let els: Record<
+		string,
+		{ cell: null | HTMLTableCellElement; input: null | HTMLInputElement }
+	> = {};
+	let data_binding: Record<string, (typeof data)[0][0]> = {};
 
 	const dispatch = createEventDispatcher<{
 		change: DataframeValue;
@@ -57,34 +82,27 @@
 		select: SelectData;
 	}>();
 
-	let editing: false | [number, number] = false;
+	let editing: EditingState = false;
+	let clear_on_focus = false;
+	let header_edit: number | false = false;
+	let selected_header: number | false = false;
+	let active_cell_menu: {
+		row: number;
+		col: number;
+		x: number;
+		y: number;
+	} | null = null;
+	let active_header_menu: {
+		col: number;
+		x: number;
+		y: number;
+	} | null = null;
+	let is_fullscreen = false;
+	let dragging = false;
 
 	const get_data_at = (row: number, col: number): string | number =>
 		data?.[row]?.[col]?.value;
 
-	let last_selected: [number, number] | null = null;
-
-	$: {
-		if (selected !== false && !dequal(selected, last_selected)) {
-			const [row, col] = selected;
-			if (!isNaN(row) && !isNaN(col) && data[row]) {
-				dispatch("select", {
-					index: [row, col],
-					value: get_data_at(row, col),
-					row_value: data[row].map((d) => d.value)
-				});
-				last_selected = selected;
-			}
-		}
-	}
-
-	let els: Record<
-		string,
-		{ cell: null | HTMLTableCellElement; input: null | HTMLInputElement }
-	> = {};
-
-	let data_binding: Record<string, (typeof data)[0][0]> = {};
-
 	function make_id(): string {
 		return Math.random().toString(36).substring(2, 15);
 	}
@@ -120,13 +138,7 @@
 		id: string;
 	}[][] {
 		const data_row_length = _values.length;
-		return Array(
-			row_count[1] === "fixed"
-				? row_count[0]
-				: data_row_length < row_count[0]
-					? row_count[0]
-					: data_row_length
-		)
+		return Array(row_count[1] === "fixed" ? row_count[0] : data_row_length)
 			.fill(0)
 			.map((_, i) =>
 				Array(
@@ -203,48 +215,9 @@
 			if (direction === "asc") return "ascending";
 			if (direction === "des") return "descending";
 		}
-
 		return "none";
 	}
 
-	function get_current_indices(id: string): [number, number] {
-		return data.reduce(
-			(acc, arr, i) => {
-				const j = arr.reduce(
-					(_acc, _data, k) => (id === _data.id ? k : _acc),
-					-1
-				);
-
-				return j === -1 ? acc : [i, j];
-			},
-			[-1, -1]
-		);
-	}
-
-	function move_cursor(
-		key: "ArrowRight" | "ArrowLeft" | "ArrowDown" | "ArrowUp",
-		current_coords: [number, number]
-	): void {
-		const dir = {
-			ArrowRight: [0, 1],
-			ArrowLeft: [0, -1],
-			ArrowDown: [1, 0],
-			ArrowUp: [-1, 0]
-		}[key];
-
-		const i = current_coords[0] + dir[0];
-		const j = current_coords[1] + dir[1];
-
-		if (i < 0 && j <= 0) {
-			selected_header = j;
-			selected = false;
-		} else {
-			const is_data = data[i]?.[j];
-			selected = is_data ? [i, j] : selected;
-		}
-	}
-
-	let clear_on_focus = false;
 	// eslint-disable-next-line complexity
 	async function handle_keydown(event: KeyboardEvent): Promise<void> {
 		if (selected_header !== false && header_edit === false) {
@@ -272,6 +245,50 @@
 					break;
 			}
 		}
+
+		if (event.key === "Delete" || event.key === "Backspace") {
+			if (!editable) return;
+
+			if (editing) {
+				const [row, col] = editing;
+				const input_el = els[data[row][col].id].input;
+				if (input_el && input_el.selectionStart !== input_el.selectionEnd) {
+					return;
+				}
+				if (
+					event.key === "Delete" &&
+					input_el?.selectionStart !== input_el?.value.length
+				) {
+					return;
+				}
+				if (event.key === "Backspace" && input_el?.selectionStart !== 0) {
+					return;
+				}
+			}
+
+			event.preventDefault();
+			if (selected_cells.length > 0) {
+				data = handle_delete_key(data, selected_cells);
+				dispatch("change", {
+					data: data.map((row) => row.map((cell) => cell.value)),
+					headers: _headers.map((h) => h.value),
+					metadata: null
+				});
+				if (!value_is_output) {
+					dispatch("input");
+				}
+			}
+			return;
+		}
+
+		if (event.key === "c" && (event.metaKey || event.ctrlKey)) {
+			event.preventDefault();
+			if (selected_cells.length > 0) {
+				await handle_copy();
+			}
+			return;
+		}
+
 		if (!selected) {
 			return;
 		}
@@ -285,7 +302,29 @@
 			case "ArrowUp":
 				if (editing) break;
 				event.preventDefault();
-				move_cursor(event.key, [i, j]);
+				const next_coords = move_cursor(event.key, [i, j], data);
+				if (next_coords) {
+					if (event.shiftKey) {
+						selected_cells = get_range_selection(
+							selected_cells.length > 0 ? selected_cells[0] : [i, j],
+							next_coords
+						);
+						editing = false;
+					} else {
+						selected_cells = [next_coords];
+						editing = next_coords;
+						clear_on_focus = false;
+					}
+					selected = next_coords;
+				} else if (
+					next_coords === false &&
+					event.key === "ArrowUp" &&
+					i === 0
+				) {
+					selected_header = j;
+					selected = false;
+					editing = false;
+				}
 				break;
 
 			case "Escape":
@@ -314,39 +353,26 @@
 						selected = [i, j];
 					} else {
 						editing = [i, j];
+						clear_on_focus = false;
 					}
 				}
-
-				break;
-			case "Backspace":
-				if (!editable) break;
-				if (!editing) {
-					event.preventDefault();
-					data[i][j].value = "";
-				}
-				break;
-			case "Delete":
-				if (!editable) break;
-				if (!editing) {
-					event.preventDefault();
-					data[i][j].value = "";
-				}
 				break;
 			case "Tab":
-				let direction = event.shiftKey ? -1 : 1;
-
-				let is_data_x = data[i][j + direction];
-				let is_data_y =
-					data?.[i + direction]?.[direction > 0 ? 0 : _headers.length - 1];
-
-				if (is_data_x || is_data_y) {
-					event.preventDefault();
-					selected = is_data_x
-						? [i, j + direction]
-						: [i + direction, direction > 0 ? 0 : _headers.length - 1];
-				}
+				event.preventDefault();
 				editing = false;
-
+				const next_cell = get_next_cell_coordinates(
+					[i, j],
+					data,
+					event.shiftKey
+				);
+				if (next_cell) {
+					selected_cells = [next_cell];
+					selected = next_cell;
+					if (editable) {
+						editing = next_cell;
+						clear_on_focus = false;
+					}
+				}
 				break;
 			default:
 				if (!editable) break;
@@ -377,16 +403,12 @@
 		}
 	}
 
-	let header_edit: number | false;
-
-	let select_on_focus = false;
-	let selected_header: number | false = false;
 	async function edit_header(i: number, _select = false): Promise<void> {
 		if (!editable || col_count[1] !== "dynamic" || header_edit === i) return;
 		selected = false;
+		selected_cells = [];
 		selected_header = i;
 		header_edit = i;
-		select_on_focus = _select;
 	}
 
 	function end_header_edit(event: CustomEvent<KeyboardEvent>): void {
@@ -461,107 +483,14 @@
 	}
 
 	function handle_click_outside(event: Event): void {
-		if (
-			(active_cell_menu &&
-				!(event.target as HTMLElement).closest(".cell-menu")) ||
-			(active_header_menu &&
-				!(event.target as HTMLElement).closest(".cell-menu"))
-		) {
+		if (handle_click_outside_util(event, parent)) {
+			editing = false;
+			selected_cells = [];
+			header_edit = false;
+			selected_header = false;
 			active_cell_menu = null;
 			active_header_menu = null;
 		}
-
-		const [trigger] = event.composedPath() as HTMLElement[];
-		if (parent.contains(trigger)) {
-			return;
-		}
-
-		clicked_cell = undefined;
-		editing = false;
-		selected = false;
-		header_edit = false;
-		selected_header = false;
-		active_cell_menu = null;
-		active_header_menu = null;
-	}
-
-	function guess_delimitaor(
-		text: string,
-		possibleDelimiters: string[]
-	): string[] {
-		return possibleDelimiters.filter(weedOut);
-
-		function weedOut(delimiter: string): boolean {
-			var cache = -1;
-			return text.split("\n").every(checkLength);
-
-			function checkLength(line: string): boolean {
-				if (!line) {
-					return true;
-				}
-
-				var length = line.split(delimiter).length;
-				if (cache < 0) {
-					cache = length;
-				}
-				return cache === length && length > 1;
-			}
-		}
-	}
-
-	function data_uri_to_blob(data_uri: string): Blob {
-		const byte_str = atob(data_uri.split(",")[1]);
-		const mime_str = data_uri.split(",")[0].split(":")[1].split(";")[0];
-
-		const ab = new ArrayBuffer(byte_str.length);
-		const ia = new Uint8Array(ab);
-
-		for (let i = 0; i < byte_str.length; i++) {
-			ia[i] = byte_str.charCodeAt(i);
-		}
-
-		return new Blob([ab], { type: mime_str });
-	}
-
-	function blob_to_string(blob: Blob): void {
-		const reader = new FileReader();
-
-		function handle_read(e: ProgressEvent<FileReader>): void {
-			if (!e?.target?.result || typeof e.target.result !== "string") return;
-
-			const [delimiter] = guess_delimitaor(e.target.result, [",", "\t"]);
-
-			const [head, ...rest] = dsvFormat(delimiter).parseRows(e.target.result);
-
-			_headers = make_headers(
-				col_count[1] === "fixed" ? head.slice(0, col_count[0]) : head
-			);
-
-			values = rest;
-			reader.removeEventListener("loadend", handle_read);
-		}
-
-		reader.addEventListener("loadend", handle_read);
-
-		reader.readAsText(blob);
-	}
-
-	let dragging = false;
-
-	function get_max(
-		_d: { value: any; id: string }[][]
-	): { value: any; id: string }[] {
-		if (!_d || _d.length === 0 || !_d[0]) return [];
-		let max = _d[0].slice();
-		for (let i = 0; i < _d.length; i++) {
-			for (let j = 0; j < _d[i].length; j++) {
-				if (`${max[j].value}`.length < `${_d[i][j].value}`.length) {
-					max[j] = _d[i][j];
-				}
-			}
-		}
-
-		return max;
 	}
 
 	$: max = get_max(data);
@@ -632,7 +561,7 @@
 		data = data;
 
 		if (id) {
-			const [i, j] = get_current_indices(id);
+			const [i, j] = get_current_indices(id, data);
 			selected = [i, j];
 		}
 	}
@@ -644,19 +573,17 @@
 	let is_visible = false;
 
 	onMount(() => {
-		const observer = new IntersectionObserver((entries, observer) => {
+		const observer = new IntersectionObserver((entries) => {
 			entries.forEach((entry) => {
 				if (entry.isIntersecting && !is_visible) {
 					set_cell_widths();
 					data = data;
 				}
-
 				is_visible = entry.isIntersecting;
 			});
 		});
 
 		observer.observe(parent);
-
 		document.addEventListener("click", handle_click_outside);
 		window.addEventListener("resize", handle_resize);
 		document.addEventListener("fullscreenchange", handle_fullscreen_change);
@@ -672,14 +599,43 @@
 		};
 	});
 
-	let highlighted_column: number | null = null;
+	function handle_cell_click(
+		event: MouseEvent,
+		row: number,
+		col: number
+	): void {
+		event.preventDefault();
+		event.stopPropagation();
+		clear_on_focus = false;
+		active_cell_menu = null;
+		active_header_menu = null;
+		selected_header = false;
+		header_edit = false;
 
-	let active_cell_menu: {
-		row: number;
-		col: number;
-		x: number;
-		y: number;
-	} | null = null;
+		selected_cells = handle_selection([row, col], selected_cells, event);
+
+		if (selected_cells.length === 1 && editable) {
+			editing = [row, col];
+			tick().then(() => {
+				const input_el = els[data[row][col].id].input;
+				if (input_el) {
+					input_el.focus();
+					input_el.selectionStart = input_el.selectionEnd =
+						input_el.value.length;
+				}
+			});
+		} else {
+			editing = false;
+		}
+
+		toggle_cell_button(row, col);
+
+		dispatch("select", {
+			index: [row, col],
+			value: get_data_at(row, col),
+			row_value: data[row].map((d) => d.value)
+		});
+	}
 
 	function toggle_cell_menu(event: MouseEvent, row: number, col: number): void {
 		event.stopPropagation();
@@ -693,12 +649,7 @@
 			const cell = (event.target as HTMLElement).closest("td");
 			if (cell) {
 				const rect = cell.getBoundingClientRect();
-				active_cell_menu = {
-					row,
-					col,
-					x: rect.right,
-					y: rect.bottom
-				};
+				active_cell_menu = { row, col, x: rect.right, y: rect.bottom };
 			}
 		}
 	}
@@ -730,33 +681,21 @@
 	} | null = null;
 
 	function toggle_header_button(col: number): void {
-		if (active_button?.type === "header" && active_button.col === col) {
-			active_button = null;
-		} else {
-			active_button = { type: "header", col };
-		}
+		active_button =
+			active_button?.type === "header" && active_button.col === col
+				? null
+				: { type: "header", col };
 	}
 
 	function toggle_cell_button(row: number, col: number): void {
-		if (
+		active_button =
 			active_button?.type === "cell" &&
 			active_button.row === row &&
 			active_button.col === col
-		) {
-			active_button = null;
-		} else {
-			active_button = { type: "cell", row, col };
-		}
+				? null
+				: { type: "cell", row, col };
 	}
 
-	let active_header_menu: {
-		col: number;
-		x: number;
-		y: number;
-	} | null = null;
-
-	let is_fullscreen = false;
-
 	function toggle_fullscreen(): void {
 		if (!document.fullscreenElement) {
 			parent.requestFullscreen();
@@ -771,6 +710,10 @@
 		is_fullscreen = !!document.fullscreenElement;
 	}
 
+	async function handle_copy(): Promise<void> {
+		await copy_table_data(data, _headers, selected_cells);
+	}
+
 	function toggle_header_menu(event: MouseEvent, col: number): void {
 		event.stopPropagation();
 		if (active_header_menu && active_header_menu.col === col) {
@@ -779,11 +722,7 @@
 			const header = (event.target as HTMLElement).closest("th");
 			if (header) {
 				const rect = header.getBoundingClientRect();
-				active_header_menu = {
-					col,
-					x: rect.right,
-					y: rect.bottom
-				};
+				active_header_menu = { col, x: rect.right, y: rect.bottom };
 			}
 		}
 	}
@@ -791,6 +730,42 @@
 	afterUpdate(() => {
 		value_is_output = false;
 	});
+
+	async function delete_row(index: number): Promise<void> {
+		parent.focus();
+		if (row_count[1] !== "dynamic") return;
+		if (data.length <= 1) return;
+		data.splice(index, 1);
+		data = data;
+		selected = false;
+	}
+
+	async function delete_col(index: number): Promise<void> {
+		parent.focus();
+		if (col_count[1] !== "dynamic") return;
+		if (data[0].length <= 1) return;
+
+		_headers.splice(index, 1);
+		_headers = _headers;
+
+		data.forEach((row) => {
+			row.splice(index, 1);
+		});
+		data = data;
+		selected = false;
+	}
+
+	function delete_row_at(index: number): void {
+		delete_row(index);
+		active_cell_menu = null;
+		active_header_menu = null;
+	}
+
+	function delete_col_at(index: number): void {
+		delete_col(index);
+		active_cell_menu = null;
+		active_header_menu = null;
+	}
 </script>
 
 <svelte:window on:resize={() => set_cell_widths()} />
@@ -806,6 +781,8 @@
 			{show_fullscreen_button}
 			{is_fullscreen}
 			on:click={toggle_fullscreen}
+			on_copy={handle_copy}
+			{show_copy_button}
 		/>
 	</div>
 	<div
@@ -846,6 +823,7 @@
 									edit={false}
 									el={null}
 									{root}
+									{editable}
 								/>
 
 								<div
@@ -881,6 +859,7 @@
 									edit={false}
 									el={null}
 									{root}
+									{editable}
 								/>
 							</div>
 						</td>
@@ -896,8 +875,20 @@
 			boundedheight={false}
 			disable_click={true}
 			{root}
-			on:load={(e) => blob_to_string(data_uri_to_blob(e.detail.data))}
+			on:load={({ detail }) =>
+				handle_file_upload(
+					detail.data,
+					col_count,
+					(head) => {
+						_headers = make_headers(head);
+						return _headers;
+					},
+					(vals) => {
+						values = vals;
+					}
+				)}
 			bind:dragging
+			aria_label={i18n("dataframe.drop_to_upload")}
 		>
 			<VirtualTable
 				bind:items={data}
@@ -925,6 +916,7 @@
 							<div class="cell-wrap">
 								<div class="header-content">
 									<EditableCell
+										{max_chars}
 										bind:value={_headers[i].value}
 										bind:el={els[id].input}
 										{latex_delimiters}
@@ -934,6 +926,7 @@
 										on:dblclick={() => edit_header(i)}
 										header
 										{root}
+										{editable}
 									/>
 									<button
 										class:sorted={sort_by === i}
@@ -962,7 +955,7 @@
 										class="cell-menu-button"
 										on:click={(event) => toggle_header_menu(event, i)}
 									>
-										⋮
+										&#8942;
 									</button>
 								{/if}
 							</div>
@@ -978,40 +971,24 @@
 						<td
 							tabindex="0"
 							on:touchstart={(event) => {
-								event.preventDefault();
-								event.stopPropagation();
-								clear_on_focus = false;
-								clicked_cell = { row: index, col: j };
-								selected = [index, j];
-								selected_header = false;
-								header_edit = false;
-								if (editable) {
-									editing = [index, j];
-								}
-								toggle_cell_button(index, j);
+								const touch = event.touches[0];
+								const mouseEvent = new MouseEvent("click", {
+									clientX: touch.clientX,
+									clientY: touch.clientY,
+									bubbles: true,
+									cancelable: true,
+									view: window
+								});
+								handle_cell_click(mouseEvent, index, j);
 							}}
 							on:mousedown={(event) => {
 								event.preventDefault();
 								event.stopPropagation();
 							}}
-							on:click={(event) => {
-								event.preventDefault();
-								event.stopPropagation();
-								clear_on_focus = false;
-								active_cell_menu = null;
-								active_header_menu = null;
-								clicked_cell = { row: index, col: j };
-								selected = [index, j];
-								selected_header = false;
-								header_edit = false;
-								if (editable) {
-									editing = [index, j];
-								}
-								toggle_cell_button(index, j);
-							}}
+							on:click={(event) => handle_cell_click(event, index, j)}
 							style:width="var(--cell-width-{j})"
 							style={styling?.[index]?.[j] || ""}
-							class:focus={dequal(selected, [index, j])}
+							class={is_cell_selected([index, j], selected_cells)}
 							class:menu-active={active_cell_menu &&
 								active_cell_menu.row === index &&
 								active_cell_menu.col === j}
@@ -1030,15 +1007,25 @@
 										clear_on_focus = false;
 										parent.focus();
 									}}
+									on:focus={() => {
+										const row = index;
+										const col = j;
+										if (
+											!selected_cells.some(([r, c]) => r === row && c === col)
+										) {
+											selected_cells = [[row, col]];
+										}
+									}}
 									{clear_on_focus}
 									{root}
+									{max_chars}
 								/>
-								{#if editable}
+								{#if editable && should_show_cell_menu([index, j], selected_cells, editable)}
 									<button
 										class="cell-menu-button"
 										on:click={(event) => toggle_cell_menu(event, index, j)}
 									>
-										⋮
+										&#8942;
 									</button>
 								{/if}
 							</div>
@@ -1050,18 +1037,22 @@
 	</div>
 </div>
 
-{#if active_cell_menu !== null}
+{#if active_cell_menu}
 	<CellMenu
-		{i18n}
 		x={active_cell_menu.x}
 		y={active_cell_menu.y}
-		row={active_cell_menu?.row ?? -1}
+		row={active_cell_menu.row}
 		{col_count}
 		{row_count}
-		on_add_row_above={() => add_row_at(active_cell_menu?.row ?? -1, "above")}
-		on_add_row_below={() => add_row_at(active_cell_menu?.row ?? -1, "below")}
-		on_add_column_left={() => add_col_at(active_cell_menu?.col ?? -1, "left")}
-		on_add_column_right={() => add_col_at(active_cell_menu?.col ?? -1, "right")}
+		on_add_row_above={() => add_row_at(active_cell_menu?.row || 0, "above")}
+		on_add_row_below={() => add_row_at(active_cell_menu?.row || 0, "below")}
+		on_add_column_left={() => add_col_at(active_cell_menu?.col || 0, "left")}
+		on_add_column_right={() => add_col_at(active_cell_menu?.col || 0, "right")}
+		on_delete_row={() => delete_row_at(active_cell_menu?.row || 0)}
+		on_delete_col={() => delete_col_at(active_cell_menu?.col || 0)}
+		can_delete_rows={data.length > 1}
+		can_delete_cols={data[0].length > 1}
+		{i18n}
 	/>
 {/if}
 
@@ -1078,25 +1069,18 @@
 		on_add_column_left={() => add_col_at(active_header_menu?.col ?? -1, "left")}
 		on_add_column_right={() =>
 			add_col_at(active_header_menu?.col ?? -1, "right")}
+		on_delete_row={() => delete_row_at(active_cell_menu?.row ?? -1)}
+		on_delete_col={() => delete_col_at(active_header_menu?.col ?? -1)}
+		can_delete_rows={false}
+		can_delete_cols={data[0].length > 1}
 	/>
 {/if}
 
 <style>
-	.button-wrap:hover svg {
-		color: var(--color-accent);
-	}
-
-	.button-wrap svg {
-		margin-right: var(--size-1);
-		margin-left: -5px;
-	}
-
-	.label p {
-		position: relative;
-		z-index: var(--layer-4);
-		margin-bottom: var(--size-2);
-		color: var(--block-label-text-color);
-		font-size: var(--block-label-text-size);
+	.table-container {
+		display: flex;
+		flex-direction: column;
+		gap: var(--size-2);
 	}
 
 	.table-wrap {
@@ -1109,7 +1093,6 @@
 
 	.table-wrap:focus-within {
 		outline: none;
-		background-color: none;
 	}
 
 	.dragging {
@@ -1131,6 +1114,7 @@
 		line-height: var(--line-md);
 		font-family: var(--font-mono);
 		border-spacing: 0;
+		border-collapse: separate;
 	}
 
 	div:not(.no-wrap) td {
@@ -1185,6 +1169,12 @@
 	th.focus,
 	td.focus {
 		--ring-color: var(--color-accent);
+		box-shadow: inset 0 0 0 2px var(--ring-color);
+		z-index: var(--layer-1);
+	}
+
+	th.focus {
+		z-index: var(--layer-2);
 	}
 
 	tr:last-child td:first-child {
@@ -1213,7 +1203,6 @@
 		cursor: pointer;
 		padding: var(--size-2);
 		color: var(--body-text-color-subdued);
-		line-height: var(--text-sm);
 	}
 
 	.sort-button:hover {
@@ -1234,11 +1223,11 @@
 
 	.cell-wrap {
 		display: flex;
-		align-items: center;
+		align-items: flex-start;
 		outline: none;
-		height: var(--size-full);
 		min-height: var(--size-9);
-		overflow: hidden;
+		position: relative;
+		height: auto;
 	}
 
 	.header-content {
@@ -1247,12 +1236,9 @@
 		overflow: hidden;
 		flex-grow: 1;
 		min-width: 0;
-	}
-
-	.controls-wrap {
-		display: flex;
-		justify-content: flex-end;
-		padding-top: var(--size-2);
+		white-space: normal;
+		overflow-wrap: break-word;
+		word-break: break-word;
 	}
 
 	.row_odd {
@@ -1263,10 +1249,6 @@
 		background: var(--background-fill-primary);
 	}
 
-	table {
-		border-collapse: separate;
-	}
-
 	.cell-menu-button {
 		flex-shrink: 0;
 		display: none;
@@ -1279,28 +1261,35 @@
 		padding: 0;
 		margin-right: var(--spacing-sm);
 		z-index: var(--layer-1);
+		position: absolute;
+		right: var(--size-1);
+		top: 50%;
+		transform: translateY(-50%);
 	}
 
-	.cell-menu-button:hover {
-		background-color: var(--color-bg-hover);
+	.cell-selected .cell-menu-button {
+		display: flex;
+		align-items: center;
+		justify-content: center;
 	}
 
-	td.focus .cell-menu-button {
+	.header-row {
 		display: flex;
+		justify-content: space-between;
 		align-items: center;
-		justify-content: center;
+		gap: var(--size-2);
+		height: var(--size-6);
+		min-height: var(--size-6);
 	}
 
-	th .header-content {
-		white-space: normal;
-		overflow-wrap: break-word;
-		word-break: break-word;
+	.label {
+		flex: 1;
 	}
 
-	.table-container {
-		display: flex;
-		flex-direction: column;
-		gap: var(--size-2);
+	.label p {
+		margin: 0;
+		color: var(--block-label-text-color);
+		font-size: var(--block-label-text-size);
 	}
 
 	.row-number,
@@ -1332,24 +1321,94 @@
 		background: var(--table-odd-background-fill);
 	}
 
-	.header-row {
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
-		gap: var(--size-2);
-		height: var(--size-6);
-		min-height: var(--size-6);
+	.cell-selected {
+		--ring-color: var(--color-accent);
+		box-shadow: inset 0 0 0 2px var(--ring-color);
+		z-index: var(--layer-1);
+		position: relative;
 	}
 
-	.label {
-		flex: 1;
+	.cell-selected.no-top {
+		box-shadow:
+			inset 2px 0 0 var(--ring-color),
+			inset -2px 0 0 var(--ring-color),
+			inset 0 -2px 0 var(--ring-color);
 	}
 
-	.label p {
-		position: relative;
-		z-index: var(--layer-4);
-		margin: 0;
-		color: var(--block-label-text-color);
-		font-size: var(--block-label-text-size);
+	.cell-selected.no-bottom {
+		box-shadow:
+			inset 2px 0 0 var(--ring-color),
+			inset -2px 0 0 var(--ring-color),
+			inset 0 2px 0 var(--ring-color);
+	}
+
+	.cell-selected.no-left {
+		box-shadow:
+			inset 0 2px 0 var(--ring-color),
+			inset -2px 0 0 var(--ring-color),
+			inset 0 -2px 0 var(--ring-color);
+	}
+
+	.cell-selected.no-right {
+		box-shadow:
+			inset 0 2px 0 var(--ring-color),
+			inset 2px 0 0 var(--ring-color),
+			inset 0 -2px 0 var(--ring-color);
+	}
+
+	.cell-selected.no-top.no-left {
+		box-shadow:
+			inset -2px 0 0 var(--ring-color),
+			inset 0 -2px 0 var(--ring-color);
+	}
+
+	.cell-selected.no-top.no-right {
+		box-shadow:
+			inset 2px 0 0 var(--ring-color),
+			inset 0 -2px 0 var(--ring-color);
+	}
+
+	.cell-selected.no-bottom.no-left {
+		box-shadow:
+			inset -2px 0 0 var(--ring-color),
+			inset 0 2px 0 var(--ring-color);
+	}
+
+	.cell-selected.no-bottom.no-right {
+		box-shadow:
+			inset 2px 0 0 var(--ring-color),
+			inset 0 2px 0 var(--ring-color);
+	}
+
+	.cell-selected.no-top.no-bottom {
+		box-shadow:
+			inset 2px 0 0 var(--ring-color),
+			inset -2px 0 0 var(--ring-color);
+	}
+
+	.cell-selected.no-left.no-right {
+		box-shadow:
+			inset 0 2px 0 var(--ring-color),
+			inset 0 -2px 0 var(--ring-color);
+	}
+
+	.cell-selected.no-top.no-left.no-right {
+		box-shadow: inset 0 -2px 0 var(--ring-color);
+	}
+
+	.cell-selected.no-bottom.no-left.no-right {
+		box-shadow: inset 0 2px 0 var(--ring-color);
+	}
+
+	.cell-selected.no-left.no-top.no-bottom {
+		box-shadow: inset -2px 0 0 var(--ring-color);
+	}
+
+	.cell-selected.no-right.no-top.no-bottom {
+		box-shadow: inset 2px 0 0 var(--ring-color);
+	}
+
+	.cell-selected.no-top.no-bottom.no-left.no-right {
+		box-shadow: none;
 	}
 </style>