@gradio/dataframe 0.15.0 → 0.16.1

package/dist/shared/Table.svelte

@@ -6,6 +6,7 @@ import {} from "@gradio/client";
 import VirtualTable from "./VirtualTable.svelte";
 import CellMenu from "./CellMenu.svelte";
 import Toolbar from "./Toolbar.svelte";
+import SortIcon from "./icons/SortIcon.svelte";
 import {
   is_cell_selected,
   handle_selection,
@@ -15,9 +16,17 @@ import {
   get_range_selection,
   move_cursor,
   get_current_indices,
-  handle_click_outside as handle_click_outside_util
+  handle_click_outside as handle_click_outside_util,
+  select_column,
+  select_row,
+  calculate_selection_positions
 } from "./selection_utils";
-import { copy_table_data, get_max, handle_file_upload } from "./table_utils";
+import {
+  copy_table_data,
+  get_max,
+  handle_file_upload,
+  sort_table_data
+} from "./utils/table_utils";
 export let datatype;
 export let label = null;
 export let show_label = true;
@@ -40,6 +49,11 @@ export let show_fullscreen_button = false;
 export let show_copy_button = false;
 export let value_is_output = false;
 export let max_chars = void 0;
+export let show_search = "none";
+export let pinned_columns = 0;
+let actual_pinned_columns = 0;
+$:
+  actual_pinned_columns = pinned_columns && data?.[0]?.length ? Math.min(pinned_columns, data[0].length) : 0;
 let selected_cells = [];
 $:
   selected_cells = [...selected_cells];
@@ -60,48 +74,60 @@ let active_cell_menu = null;
 let active_header_menu = null;
 let is_fullscreen = false;
 let dragging = false;
+let copy_flash = false;
+let color_accent_copied;
+onMount(() => {
+  const color = getComputedStyle(document.documentElement).getPropertyValue("--color-accent").trim();
+  color_accent_copied = color + "40";
+  document.documentElement.style.setProperty(
+    "--color-accent-copied",
+    color_accent_copied
+  );
+});
 const get_data_at = (row, col) => data?.[row]?.[col]?.value;
 function make_id() {
   return Math.random().toString(36).substring(2, 15);
 }
-function make_headers(_head) {
+function make_headers(_head, col_count2, els2) {
   let _h = _head || [];
-  if (col_count[1] === "fixed" && _h.length < col_count[0]) {
-    const fill = Array(col_count[0] - _h.length).fill("").map((_, i) => `${i + _h.length}`);
+  if (col_count2[1] === "fixed" && _h.length < col_count2[0]) {
+    const fill = Array(col_count2[0] - _h.length).fill("").map((_, i) => `${i + _h.length}`);
     _h = _h.concat(fill);
   }
   if (!_h || _h.length === 0) {
-    return Array(col_count[0]).fill(0).map((_, i) => {
+    return Array(col_count2[0]).fill(0).map((_, i) => {
       const _id = make_id();
-      els[_id] = { cell: null, input: null };
+      els2[_id] = { cell: null, input: null };
       return { id: _id, value: JSON.stringify(i + 1) };
     });
   }
   return _h.map((h, i) => {
     const _id = make_id();
-    els[_id] = { cell: null, input: null };
+    els2[_id] = { cell: null, input: null };
     return { id: _id, value: h ?? "" };
   });
 }
 function process_data(_values) {
   const data_row_length = _values.length;
-  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
+  if (data_row_length === 0)
+    return [];
+  return Array(row_count[1] === "fixed" ? row_count[0] : data_row_length).fill(0).map((_, i) => {
+    return Array(
+      col_count[1] === "fixed" ? col_count[0] : _values[0].length || headers.length
     ).fill(0).map((_2, j) => {
       const id = make_id();
       els[id] = els[id] || { input: null, cell: null };
       const obj = { value: _values?.[i]?.[j] ?? "", id };
       data_binding[id] = obj;
       return obj;
-    })
-  );
+    });
+  });
 }
-let _headers = make_headers(headers);
+let _headers = make_headers(headers, col_count, els);
 let old_headers = headers;
 $: {
   if (!dequal(headers, old_headers)) {
-    _headers = make_headers(headers);
+    _headers = make_headers(headers, col_count, els);
     old_headers = JSON.parse(JSON.stringify(headers));
   }
 }
@@ -115,6 +141,8 @@ $:
 let previous_headers = _headers.map((h) => h.value);
 let previous_data = data.map((row) => row.map((cell) => String(cell.value)));
 async function trigger_change() {
+  if (current_search_query)
+    return;
   const current_headers = _headers.map((h) => h.value);
   const current_data = data.map(
     (row) => row.map((cell) => String(cell.value))
@@ -224,8 +252,10 @@ async function handle_keydown(event) {
           editing = false;
         } else {
           selected_cells = [next_coords];
-          editing = next_coords;
-          clear_on_focus = false;
+          if (editable) {
+            editing = next_coords;
+            clear_on_focus = false;
+          }
         }
         selected = next_coords;
       } else if (next_coords === false && event.key === "ArrowUp" && i === 0) {
@@ -241,26 +271,26 @@ async function handle_keydown(event) {
       editing = false;
       break;
     case "Enter":
-      if (!editable)
-        break;
       event.preventDefault();
-      if (event.shiftKey) {
-        add_row(i);
-        await tick();
-        selected = [i + 1, j];
-      } else {
-        if (dequal(editing, [i, j])) {
-          const cell_id = data[i][j].id;
-          const input_el = els[cell_id].input;
-          if (input_el) {
-            data[i][j].value = input_el.value;
-          }
-          editing = false;
+      if (editable) {
+        if (event.shiftKey) {
+          add_row(i);
           await tick();
-          selected = [i, j];
+          selected = [i + 1, j];
         } else {
-          editing = [i, j];
-          clear_on_focus = false;
+          if (dequal(editing, [i, j])) {
+            const cell_id = data[i][j].id;
+            const input_el = els[cell_id].input;
+            if (input_el) {
+              data[i][j].value = input_el.value;
+            }
+            editing = false;
+            await tick();
+            selected = [i, j];
+          } else {
+            editing = [i, j];
+            clear_on_focus = false;
+          }
         }
       }
       break;
@@ -292,15 +322,16 @@ async function handle_keydown(event) {
 }
 let sort_direction;
 let sort_by;
-function handle_sort(col) {
+function handle_sort(col, direction) {
   if (typeof sort_by !== "number" || sort_by !== col) {
-    sort_direction = "asc";
+    sort_direction = direction;
     sort_by = col;
-  } else {
-    if (sort_direction === "asc") {
-      sort_direction = "des";
-    } else if (sort_direction === "des") {
-      sort_direction = "asc";
+  } else if (sort_by === col) {
+    if (sort_direction === direction) {
+      sort_direction = void 0;
+      sort_by = void 0;
+    } else {
+      sort_direction = direction;
     }
   }
 }
@@ -331,16 +362,14 @@ async function add_row(index) {
   parent.focus();
   if (row_count[1] !== "dynamic")
     return;
-  if (data.length === 0) {
-    values = [Array(headers.length).fill("")];
-    return;
-  }
-  const new_row = Array(data[0].length).fill(0).map((_, i) => {
+  const new_row = Array(data[0]?.length || headers.length).fill(0).map((_, i) => {
     const _id = make_id();
     els[_id] = { cell: null, input: null };
     return { id: _id, value: "" };
   });
-  if (index !== void 0 && index >= 0 && index <= data.length) {
+  if (data.length === 0) {
+    data = [new_row];
+  } else if (index !== void 0 && index >= 0 && index <= data.length) {
     data.splice(index, 0, new_row);
   } else {
     data.push(new_row);
@@ -388,50 +417,36 @@ let cells = [];
 let parent;
 let table;
 function set_cell_widths() {
-  const widths = cells.map((el, i) => {
-    return el?.clientWidth || 0;
-  });
+  const widths = cells.map((el) => el?.clientWidth || 0);
   if (widths.length === 0)
     return;
-  for (let i = 0; i < widths.length; i++) {
-    parent.style.setProperty(
-      `--cell-width-${i}`,
-      `${widths[i] - scrollbar_width / widths.length}px`
-    );
+  if (show_row_numbers) {
+    parent.style.setProperty(`--cell-width-row-number`, `${widths[0]}px`);
   }
+  const data_cells = show_row_numbers ? widths.slice(1) : widths;
+  data_cells.forEach((width, i) => {
+    if (!column_widths[i]) {
+      parent.style.setProperty(
+        `--cell-width-${i}`,
+        `${width - scrollbar_width / data_cells.length}px`
+      );
+    }
+  });
+}
+function get_cell_width(index) {
+  return column_widths[index] || `var(--cell-width-${index})`;
 }
 let table_height = values.slice(0, max_height / values.length * 37).length * 37 + 37;
 let scrollbar_width = 0;
 function sort_data(_data, _display_value, _styling, col, dir) {
   let id = null;
-  if (selected && selected[0] in data && selected[1] in data[selected[0]]) {
-    id = data[selected[0]][selected[1]].id;
+  if (selected && selected[0] in _data && selected[1] in _data[selected[0]]) {
+    id = _data[selected[0]][selected[1]].id;
   }
   if (typeof col !== "number" || !dir) {
     return;
   }
-  const indices = [...Array(_data.length).keys()];
-  if (dir === "asc") {
-    indices.sort(
-      (i, j) => _data[i][col].value < _data[j][col].value ? -1 : 1
-    );
-  } else if (dir === "des") {
-    indices.sort(
-      (i, j) => _data[i][col].value > _data[j][col].value ? -1 : 1
-    );
-  } else {
-    return;
-  }
-  const temp_data = [..._data];
-  const temp_display_value = _display_value ? [..._display_value] : null;
-  const temp_styling = _styling ? [..._styling] : null;
-  indices.forEach((originalIndex, sortedIndex) => {
-    _data[sortedIndex] = temp_data[originalIndex];
-    if (_display_value && temp_display_value)
-      _display_value[sortedIndex] = temp_display_value[originalIndex];
-    if (_styling && temp_styling)
-      _styling[sortedIndex] = temp_styling[originalIndex];
-  });
+  sort_table_data(_data, _display_value, _styling, col, dir);
   data = data;
   if (id) {
     const [i, j] = get_current_indices(id, data);
@@ -468,25 +483,33 @@ onMount(() => {
   };
 });
 function handle_cell_click(event, row, col) {
+  if (event.target instanceof HTMLAnchorElement) {
+    return;
+  }
   event.preventDefault();
   event.stopPropagation();
+  if (show_row_numbers && col === -1)
+    return;
   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;
+  parent.focus();
+  if (editable) {
+    if (selected_cells.length === 1) {
+      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", {
@@ -522,6 +545,9 @@ function add_col_at(index, position) {
 function handle_resize() {
   active_cell_menu = null;
   active_header_menu = null;
+  selected_cells = [];
+  selected = false;
+  editing = false;
   set_cell_widths();
 }
 let active_button = null;
@@ -544,7 +570,11 @@ function handle_fullscreen_change() {
   is_fullscreen = !!document.fullscreenElement;
 }
 async function handle_copy() {
-  await copy_table_data(data, _headers, selected_cells);
+  await copy_table_data(data, selected_cells);
+  copy_flash = true;
+  setTimeout(() => {
+    copy_flash = false;
+  }, 800);
 }
 function toggle_header_menu(event, col) {
   event.stopPropagation();
@@ -575,14 +605,16 @@ async function delete_col(index) {
   parent.focus();
   if (col_count[1] !== "dynamic")
     return;
-  if (data[0].length <= 1)
+  if (_headers.length <= 1)
     return;
   _headers.splice(index, 1);
   _headers = _headers;
-  data.forEach((row) => {
-    row.splice(index, 1);
-  });
-  data = data;
+  if (data.length > 0) {
+    data.forEach((row) => {
+      row.splice(index, 1);
+    });
+    data = data;
+  }
   selected = false;
 }
 function delete_row_at(index) {
@@ -595,35 +627,130 @@ function delete_col_at(index) {
   active_cell_menu = null;
   active_header_menu = null;
 }
+let row_order = [];
+$: {
+  if (typeof sort_by === "number" && sort_direction && sort_by >= 0 && sort_by < data[0].length) {
+    const indices = [...Array(data.length)].map((_, i) => i);
+    const sort_index = sort_by;
+    indices.sort((a, b) => {
+      const row_a = data[a];
+      const row_b = data[b];
+      if (!row_a || !row_b || sort_index >= row_a.length || sort_index >= row_b.length)
+        return 0;
+      const val_a = row_a[sort_index].value;
+      const val_b = row_b[sort_index].value;
+      const comp = val_a < val_b ? -1 : val_a > val_b ? 1 : 0;
+      return sort_direction === "asc" ? comp : -comp;
+    });
+    row_order = indices;
+  } else {
+    row_order = [...Array(data.length)].map((_, i) => i);
+  }
+}
+function handle_select_column(col) {
+  selected_cells = select_column(data, col);
+  selected = selected_cells[0];
+  editing = false;
+}
+function handle_select_row(row) {
+  selected_cells = select_row(data, row);
+  selected = selected_cells[0];
+  editing = false;
+}
+let coords;
+$:
+  if (selected !== false)
+    coords = selected;
+$:
+  if (selected !== false) {
+    const positions = calculate_selection_positions(
+      selected,
+      data,
+      els,
+      parent,
+      table
+    );
+    document.documentElement.style.setProperty(
+      "--selected-col-pos",
+      positions.col_pos
+    );
+    if (positions.row_pos) {
+      document.documentElement.style.setProperty(
+        "--selected-row-pos",
+        positions.row_pos
+      );
+    }
+  }
+let current_search_query = null;
+function handle_search(search_query) {
+  current_search_query = search_query;
+  dispatch("search", search_query);
+}
+function commit_filter() {
+  if (current_search_query && show_search === "filter") {
+    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");
+    }
+    current_search_query = null;
+  }
+}
 </script>
 
 <svelte:window on:resize={() => set_cell_widths()} />
 
 <div class="table-container">
-	<div class="header-row">
-		{#if label && label.length !== 0 && show_label}
-			<div class="label">
-				<p>{label}</p>
-			</div>
-		{/if}
-		<Toolbar
-			{show_fullscreen_button}
-			{is_fullscreen}
-			on:click={toggle_fullscreen}
-			on_copy={handle_copy}
-			{show_copy_button}
-		/>
-	</div>
+	{#if (label && label.length !== 0 && show_label) || show_fullscreen_button || show_copy_button || show_search !== "none"}
+		<div class="header-row">
+			{#if label && label.length !== 0 && show_label}
+				<div class="label">
+					<p>{label}</p>
+				</div>
+			{/if}
+			<Toolbar
+				{show_fullscreen_button}
+				{is_fullscreen}
+				on:click={toggle_fullscreen}
+				on_copy={handle_copy}
+				{show_copy_button}
+				{show_search}
+				on:search={(e) => handle_search(e.detail)}
+				on_commit_filter={commit_filter}
+				{current_search_query}
+			/>
+		</div>
+	{/if}
 	<div
 		bind:this={parent}
 		class="table-wrap"
 		class:dragging
 		class:no-wrap={!wrap}
-		style="height:{table_height}px"
+		style="height:{table_height}px;"
+		class:menu-open={active_cell_menu || active_header_menu}
 		on:keydown={(e) => handle_keydown(e)}
 		role="grid"
 		tabindex="0"
 	>
+		{#if selected !== false && selected_cells.length === 1}
+			<button
+				class="selection-button selection-button-column"
+				on:click|stopPropagation={() => handle_select_column(coords[1])}
+				aria-label="Select column"
+			>
+				&#8942;
+			</button>
+			<button
+				class="selection-button selection-button-row"
+				on:click|stopPropagation={() => handle_select_row(coords[0])}
+				aria-label="Select row"
+			>
+				&#8942;
+			</button>
+		{/if}
 		<table
 			bind:contentRect={t_rect}
 			bind:this={table}
@@ -635,40 +762,59 @@ function delete_col_at(index) {
 			<thead>
 				<tr>
 					{#if show_row_numbers}
-						<th class="row-number-header"></th>
+						<th
+							class="row-number-header frozen-column always-frozen"
+							style="left: 0;"
+						>
+							<div class="cell-wrap">
+								<div class="header-content">
+									<div class="header-text"></div>
+								</div>
+							</div>
+						</th>
 					{/if}
 					{#each _headers as { value, id }, i (id)}
 						<th
+							class:frozen-column={i < actual_pinned_columns}
+							class:last-frozen={show_row_numbers
+								? i === actual_pinned_columns - 1
+								: i === actual_pinned_columns - 1}
 							class:editing={header_edit === i}
 							aria-sort={get_sort_status(value, sort_by, sort_direction)}
-							style:width={column_widths.length ? column_widths[i] : undefined}
+							style="width: {column_widths.length
+								? column_widths[i]
+								: undefined}; left: {i < actual_pinned_columns
+								? i === 0
+									? show_row_numbers
+										? 'var(--cell-width-row-number)'
+										: '0'
+									: `calc(${show_row_numbers ? 'var(--cell-width-row-number) + ' : ''}${Array(
+											i
+										)
+											.fill(0)
+											.map((_, idx) => `var(--cell-width-${idx})`)
+											.join(' + ')})`
+								: 'auto'};"
 						>
 							<div class="cell-wrap">
-								<EditableCell
-									{value}
-									{latex_delimiters}
-									{line_breaks}
-									header
-									edit={false}
-									el={null}
-									{root}
-									{editable}
-								/>
-
-								<div
-									class:sorted={sort_by === i}
-									class:des={sort_by === i && sort_direction === "des"}
-									class="sort-button {sort_direction} "
-								>
-									<svg
-										width="1em"
-										height="1em"
-										viewBox="0 0 9 7"
-										fill="none"
-										xmlns="http://www.w3.org/2000/svg"
-									>
-										<path d="M4.49999 0L8.3971 6.75H0.602875L4.49999 0Z" />
-									</svg>
+								<div class="header-content">
+									<EditableCell
+										{value}
+										{latex_delimiters}
+										{line_breaks}
+										header
+										edit={false}
+										el={null}
+										{root}
+										{editable}
+									/>
+									<div class="sort-buttons">
+										<SortIcon
+											direction={sort_by === i ? sort_direction : null}
+											on:sort={({ detail }) => handle_sort(i, detail)}
+											{i18n}
+										/>
+									</div>
 								</div>
 							</div>
 						</th>
@@ -707,9 +853,12 @@ function delete_col_at(index) {
 			on:load={({ detail }) =>
 				handle_file_upload(
 					detail.data,
-					col_count,
 					(head) => {
-						_headers = make_headers(head);
+						_headers = make_headers(
+							head.map((h) => h ?? ""),
+							col_count,
+							els
+						);
 						return _headers;
 					},
 					(vals) => {
@@ -719,152 +868,205 @@ function delete_col_at(index) {
 			bind:dragging
 			aria_label={i18n("dataframe.drop_to_upload")}
 		>
-			<VirtualTable
-				bind:items={data}
-				{max_height}
-				bind:actual_height={table_height}
-				bind:table_scrollbar_width={scrollbar_width}
-				selected={selected_index}
-			>
-				{#if label && label.length !== 0}
-					<caption class="sr-only">{label}</caption>
-				{/if}
-				<tr slot="thead">
-					{#if show_row_numbers}
-						<th class="row-number-header"></th>
+			<div class="table-wrap">
+				<VirtualTable
+					bind:items={data}
+					{max_height}
+					bind:actual_height={table_height}
+					bind:table_scrollbar_width={scrollbar_width}
+					selected={selected_index}
+					disable_scroll={active_cell_menu !== null ||
+						active_header_menu !== null}
+				>
+					{#if label && label.length !== 0}
+						<caption class="sr-only">{label}</caption>
 					{/if}
-					{#each _headers as { value, id }, i (id)}
-						<th
-							class:focus={header_edit === i || selected_header === i}
-							aria-sort={get_sort_status(value, sort_by, sort_direction)}
-							style="width: var(--cell-width-{i});"
-							on:click={() => {
-								toggle_header_button(i);
-							}}
-						>
-							<div class="cell-wrap">
-								<div class="header-content">
+					<tr slot="thead">
+						{#if show_row_numbers}
+							<th
+								class="row-number-header frozen-column always-frozen"
+								style="left: 0;"
+							>
+								<div class="cell-wrap">
+									<div class="header-content">
+										<div class="header-text"></div>
+									</div>
+								</div>
+							</th>
+						{/if}
+						{#each _headers as { value, id }, i (id)}
+							<th
+								class:frozen-column={i < actual_pinned_columns}
+								class:last-frozen={i === actual_pinned_columns - 1}
+								class:focus={header_edit === i || selected_header === i}
+								aria-sort={get_sort_status(value, sort_by, sort_direction)}
+								style="width: {get_cell_width(i)}; left: {i <
+								actual_pinned_columns
+									? i === 0
+										? show_row_numbers
+											? 'var(--cell-width-row-number)'
+											: '0'
+										: `calc(${show_row_numbers ? 'var(--cell-width-row-number) + ' : ''}${Array(
+												i
+											)
+												.fill(0)
+												.map((_, idx) => `var(--cell-width-${idx})`)
+												.join(' + ')})`
+									: 'auto'};"
+								on:click={() => {
+									toggle_header_button(i);
+								}}
+							>
+								<div class="cell-wrap">
+									<div class="header-content">
+										<EditableCell
+											{max_chars}
+											bind:value={_headers[i].value}
+											bind:el={els[id].input}
+											{latex_delimiters}
+											{line_breaks}
+											edit={header_edit === i}
+											on:keydown={end_header_edit}
+											on:dblclick={() => edit_header(i)}
+											header
+											{root}
+											{editable}
+										/>
+										<div class="sort-buttons">
+											<SortIcon
+												direction={sort_by === i ? sort_direction : null}
+												on:sort={({ detail }) => handle_sort(i, detail)}
+												{i18n}
+											/>
+										</div>
+									</div>
+									{#if editable}
+										<button
+											class="cell-menu-button"
+											on:click={(event) => toggle_header_menu(event, i)}
+											on:touchstart={(event) => {
+												event.preventDefault();
+												const touch = event.touches[0];
+												const mouseEvent = new MouseEvent("click", {
+													clientX: touch.clientX,
+													clientY: touch.clientY,
+													bubbles: true,
+													cancelable: true,
+													view: window
+												});
+												toggle_header_menu(mouseEvent, i);
+											}}
+										>
+											&#8942;
+										</button>
+									{/if}
+								</div>
+							</th>
+						{/each}
+					</tr>
+					<tr slot="tbody" let:item let:index class:row_odd={index % 2 === 0}>
+						{#if show_row_numbers}
+							<td
+								class="row-number frozen-column always-frozen"
+								style="left: 0;"
+								tabindex="-1"
+							>
+								{index + 1}
+							</td>
+						{/if}
+						{#each item as { value, id }, j (id)}
+							<td
+								class:frozen-column={j < actual_pinned_columns}
+								class:last-frozen={j === actual_pinned_columns - 1}
+								tabindex={show_row_numbers && j === 0 ? -1 : 0}
+								bind:this={els[id].cell}
+								on:touchstart={(event) => {
+									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) => handle_cell_click(event, index, j)}
+								style="width: {get_cell_width(j)}; left: {j <
+								actual_pinned_columns
+									? j === 0
+										? show_row_numbers
+											? 'var(--cell-width-row-number)'
+											: '0'
+										: `calc(${show_row_numbers ? 'var(--cell-width-row-number) + ' : ''}${Array(
+												j
+											)
+												.fill(0)
+												.map((_, idx) => `var(--cell-width-${idx})`)
+												.join(' + ')})`
+									: 'auto'}; {styling?.[index]?.[j] || ''}"
+								class:flash={copy_flash &&
+									is_cell_selected([index, j], selected_cells)}
+								class={is_cell_selected([index, j], selected_cells)}
+								class:menu-active={active_cell_menu &&
+									active_cell_menu.row === index &&
+									active_cell_menu.col === j}
+							>
+								<div class="cell-wrap">
 									<EditableCell
-										{max_chars}
-										bind:value={_headers[i].value}
+										bind:value={data[index][j].value}
 										bind:el={els[id].input}
+										display_value={display_value?.[index]?.[j]}
 										{latex_delimiters}
 										{line_breaks}
-										edit={header_edit === i}
-										on:keydown={end_header_edit}
-										on:dblclick={() => edit_header(i)}
-										header
-										{root}
 										{editable}
-									/>
-									<button
-										class:sorted={sort_by === i}
-										class:des={sort_by === i && sort_direction === "des"}
-										class="sort-button {sort_direction}"
-										tabindex="0"
-										on:click={(event) => {
-											event.stopPropagation();
-											handle_sort(i);
+										edit={dequal(editing, [index, j])}
+										datatype={Array.isArray(datatype) ? datatype[j] : datatype}
+										on:blur={() => {
+											clear_on_focus = false;
+											parent.focus();
 										}}
-									>
-										<svg
-											width="1em"
-											height="1em"
-											viewBox="0 0 9 7"
-											fill="none"
-											xmlns="http://www.w3.org/2000/svg"
+										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 && should_show_cell_menu([index, j], selected_cells, editable)}
+										<button
+											class="cell-menu-button"
+											on:click={(event) => toggle_cell_menu(event, index, j)}
 										>
-											<path d="M4.49999 0L8.3971 6.75H0.602875L4.49999 0Z" />
-										</svg>
-									</button>
+											&#8942;
+										</button>
+									{/if}
 								</div>
-
-								{#if editable}
-									<button
-										class="cell-menu-button"
-										on:click={(event) => toggle_header_menu(event, i)}
-									>
-										&#8942;
-									</button>
-								{/if}
-							</div>
-						</th>
-					{/each}
-				</tr>
-
-				<tr slot="tbody" let:item let:index class:row_odd={index % 2 === 0}>
-					{#if show_row_numbers}
-						<td class="row-number" title={`Row ${index + 1}`}>{index + 1}</td>
-					{/if}
-					{#each item as { value, id }, j (id)}
-						<td
-							tabindex="0"
-							on:touchstart={(event) => {
-								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) => handle_cell_click(event, index, j)}
-							style:width="var(--cell-width-{j})"
-							style={styling?.[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}
-						>
-							<div class="cell-wrap">
-								<EditableCell
-									bind:value={data[index][j].value}
-									bind:el={els[id].input}
-									display_value={display_value?.[index]?.[j]}
-									{latex_delimiters}
-									{line_breaks}
-									{editable}
-									edit={dequal(editing, [index, j])}
-									datatype={Array.isArray(datatype) ? datatype[j] : datatype}
-									on:blur={() => {
-										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 && 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>
-						</td>
-					{/each}
-				</tr>
-			</VirtualTable>
+							</td>
+						{/each}
+					</tr>
+				</VirtualTable>
+			</div>
 		</Upload>
 	</div>
 </div>
+{#if data.length === 0 && editable && row_count[1] === "dynamic"}
+	<div class="add-row-container">
+		<button class="add-row-button" on:click={() => add_row()}>
+			<span>+</span>
+		</button>
+	</div>
+{/if}
 
 {#if active_cell_menu}
 	<CellMenu
@@ -901,11 +1103,19 @@ function delete_col_at(index) {
 		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}
+		can_delete_cols={_headers.length > 1}
 	/>
 {/if}
 
 <style>
+	.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;
@@ -915,8 +1125,9 @@ function delete_col_at(index) {
 	.table-wrap {
 		position: relative;
 		transition: 150ms;
-		border: 1px solid var(--border-color-primary);
-		border-radius: var(--table-radius);
+	}
+
+	.table-wrap.menu-open {
 		overflow: hidden;
 	}
 
@@ -946,6 +1157,12 @@ function delete_col_at(index) {
 		border-collapse: separate;
 	}
 
+	.table-wrap > :global(button) {
+		border: 1px solid var(--border-color-primary);
+		border-radius: var(--table-radius);
+		overflow: hidden;
+	}
+
 	div:not(.no-wrap) td {
 		overflow-wrap: anywhere;
 	}
@@ -961,8 +1178,7 @@ function delete_col_at(index) {
 	thead {
 		position: sticky;
 		top: 0;
-		left: 0;
-		z-index: var(--layer-1);
+		z-index: var(--layer-2);
 		box-shadow: var(--shadow-drop);
 	}
 
@@ -989,10 +1205,12 @@ function delete_col_at(index) {
 
 	th:first-child {
 		border-top-left-radius: var(--table-radius);
+		border-bottom-left-radius: var(--table-radius);
 	}
 
 	th:last-child {
 		border-top-right-radius: var(--table-radius);
+		border-bottom-right-radius: var(--table-radius);
 	}
 
 	th.focus,
@@ -1018,32 +1236,11 @@ function delete_col_at(index) {
 		background: var(--table-even-background-fill);
 	}
 
-	th svg {
-		fill: currentColor;
-		font-size: 10px;
-	}
-
-	.sort-button {
+	.sort-buttons {
 		display: flex;
-		flex: none;
-		justify-content: center;
 		align-items: center;
-		transition: 150ms;
-		cursor: pointer;
-		padding: var(--size-2);
-		color: var(--body-text-color-subdued);
-	}
-
-	.sort-button:hover {
-		color: var(--body-text-color);
-	}
-
-	.des {
-		transform: scaleY(-1);
-	}
-
-	.sort-button.sorted {
-		color: var(--color-accent);
+		flex-shrink: 0;
+		order: -1;
 	}
 
 	.editing {
@@ -1052,11 +1249,19 @@ function delete_col_at(index) {
 
 	.cell-wrap {
 		display: flex;
-		align-items: flex-start;
+		align-items: center;
+		justify-content: flex-start;
 		outline: none;
 		min-height: var(--size-9);
 		position: relative;
-		height: auto;
+		height: 100%;
+		padding: var(--size-2);
+		box-sizing: border-box;
+		margin: 0;
+		gap: var(--size-1);
+		overflow: visible;
+		min-width: 0;
+		border-radius: var(--table-radius);
 	}
 
 	.header-content {
@@ -1067,7 +1272,9 @@ function delete_col_at(index) {
 		min-width: 0;
 		white-space: normal;
 		overflow-wrap: break-word;
-		word-break: break-word;
+		word-break: normal;
+		height: 100%;
+		gap: var(--size-1);
 	}
 
 	.row_odd {
@@ -1096,7 +1303,8 @@ function delete_col_at(index) {
 		transform: translateY(-50%);
 	}
 
-	.cell-selected .cell-menu-button {
+	.cell-selected .cell-menu-button,
+	th:hover .cell-menu-button {
 		display: flex;
 		align-items: center;
 		justify-content: center;
@@ -1104,46 +1312,55 @@ function delete_col_at(index) {
 
 	.header-row {
 		display: flex;
-		justify-content: space-between;
+		justify-content: flex-end;
 		align-items: center;
 		gap: var(--size-2);
-		height: var(--size-6);
 		min-height: var(--size-6);
+		flex-wrap: nowrap;
+		width: 100%;
 	}
 
 	.label {
-		flex: 1;
+		flex: 1 1 auto;
+		margin-right: auto;
 	}
 
 	.label p {
 		margin: 0;
 		color: var(--block-label-text-color);
 		font-size: var(--block-label-text-size);
+		line-height: var(--line-sm);
+	}
+
+	.toolbar {
+		flex: 0 0 auto;
 	}
 
 	.row-number,
 	.row-number-header {
-		width: var(--size-7);
-		min-width: var(--size-7);
 		text-align: center;
 		background: var(--table-even-background-fill);
-		position: sticky;
-		left: 0;
 		font-size: var(--input-text-size);
 		color: var(--body-text-color);
-		padding: var(--size-1) var(--size-2);
+		padding: var(--size-1);
+		min-width: var(--size-12);
+		width: var(--size-12);
 		overflow: hidden;
 		text-overflow: ellipsis;
 		white-space: nowrap;
 		font-weight: var(--weight-semibold);
 	}
 
-	.row-number-header {
-		z-index: var(--layer-2);
+	.row-number-header .header-content {
+		justify-content: space-between;
+		padding: var(--size-1);
+		height: var(--size-9);
+		display: flex;
+		align-items: center;
 	}
 
-	.row-number {
-		z-index: var(--layer-1);
+	.row-number-header :global(.sort-icons) {
+		margin-right: 0;
 	}
 
 	:global(tbody > tr:nth-child(odd)) .row-number {
@@ -1240,4 +1457,88 @@ function delete_col_at(index) {
 	.cell-selected.no-top.no-bottom.no-left.no-right {
 		box-shadow: none;
 	}
+
+	.selection-button {
+		position: absolute;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		background: var(--color-accent);
+		color: white;
+		border-radius: var(--radius-sm);
+		z-index: var(--layer-4);
+	}
+
+	.selection-button-column {
+		width: var(--size-3);
+		height: var(--size-5);
+		top: -10px;
+		left: var(--selected-col-pos);
+		transform: rotate(90deg);
+	}
+
+	.selection-button-row {
+		width: var(--size-3);
+		height: var(--size-5);
+		left: -7px;
+		top: calc(var(--selected-row-pos) - var(--size-5) / 2);
+	}
+
+	.table-wrap:not(:focus-within) .selection-button {
+		opacity: 0;
+		pointer-events: none;
+	}
+
+	.flash.cell-selected {
+		animation: flash-color 700ms ease-out;
+	}
+
+	@keyframes flash-color {
+		0%,
+		30% {
+			background: var(--color-accent-copied);
+		}
+
+		100% {
+			background: transparent;
+		}
+	}
+
+	.frozen-column {
+		position: sticky;
+		z-index: var(--layer-2);
+		border-right: 1px solid var(--border-color-primary);
+	}
+
+	tr:nth-child(odd) .frozen-column {
+		background: var(--table-odd-background-fill);
+	}
+
+	tr:nth-child(even) .frozen-column {
+		background: var(--table-even-background-fill);
+	}
+
+	.always-frozen {
+		z-index: var(--layer-3);
+	}
+
+	.add-row-container {
+		margin-top: var(--size-2);
+	}
+
+	.add-row-button {
+		width: 100%;
+		padding: var(--size-1);
+		background: transparent;
+		border: 1px dashed var(--border-color-primary);
+		border-radius: var(--radius-sm);
+		color: var(--body-text-color);
+		cursor: pointer;
+		transition: all 150ms;
+	}
+
+	.add-row-button:hover {
+		background: var(--background-fill-secondary);
+		border-style: solid;
+	}
 </style>