@gradio/dataframe 0.20.2-dev.0 → 0.21.0

package/dist/shared/Table.svelte

@@ -1,622 +1,823 @@
-<script context="module">import {
-  create_dataframe_context
-} from "./context/dataframe_context";
+<script lang="ts" context="module">
+	import {
+		create_dataframe_context,
+		type SortDirection,
+		type FilterDatatype
+	} from "./context/dataframe_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 {
-  is_cell_selected,
-  should_show_cell_menu,
-  get_current_indices,
-  handle_click_outside as handle_click_outside_util,
-  calculate_selection_positions
-} from "./utils/selection_utils";
-import {
-  copy_table_data,
-  get_max,
-  handle_file_upload
-} from "./utils/table_utils";
-import { make_headers, process_data } from "./utils/data_processing";
-import { handle_keydown, handle_cell_blur } from "./utils/keyboard_utils";
-import {
-  create_drag_handlers
-} from "./utils/drag_utils";
-import { sort_data_and_preserve_selection } from "./utils/sort_utils";
-import { filter_data_and_preserve_selection } from "./utils/filter_utils";
-export let datatype;
-export let label = null;
-export let show_label = true;
-export let headers = [];
-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;
-export let i18n;
-export let max_height = 500;
-export let line_breaks = true;
-export let column_widths = [];
-export let show_row_numbers = false;
-export let upload;
-export let stream_handler;
-export let buttons = null;
-export let value_is_output = false;
-export let max_chars = void 0;
-export let show_search = "none";
-export let pinned_columns = 0;
-export let static_columns = [];
-export let fullscreen = false;
-const df_ctx = create_dataframe_context({
-  show_fullscreen_button: buttons === null ? true : buttons.includes("fullscreen"),
-  show_copy_button: buttons === null ? true : buttons.includes("copy"),
-  show_search,
-  show_row_numbers,
-  editable,
-  pinned_columns,
-  show_label,
-  line_breaks,
-  wrap,
-  max_height,
-  column_widths,
-  max_chars,
-  static_columns
-});
-const { state: df_state, actions: df_actions } = df_ctx;
-$: selected_cells = $df_state.ui_state.selected_cells;
-$: selected = $df_state.ui_state.selected;
-$: editing = $df_state.ui_state.editing;
-$: 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;
-$: copy_flash = $df_state.ui_state.copy_flash;
-$: actual_pinned_columns = pinned_columns && data?.[0]?.length ? Math.min(pinned_columns, data[0].length) : 0;
-onMount(() => {
-  df_ctx.parent_element = parent;
-  df_ctx.get_data_at = get_data_at;
-  df_ctx.get_column = get_column;
-  df_ctx.get_row = get_row;
-  df_ctx.dispatch = dispatch;
-  init_drag_handlers();
-  const observer = new IntersectionObserver((entries) => {
-    entries.forEach((entry) => {
-      if (entry.isIntersecting && !is_visible) {
-        width_calculated = false;
-      }
-      is_visible = entry.isIntersecting;
-    });
-  });
-  observer.observe(parent);
-  document.addEventListener("click", handle_click_outside);
-  window.addEventListener("resize", handle_resize);
-  const global_mouse_up = (event) => {
-    if (is_dragging || drag_start) {
-      handle_mouse_up(event);
-    }
-  };
-  document.addEventListener("mouseup", global_mouse_up);
-  return () => {
-    observer.disconnect();
-    document.removeEventListener("click", handle_click_outside);
-    window.removeEventListener("resize", handle_resize);
-    document.removeEventListener("mouseup", global_mouse_up);
-  };
-});
-$: {
-  if (data || _headers || els) {
-    df_ctx.data = data;
-    df_ctx.headers = _headers;
-    df_ctx.els = els;
-    df_ctx.display_value = display_value;
-    df_ctx.styling = styling;
-  }
-}
-const dispatch = createEventDispatcher();
-let els = {};
-let data_binding = {};
-let _headers = make_headers(headers, col_count, els, make_id);
-let old_headers = headers;
-let data = [[]];
-let old_val = void 0;
-let search_results = [[]];
-let dragging = false;
-let color_accent_copied;
-let filtered_to_original_map = [];
-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;
-const get_column = (col) => data?.map((row) => row[col]?.value) ?? [];
-const get_row = (row) => data?.[row]?.map((cell) => cell.value) ?? [];
-$: {
-  if (!dequal(headers, old_headers)) {
-    _headers = make_headers(headers, col_count, els, make_id);
-    old_headers = JSON.parse(JSON.stringify(headers));
-  }
-}
-function make_id() {
-  return Math.random().toString(36).substring(2, 15);
-}
-export let display_value = null;
-export let styling = null;
-$: if (!dequal(values, old_val)) {
-  if (parent) {
-    const is_reset2 = values.length === 0 || values.length === 1 && values[0].length === 0;
-    const is_different_structure2 = old_val !== void 0 && (values.length !== old_val.length || values[0] && old_val[0] && values[0].length !== old_val[0].length);
-    if (is_reset2 || is_different_structure2) {
-      for (let i = 0; i < 50; i++) {
-        parent.style.removeProperty(`--cell-width-${i}`);
-      }
-      last_width_data_length = 0;
-      last_width_column_count = 0;
-      width_calculated = false;
-    }
-  }
-  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,
-    datatype
-  );
-  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);
-  } else {
-    df_actions.handle_sort(-1, "asc");
-    df_actions.reset_sort_state();
-  }
-  if ($df_state.filter_state.filter_columns.length > 0) {
-    filter_data(data, display_value, styling);
-  } else {
-    df_actions.reset_filter_state();
-  }
-  if ($df_state.current_search_query) {
-    df_actions.handle_search(null);
-  }
-  if (parent && cells.length > 0 && (is_reset || is_different_structure)) {
-    width_calculated = false;
-  }
-}
-$: if ($df_state.current_search_query !== void 0) {
-  const cell_map = /* @__PURE__ */ new Map();
-  filtered_to_original_map = [];
-  data.forEach((row, row_idx) => {
-    if (row.some(
-      (cell) => String(cell?.value).toLowerCase().includes($df_state.current_search_query?.toLowerCase() || "")
-    )) {
-      filtered_to_original_map.push(row_idx);
-    }
-    row.forEach((cell, col_idx) => {
-      cell_map.set(cell.id, {
-        value: cell.value,
-        display_value: cell.display_value !== void 0 ? cell.display_value : String(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 !== void 0 ? original.display_value : String(cell.value),
-        styling: original?.styling || ""
-      };
-    })
-  );
-} else {
-  filtered_to_original_map = [];
-}
-let previous_headers = _headers.map((h) => h.value);
-let previous_data = data.map((row) => row.map((cell) => 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) => cell.value));
-    previous_headers = _headers.map((h) => h.value);
-  }
-}
-function handle_sort(col, 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);
-}
-$: {
-  if ($df_state.filter_state.filter_columns.length > 0) {
-    filter_data(data, display_value, styling);
-  }
-  if ($df_state.sort_state.sort_columns.length > 0) {
-    sort_data(data, display_value, styling);
-    df_actions.update_row_order(data);
-  }
-}
-function handle_filter(col, datatype2, filter, value) {
-  df_actions.handle_filter(col, datatype2, filter, value);
-  filter_data(data, display_value, styling);
-}
-function clear_filter() {
-  df_actions.reset_filter_state();
-  filter_data(data, display_value, styling);
-}
-async function edit_header(i, _select = false) {
-  if (!editable || header_edit === i || col_count[1] !== "dynamic") 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;
-  df_actions.set_editing(false);
-  df_actions.handle_header_click(col, editable);
-  parent.focus();
-}
-function end_header_edit(event) {
-  if (!editable) return;
-  df_actions.end_header_edit(event.detail.key);
-  parent.focus();
-}
-async function add_row(index) {
-  parent.focus();
-  if (row_count[1] !== "dynamic") return;
-  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 (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);
-  }
-  selected = [index !== void 0 ? index : data.length - 1, 0];
-}
-async function add_col(index) {
-  parent.focus();
-  if (col_count[1] !== "dynamic") return;
-  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(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)) {
-    df_actions.clear_ui_state();
-    header_edit = false;
-    selected_header = false;
-  }
-}
-$: max = get_max(data);
-let width_calc_timeout;
-$: if (cells[0] && cells[0]?.clientWidth) {
-  clearTimeout(width_calc_timeout);
-  width_calc_timeout = setTimeout(() => set_cell_widths(), 100);
-}
-let width_calculated = false;
-$: if (cells[0] && !width_calculated) {
-  set_cell_widths();
-  width_calculated = true;
-}
-let cells = [];
-let parent;
-let table;
-let last_width_data_length = 0;
-let last_width_column_count = 0;
-function set_cell_widths() {
-  const column_count = data[0]?.length || 0;
-  if ($df_state.filter_state.filter_columns.length > 0) {
-    return;
-  }
-  if (last_width_data_length === data.length && last_width_column_count === column_count && $df_state.sort_state.sort_columns.length > 0) {
-    return;
-  }
-  if (!parent) {
-    return;
-  }
-  last_width_data_length = data.length;
-  last_width_column_count = column_count;
-  const widths = cells.map((el) => el?.clientWidth || 0);
-  if (widths.length === 0) return;
-  if (show_row_numbers) {
-    parent.style.setProperty(`--cell-width-row-number`, `${widths[0]}px`);
-  }
-  for (let i = 0; i < 50; i++) {
-    if (!column_widths[i]) {
-      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 `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) {
-  const result = sort_data_and_preserve_selection(
-    _data,
-    _display_value,
-    _styling,
-    $df_state.sort_state.sort_columns,
-    selected,
-    get_current_indices
-  );
-  data = result.data;
-  selected = result.selected;
-}
-function filter_data(_data, _display_value, _styling) {
-  const result = filter_data_and_preserve_selection(
-    _data,
-    _display_value,
-    _styling,
-    $df_state.filter_state.filter_columns,
-    selected,
-    get_current_indices,
-    $df_state.filter_state.initial_data?.data,
-    $df_state.filter_state.initial_data?.display_value,
-    $df_state.filter_state.initial_data?.styling
-  );
-  data = result.data;
-  selected = result.selected;
-}
-$: selected_index = !!selected && selected[0];
-let is_visible = false;
-const set_copy_flash = (value) => {
-  df_actions.set_copy_flash(value);
-  if (value) {
-    setTimeout(() => df_actions.set_copy_flash(false), 800);
-  }
-};
-let previous_selected_cells = [];
-$: {
-  if (copy_flash && !dequal(selected_cells, previous_selected_cells)) {
-    set_copy_flash(false);
-  }
-  previous_selected_cells = selected_cells;
-}
-function handle_blur(event) {
-  const { blur_event, coords } = event.detail;
-  handle_cell_blur(blur_event, df_ctx, coords);
-}
-function toggle_header_menu(event, col) {
-  event.stopPropagation();
-  if (active_header_menu && active_header_menu.col === col) {
-    df_actions.set_active_header_menu(null);
-  } else {
-    const header = event.target.closest("th");
-    if (header) {
-      const rect = header.getBoundingClientRect();
-      df_actions.set_active_header_menu({
-        col,
-        x: rect.right,
-        y: rect.bottom
-      });
-    }
-  }
-}
-afterUpdate(() => {
-  value_is_output = false;
-});
-function delete_col_at(index) {
-  if (col_count[1] !== "dynamic") return;
-  if (data[0].length <= 1) return;
-  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) {
-  data = df_actions.delete_row_at(data, index);
-  df_actions.set_active_cell_menu(null);
-  df_actions.set_active_header_menu(null);
-}
-let selected_cell_coords;
-$: if (selected !== false) selected_cell_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
-  );
-  document.documentElement.style.setProperty(
-    "--selected-row-pos",
-    positions.row_pos || "0px"
-  );
-}
-function commit_filter() {
-  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 !== void 0 ? 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");
-    }
-    df_actions.handle_search(null);
-  }
-}
-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;
-  width_calculated = 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;
-}
-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();
-}
-function handle_select_all(col, checked) {
-  data = data.map((row) => {
-    const new_row = [...row];
-    if (new_row[col]) {
-      new_row[col] = {
-        ...new_row[col],
-        value: checked.toString()
-      };
-    }
-    return new_row;
-  });
-}
-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) => df_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 || (() => {
-});
-function get_cell_display_value(row, col) {
-  const is_search_active = $df_state.current_search_query !== void 0;
-  if (is_search_active && search_results?.[row]?.[col]) {
-    return search_results[row][col].display_value !== void 0 ? search_results[row][col].display_value : String(search_results[row][col].value);
-  }
-  if (data?.[row]?.[col]) {
-    return data[row][col].display_value !== void 0 ? data[row][col].display_value : String(data[row][col].value);
-  }
-  return "";
-}
+<script lang="ts">
+	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 type { SelectData } from "@gradio/utils";
+	import type { I18nFormatter } from "js/core/src/gradio_helper";
+	import { type Client } from "@gradio/client";
+	import VirtualTable from "./VirtualTable.svelte";
+	import type {
+		Headers,
+		DataframeValue,
+		Datatype,
+		EditData
+	} from "./utils/utils";
+	import CellMenu from "./CellMenu.svelte";
+	import Toolbar from "./Toolbar.svelte";
+	import type { CellCoordinate, CellValue } from "./types";
+	import {
+		is_cell_selected,
+		should_show_cell_menu,
+		get_current_indices,
+		handle_click_outside as handle_click_outside_util,
+		calculate_selection_positions
+	} from "./utils/selection_utils";
+	import {
+		copy_table_data,
+		get_max,
+		handle_file_upload
+	} from "./utils/table_utils";
+	import { make_headers, process_data } from "./utils/data_processing";
+	import { handle_keydown, handle_cell_blur } from "./utils/keyboard_utils";
+	import {
+		create_drag_handlers,
+		type DragState,
+		type DragHandlers
+	} from "./utils/drag_utils";
+	import { sort_data_and_preserve_selection } from "./utils/sort_utils";
+	import { filter_data_and_preserve_selection } from "./utils/filter_utils";
+
+	export let datatype: Datatype | Datatype[];
+	export let label: string | null = null;
+	export let show_label = true;
+	export let headers: Headers = [];
+	export let values: CellValue[][] = [];
+	export let col_count: [number, "fixed" | "dynamic"];
+	export let row_count: [number, "fixed" | "dynamic"];
+	export let latex_delimiters: {
+		left: string;
+		right: string;
+		display: boolean;
+	}[];
+	export let components: Record<string, any> = {};
+
+	export let editable = true;
+	export let wrap = false;
+	export let root: string;
+	export let i18n: I18nFormatter;
+
+	export let max_height = 500;
+	export let line_breaks = true;
+	export let column_widths: string[] = [];
+	export let show_row_numbers = false;
+	export let upload: Client["upload"];
+	export let stream_handler: Client["stream"];
+	export let buttons: string[] | null = null;
+	export let value_is_output = false;
+	export let max_chars: number | undefined = undefined;
+	export let show_search: "none" | "search" | "filter" = "none";
+	export let pinned_columns = 0;
+	export let static_columns: (string | number)[] = [];
+	export let fullscreen = false;
+
+	const df_ctx = create_dataframe_context({
+		show_fullscreen_button:
+			buttons === null ? true : buttons.includes("fullscreen"),
+		show_copy_button: buttons === null ? true : buttons.includes("copy"),
+		show_search,
+		show_row_numbers,
+		editable,
+		pinned_columns,
+		show_label,
+		line_breaks,
+		wrap,
+		max_height,
+		column_widths,
+		max_chars,
+		static_columns
+	});
+
+	const { state: df_state, actions: df_actions } = df_ctx;
+
+	$: selected_cells = $df_state.ui_state.selected_cells;
+	$: selected = $df_state.ui_state.selected;
+	$: editing = $df_state.ui_state.editing;
+	$: 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;
+	$: copy_flash = $df_state.ui_state.copy_flash;
+
+	$: actual_pinned_columns =
+		pinned_columns && data?.[0]?.length
+			? Math.min(pinned_columns, data[0].length)
+			: 0;
+
+	onMount(() => {
+		df_ctx.parent_element = parent;
+		df_ctx.get_data_at = get_data_at;
+		df_ctx.get_column = get_column;
+		df_ctx.get_row = get_row;
+		df_ctx.dispatch = dispatch;
+		init_drag_handlers();
+
+		const observer = new IntersectionObserver((entries) => {
+			entries.forEach((entry) => {
+				if (entry.isIntersecting && !is_visible) {
+					width_calculated = false;
+				}
+				is_visible = entry.isIntersecting;
+			});
+		});
+		observer.observe(parent);
+		document.addEventListener("click", handle_click_outside);
+		window.addEventListener("resize", handle_resize);
+
+		const global_mouse_up = (event: MouseEvent): void => {
+			if (is_dragging || drag_start) {
+				handle_mouse_up(event);
+			}
+		};
+		document.addEventListener("mouseup", global_mouse_up);
+
+		return () => {
+			observer.disconnect();
+			document.removeEventListener("click", handle_click_outside);
+			window.removeEventListener("resize", handle_resize);
+			document.removeEventListener("mouseup", global_mouse_up);
+		};
+	});
+
+	$: {
+		if (data || _headers || els) {
+			df_ctx.data = data;
+			df_ctx.headers = _headers;
+			df_ctx.els = els;
+			df_ctx.display_value = display_value;
+			df_ctx.styling = styling;
+		}
+	}
+
+	const dispatch = createEventDispatcher<{
+		change: DataframeValue;
+		input: undefined;
+		select: SelectData;
+		search: string | null;
+		edit: EditData;
+	}>();
+
+	let els: Record<
+		string,
+		{ cell: null | HTMLTableCellElement; input: null | HTMLTextAreaElement }
+	> = {};
+	let data_binding: Record<string, (typeof data)[0][0]> = {};
+	let _headers = make_headers(headers, col_count, els, make_id);
+	let old_headers: string[] = headers;
+	let data: { id: string; value: CellValue; display_value?: string }[][] = [[]];
+	let old_val: undefined | CellValue[][] = undefined;
+	let search_results: {
+		id: string;
+		value: CellValue;
+		display_value?: string;
+		styling?: string;
+	}[][] = [[]];
+	let dragging = false;
+	let color_accent_copied: string;
+	let filtered_to_original_map: number[] = [];
+
+	onMount(() => {
+		const color = getComputedStyle(document.documentElement)
+			.getPropertyValue("--color-accent")
+			.trim();
+		color_accent_copied = color + "40"; // 80 is 50% opacity in hex
+		document.documentElement.style.setProperty(
+			"--color-accent-copied",
+			color_accent_copied
+		);
+	});
+
+	const get_data_at = (row: number, col: number): CellValue =>
+		data?.[row]?.[col]?.value;
+
+	const get_column = (col: number): CellValue[] =>
+		data?.map((row) => row[col]?.value) ?? [];
+
+	const get_row = (row: number): CellValue[] =>
+		data?.[row]?.map((cell) => cell.value) ?? [];
+
+	$: {
+		if (!dequal(headers, old_headers)) {
+			_headers = make_headers(headers, col_count, els, make_id);
+			old_headers = JSON.parse(JSON.stringify(headers));
+		}
+	}
+
+	function make_id(): string {
+		return Math.random().toString(36).substring(2, 15);
+	}
+
+	export let display_value: string[][] | null = null;
+	export let styling: string[][] | null = null;
+
+	$: if (!dequal(values, old_val)) {
+		if (parent) {
+			// only clear column widths when the data structure changes
+			const is_reset =
+				values.length === 0 || (values.length === 1 && values[0].length === 0);
+			const is_different_structure =
+				old_val !== undefined &&
+				(values.length !== old_val.length ||
+					(values[0] && old_val[0] && values[0].length !== old_val[0].length));
+
+			if (is_reset || is_different_structure) {
+				for (let i = 0; i < 50; i++) {
+					parent.style.removeProperty(`--cell-width-${i}`);
+				}
+				last_width_data_length = 0;
+				last_width_column_count = 0;
+				width_calculated = false;
+			}
+		}
+
+		// only reset sort state when values are changed
+		const is_reset =
+			values.length === 0 || (values.length === 1 && values[0].length === 0);
+		const is_different_structure =
+			old_val !== undefined &&
+			(values.length !== old_val.length ||
+				(values[0] && old_val[0] && values[0].length !== old_val[0].length));
+
+		data = process_data(
+			values as CellValue[][],
+			els,
+			data_binding,
+			make_id,
+			display_value,
+			datatype
+		);
+		old_val = JSON.parse(JSON.stringify(values)) as CellValue[][];
+
+		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);
+		} else {
+			df_actions.handle_sort(-1, "asc");
+			df_actions.reset_sort_state();
+		}
+
+		if ($df_state.filter_state.filter_columns.length > 0) {
+			filter_data(data, display_value, styling);
+		} else {
+			df_actions.reset_filter_state();
+		}
+
+		if ($df_state.current_search_query) {
+			df_actions.handle_search(null);
+		}
+
+		if (parent && cells.length > 0 && (is_reset || is_different_structure)) {
+			width_calculated = false;
+		}
+	}
+
+	$: if ($df_state.current_search_query !== undefined) {
+		const cell_map = new Map();
+		filtered_to_original_map = [];
+
+		data.forEach((row, row_idx) => {
+			if (
+				row.some((cell) =>
+					String(cell?.value)
+						.toLowerCase()
+						.includes($df_state.current_search_query?.toLowerCase() || "")
+				)
+			) {
+				filtered_to_original_map.push(row_idx);
+			}
+			row.forEach((cell, col_idx) => {
+				cell_map.set(cell.id, {
+					value: cell.value,
+					display_value:
+						cell.display_value !== undefined
+							? cell.display_value
+							: String(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 !== undefined
+							? original.display_value
+							: String(cell.value),
+					styling: original?.styling || ""
+				};
+			})
+		);
+	} else {
+		filtered_to_original_map = [];
+	}
+
+	let previous_headers = _headers.map((h) => h.value);
+	let previous_data = data.map((row) => row.map((cell) => 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) => cell.value));
+			previous_headers = _headers.map((h) => h.value);
+		}
+	}
+
+	function handle_sort(col: number, direction: SortDirection): void {
+		df_actions.handle_sort(col, direction);
+		sort_data(data, display_value, styling);
+	}
+
+	function clear_sort(): void {
+		df_actions.reset_sort_state();
+		sort_data(data, display_value, styling);
+	}
+
+	$: {
+		if ($df_state.filter_state.filter_columns.length > 0) {
+			filter_data(data, display_value, styling);
+		}
+
+		if ($df_state.sort_state.sort_columns.length > 0) {
+			sort_data(data, display_value, styling);
+			df_actions.update_row_order(data);
+		}
+	}
+
+	function handle_filter(
+		col: number,
+		datatype: FilterDatatype,
+		filter: string,
+		value: string
+	): void {
+		df_actions.handle_filter(col, datatype, filter, value);
+		filter_data(data, display_value, styling);
+	}
+
+	function clear_filter(): void {
+		df_actions.reset_filter_state();
+		filter_data(data, display_value, styling);
+	}
+
+	async function edit_header(i: number, _select = false): Promise<void> {
+		if (!editable || header_edit === i || col_count[1] !== "dynamic") return;
+		df_actions.set_header_edit(i);
+	}
+
+	function handle_header_click(event: MouseEvent, col: number): void {
+		if (event.target instanceof HTMLAnchorElement) {
+			return;
+		}
+		event.preventDefault();
+		event.stopPropagation();
+		if (!editable) return;
+		df_actions.set_editing(false);
+		df_actions.handle_header_click(col, editable);
+		parent.focus();
+	}
+
+	function end_header_edit(event: CustomEvent<KeyboardEvent>): void {
+		if (!editable) return;
+		df_actions.end_header_edit(event.detail.key);
+		parent.focus();
+	}
+
+	async function add_row(index?: number): Promise<void> {
+		parent.focus();
+
+		if (row_count[1] !== "dynamic") return;
+
+		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 (data.length === 0) {
+			data = [new_row];
+		} else if (index !== undefined && index >= 0 && index <= data.length) {
+			data.splice(index, 0, new_row);
+		} else {
+			data.push(new_row);
+		}
+
+		selected = [index !== undefined ? index : data.length - 1, 0];
+	}
+
+	async function add_col(index?: number): Promise<void> {
+		parent.focus();
+		if (col_count[1] !== "dynamic") return;
+
+		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(index !== undefined ? 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: Event): void {
+		if (handle_click_outside_util(event, parent)) {
+			df_actions.clear_ui_state();
+			header_edit = false;
+			selected_header = false;
+		}
+	}
+
+	$: max = get_max(data);
+
+	let width_calc_timeout: ReturnType<typeof setTimeout>;
+	$: if (cells[0] && cells[0]?.clientWidth) {
+		clearTimeout(width_calc_timeout);
+		width_calc_timeout = setTimeout(() => set_cell_widths(), 100);
+	}
+
+	let width_calculated = false;
+	$: if (cells[0] && !width_calculated) {
+		set_cell_widths();
+		width_calculated = true;
+	}
+	let cells: HTMLTableCellElement[] = [];
+	let parent: HTMLDivElement;
+	let table: HTMLTableElement;
+	let last_width_data_length = 0;
+	let last_width_column_count = 0;
+
+	function set_cell_widths(): void {
+		const column_count = data[0]?.length || 0;
+		if ($df_state.filter_state.filter_columns.length > 0) {
+			return;
+		}
+		if (
+			last_width_data_length === data.length &&
+			last_width_column_count === column_count &&
+			$df_state.sort_state.sort_columns.length > 0
+		) {
+			return;
+		}
+
+		if (!parent) {
+			return;
+		}
+
+		last_width_data_length = data.length;
+		last_width_column_count = column_count;
+
+		const widths = cells.map((el) => el?.clientWidth || 0);
+		if (widths.length === 0) return;
+
+		if (show_row_numbers) {
+			parent.style.setProperty(`--cell-width-row-number`, `${widths[0]}px`);
+		}
+
+		for (let i = 0; i < 50; i++) {
+			if (!column_widths[i]) {
+				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: number): string {
+		return `var(--cell-width-${index})`;
+	}
+
+	let table_height: number =
+		values.slice(0, (max_height / values.length) * 37).length * 37 + 37;
+	let scrollbar_width = 0;
+
+	function sort_data(
+		_data: typeof data,
+		_display_value: string[][] | null,
+		_styling: string[][] | null
+	): void {
+		const result = sort_data_and_preserve_selection(
+			_data,
+			_display_value,
+			_styling,
+			$df_state.sort_state.sort_columns,
+			selected,
+			get_current_indices
+		);
+
+		data = result.data;
+		selected = result.selected;
+	}
+
+	function filter_data(
+		_data: typeof data,
+		_display_value: string[][] | null,
+		_styling: string[][] | null
+	): void {
+		const result = filter_data_and_preserve_selection(
+			_data,
+			_display_value,
+			_styling,
+			$df_state.filter_state.filter_columns,
+			selected,
+			get_current_indices,
+			$df_state.filter_state.initial_data?.data,
+			$df_state.filter_state.initial_data?.display_value,
+			$df_state.filter_state.initial_data?.styling
+		);
+		data = result.data;
+		selected = result.selected;
+	}
+
+	$: selected_index = !!selected && selected[0];
+
+	let is_visible = false;
+
+	const set_copy_flash = (value: boolean): void => {
+		df_actions.set_copy_flash(value);
+		if (value) {
+			setTimeout(() => df_actions.set_copy_flash(false), 800);
+		}
+	};
+
+	let previous_selected_cells: [number, number][] = [];
+
+	$: {
+		if (copy_flash && !dequal(selected_cells, previous_selected_cells)) {
+			set_copy_flash(false);
+		}
+		previous_selected_cells = selected_cells;
+	}
+
+	function handle_blur(
+		event: CustomEvent<{
+			blur_event: FocusEvent;
+			coords: [number, number];
+		}>
+	): void {
+		const { blur_event, coords } = event.detail;
+		handle_cell_blur(blur_event, df_ctx, coords);
+	}
+
+	function toggle_header_menu(event: MouseEvent, col: number): void {
+		event.stopPropagation();
+		if (active_header_menu && active_header_menu.col === col) {
+			df_actions.set_active_header_menu(null);
+		} else {
+			const header = (event.target as HTMLElement).closest("th");
+			if (header) {
+				const rect = header.getBoundingClientRect();
+				df_actions.set_active_header_menu({
+					col,
+					x: rect.right,
+					y: rect.bottom
+				});
+			}
+		}
+	}
+
+	afterUpdate(() => {
+		value_is_output = false;
+	});
+
+	function delete_col_at(index: number): void {
+		if (col_count[1] !== "dynamic") return;
+		if (data[0].length <= 1) return;
+
+		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: number): void {
+		data = df_actions.delete_row_at(data, index);
+		df_actions.set_active_cell_menu(null);
+		df_actions.set_active_header_menu(null);
+	}
+
+	let selected_cell_coords: CellCoordinate;
+	$: if (selected !== false) selected_cell_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
+		);
+		document.documentElement.style.setProperty(
+			"--selected-row-pos",
+			positions.row_pos || "0px"
+		);
+	}
+
+	function commit_filter(): void {
+		if ($df_state.current_search_query && show_search === "filter") {
+			const filtered_data: CellValue[][] = [];
+			const filtered_display_values: string[][] = [];
+			const filtered_styling: string[][] = [];
+
+			search_results.forEach((row) => {
+				const data_row: CellValue[] = [];
+				const display_row: string[] = [];
+				const styling_row: string[] = [];
+
+				row.forEach((cell) => {
+					data_row.push(cell.value);
+					display_row.push(
+						cell.display_value !== undefined
+							? 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");
+			}
+
+			df_actions.handle_search(null);
+		}
+	}
+
+	let viewport: HTMLTableElement;
+	let show_scroll_button = false;
+
+	function scroll_to_top(): void {
+		viewport.scrollTo({
+			top: 0
+		});
+	}
+
+	function handle_resize(): void {
+		df_actions.set_active_cell_menu(null);
+		df_actions.set_active_header_menu(null);
+		selected_cells = [];
+		selected = false;
+		editing = false;
+		width_calculated = false;
+		set_cell_widths();
+	}
+
+	function add_row_at(index: number, position: "above" | "below"): void {
+		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: number, position: "left" | "right"): void {
+		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(): void {
+		df_actions.reset_sort_state();
+	}
+
+	function handle_select_all(col: number, checked: boolean): void {
+		data = data.map((row) => {
+			const new_row = [...row];
+			if (new_row[col]) {
+				new_row[col] = {
+					...new_row[col],
+					value: checked
+				};
+			}
+			return new_row;
+		});
+	}
+
+	let is_dragging = false;
+	let drag_start: [number, number] | null = null;
+	let mouse_down_pos: { x: number; y: number } | null = null;
+
+	const drag_state: DragState = {
+		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: DragHandlers;
+
+	function init_drag_handlers(): void {
+		drag_handlers = create_drag_handlers(
+			drag_state,
+			(value) => (is_dragging = value),
+			(cells) => df_actions.set_selected_cells(cells),
+			(cell) => df_actions.set_selected(cell),
+			(event, row, col) => df_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 || (() => {});
+
+	function get_cell_display_value(row: number, col: number): string {
+		const is_search_active = $df_state.current_search_query !== undefined;
+
+		if (is_search_active && search_results?.[row]?.[col]) {
+			return search_results[row][col].display_value !== undefined
+				? search_results[row][col].display_value
+				: String(search_results[row][col].value);
+		}
+
+		if (data?.[row]?.[col]) {
+			return data[row][col].display_value !== undefined
+				? data[row][col].display_value
+				: String(data[row][col].value);
+		}
+
+		return "";
+	}
 </script>
 
 <svelte:window on:resize={() => set_cell_widths()} />
@@ -859,7 +1060,7 @@ function get_cell_display_value(row, col) {
 	<CellMenu
 		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}
+		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")}
@@ -896,9 +1097,9 @@ function get_cell_display_value(row, col) {
 				}
 			: undefined}
 		sort_direction={active_header_menu
-			? $df_state.sort_state.sort_columns.find(
+			? ($df_state.sort_state.sort_columns.find(
 					(item) => item.col === (active_header_menu?.col ?? -1)
-				)?.direction ?? null
+				)?.direction ?? null)
 			: null}
 		sort_priority={active_header_menu
 			? $df_state.sort_state.sort_columns.findIndex(