@gradio/dataframe 0.13.1 → 0.15.0

package/dist/shared/Table.svelte

@@ -1,5 +1,4 @@
 <script>import { afterUpdate, createEventDispatcher, tick, onMount } from "svelte";
-import { dsvFormat } from "d3-dsv";
 import { dequal } from "dequal/lite";
 import { Upload } from "@gradio/upload";
 import EditableCell from "./EditableCell.svelte";
@@ -7,6 +6,18 @@ import {} from "@gradio/client";
 import VirtualTable from "./VirtualTable.svelte";
 import CellMenu from "./CellMenu.svelte";
 import Toolbar from "./Toolbar.svelte";
+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;
 export let label = null;
 export let show_label = true;
@@ -26,31 +37,30 @@ export let show_row_numbers = false;
 export let upload;
 export let stream_handler;
 export let show_fullscreen_button = false;
+export let show_copy_button = false;
 export let value_is_output = false;
+export let max_chars = void 0;
+let selected_cells = [];
+$:
+  selected_cells = [...selected_cells];
 let selected = false;
-let clicked_cell = void 0;
+$:
+  selected = selected_cells.length > 0 ? selected_cells[selected_cells.length - 1] : false;
 export let display_value = null;
 export let styling = null;
 let t_rect;
+let els = {};
+let data_binding = {};
 const dispatch = createEventDispatcher();
 let editing = false;
+let clear_on_focus = false;
+let header_edit = false;
+let selected_header = false;
+let active_cell_menu = null;
+let active_header_menu = null;
+let is_fullscreen = false;
+let dragging = false;
 const get_data_at = (row, col) => data?.[row]?.[col]?.value;
-let last_selected = 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 = {};
-let data_binding = {};
 function make_id() {
   return Math.random().toString(36).substring(2, 15);
 }
@@ -75,9 +85,7 @@ function make_headers(_head) {
 }
 function process_data(_values) {
   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
-  ).fill(0).map(
+  return Array(row_count[1] === "fixed" ? row_count[0] : data_row_length).fill(0).map(
     (_, i) => Array(
       col_count[1] === "fixed" ? col_count[0] : data_row_length > 0 ? _values[0].length : headers.length
     ).fill(0).map((_2, j) => {
@@ -135,36 +143,6 @@ function get_sort_status(name, _sort, direction) {
   }
   return "none";
 }
-function get_current_indices(id) {
-  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, current_coords) {
-  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;
 async function handle_keydown(event) {
   if (selected_header !== false && header_edit === false) {
     switch (event.key) {
@@ -187,6 +165,43 @@ async function handle_keydown(event) {
         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;
   }
@@ -199,7 +214,25 @@ async function handle_keydown(event) {
       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":
       if (!editable)
@@ -227,34 +260,26 @@ async function handle_keydown(event) {
           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)
@@ -279,16 +304,13 @@ function handle_sort(col) {
     }
   }
 }
-let header_edit;
-let select_on_focus = false;
-let selected_header = false;
 async function edit_header(i, _select = false) {
   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) {
   if (!editable)
@@ -349,78 +371,14 @@ async function add_col(index) {
   });
 }
 function handle_click_outside(event) {
-  if (active_cell_menu && !event.target.closest(".cell-menu") || active_header_menu && !event.target.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();
-  if (parent.contains(trigger)) {
-    return;
-  }
-  clicked_cell = void 0;
-  editing = false;
-  selected = false;
-  header_edit = false;
-  selected_header = false;
-  active_cell_menu = null;
-  active_header_menu = null;
-}
-function guess_delimitaor(text, possibleDelimiters) {
-  return possibleDelimiters.filter(weedOut);
-  function weedOut(delimiter) {
-    var cache = -1;
-    return text.split("\n").every(checkLength);
-    function checkLength(line) {
-      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) {
-  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) {
-  const reader = new FileReader();
-  function handle_read(e) {
-    if (!e?.target?.result || typeof e.target.result !== "string")
-      return;
-    const [delimiter] = guess_delimitaor(e.target.result, [",", "	"]);
-    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) {
-  if (!_d || _d.length === 0 || !_d[0])
-    return [];
-  let max2 = _d[0].slice();
-  for (let i = 0; i < _d.length; i++) {
-    for (let j = 0; j < _d[i].length; j++) {
-      if (`${max2[j].value}`.length < `${_d[i][j].value}`.length) {
-        max2[j] = _d[i][j];
-      }
-    }
-  }
-  return max2;
 }
 $:
   max = get_max(data);
@@ -476,7 +434,7 @@ function sort_data(_data, _display_value, _styling, col, dir) {
   });
   data = data;
   if (id) {
-    const [i, j] = get_current_indices(id);
+    const [i, j] = get_current_indices(id, data);
     selected = [i, j];
   }
 }
@@ -486,7 +444,7 @@ $:
   selected_index = !!selected && selected[0];
 let is_visible = false;
 onMount(() => {
-  const observer = new IntersectionObserver((entries, observer2) => {
+  const observer = new IntersectionObserver((entries) => {
     entries.forEach((entry) => {
       if (entry.isIntersecting && !is_visible) {
         set_cell_widths();
@@ -509,8 +467,34 @@ onMount(() => {
     );
   };
 });
-let highlighted_column = null;
-let active_cell_menu = null;
+function handle_cell_click(event, row, col) {
+  event.preventDefault();
+  event.stopPropagation();
+  clear_on_focus = false;
+  active_cell_menu = null;
+  active_header_menu = null;
+  selected_header = false;
+  header_edit = false;
+  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, row, col) {
   event.stopPropagation();
   if (active_cell_menu && active_cell_menu.row === row && active_cell_menu.col === col) {
@@ -519,12 +503,7 @@ function toggle_cell_menu(event, row, col) {
     const cell = event.target.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 };
     }
   }
 }
@@ -547,21 +526,11 @@ function handle_resize() {
 }
 let active_button = null;
 function toggle_header_button(col) {
-  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, col) {
-  if (active_button?.type === "cell" && active_button.row === row && active_button.col === col) {
-    active_button = null;
-  } else {
-    active_button = { type: "cell", row, col };
-  }
+  active_button = active_button?.type === "cell" && active_button.row === row && active_button.col === col ? null : { type: "cell", row, col };
 }
-let active_header_menu = null;
-let is_fullscreen = false;
 function toggle_fullscreen() {
   if (!document.fullscreenElement) {
     parent.requestFullscreen();
@@ -574,6 +543,9 @@ function toggle_fullscreen() {
 function handle_fullscreen_change() {
   is_fullscreen = !!document.fullscreenElement;
 }
+async function handle_copy() {
+  await copy_table_data(data, _headers, selected_cells);
+}
 function toggle_header_menu(event, col) {
   event.stopPropagation();
   if (active_header_menu && active_header_menu.col === col) {
@@ -582,17 +554,47 @@ function toggle_header_menu(event, col) {
     const header = event.target.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 };
     }
   }
 }
 afterUpdate(() => {
   value_is_output = false;
 });
+async function delete_row(index) {
+  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) {
+  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) {
+  delete_row(index);
+  active_cell_menu = null;
+  active_header_menu = null;
+}
+function delete_col_at(index) {
+  delete_col(index);
+  active_cell_menu = null;
+  active_header_menu = null;
+}
 </script>
 
 <svelte:window on:resize={() => set_cell_widths()} />
@@ -608,6 +610,8 @@ afterUpdate(() => {
 			{show_fullscreen_button}
 			{is_fullscreen}
 			on:click={toggle_fullscreen}
+			on_copy={handle_copy}
+			{show_copy_button}
 		/>
 	</div>
 	<div
@@ -648,6 +652,7 @@ afterUpdate(() => {
 									edit={false}
 									el={null}
 									{root}
+									{editable}
 								/>
 
 								<div
@@ -683,6 +688,7 @@ afterUpdate(() => {
 									edit={false}
 									el={null}
 									{root}
+									{editable}
 								/>
 							</div>
 						</td>
@@ -698,8 +704,20 @@ afterUpdate(() => {
 			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}
@@ -727,6 +745,7 @@ afterUpdate(() => {
 							<div class="cell-wrap">
 								<div class="header-content">
 									<EditableCell
+										{max_chars}
 										bind:value={_headers[i].value}
 										bind:el={els[id].input}
 										{latex_delimiters}
@@ -736,6 +755,7 @@ afterUpdate(() => {
 										on:dblclick={() => edit_header(i)}
 										header
 										{root}
+										{editable}
 									/>
 									<button
 										class:sorted={sort_by === i}
@@ -764,7 +784,7 @@ afterUpdate(() => {
 										class="cell-menu-button"
 										on:click={(event) => toggle_header_menu(event, i)}
 									>
-										⋮
+										&#8942;
 									</button>
 								{/if}
 							</div>
@@ -780,40 +800,24 @@ afterUpdate(() => {
 						<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}
@@ -832,15 +836,25 @@ afterUpdate(() => {
 										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>
@@ -852,18 +866,22 @@ afterUpdate(() => {
 	</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}
 
@@ -880,25 +898,18 @@ afterUpdate(() => {
 		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 {
@@ -911,7 +922,6 @@ afterUpdate(() => {
 
 	.table-wrap:focus-within {
 		outline: none;
-		background-color: none;
 	}
 
 	.dragging {
@@ -933,6 +943,7 @@ afterUpdate(() => {
 		line-height: var(--line-md);
 		font-family: var(--font-mono);
 		border-spacing: 0;
+		border-collapse: separate;
 	}
 
 	div:not(.no-wrap) td {
@@ -987,6 +998,12 @@ afterUpdate(() => {
 	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 {
@@ -1015,7 +1032,6 @@ afterUpdate(() => {
 		cursor: pointer;
 		padding: var(--size-2);
 		color: var(--body-text-color-subdued);
-		line-height: var(--text-sm);
 	}
 
 	.sort-button:hover {
@@ -1036,11 +1052,11 @@ afterUpdate(() => {
 
 	.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 {
@@ -1049,12 +1065,9 @@ afterUpdate(() => {
 		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 {
@@ -1065,10 +1078,6 @@ afterUpdate(() => {
 		background: var(--background-fill-primary);
 	}
 
-	table {
-		border-collapse: separate;
-	}
-
 	.cell-menu-button {
 		flex-shrink: 0;
 		display: none;
@@ -1081,28 +1090,35 @@ afterUpdate(() => {
 		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,
@@ -1134,24 +1150,94 @@ afterUpdate(() => {
 		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>