@gradio/dataframe 0.16.4 → 0.17.0

package/dist/shared/Table.svelte

@@ -1,24 +1,30 @@
+<script context="module">import {
+  create_dataframe_context
+} from "./context/table_context";
+import { create_keyboard_context } from "./context/keyboard_context";
+import { create_selection_context } from "./context/selection_context";
+</script>
+
 <script>import { afterUpdate, createEventDispatcher, tick, onMount } from "svelte";
 import { dequal } from "dequal/lite";
 import { Upload } from "@gradio/upload";
 import EditableCell from "./EditableCell.svelte";
+import RowNumber from "./RowNumber.svelte";
+import TableHeader from "./TableHeader.svelte";
+import TableCell from "./TableCell.svelte";
+import EmptyRowButton from "./EmptyRowButton.svelte";
 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,
-  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,
-  select_column,
-  select_row,
   calculate_selection_positions
 } from "./selection_utils";
 import {
@@ -27,6 +33,11 @@ import {
   handle_file_upload,
   sort_table_data
 } from "./utils/table_utils";
+import { make_headers, process_data } from "./utils/data_processing";
+import { handle_keydown } from "./utils/keyboard_utils";
+import {
+  create_drag_handlers
+} from "./utils/drag_utils";
 export let datatype;
 export let label = null;
 export let show_label = true;
@@ -35,6 +46,7 @@ export let values = [];
 export let col_count;
 export let row_count;
 export let latex_delimiters;
+export let components = {};
 export let editable = true;
 export let wrap = false;
 export let root;
@@ -51,27 +63,50 @@ 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;
+export let static_columns = [];
 $:
   actual_pinned_columns = pinned_columns && data?.[0]?.length ? Math.min(pinned_columns, data[0].length) : 0;
-let selected_cells = [];
+const { state: df_state, actions: df_actions } = create_dataframe_context({
+  show_fullscreen_button,
+  show_copy_button,
+  show_search,
+  show_row_numbers,
+  editable,
+  pinned_columns,
+  show_label,
+  line_breaks,
+  wrap,
+  max_height,
+  column_widths,
+  max_chars
+});
 $:
-  selected_cells = [...selected_cells];
-let selected = false;
+  selected_cells = $df_state.ui_state.selected_cells;
+let previous_selected_cells = [];
+$: {
+  if (copy_flash && !dequal(selected_cells, previous_selected_cells)) {
+    keyboard_ctx?.set_copy_flash(false);
+  }
+  previous_selected_cells = selected_cells;
+}
 $:
-  selected = selected_cells.length > 0 ? selected_cells[selected_cells.length - 1] : false;
+  selected = $df_state.ui_state.selected;
 export let display_value = null;
 export let styling = null;
-let t_rect;
 let els = {};
 let data_binding = {};
 const dispatch = createEventDispatcher();
-let editing = false;
+$:
+  editing = $df_state.ui_state.editing;
 let clear_on_focus = false;
-let header_edit = false;
-let selected_header = false;
-let active_cell_menu = null;
-let active_header_menu = null;
+$:
+  header_edit = $df_state.ui_state.header_edit;
+$:
+  selected_header = $df_state.ui_state.selected_header;
+$:
+  active_cell_menu = $df_state.ui_state.active_cell_menu;
+$:
+  active_header_menu = $df_state.ui_state.active_header_menu;
 let is_fullscreen = false;
 let dragging = false;
 let copy_flash = false;
@@ -88,278 +123,129 @@ 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, col_count2, els2) {
-  let _h = _head || [];
-  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_count2[0]).fill(0).map((_, i) => {
-      const _id = make_id();
-      els2[_id] = { cell: null, input: null };
-      return { id: _id, value: JSON.stringify(i + 1) };
-    });
-  }
-  return _h.map((h, i) => {
-    const _id = make_id();
-    els2[_id] = { cell: null, input: null };
-    return { id: _id, value: h ?? "" };
-  });
-}
-function process_data(_values) {
-  const data_row_length = _values.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, col_count, els);
+let _headers = make_headers(headers, col_count, els, make_id);
 let old_headers = headers;
 $: {
   if (!dequal(headers, old_headers)) {
-    _headers = make_headers(headers, col_count, els);
+    _headers = make_headers(headers, col_count, els, make_id);
     old_headers = JSON.parse(JSON.stringify(headers));
   }
 }
 let data = [[]];
 let old_val = void 0;
+let search_results = [[]];
 $:
   if (!dequal(values, old_val)) {
-    data = process_data(values);
-    old_val = JSON.parse(JSON.stringify(values));
-  }
-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))
-  );
-  if (!dequal(current_data, previous_data) || !dequal(current_headers, previous_headers)) {
-    dispatch("change", {
-      data: data.map((row) => row.map((cell) => cell.value)),
-      headers: _headers.map((h) => h.value),
-      metadata: null
-      // the metadata (display value, styling) cannot be changed by the user so we don't need to pass it up
-    });
-    if (!value_is_output) {
-      dispatch("input");
-    }
-    previous_data = current_data;
-    previous_headers = current_headers;
-  }
-}
-function get_sort_status(name, _sort, direction) {
-  if (!_sort)
-    return "none";
-  if (headers[_sort] === name) {
-    if (direction === "asc")
-      return "ascending";
-    if (direction === "des")
-      return "descending";
-  }
-  return "none";
-}
-async function handle_keydown(event) {
-  if (selected_header !== false && header_edit === false) {
-    switch (event.key) {
-      case "ArrowDown":
-        selected = [0, selected_header];
-        selected_cells = [[0, selected_header]];
-        selected_header = false;
-        return;
-      case "ArrowLeft":
-        selected_header = selected_header > 0 ? selected_header - 1 : selected_header;
-        return;
-      case "ArrowRight":
-        selected_header = selected_header < _headers.length - 1 ? selected_header + 1 : selected_header;
-        return;
-      case "Escape":
-        event.preventDefault();
-        selected_header = false;
-        break;
-      case "Enter":
-        event.preventDefault();
-        if (editable) {
-          header_edit = selected_header;
-        }
-        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;
+    if (parent) {
+      for (let i = 0; i < 50; i++) {
+        parent.style.removeProperty(`--cell-width-${i}`);
       }
     }
-    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");
-      }
+    const is_reset = values.length === 0 || values.length === 1 && values[0].length === 0;
+    const is_different_structure = old_val !== void 0 && (values.length !== old_val.length || values[0] && old_val[0] && values[0].length !== old_val[0].length);
+    data = process_data(
+      values,
+      els,
+      data_binding,
+      make_id,
+      display_value
+    );
+    old_val = JSON.parse(JSON.stringify(values));
+    if (is_reset || is_different_structure) {
+      df_actions.reset_sort_state();
+    } else if ($df_state.sort_state.sort_columns.length > 0) {
+      sort_data(data, display_value, styling);
     }
-    return;
-  }
-  if (event.key === "c" && (event.metaKey || event.ctrlKey)) {
-    event.preventDefault();
-    if (selected_cells.length > 0) {
-      await handle_copy();
+    if ($df_state.current_search_query) {
+      df_actions.handle_search(null);
+    }
+    if (parent && cells.length > 0) {
+      set_cell_widths();
     }
-    return;
   }
-  if (!selected) {
-    return;
+$:
+  if ($df_state.current_search_query !== void 0) {
+    const cell_map = /* @__PURE__ */ new Map();
+    data.forEach((row, row_idx) => {
+      row.forEach((cell, col_idx) => {
+        cell_map.set(cell.id, {
+          value: cell.value,
+          styling: styling?.[row_idx]?.[col_idx] || ""
+        });
+      });
+    });
+    const filtered = df_actions.filter_data(data);
+    search_results = filtered.map(
+      (row) => row.map((cell) => {
+        const original = cell_map.get(cell.id);
+        return {
+          ...cell,
+          display_value: original?.display_value || String(cell.value),
+          styling: original?.styling || ""
+        };
+      })
+    );
   }
-  const [i, j] = selected;
-  switch (event.key) {
-    case "ArrowRight":
-    case "ArrowLeft":
-    case "ArrowDown":
-    case "ArrowUp":
-      if (editing)
-        break;
-      event.preventDefault();
-      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 = false;
-        }
-        selected = next_coords;
-      } else if (next_coords === false && event.key === "ArrowUp" && i === 0) {
-        selected_header = j;
-        selected = false;
-        selected_cells = [];
-        editing = false;
-      }
-      break;
-    case "Escape":
-      if (!editable)
-        break;
-      event.preventDefault();
-      editing = false;
-      break;
-    case "Enter":
-      event.preventDefault();
-      if (editable) {
-        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;
-            await tick();
-            selected = [i, j];
-          } else {
-            editing = [i, j];
-            clear_on_focus = false;
-          }
-        }
-      }
-      break;
-    case "Tab":
-      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;
-      if ((!editing || editing && dequal(editing, [i, j])) && event.key.length === 1) {
-        clear_on_focus = true;
-        editing = [i, j];
-      }
+let previous_headers = _headers.map((h) => h.value);
+let previous_data = data.map((row) => row.map((cell) => String(cell.value)));
+$: {
+  if (data || _headers) {
+    df_actions.trigger_change(
+      data,
+      _headers,
+      previous_data,
+      previous_headers,
+      value_is_output,
+      dispatch
+    );
+    previous_data = data.map((row) => row.map((cell) => String(cell.value)));
+    previous_headers = _headers.map((h) => h.value);
   }
 }
-let sort_direction;
-let sort_by;
 function handle_sort(col, direction) {
-  if (typeof sort_by !== "number" || sort_by !== col) {
-    sort_direction = direction;
-    sort_by = col;
-  } else if (sort_by === col) {
-    if (sort_direction === direction) {
-      sort_direction = void 0;
-      sort_by = void 0;
-    } else {
-      sort_direction = direction;
+  df_actions.handle_sort(col, direction);
+  sort_data(data, display_value, styling);
+}
+function clear_sort() {
+  df_actions.reset_sort_state();
+  sort_data(data, display_value, styling);
+}
+$: {
+  df_actions.sort_data(data, display_value, styling);
+  df_actions.update_row_order(data);
+}
+$: {
+  if ($df_state.sort_state.sort_columns) {
+    if ($df_state.sort_state.sort_columns.length > 0) {
+      sort_data(data, display_value, styling);
     }
   }
 }
 async function edit_header(i, _select = false) {
   if (!editable || header_edit === i)
     return;
-  selected = false;
-  selected_cells = [];
-  selected_header = i;
-  header_edit = i;
+  if (!editable || col_count[1] !== "dynamic" || header_edit === i)
+    return;
+  df_actions.set_header_edit(i);
+}
+function handle_header_click(event, col) {
+  if (event.target instanceof HTMLAnchorElement) {
+    return;
+  }
+  event.preventDefault();
+  event.stopPropagation();
+  if (!editable)
+    return;
+  clear_on_focus = false;
+  df_actions.set_editing(false);
+  df_actions.handle_header_click(col, editable);
+  parent.focus();
 }
 function end_header_edit(event) {
   if (!editable)
     return;
-  switch (event.detail.key) {
-    case "Escape":
-    case "Enter":
-    case "Tab":
-      event.preventDefault();
-      selected = false;
-      selected_header = header_edit;
-      header_edit = false;
-      parent.focus();
-      break;
-  }
+  df_actions.end_header_edit(event.detail.key);
+  parent.focus();
 }
 async function add_row(index) {
   parent.focus();
@@ -380,36 +266,32 @@ async function add_row(index) {
   data = data;
   selected = [index !== void 0 ? index : data.length - 1, 0];
 }
-$:
-  (data || _headers) && trigger_change();
 async function add_col(index) {
   parent.focus();
   if (col_count[1] !== "dynamic")
     return;
-  const insert_index = index !== void 0 ? index : data[0].length;
-  for (let i = 0; i < data.length; i++) {
-    const _id = make_id();
-    els[_id] = { cell: null, input: null };
-    data[i].splice(insert_index, 0, { id: _id, value: "" });
-  }
-  headers.splice(insert_index, 0, `Header ${headers.length + 1}`);
-  data = data;
-  headers = headers;
+  const result = df_actions.add_col(data, headers, make_id, index);
+  result.data.forEach((row) => {
+    row.forEach((cell) => {
+      if (!els[cell.id]) {
+        els[cell.id] = { cell: null, input: null };
+      }
+    });
+  });
+  data = result.data;
+  headers = result.headers;
   await tick();
   requestAnimationFrame(() => {
-    edit_header(insert_index, true);
+    edit_header(index !== void 0 ? index : data[0].length - 1, true);
     const new_w = parent.querySelectorAll("tbody")[1].offsetWidth;
     parent.querySelectorAll("table")[1].scrollTo({ left: new_w });
   });
 }
 function handle_click_outside(event) {
   if (handle_click_outside_util(event, parent)) {
-    editing = false;
-    selected_cells = [];
+    df_actions.clear_ui_state();
     header_edit = false;
     selected_header = false;
-    active_cell_menu = null;
-    active_header_menu = null;
   }
 }
 $:
@@ -426,30 +308,40 @@ function set_cell_widths() {
   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) => {
+  for (let i = 0; i < 50; i++) {
     if (!column_widths[i]) {
-      parent.style.setProperty(
-        `--cell-width-${i}`,
-        `${width - scrollbar_width / data_cells.length}px`
-      );
+      parent.style.removeProperty(`--cell-width-${i}`);
+    } else if (column_widths[i].endsWith("%")) {
+      const percentage = parseFloat(column_widths[i]);
+      const pixel_width = Math.floor(percentage / 100 * parent.clientWidth);
+      parent.style.setProperty(`--cell-width-${i}`, `${pixel_width}px`);
+    } else {
+      parent.style.setProperty(`--cell-width-${i}`, column_widths[i]);
+    }
+  }
+  widths.forEach((width, i) => {
+    if (!column_widths[i]) {
+      const calculated_width = `${Math.max(width, 45)}px`;
+      parent.style.setProperty(`--cell-width-${i}`, calculated_width);
     }
   });
 }
 function get_cell_width(index) {
-  return column_widths[index] || `var(--cell-width-${index})`;
+  return `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) {
+function sort_data(_data, _display_value, _styling) {
   let id = null;
   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;
-  }
-  sort_table_data(_data, _display_value, _styling, col, dir);
+  sort_table_data(
+    _data,
+    _display_value,
+    _styling,
+    $df_state.sort_state.sort_columns
+  );
   data = data;
   if (id) {
     const [i, j] = get_current_indices(id, data);
@@ -457,7 +349,7 @@ function sort_data(_data, _display_value, _styling, col, dir) {
   }
 }
 $:
-  sort_data(data, display_value, styling, sort_by, sort_direction);
+  sort_data(data, display_value, styling);
 $:
   selected_index = !!selected && selected[0];
 let is_visible = false;
@@ -485,80 +377,58 @@ 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);
-  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;
+$:
+  keyboard_ctx = create_keyboard_context({
+    selected_header,
+    header_edit,
+    editing,
+    selected,
+    selected_cells,
+    editable,
+    data,
+    headers: _headers,
+    els,
+    df_actions,
+    dispatch,
+    add_row,
+    get_next_cell_coordinates,
+    get_range_selection,
+    move_cursor,
+    copy_flash,
+    parent_element: parent,
+    set_copy_flash: (value) => {
+      copy_flash = value;
+      if (value) {
+        setTimeout(() => {
+          copy_flash = false;
+        }, 800);
+      }
     }
-  }
-  toggle_cell_button(row, col);
-  dispatch("select", {
-    index: [row, col],
-    value: get_data_at(row, col),
-    row_value: data[row].map((d) => d.value)
   });
+$:
+  selection_ctx = create_selection_context({
+    df_actions,
+    dispatch,
+    data,
+    els,
+    editable,
+    show_row_numbers,
+    get_data_at,
+    clear_on_focus,
+    selected_cells,
+    parent_element: parent
+  });
+function handle_cell_click(event, row, col) {
+  selection_ctx.actions.handle_cell_click(event, row, col);
 }
 function toggle_cell_menu(event, row, col) {
-  event.stopPropagation();
-  if (active_cell_menu && active_cell_menu.row === row && active_cell_menu.col === col) {
-    active_cell_menu = null;
-  } else {
-    const cell = event.target.closest("td");
-    if (cell) {
-      const rect = cell.getBoundingClientRect();
-      active_cell_menu = { row, col, x: rect.right, y: rect.bottom };
-    }
-  }
+  selection_ctx.actions.toggle_cell_menu(event, row, col);
 }
-function add_row_at(index, position) {
-  const row_index = position === "above" ? index : index + 1;
-  add_row(row_index);
-  active_cell_menu = null;
-  active_header_menu = null;
-}
-function add_col_at(index, position) {
-  const col_index = position === "left" ? index : index + 1;
-  add_col(col_index);
-  active_cell_menu = null;
-  active_header_menu = null;
-}
-function handle_resize() {
-  active_cell_menu = null;
-  active_header_menu = null;
-  selected_cells = [];
-  selected = false;
-  editing = false;
-  set_cell_widths();
-}
-let active_button = null;
-function toggle_header_button(col) {
-  active_button = active_button?.type === "header" && active_button.col === col ? null : { type: "header", col };
+function handle_select_column(col) {
+  selection_ctx.actions.handle_select_column(col);
 }
-function toggle_cell_button(row, col) {
-  active_button = active_button?.type === "cell" && active_button.row === row && active_button.col === col ? null : { type: "cell", row, col };
+function handle_select_row(row) {
+  selection_ctx.actions.handle_select_row(row);
 }
 function toggle_fullscreen() {
   if (!document.fullscreenElement) {
@@ -572,93 +442,44 @@ function toggle_fullscreen() {
 function handle_fullscreen_change() {
   is_fullscreen = !!document.fullscreenElement;
 }
-async function handle_copy() {
-  await copy_table_data(data, selected_cells);
-  copy_flash = true;
-  setTimeout(() => {
-    copy_flash = false;
-  }, 800);
-}
 function toggle_header_menu(event, col) {
   event.stopPropagation();
   if (active_header_menu && active_header_menu.col === col) {
-    active_header_menu = null;
+    df_actions.set_active_header_menu(null);
   } else {
     const header = event.target.closest("th");
     if (header) {
       const rect = header.getBoundingClientRect();
-      active_header_menu = { col, x: rect.right, y: rect.bottom };
+      df_actions.set_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();
+function delete_col_at(index) {
   if (col_count[1] !== "dynamic")
     return;
-  if (_headers.length <= 1)
+  if (data[0].length <= 1)
     return;
-  _headers.splice(index, 1);
-  _headers = _headers;
-  if (data.length > 0) {
-    data.forEach((row) => {
-      row.splice(index, 1);
-    });
-    data = data;
-  }
-  selected = false;
+  const result = df_actions.delete_col_at(data, headers, index);
+  data = result.data;
+  headers = result.headers;
+  _headers = make_headers(headers, col_count, els, make_id);
+  df_actions.set_active_cell_menu(null);
+  df_actions.set_active_header_menu(null);
+  df_actions.set_selected(false);
+  df_actions.set_selected_cells([]);
+  df_actions.set_editing(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;
-}
-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;
+  data = df_actions.delete_row_at(data, index);
+  df_actions.set_active_cell_menu(null);
+  df_actions.set_active_header_menu(null);
 }
 let coords;
 $:
@@ -677,48 +498,111 @@ $:
       "--selected-col-pos",
       positions.col_pos
     );
-    if (positions.row_pos) {
-      document.documentElement.style.setProperty(
-        "--selected-row-pos",
-        positions.row_pos
-      );
-    }
+    document.documentElement.style.setProperty(
+      "--selected-row-pos",
+      positions.row_pos || "0px"
+    );
   }
-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 ($df_state.current_search_query && show_search === "filter") {
+    const filtered_data = [];
+    const filtered_display_values = [];
+    const filtered_styling = [];
+    search_results.forEach((row) => {
+      const data_row = [];
+      const display_row = [];
+      const styling_row = [];
+      row.forEach((cell) => {
+        data_row.push(cell.value);
+        display_row.push(cell.display_value || String(cell.value));
+        styling_row.push(cell.styling || "");
+      });
+      filtered_data.push(data_row);
+      filtered_display_values.push(display_row);
+      filtered_styling.push(styling_row);
     });
+    const change_payload = {
+      data: filtered_data,
+      headers: _headers.map((h) => h.value),
+      metadata: {
+        display_value: filtered_display_values,
+        styling: filtered_styling
+      }
+    };
+    dispatch("change", change_payload);
     if (!value_is_output) {
       dispatch("input");
     }
-    current_search_query = null;
+    df_actions.handle_search(null);
   }
 }
-function handle_header_click(event, col) {
-  if (event.target instanceof HTMLAnchorElement) {
-    return;
-  }
-  event.preventDefault();
-  event.stopPropagation();
-  if (!editable)
-    return;
-  clear_on_focus = false;
+let viewport;
+let show_scroll_button = false;
+function scroll_to_top() {
+  viewport.scrollTo({
+    top: 0
+  });
+}
+function handle_resize() {
+  df_actions.set_active_cell_menu(null);
+  df_actions.set_active_header_menu(null);
+  selected_cells = [];
+  selected = false;
+  editing = false;
+  set_cell_widths();
+}
+function add_row_at(index, position) {
+  const row_index = position === "above" ? index : index + 1;
+  add_row(row_index);
   active_cell_menu = null;
   active_header_menu = null;
-  selected = false;
-  selected_cells = [];
-  selected_header = col;
-  header_edit = col;
-  parent.focus();
 }
+function add_col_at(index, position) {
+  const col_index = position === "left" ? index : index + 1;
+  add_col(col_index);
+  active_cell_menu = null;
+  active_header_menu = null;
+}
+export function reset_sort_state() {
+  df_actions.reset_sort_state();
+}
+let is_dragging = false;
+let drag_start = null;
+let mouse_down_pos = null;
+const drag_state = {
+  is_dragging,
+  drag_start,
+  mouse_down_pos
+};
+$: {
+  is_dragging = drag_state.is_dragging;
+  drag_start = drag_state.drag_start;
+  mouse_down_pos = drag_state.mouse_down_pos;
+}
+let drag_handlers;
+function init_drag_handlers() {
+  drag_handlers = create_drag_handlers(
+    drag_state,
+    (value) => is_dragging = value,
+    (cells2) => df_actions.set_selected_cells(cells2),
+    (cell) => df_actions.set_selected(cell),
+    (event, row, col) => selection_ctx.actions.handle_cell_click(event, row, col),
+    show_row_numbers,
+    parent
+  );
+}
+$:
+  if (parent)
+    init_drag_handlers();
+$:
+  handle_mouse_down = drag_handlers?.handle_mouse_down || (() => {
+  });
+$:
+  handle_mouse_move = drag_handlers?.handle_mouse_move || (() => {
+  });
+$:
+  handle_mouse_up = drag_handlers?.handle_mouse_up || (() => {
+  });
 </script>
 
 <svelte:window on:resize={() => set_cell_widths()} />
@@ -735,140 +619,70 @@ function handle_header_click(event, col) {
 				{show_fullscreen_button}
 				{is_fullscreen}
 				on:click={toggle_fullscreen}
-				on_copy={handle_copy}
+				on_copy={async () => await copy_table_data(data, null)}
 				{show_copy_button}
 				{show_search}
-				on:search={(e) => handle_search(e.detail)}
+				on:search={(e) => df_actions.handle_search(e.detail)}
 				on_commit_filter={commit_filter}
-				{current_search_query}
+				current_search_query={$df_state.current_search_query}
 			/>
 		</div>
 	{/if}
 	<div
 		bind:this={parent}
 		class="table-wrap"
-		class:dragging
+		class:dragging={is_dragging}
 		class:no-wrap={!wrap}
 		style="height:{table_height}px;"
 		class:menu-open={active_cell_menu || active_header_menu}
-		on:keydown={(e) => handle_keydown(e)}
+		on:keydown={(e) => handle_keydown(e, keyboard_ctx)}
+		on:mousemove={handle_mouse_move}
+		on:mouseup={handle_mouse_up}
+		on:mouseleave={handle_mouse_up}
 		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}
-			class:fixed-layout={column_widths.length != 0}
-		>
+		<table bind:this={table}>
 			{#if label && label.length !== 0}
 				<caption class="sr-only">{label}</caption>
 			{/if}
 			<thead>
 				<tr>
 					{#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>
+						<RowNumber is_header={true} />
 					{/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={(event) => handle_header_click(event, i)}
-							on:mousedown={(event) => {
-								event.preventDefault();
-								event.stopPropagation();
-							}}
-						>
-							<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}
-										header
-										{root}
-										{editable}
-									/>
-									{#if header_edit !== i}
-										<div class="sort-buttons">
-											<SortIcon
-												direction={sort_by === i ? sort_direction : null}
-												on:sort={({ detail }) => handle_sort(i, detail)}
-												{i18n}
-											/>
-										</div>
-									{/if}
-								</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>
+						<TableHeader
+							bind:value={_headers[i].value}
+							{i}
+							{actual_pinned_columns}
+							{header_edit}
+							{selected_header}
+							get_sort_status={df_actions.get_sort_status}
+							{headers}
+							{get_cell_width}
+							{handle_header_click}
+							{toggle_header_menu}
+							{end_header_edit}
+							sort_columns={$df_state.sort_state.sort_columns}
+							{latex_delimiters}
+							{line_breaks}
+							{max_chars}
+							{root}
+							{editable}
+							is_static={static_columns.includes(i)}
+							{i18n}
+							bind:el={els[id].input}
+							{col_count}
+						/>
 					{/each}
 				</tr>
 			</thead>
 			<tbody>
 				<tr>
+					{#if show_row_numbers}
+						<RowNumber index={0} />
+					{/if}
 					{#each max as { value, id }, j (id)}
 						<td tabindex="-1" bind:this={cells[j]}>
 							<div class="cell-wrap">
@@ -881,6 +695,14 @@ function handle_header_click(event, col) {
 									el={null}
 									{root}
 									{editable}
+									{i18n}
+									show_selection_buttons={selected_cells.length === 1 &&
+										selected_cells[0][0] === 0 &&
+										selected_cells[0][1] === j}
+									coords={[0, j]}
+									on_select_column={handle_select_column}
+									on_select_row={handle_select_row}
+									{is_dragging}
 								/>
 							</div>
 						</td>
@@ -903,7 +725,8 @@ function handle_header_click(event, col) {
 						_headers = make_headers(
 							head.map((h) => h ?? ""),
 							col_count,
-							els
+							els,
+							make_id
 						);
 						return _headers;
 					},
@@ -916,258 +739,159 @@ function handle_header_click(event, col) {
 		>
 			<div class="table-wrap">
 				<VirtualTable
-					bind:items={data}
+					bind:items={search_results}
 					{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}
+					bind:viewport
+					bind:show_scroll_button
+					on:scroll_top={(_) => {}}
 				>
 					{#if label && label.length !== 0}
 						<caption class="sr-only">{label}</caption>
 					{/if}
 					<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>
+							<RowNumber is_header={true} />
 						{/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={(event) => handle_header_click(event, i)}
-								on:mousedown={(event) => {
-									event.preventDefault();
-									event.stopPropagation();
-								}}
-							>
-								<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}
-											header
-											{root}
-											{editable}
-										/>
-										{#if header_edit !== i}
-											<div class="sort-buttons">
-												<SortIcon
-													direction={sort_by === i ? sort_direction : null}
-													on:sort={({ detail }) => handle_sort(i, detail)}
-													{i18n}
-												/>
-											</div>
-										{/if}
-									</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>
+							<TableHeader
+								bind:value={_headers[i].value}
+								{i}
+								{actual_pinned_columns}
+								{header_edit}
+								{selected_header}
+								get_sort_status={df_actions.get_sort_status}
+								{headers}
+								{get_cell_width}
+								{handle_header_click}
+								{toggle_header_menu}
+								{end_header_edit}
+								sort_columns={$df_state.sort_state.sort_columns}
+								{latex_delimiters}
+								{line_breaks}
+								{max_chars}
+								{root}
+								{editable}
+								is_static={static_columns.includes(i)}
+								{i18n}
+								bind:el={els[id].input}
+								{col_count}
+							/>
 						{/each}
 					</tr>
-					<tr slot="tbody" let:item let:index class:row_odd={index % 2 === 0}>
+					<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>
+							<RowNumber {index} />
 						{/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
-										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>
+							<TableCell
+								bind:value={search_results[index][j].value}
+								{index}
+								{j}
+								{actual_pinned_columns}
+								{get_cell_width}
+								handle_cell_click={(e, r, c) => handle_mouse_down(e, r, c)}
+								{toggle_cell_menu}
+								{is_cell_selected}
+								{should_show_cell_menu}
+								{selected_cells}
+								{copy_flash}
+								{active_cell_menu}
+								styling={search_results[index][j].styling}
+								{latex_delimiters}
+								{line_breaks}
+								datatype={Array.isArray(datatype) ? datatype[j] : datatype}
+								{editing}
+								{clear_on_focus}
+								{max_chars}
+								{root}
+								{editable}
+								is_static={static_columns.includes(j)}
+								{i18n}
+								{components}
+								{handle_select_column}
+								{handle_select_row}
+								bind:el={els[id]}
+								{is_dragging}
+							/>
 						{/each}
 					</tr>
 				</VirtualTable>
 			</div>
 		</Upload>
+		{#if show_scroll_button}
+			<button class="scroll-top-button" on:click={scroll_to_top}>
+				&uarr;
+			</button>
+		{/if}
 	</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>
+	<EmptyRowButton on_click={() => add_row()} />
 {/if}
 
-{#if active_cell_menu}
+{#if active_cell_menu || active_header_menu}
 	<CellMenu
-		x={active_cell_menu.x}
-		y={active_cell_menu.y}
-		row={active_cell_menu.row}
-		{col_count}
-		{row_count}
-		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}
-
-{#if active_header_menu !== null}
-	<CellMenu
-		{i18n}
-		x={active_header_menu.x}
-		y={active_header_menu.y}
-		row={-1}
+		x={active_cell_menu?.x ?? active_header_menu?.x ?? 0}
+		y={active_cell_menu?.y ?? active_header_menu?.y ?? 0}
+		row={active_header_menu ? -1 : active_cell_menu?.row ?? 0}
 		{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_header_menu?.col ?? -1, "left")}
+		on_add_column_left={() =>
+			add_col_at(
+				active_cell_menu?.col ?? active_header_menu?.col ?? -1,
+				"left"
+			)}
 		on_add_column_right={() =>
-			add_col_at(active_header_menu?.col ?? -1, "right")}
+			add_col_at(
+				active_cell_menu?.col ?? 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={_headers.length > 1}
+		on_delete_col={() =>
+			delete_col_at(active_cell_menu?.col ?? active_header_menu?.col ?? -1)}
+		can_delete_rows={!active_header_menu && data.length > 1}
+		can_delete_cols={data.length > 0 && data[0]?.length > 1}
+		{i18n}
+		on_sort={active_header_menu
+			? (direction) => {
+					if (active_header_menu) {
+						handle_sort(active_header_menu.col, direction);
+						df_actions.set_active_header_menu(null);
+					}
+				}
+			: undefined}
+		on_clear_sort={active_header_menu
+			? () => {
+					clear_sort();
+					df_actions.set_active_header_menu(null);
+				}
+			: undefined}
+		sort_direction={active_header_menu
+			? $df_state.sort_state.sort_columns.find(
+					(item) => item.col === (active_header_menu?.col ?? -1)
+				)?.direction ?? null
+			: null}
+		sort_priority={active_header_menu
+			? $df_state.sort_state.sort_columns.findIndex(
+					(item) => item.col === (active_header_menu?.col ?? -1)
+				) + 1 || null
+			: null}
 	/>
 {/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;
 		gap: var(--size-2);
+		position: relative;
 	}
 
 	.table-wrap {
@@ -1183,17 +907,26 @@ function handle_header_click(event, col) {
 		outline: none;
 	}
 
-	.dragging {
-		border-color: var(--color-accent);
+	.table-wrap.dragging {
+		cursor: crosshair !important;
+		user-select: none;
 	}
 
-	.no-wrap {
-		white-space: nowrap;
+	.table-wrap.dragging * {
+		cursor: crosshair !important;
+		user-select: none;
+	}
+
+	.table-wrap > :global(button) {
+		border: 1px solid var(--border-color-primary);
+		border-radius: var(--table-radius);
+		overflow: hidden;
 	}
 
 	table {
 		position: absolute;
 		opacity: 0;
+		z-index: -1;
 		transition: 150ms;
 		width: var(--size-full);
 		table-layout: auto;
@@ -1205,159 +938,39 @@ function handle_header_click(event, col) {
 		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;
-	}
-
-	div.no-wrap td {
-		overflow-x: hidden;
-	}
-
-	table.fixed-layout {
-		table-layout: fixed;
-	}
-
 	thead {
 		position: sticky;
 		top: 0;
-		z-index: var(--layer-2);
+		z-index: 5;
 		box-shadow: var(--shadow-drop);
 	}
 
-	tr {
-		border-bottom: 1px solid var(--border-color-primary);
-		text-align: left;
-	}
-
-	tr > * + * {
-		border-right-width: 0px;
-		border-left-width: 1px;
-		border-style: solid;
-		border-color: var(--border-color-primary);
-	}
-
-	th,
-	td {
-		--ring-color: transparent;
-		position: relative;
-		outline: none;
-		box-shadow: inset 0 0 0 1px var(--ring-color);
-		padding: 0;
-	}
-
-	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,
-	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 {
-		border-bottom-left-radius: var(--table-radius);
-	}
-
-	tr:last-child td:last-child {
-		border-bottom-right-radius: var(--table-radius);
-	}
-
-	tr th {
-		background: var(--table-even-background-fill);
+	thead :global(th.pinned-column) {
+		position: sticky;
+		z-index: 6;
+		background: var(--table-even-background-fill) !important;
 	}
 
-	.sort-buttons {
-		display: flex;
-		align-items: center;
-		flex-shrink: 0;
-		order: -1;
+	.dragging {
+		border-color: var(--color-accent);
 	}
 
-	.editing {
-		background: var(--table-editing);
+	.no-wrap {
+		white-space: nowrap;
 	}
 
-	.cell-wrap {
-		display: flex;
-		align-items: center;
-		justify-content: flex-start;
-		outline: none;
-		min-height: var(--size-9);
-		position: relative;
-		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);
+	div:not(.no-wrap) td {
+		overflow-wrap: anywhere;
 	}
 
-	.header-content {
-		display: flex;
-		align-items: center;
-		overflow: hidden;
-		flex-grow: 1;
-		min-width: 0;
-		white-space: normal;
-		overflow-wrap: break-word;
-		word-break: normal;
-		height: 100%;
-		gap: var(--size-1);
+	div.no-wrap td {
+		overflow-x: hidden;
 	}
 
-	.row_odd {
+	.row-odd {
 		background: var(--table-odd-background-fill);
 	}
 
-	.row_odd.focus {
-		background: var(--background-fill-primary);
-	}
-
-	.cell-menu-button {
-		flex-shrink: 0;
-		display: none;
-		background-color: var(--block-background-fill);
-		border: 1px solid var(--border-color-primary);
-		border-radius: var(--block-radius);
-		width: var(--size-5);
-		height: var(--size-5);
-		min-width: var(--size-5);
-		padding: 0;
-		margin-right: var(--spacing-sm);
-		z-index: var(--layer-1);
-		position: absolute;
-		right: var(--size-1);
-		top: 50%;
-		transform: translateY(-50%);
-	}
-
-	.cell-selected .cell-menu-button,
-	th:hover .cell-menu-button {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-	}
-
 	.header-row {
 		display: flex;
 		justify-content: flex-end;
@@ -1368,225 +981,45 @@ function handle_header_click(event, col) {
 		width: 100%;
 	}
 
-	.label {
+	.header-row .label {
 		flex: 1 1 auto;
 		margin-right: auto;
 	}
 
-	.label p {
+	.header-row .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 {
-		text-align: center;
-		background: var(--table-even-background-fill);
-		font-size: var(--input-text-size);
-		color: var(--body-text-color);
-		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 .header-content {
-		justify-content: space-between;
-		padding: var(--size-1);
-		height: var(--size-9);
-		display: flex;
-		align-items: center;
-	}
-
-	.row-number-header :global(.sort-icons) {
-		margin-right: 0;
-	}
-
-	:global(tbody > tr:nth-child(odd)) .row-number {
-		background: var(--table-odd-background-fill);
-	}
-
-	.cell-selected {
-		--ring-color: var(--color-accent);
-		box-shadow: inset 0 0 0 2px var(--ring-color);
-		z-index: var(--layer-1);
 		position: relative;
+		z-index: 4;
 	}
 
-	.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);
-	}
-
-	.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;
-	}
-
-	.selection-button {
+	.scroll-top-button {
 		position: absolute;
+		right: var(--size-4);
+		bottom: var(--size-4);
+		width: var(--size-8);
+		height: var(--size-8);
+		border-radius: var(--table-radius);
+		background: var(--color-accent);
+		color: white;
+		border: none;
+		cursor: pointer;
 		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);
+		font-size: var(--text-lg);
+		z-index: 9;
+		opacity: 0.5;
 	}
 
-	.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);
+	.scroll-top-button:hover {
+		opacity: 1;
 	}
 
-	.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;
+	tr {
+		border-bottom: 1px solid var(--border-color-primary);
+		text-align: left;
 	}
 </style>