@gradio/dataframe 0.21.7 → 0.23.0

package/dist/shared/Table.svelte

@@ -1,933 +1,839 @@
-<script lang="ts" context="module">
-	import {
-		create_dataframe_context,
-		type SortDirection,
-		type FilterDatatype
-	} from "./context/dataframe_context";
-</script>
-
 <script lang="ts">
-	import { afterUpdate, createEventDispatcher, tick, onMount } from "svelte";
-	import { dequal } from "dequal/lite";
+	import {
+		createSvelteTable,
+		createSvelteVirtualizer,
+		getCoreRowModel,
+		getSortedRowModel,
+		getFilteredRowModel,
+		type ColumnDef,
+		type SortingState,
+		type ColumnFiltersState,
+		type ColumnPinningState
+	} from "./tanstack/index.js";
+	import { tick, onMount } from "svelte";
 	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 HeaderCell from "./HeaderCell.svelte";
+	import DataCell from "./DataCell.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 type { Datatype, DataframeValue, EditData } from "./utils/utils";
+	import { cast_value_to_type } from "./utils/utils";
 	import CellMenu from "./CellMenu.svelte";
 	import Toolbar from "./Toolbar.svelte";
-	import type { CellCoordinate, CellValue } from "./types";
+	import type {
+		CellValue,
+		CellCoordinate,
+		SortDirection,
+		FilterDatatype
+	} from "./types";
 	import {
+		is_cell_in_selection,
 		is_cell_selected,
-		should_show_cell_menu,
-		get_current_indices,
-		handle_click_outside as handle_click_outside_util,
-		calculate_selection_positions
+		handle_click_outside as handle_click_outside_util
 	} 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;
+	import { copy_table_data, handle_file_upload } from "./utils/table_utils";
+	import { gradio_filter_fn } from "./utils/filter";
+	import { create_column_measurement } from "./column_measurement.svelte.js";
+
+	let {
+		datatype,
+		label = null,
+		show_label = true,
+		headers = $bindable([]),
+		values = $bindable([]),
+		col_count,
+		row_count,
+		latex_delimiters,
+		components = {},
+		editable = true,
+		wrap = false,
+		root,
+		i18n,
+		max_height = 500,
+		line_breaks = true,
+		column_widths = [],
+		show_row_numbers = false,
+		upload,
+		stream_handler,
+		buttons = null,
+		value_is_output = $bindable(false),
+		max_chars = undefined,
+		show_search = "none",
+		pinned_columns = 0,
+		static_columns = [],
+		fullscreen = false,
+		display_value = null,
+		styling = null,
+		onchange,
+		oninput,
+		onselect,
+		onedit,
+		onsearch,
+		onfullscreen
+	}: {
+		datatype: Datatype | Datatype[];
+		label?: string | null;
+		show_label?: boolean;
+		headers?: (string | null)[];
+		values?: CellValue[][];
+		col_count: [number, "fixed" | "dynamic"];
+		row_count: [number, "fixed" | "dynamic"];
+		latex_delimiters: { left: string; right: string; display: boolean }[];
+		components?: Record<string, any>;
+		editable?: boolean;
+		wrap?: boolean;
+		root: string;
+		i18n: I18nFormatter;
+		max_height?: number;
+		line_breaks?: boolean;
+		column_widths?: string[];
+		show_row_numbers?: boolean;
+		upload: Client["upload"];
+		stream_handler: Client["stream"];
+		buttons?: string[] | null;
+		value_is_output?: boolean;
+		max_chars?: number | undefined;
+		show_search?: "none" | "search" | "filter";
+		pinned_columns?: number;
+		static_columns?: (string | number)[];
+		fullscreen?: boolean;
+		display_value?: string[][] | null;
+		styling?: string[][] | null;
+		onchange?: (detail: DataframeValue) => void;
+		oninput?: () => void;
+		onselect?: (detail: SelectData) => void;
+		onedit?: (detail: EditData) => void;
+		onsearch?: (detail: string | null) => void;
+		onfullscreen?: () => void;
+	} = $props();
+
+	type GradioRow = Record<string, CellValue> & { _index: number };
+
+	// convert values[][] into tanstack row objects
+	let row_data: GradioRow[] = $derived(
+		(values ?? []).map((row, i) => {
+			const obj: GradioRow = { _index: i };
+			(row ?? []).forEach((val, j) => {
+				const dtype = Array.isArray(datatype) ? datatype[j] : datatype;
+				obj[`col_${j}`] = cast_value_to_type(val, dtype);
 			});
-		});
-		observer.observe(parent);
-		document.addEventListener("click", handle_click_outside);
-		window.addEventListener("resize", handle_resize);
+			return obj;
+		})
+	);
+
+	let resolved_headers = $derived.by(() => {
+		let h = headers ?? [];
+		if (col_count[1] === "fixed" && h.length < col_count[0]) {
+			h = [
+				...h,
+				...Array(col_count[0] - h.length)
+					.fill(null)
+					.map((_, i) => `${i + h.length}`)
+			];
+		}
+		if (!h.length) {
+			h = Array(col_count[0])
+				.fill(null)
+				.map((_, i) => `${i}`);
+		}
+		return h.map((v) => v ?? "");
+	});
 
-		const global_mouse_up = (event: MouseEvent): void => {
-			if (is_dragging || drag_start) {
-				handle_mouse_up(event);
+	let column_defs: ColumnDef<GradioRow, CellValue>[] = $derived(
+		resolved_headers.map((header_value, j) => ({
+			id: `col_${j}`,
+			accessorKey: `col_${j}`,
+			header: header_value,
+			size: column_widths[j] ? parseInt(column_widths[j]) || 150 : 150,
+			minSize: 45,
+			filterFn: gradio_filter_fn,
+			meta: {
+				colIndex: j,
+				datatype: Array.isArray(datatype) ? datatype[j] : datatype,
+				isStatic:
+					static_columns.includes(j) || static_columns.includes(header_value),
+				isPinned: j < pinned_columns
 			}
-		};
-		document.addEventListener("mouseup", global_mouse_up);
+		}))
+	);
+
+	let sorting: SortingState = $state([]);
+	let column_filters: ColumnFiltersState = $state([]);
+	let global_filter: string = $state("");
+	let column_pinning: ColumnPinningState = $derived({
+		left: column_defs.filter((_, i) => i < pinned_columns).map((c) => c.id!)
+	});
 
-		return () => {
-			observer.disconnect();
-			document.removeEventListener("click", handle_click_outside);
-			window.removeEventListener("resize", handle_resize);
-			document.removeEventListener("mouseup", global_mouse_up);
-		};
+	const table = createSvelteTable<GradioRow>({
+		get data() {
+			return row_data;
+		},
+		get columns() {
+			return column_defs;
+		},
+		state: {
+			get sorting() {
+				return sorting;
+			},
+			get columnFilters() {
+				return column_filters;
+			},
+			get globalFilter() {
+				return global_filter;
+			},
+			get columnPinning() {
+				return column_pinning;
+			}
+		},
+		onSortingChange: (updater) => {
+			sorting = typeof updater === "function" ? updater(sorting) : updater;
+		},
+		onColumnFiltersChange: (updater) => {
+			column_filters =
+				typeof updater === "function" ? updater(column_filters) : updater;
+		},
+		onGlobalFilterChange: (updater) => {
+			global_filter =
+				typeof updater === "function" ? updater(global_filter) : updater;
+		},
+		getCoreRowModel: getCoreRowModel(),
+		getSortedRowModel: getSortedRowModel(),
+		getFilteredRowModel: getFilteredRowModel(),
+		globalFilterFn: "includesString",
+		enableSorting: true,
+		enableMultiSort: true,
+		maxMultiSortColCount: 3
 	});
 
-	$: {
-		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;
+	let rows = $derived(table.getRowModel().rows);
+	let header_groups = $derived(table.getHeaderGroups());
+
+	let scroll_container: HTMLDivElement;
+
+	const virtualizer = createSvelteVirtualizer<
+		HTMLDivElement,
+		HTMLTableRowElement
+	>({
+		get count() {
+			return rows.length;
+		},
+		getScrollElement: () => scroll_container,
+		estimateSize: () => 35,
+		overscan: 10,
+		measureElement: (el, _entry, instance) => {
+			const h = el.getBoundingClientRect().height;
+			if (h > 0) return h;
+
+			const idx = el.getAttribute("data-index");
+			if (idx != null) {
+				const cached = (instance as any).itemSizeCache?.get(Number(idx));
+				if (typeof cached === "number") return cached;
+			}
+			return 35;
 		}
-	}
-
-	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;
+	let virtual_items = $derived(virtualizer.virtualItems());
+	let total_size = $derived(virtualizer.totalSize());
+
+	let selected_cells: CellCoordinate[] = $state([]);
+	let selected: CellCoordinate | false = $state(false);
+	let editing: CellCoordinate | false = $state(false);
+	let header_edit: number | false = $state(false);
+	let selected_header: number | false = $state(false);
+	let active_cell_menu: {
+		row: number;
+		col: number;
+		x: number;
+		y: number;
+	} | null = $state(null);
+	let active_header_menu: { col: number; x: number; y: number } | null =
+		$state(null);
+	let copy_flash = $state(false);
+	let is_dragging = $state(false);
+	let show_scroll_button = $state(false);
+	let dragging = $state(false); // file drag
 
-	const get_column = (col: number): CellValue[] =>
-		data?.map((row) => row[col]?.value) ?? [];
+	let parent: HTMLDivElement;
 
-	const get_row = (row: number): CellValue[] =>
-		data?.[row]?.map((cell) => cell.value) ?? [];
+	function get_dtype(col: number): Datatype {
+		return Array.isArray(datatype) ? (datatype[col] ?? "str") : datatype;
+	}
 
-	$: {
-		if (!dequal(headers, old_headers)) {
-			_headers = make_headers(headers, col_count, els, make_id);
-			old_headers = JSON.parse(JSON.stringify(headers));
-		}
+	function get_display_value(row: number, col: number): string {
+		if (display_value?.[row]?.[col] !== undefined)
+			return display_value[row][col];
+		return String(values?.[row]?.[col] ?? "");
 	}
 
-	function make_id(): string {
-		return Math.random().toString(36).substring(2, 15);
+	function get_styling(row: number, col: number): string {
+		return styling?.[row]?.[col] ?? "";
 	}
 
-	export let display_value: string[][] | null = null;
-	export let styling: string[][] | null = null;
+	function push_change(
+		new_values?: CellValue[][],
+		new_headers?: (string | null)[]
+	): void {
+		onchange?.({
+			data: new_values ?? values,
+			headers: (new_headers ?? resolved_headers) as string[],
+			metadata: null
+		});
+		if (!value_is_output) oninput?.();
+		value_is_output = false;
+	}
 
-	$: 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));
+	function handle_cell_click(
+		event: MouseEvent,
+		row: number,
+		col: number
+	): void {
+		event.preventDefault();
+		event.stopPropagation();
 
-			if (is_reset || is_different_structure) {
-				for (let i = 0; i < 50; i++) {
-					parent.style.removeProperty(`--cell-width-${i}`);
+		const coord: CellCoordinate = [row, col];
+		if (event.shiftKey && selected) {
+			// range select
+			const [r1, c1] = selected;
+			const [r2, c2] = coord;
+			const new_cells: CellCoordinate[] = [];
+			for (let r = Math.min(r1, r2); r <= Math.max(r1, r2); r++) {
+				for (let c = Math.min(c1, c2); c <= Math.max(c1, c2); c++) {
+					new_cells.push([r, c]);
 				}
-				last_width_data_length = 0;
-				last_width_column_count = 0;
-				width_calculated = false;
 			}
+			selected_cells = new_cells;
+		} else if (event.metaKey || event.ctrlKey) {
+			// toggle select
+			const exists = selected_cells.some(([r, c]) => r === row && c === col);
+			selected_cells = exists
+				? selected_cells.filter(([r, c]) => !(r === row && c === col))
+				: [...selected_cells, coord];
+		} else {
+			selected_cells = [coord];
 		}
 
-		// 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[][];
+		selected = coord;
+		header_edit = false;
+		selected_header = false;
+		active_cell_menu = null;
+		active_header_menu = null;
 
-		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();
-		}
+		// click selects, does NOT enter edit mode (double-click or typing does)
+		editing = false;
 
-		if ($df_state.filter_state.filter_columns.length > 0) {
-			filter_data(data, display_value, styling);
-		} else {
-			df_actions.reset_filter_state();
-		}
+		onselect?.({
+			index: coord,
+			value: values?.[row]?.[col],
+			row_value: values?.[row] ?? [],
+			col_value: values?.map((r) => r[col]) ?? []
+		} as any);
 
-		if ($df_state.current_search_query) {
-			df_actions.handle_search(null);
-		}
+		tick().then(() => parent?.focus());
+	}
 
-		if (parent && cells.length > 0 && (is_reset || is_different_structure)) {
-			width_calculated = false;
+	function handle_cell_dblclick(
+		event: MouseEvent,
+		row: number,
+		col: number
+	): void {
+		event.preventDefault();
+		event.stopPropagation();
+		if (!editable) return;
+		const col_is_static =
+			static_columns.includes(col) ||
+			static_columns.includes(resolved_headers[col]);
+		if (!col_is_static) {
+			editing = [row, col];
 		}
 	}
 
-	$: 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] || ""
-				});
+	function handle_blur(detail: {
+		blur_event: FocusEvent;
+		coords: [number, number];
+	}): void {
+		const { coords } = detail;
+		const input_el = detail.blur_event.target as HTMLTextAreaElement;
+		if (!input_el || input_el.value === undefined) return;
+
+		const [row, col] = coords;
+		const old_value = values?.[row]?.[col];
+		const new_value = input_el.value;
+
+		if (String(old_value) !== String(new_value)) {
+			const new_values = values.map((r) => [...r]);
+			new_values[row][col] = new_value;
+			values = new_values;
+
+			onedit?.({
+				index: [row, col],
+				value: new_value,
+				previous_value: String(old_value ?? "")
 			});
-		});
-
-		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);
+			push_change(new_values);
 		}
 	}
 
-	function handle_sort(col: number, direction: SortDirection): void {
-		df_actions.handle_sort(col, direction);
-		sort_data(data, display_value, styling);
+	function handle_header_click(event: MouseEvent, col: number): void {
+		if (event.target instanceof HTMLAnchorElement) return;
+		event.preventDefault();
+		event.stopPropagation();
+		if (!editable) return;
+
+		editing = false;
+		selected = false;
+		selected_cells = [];
+		active_cell_menu = null;
+		active_header_menu = null;
+		selected_header = col;
+		header_edit = editable ? col : false;
+		parent?.focus();
 	}
 
-	function clear_sort(): void {
-		df_actions.reset_sort_state();
-		sort_data(data, display_value, styling);
+	function end_header_edit(key: string): void {
+		if (["Escape", "Enter", "Tab"].includes(key)) {
+			header_edit = false;
+			parent?.focus();
+		}
 	}
 
-	$: {
-		if ($df_state.filter_state.filter_columns.length > 0) {
-			filter_data(data, display_value, styling);
+	function toggle_header_menu(event: MouseEvent, col: number): void {
+		event.stopPropagation();
+		if (active_header_menu?.col === col) {
+			active_header_menu = null;
+		} else {
+			const th = (event.target as HTMLElement).closest("th");
+			if (th) {
+				const rect = th.getBoundingClientRect();
+				active_header_menu = { col, x: rect.right, y: rect.bottom };
+			}
 		}
+	}
 
-		if ($df_state.sort_state.sort_columns.length > 0) {
-			sort_data(data, display_value, styling);
-			df_actions.update_row_order(data);
+	function handle_sort(col: number, direction: SortDirection): void {
+		const col_id = `col_${col}`;
+		const desc = direction === "desc";
+		// if already sorted this way, remove it
+		const existing = sorting.findIndex((s) => s.id === col_id);
+		if (existing >= 0 && sorting[existing].desc === desc) {
+			sorting = sorting.filter((s) => s.id !== col_id);
+		} else {
+			sorting = [
+				...sorting.filter((s) => s.id !== col_id),
+				{ id: col_id, desc }
+			].slice(-3);
 		}
 	}
 
+	function clear_sort(): void {
+		sorting = [];
+	}
+
 	function handle_filter(
 		col: number,
-		datatype: FilterDatatype,
+		dtype: FilterDatatype,
 		filter: string,
-		value: string
+		fvalue: string
 	): void {
-		df_actions.handle_filter(col, datatype, filter, value);
-		filter_data(data, display_value, styling);
+		const col_id = `col_${col}`;
+		const existing = column_filters.findIndex((f) => f.id === col_id);
+		if (existing >= 0) {
+			column_filters = column_filters.filter((f) => f.id !== col_id);
+		} else {
+			column_filters = [
+				...column_filters,
+				{ id: col_id, value: { dtype, filter, value: fvalue } }
+			];
+		}
 	}
 
 	function clear_filter(): void {
-		df_actions.reset_filter_state();
-		filter_data(data, display_value, styling);
+		column_filters = [];
 	}
 
-	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_search(query: string | null): void {
+		global_filter = query ?? "";
+		onsearch?.(query);
 	}
 
-	function handle_header_click(event: MouseEvent, col: number): void {
-		if (event.target instanceof HTMLAnchorElement) {
-			return;
+	function add_row(index?: number): void {
+		if (row_count[1] !== "dynamic") return;
+		const col_len = values[0]?.length || resolved_headers.length || 1;
+		const new_row: CellValue[] = Array(col_len).fill("");
+		const new_values = [...values];
+		if (index !== undefined) {
+			new_values.splice(index, 0, new_row);
+		} else {
+			new_values.push(new_row);
 		}
-		event.preventDefault();
-		event.stopPropagation();
-		if (!editable) return;
-		df_actions.set_editing(false);
-		df_actions.handle_header_click(col, editable);
-		parent.focus();
+		values = new_values;
+		push_change(new_values);
+		selected = [index ?? new_values.length - 1, 0];
+		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);
+	function add_col(index?: number): void {
+		if (col_count[1] !== "dynamic") return;
+		const new_headers = [
+			...(headers ?? []),
+			`Header ${(headers?.length ?? 0) + 1}`
+		];
+		const new_values = values.map((row) => [...row, ""]);
+		if (index !== undefined) {
+			new_headers.splice(index, 0, new_headers.pop()!);
+			new_values.forEach((row) => row.splice(index, 0, row.pop()!));
 		}
+		values = new_values;
+		headers = new_headers;
+		push_change(new_values, new_headers);
+		parent?.focus();
+	}
 
-		selected = [index !== undefined ? index : data.length - 1, 0];
+	function delete_row_at(index: number): void {
+		if (values.length <= 1) return;
+		values = [...values.slice(0, index), ...values.slice(index + 1)];
+		push_change(values);
+		active_cell_menu = null;
+		active_header_menu = null;
 	}
 
-	async function add_col(index?: number): Promise<void> {
-		parent.focus();
+	function delete_col_at(index: number): void {
 		if (col_count[1] !== "dynamic") return;
+		if ((values[0]?.length ?? 0) <= 1) return;
+		values = values.map((row) => [
+			...row.slice(0, index),
+			...row.slice(index + 1)
+		]);
+		headers = [
+			...(headers ?? []).slice(0, index),
+			...(headers ?? []).slice(index + 1)
+		];
+		push_change(values, headers as string[]);
+		active_cell_menu = null;
+		active_header_menu = null;
+		selected = false;
+		selected_cells = [];
+		editing = false;
+	}
 
-		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 };
-				}
-			});
-		});
+	function add_row_at(index: number, position: "above" | "below"): void {
+		add_row(position === "above" ? index : index + 1);
+		active_cell_menu = null;
+	}
 
-		data = result.data;
-		headers = result.headers;
+	function add_col_at(index: number, position: "left" | "right"): void {
+		add_col(position === "left" ? index : index + 1);
+		active_cell_menu = null;
+	}
 
-		await tick();
+	// function handle_select_all(col: number, checked: boolean): void {
+	// 	values = values.map((row) => {
+	// 		const new_row = [...row];
+	// 		new_row[col] = checked;
+	// 		return new_row;
+	// 	});
+	// 	push_change(values);
+	// }
 
-		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 commit_filter(): void {
+		if (!global_filter || show_search !== "filter") return;
+		// get the filtered rows from tanstack and push as new values
+		const filtered_values = rows.map((row) => {
+			const original_idx = row.original._index;
+			return values[original_idx];
 		});
+		values = filtered_values;
+		global_filter = "";
+		push_change(filtered_values);
+	}
+
+	async function handle_copy(): Promise<void> {
+		const data_for_copy = values.map((row) =>
+			row.map((val, j) => ({ id: `${j}`, value: val }))
+		);
+		const cells_to_copy = selected_cells.length > 0 ? selected_cells : null;
+		await copy_table_data(data_for_copy, cells_to_copy);
+		copy_flash = true;
+		setTimeout(() => (copy_flash = false), 800);
 	}
 
 	function handle_click_outside(event: Event): void {
 		if (handle_click_outside_util(event, parent)) {
-			df_actions.clear_ui_state();
+			selected_cells = [];
+			selected = false;
+			editing = false;
 			header_edit = false;
 			selected_header = false;
+			active_cell_menu = null;
+			active_header_menu = null;
 		}
 	}
 
-	$: 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;
-		}
+	function handle_keydown(e: KeyboardEvent): void {
+		if (!selected && selected_header === false) return;
 
-		if (!parent) {
-			return;
-		}
+		const num_rows = rows.length;
+		const num_cols = resolved_headers.length;
 
-		last_width_data_length = data.length;
-		last_width_column_count = column_count;
+		if (selected) {
+			const [row, col] = selected;
 
-		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]);
+			switch (e.key) {
+				case "ArrowUp":
+					e.preventDefault();
+					if (row > 0) {
+						selected = [row - 1, col];
+						selected_cells = [selected];
+						editing = false;
+						virtualizer.instance.scrollToIndex(row - 1, { align: "auto" });
+					}
+					break;
+				case "ArrowDown":
+					e.preventDefault();
+					if (row < num_rows - 1) {
+						selected = [row + 1, col];
+						selected_cells = [selected];
+						editing = false;
+						virtualizer.instance.scrollToIndex(row + 1, { align: "auto" });
+					}
+					break;
+				case "ArrowLeft":
+					e.preventDefault();
+					if (col > 0) {
+						selected = [row, col - 1];
+						selected_cells = [selected];
+						editing = false;
+					}
+					break;
+				case "ArrowRight":
+					e.preventDefault();
+					if (col < num_cols - 1) {
+						selected = [row, col + 1];
+						selected_cells = [selected];
+						editing = false;
+					}
+					break;
+				case "Tab": {
+					e.preventDefault();
+					const was_editing = !!editing;
+					if (e.shiftKey) {
+						if (col > 0) selected = [row, col - 1];
+						else if (row > 0) selected = [row - 1, num_cols - 1];
+					} else {
+						if (col < num_cols - 1) selected = [row, col + 1];
+						else if (row < num_rows - 1) selected = [row + 1, 0];
+					}
+					selected_cells = [selected];
+					if (was_editing) {
+						const tab_col = (selected as CellCoordinate)[1];
+						const tab_static =
+							static_columns.includes(tab_col) ||
+							static_columns.includes(resolved_headers[tab_col]);
+						editing = editable && !tab_static ? selected : false;
+					} else {
+						editing = false;
+					}
+					if (!editing) tick().then(() => parent?.focus());
+					break;
+				}
+				case "Enter":
+					if (editing && e.shiftKey) {
+						// shift+enter inserts newline in textarea — don't intercept
+						return;
+					}
+					e.preventDefault();
+					if (editing) {
+						editing = false;
+						if (row < num_rows - 1) {
+							selected = [row + 1, col];
+							selected_cells = [selected];
+						}
+						tick().then(() => parent?.focus());
+					} else if (editable) {
+						const enter_static =
+							static_columns.includes(col) ||
+							static_columns.includes(resolved_headers[col]);
+						if (!enter_static) {
+							editing = [row, col];
+						}
+					}
+					break;
+				case "Escape":
+					editing = false;
+					tick().then(() => parent?.focus());
+					break;
+				case "Delete":
+				case "Backspace":
+					if (!editing && editable) {
+						e.preventDefault();
+						const new_values = values.map((r) => [...r]);
+						selected_cells.forEach(([r, c]) => {
+							if (!static_columns.includes(c)) {
+								new_values[r][c] = "";
+							}
+						});
+						values = new_values;
+						push_change(new_values);
+					}
+					break;
+				default:
+					// start editing on printable character
+					if (
+						editable &&
+						!editing &&
+						e.key.length === 1 &&
+						!e.ctrlKey &&
+						!e.metaKey &&
+						!static_columns.includes(col)
+					) {
+						editing = [row, col];
+					}
+					break;
 			}
-		}
 
-		widths.forEach((width, i) => {
-			if (!column_widths[i]) {
-				const calculated_width = `${Math.max(width, 45)}px`;
-				parent.style.setProperty(`--cell-width-${i}`, calculated_width);
+			if ((e.ctrlKey || e.metaKey) && e.key === "c") {
+				handle_copy();
 			}
-		});
-	}
-
-	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);
+	function handle_scroll(): void {
+		if (scroll_container) {
+			show_scroll_button = scroll_container.scrollTop > 100;
 		}
-		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 scroll_to_top(): void {
+		scroll_container?.scrollTo({ top: 0 });
 	}
 
-	function toggle_header_menu(event: MouseEvent, col: number): void {
+	function toggle_cell_menu(event: MouseEvent, row: number, col: number): void {
 		event.stopPropagation();
-		if (active_header_menu && active_header_menu.col === col) {
-			df_actions.set_active_header_menu(null);
+		if (active_cell_menu?.row === row && active_cell_menu.col === col) {
+			active_cell_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
-				});
+			const cell = (event.target as HTMLElement).closest(".body-cell, td");
+			if (cell) {
+				const rect = cell.getBoundingClientRect();
+				active_cell_menu = { row, 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");
+	function on_file_upload(file_data: any): void {
+		handle_file_upload(
+			typeof file_data === "string" ? file_data : (file_data?.data ?? ""),
+			(head) => {
+				headers = head.map((h: any) => h ?? "");
+				return (headers as string[]).map((h: string, i: number) => ({
+					id: `h_${i}`,
+					value: h
+				}));
+			},
+			(vals) => {
+				values = vals;
+				push_change(vals, headers as string[]);
 			}
-
-			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();
-	}
+	onMount(() => {
+		document.addEventListener("click", handle_click_outside);
+		return () => document.removeEventListener("click", handle_click_outside);
+	});
 
-	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;
+	function measure_row(node: HTMLElement) {
+		tick().then(() => {
+			console.log("measuring");
+			virtualizer.instance.measureElement(node as any);
 		});
-	}
-
-	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
-		);
+		return {
+			destroy() {}
+		};
 	}
 
-	$: 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 || (() => {});
+	let header_row_el: HTMLTableRowElement;
+	let header_table_el: HTMLTableElement;
+
+	const measurement = create_column_measurement({
+		header_row_el: () => header_row_el,
+		header_table_el: () => header_table_el,
+		resolved_headers: () => resolved_headers,
+		row_data: () => row_data,
+		show_row_numbers: () => show_row_numbers,
+		column_widths: () => column_widths,
+		on_resize: undefined
+	});
 
-	function get_cell_display_value(row: number, col: number): string {
-		const is_search_active = $df_state.current_search_query !== undefined;
+	let disable_scroll = $derived(
+		active_cell_menu !== null || active_header_menu !== null
+	);
+	let selected_index = $derived(selected !== false ? selected[0] : false);
 
-		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);
+	$effect(() => {
+		if (typeof selected_index === "number") {
+			virtualizer.instance.scrollToIndex(selected_index, { align: "auto" });
 		}
+	});
 
-		if (data?.[row]?.[col]) {
-			return data[row][col].display_value !== undefined
-				? data[row][col].display_value
-				: String(data[row][col].value);
-		}
+	function get_sort_info(col: number): {
+		direction: SortDirection | null;
+		priority: number | null;
+	} {
+		const col_id = `col_${col}`;
+		const idx = sorting.findIndex((s) => s.id === col_id);
+		if (idx === -1) return { direction: null, priority: null };
+		return { direction: sorting[idx].desc ? "desc" : "asc", priority: idx + 1 };
+	}
 
-		return "";
+	function get_filter_active(col: number): boolean {
+		return column_filters.some((f) => f.id === `col_${col}`);
 	}
 </script>
 
-<svelte:window on:resize={() => set_cell_widths()} />
+<svelte:window
+	onresize={() => {
+		active_cell_menu = null;
+		active_header_menu = null;
+	}}
+/>
 
-<div class="table-container">
+<div class="table-container" class:fullscreen>
 	{#if (label && label.length !== 0 && show_label) || (buttons === null ? true : buttons.includes("fullscreen")) || (buttons === null ? true : buttons.includes("copy")) || show_search !== "none"}
 		<div class="header-row">
 			{#if label && label.length !== 0 && show_label}
-				<div class="label">
-					<p>{label}</p>
-				</div>
+				<div class="label"><p>{label}</p></div>
 			{/if}
 			<Toolbar
 				show_fullscreen_button={buttons === null
 					? true
 					: buttons.includes("fullscreen")}
 				{fullscreen}
-				on_copy={async () => await copy_table_data(data, null)}
+				on_copy={handle_copy}
 				show_copy_button={buttons === null ? true : buttons.includes("copy")}
 				{show_search}
-				on:search={(e) => df_actions.handle_search(e.detail)}
-				on:fullscreen
+				onsearch={(query) => handle_search(query)}
+				{onfullscreen}
 				on_commit_filter={commit_filter}
-				current_search_query={$df_state.current_search_query}
+				current_search_query={global_filter || null}
 			/>
 		</div>
 	{/if}
+
 	<div
 		bind:this={parent}
 		class="table-wrap"
 		class:dragging={is_dragging}
 		class:no-wrap={!wrap}
 		class:menu-open={active_cell_menu || active_header_menu}
-		on:keydown={(e) => handle_keydown(e, df_ctx)}
-		on:mousemove={handle_mouse_move}
-		on:mouseup={handle_mouse_up}
-		on:mouseleave={handle_mouse_up}
+		onkeydown={handle_keydown}
 		role="grid"
 		tabindex="0"
 	>
-		<table bind:this={table} aria-hidden="true">
-			{#if label && label.length !== 0}
-				<caption class="sr-only">{label}</caption>
-			{/if}
-			<thead>
-				<tr>
-					{#if show_row_numbers}
-						<RowNumber is_header={true} />
-					{/if}
-					{#each _headers as { value, id }, i (id)}
-						<TableHeader
-							bind:value={_headers[i].value}
-							{i}
-							{actual_pinned_columns}
-							{header_edit}
-							{selected_header}
-							{headers}
-							{get_cell_width}
-							{handle_header_click}
-							{toggle_header_menu}
-							{end_header_edit}
-							sort_columns={$df_state.sort_state.sort_columns}
-							filter_columns={$df_state.filter_state.filter_columns}
-							{latex_delimiters}
-							{line_breaks}
-							{max_chars}
-							{editable}
-							is_static={static_columns.includes(i)}
-							{i18n}
-							bind:el={els[id].input}
-							{col_count}
-							datatype={Array.isArray(datatype) ? datatype[i] : datatype}
-							{data}
-							on_select_all={handle_select_all}
-						/>
-					{/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">
-								<EditableCell
-									{value}
-									{latex_delimiters}
-									{line_breaks}
-									datatype={Array.isArray(datatype) ? datatype[j] : datatype}
-									edit={false}
-									el={null}
-									{editable}
-									{i18n}
-									show_selection_buttons={selected_cells.length === 1 &&
-										selected_cells[0][0] === 0 &&
-										selected_cells[0][1] === j}
-									coords={selected_cell_coords}
-									on_select_column={df_actions.handle_select_column}
-									on_select_row={df_actions.handle_select_row}
-									{is_dragging}
-									on:blur={handle_blur}
-								/>
-							</div>
-						</td>
-					{/each}
-				</tr>
-			</tbody>
-		</table>
 		<Upload
 			{upload}
 			{stream_handler}
@@ -936,125 +842,197 @@
 			boundedheight={false}
 			disable_click={true}
 			{root}
-			on:load={({ detail }) =>
-				handle_file_upload(
-					detail.data,
-					(head) => {
-						_headers = make_headers(
-							head.map((h) => h ?? ""),
-							col_count,
-							els,
-							make_id
-						);
-						return _headers;
-					},
-					(vals) => {
-						values = vals;
-					}
-				)}
+			onload={on_file_upload}
 			bind:dragging
 			aria_label={i18n("dataframe.drop_to_upload")}
 		>
-			<div class="table-wrap">
-				<VirtualTable
-					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
-					{label}
-					on:scroll_top={(_) => {}}
-				>
-					<tr slot="thead">
-						{#if show_row_numbers}
-							<RowNumber is_header={true} />
+			<div
+				class="virtual-table-viewport"
+				class:disable-scroll={disable_scroll}
+				bind:this={scroll_container}
+				onscroll={handle_scroll}
+				style="max-height: {max_height}px;"
+				role="grid"
+			>
+				{#if label && label.length !== 0}
+					<span class="sr-only">{label}</span>
+				{/if}
+				<!-- header row: uses table layout to auto-size columns by content -->
+				<table class="header-table" bind:this={header_table_el}>
+					<thead>
+						<tr bind:this={header_row_el}>
+							{#if show_row_numbers}
+								<th class="row-number-header">&nbsp;</th>
+							{/if}
+							{#each header_groups as headerGroup (headerGroup.id)}
+								{#each headerGroup.headers as header (header.id)}
+									{@const col_idx =
+										(header.column.columnDef.meta as any)?.colIndex ?? 0}
+									<HeaderCell
+										value={String(header.column.columnDef.header ?? "")}
+										{col_idx}
+										is_editing={header_edit === col_idx}
+										is_selected={selected_header === col_idx}
+										is_static={!!(header.column.columnDef.meta as any)
+											?.isStatic}
+										sort_direction={get_sort_info(col_idx).direction}
+										sort_priority={get_sort_info(col_idx).priority}
+										multi_sort={sorting.length > 1}
+										is_filtered={get_filter_active(col_idx)}
+										show_menu_button={col_count[1] === "dynamic"}
+										is_first_column={col_idx === 0 && !show_row_numbers}
+										{latex_delimiters}
+										{line_breaks}
+										{editable}
+										{max_chars}
+										{i18n}
+										onclick={handle_header_click}
+										on_menu_click={toggle_header_menu}
+										on_end_edit={end_header_edit}
+									/>
+								{/each}
+							{/each}
+						</tr>
+					</thead>
+					<!-- hidden sizing row: lets table-layout:auto consider body content widths too -->
+					<tbody class="sizing-body" aria-hidden="true">
+						{#if rows.length > 0}
+							{@const sizing_row = rows.reduce((widest, row) => {
+								const cells = row.getVisibleCells();
+								cells.forEach((cell, i) => {
+									const val = String(cell.getValue() ?? "");
+									if (!widest[i] || val.length > widest[i].length) {
+										widest[i] = val;
+									}
+								});
+								return widest;
+							}, [] as string[])}
+							<tr>
+								{#if show_row_numbers}
+									<td class="row-number-cell">{rows.length}</td>
+								{/if}
+								{#each sizing_row as val, ci}
+									{@const dtype = get_dtype(ci)}
+									<td
+										><div class="cell-wrap">
+											{#if dtype === "html" || dtype === "markdown"}{@html val}{:else}{val}{/if}
+										</div></td
+									>
+								{/each}
+							</tr>
 						{/if}
-						{#each _headers as { value, id }, i (id)}
-							<TableHeader
-								bind:value={_headers[i].value}
-								{i}
-								{actual_pinned_columns}
-								{header_edit}
-								{selected_header}
-								{headers}
-								{get_cell_width}
-								{handle_header_click}
-								{toggle_header_menu}
-								{end_header_edit}
-								sort_columns={$df_state.sort_state.sort_columns}
-								filter_columns={$df_state.filter_state.filter_columns}
-								{latex_delimiters}
-								{line_breaks}
-								{max_chars}
-								{editable}
-								is_static={static_columns.includes(i)}
-								{i18n}
-								bind:el={els[id].input}
-								{col_count}
-								datatype={Array.isArray(datatype) ? datatype[i] : datatype}
-								{data}
-								on_select_all={handle_select_all}
-							/>
-						{/each}
-					</tr>
-					<tr slot="tbody" let:item let:index class:row-odd={index % 2 === 0}>
-						{#if show_row_numbers}
-							<RowNumber {index} />
+					</tbody>
+				</table>
+
+				<!-- table body: absolutely positioned rows (standard tanstack virtual pattern) -->
+				<div
+					class="virtual-body"
+					style="height: {total_size}px; position: relative; flex-shrink: 0; width: {measurement.total_header_width
+						? `${measurement.total_header_width}px`
+						: '100%'};"
+				>
+					{#each virtual_items as virtual_row (virtual_row.key)}
+						{@const row = rows[virtual_row.index]}
+						{@const row_idx = row?.original._index ?? virtual_row.index}
+						{#if row}
+							<div
+								class="virtual-row"
+								class:row-odd={virtual_row.index % 2 !== 0}
+								data-index={virtual_row.index}
+								style="position: absolute; top: 0; left: 0; width: 100%; transform: translateY({virtual_row.start}px);{selected_cells.some(
+									([r]) => r === row_idx
+								)
+									? ' z-index: 3;'
+									: ''}"
+								use:measure_row={row}
+							>
+								{#if show_row_numbers}
+									<div
+										class="row-number-cell"
+										data-row={row_idx}
+										data-col="row-number"
+										style="flex: 0 0 {measurement.row_num_width}px; width: {measurement.row_num_width}px;"
+									>
+										{row_idx + 1}
+									</div>
+								{/if}
+								{#each row.getVisibleCells() as cell, ci (cell.id)}
+									{@const col_idx =
+										(cell.column.columnDef.meta as any)?.colIndex ?? 0}
+									{@const is_sel = is_cell_in_selection(
+										[row_idx, col_idx],
+										selected_cells
+									)}
+									<DataCell
+										value={cell.getValue() as CellValue}
+										display_value={get_display_value(row_idx, col_idx)}
+										datatype={get_dtype(col_idx)}
+										{row_idx}
+										{col_idx}
+										col_style={measurement.get_col_style(ci)}
+										cell_style={get_styling(row_idx, col_idx)}
+										selection_classes={is_cell_selected(
+											[row_idx, col_idx],
+											selected_cells
+										)}
+										is_editing={!!(
+											editing &&
+											editing[0] === row_idx &&
+											editing[1] === col_idx
+										)}
+										is_flash={copy_flash && is_sel}
+										is_static={!!(cell.column.columnDef.meta as any)?.isStatic}
+										show_menu_button={editable &&
+											selected_cells.length === 1 &&
+											selected_cells[0][0] === row_idx &&
+											selected_cells[0][1] === col_idx}
+										show_selection_buttons={selected_cells.length === 1 &&
+											selected_cells[0][0] === row_idx &&
+											selected_cells[0][1] === col_idx}
+										is_first_column={ci === 0 && !show_row_numbers}
+										{latex_delimiters}
+										{line_breaks}
+										{editable}
+										{max_chars}
+										{i18n}
+										{components}
+										{is_dragging}
+										wrap_text={wrap}
+										onmousedown={(e) => handle_cell_click(e, row_idx, col_idx)}
+										ondblclick={(e) =>
+											handle_cell_dblclick(e, row_idx, col_idx)}
+										oncontextmenu={(e) => {
+											e.preventDefault();
+											toggle_cell_menu(e, row_idx, col_idx);
+										}}
+										onblur={handle_blur}
+										on_menu_click={(e) => toggle_cell_menu(e, row_idx, col_idx)}
+										on_select_column={(c) => {
+											selected_cells = rows.map(
+												(_, r) => [r, c] as CellCoordinate
+											);
+											selected = selected_cells[0];
+										}}
+										on_select_row={(r) => {
+											selected_cells = resolved_headers.map(
+												(_, c) => [r, c] as CellCoordinate
+											);
+											selected = selected_cells[0];
+										}}
+									/>
+								{/each}
+							</div>
 						{/if}
-						{#each item as { value, id }, j (id)}
-							<TableCell
-								bind:value={search_results[index][j].value}
-								display_value={get_cell_display_value(index, j)}
-								index={$df_state.current_search_query !== undefined &&
-								filtered_to_original_map[index] !== undefined
-									? filtered_to_original_map[index]
-									: index}
-								{j}
-								{actual_pinned_columns}
-								{get_cell_width}
-								handle_cell_click={(e, r, c) => handle_mouse_down(e, r, c)}
-								{handle_blur}
-								toggle_cell_menu={df_actions.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}
-								{max_chars}
-								{editable}
-								is_static={static_columns.includes(j)}
-								{i18n}
-								{components}
-								handle_select_column={df_actions.handle_select_column}
-								handle_select_row={df_actions.handle_select_row}
-								bind:el={els[id]}
-								{is_dragging}
-								{wrap}
-							/>
-						{/each}
-					</tr>
-				</VirtualTable>
+					{/each}
+				</div>
 			</div>
 		</Upload>
+
 		{#if show_scroll_button}
-			<button class="scroll-top-button" on:click={scroll_to_top}>
-				&uarr;
-			</button>
+			<button class="scroll-top-button" onclick={scroll_to_top}>&uarr;</button>
 		{/if}
 	</div>
 </div>
-{#if data.length === 0 && editable && row_count[1] === "dynamic"}
-	<EmptyRowButton on_click={() => add_row()} />
-{/if}
 
 {#if active_cell_menu || active_header_menu}
 	<CellMenu
@@ -1079,66 +1057,96 @@
 		on_delete_col={() =>
 			delete_col_at(active_cell_menu?.col ?? active_header_menu?.col ?? -1)}
 		{editable}
-		can_delete_rows={!active_header_menu && data.length > 1 && editable}
-		can_delete_cols={data.length > 0 && data[0]?.length > 1 && editable}
+		can_delete_rows={!active_header_menu && values.length > 1 && editable}
+		can_delete_cols={values.length > 0 &&
+			(values[0]?.length ?? 0) > 1 &&
+			editable}
 		{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);
-					}
+					handle_sort(active_header_menu!.col, direction);
+					active_header_menu = null;
 				}
 			: undefined}
 		on_clear_sort={active_header_menu
 			? () => {
 					clear_sort();
-					df_actions.set_active_header_menu(null);
+					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)
+			? get_sort_info(active_header_menu.col).direction
 			: null}
 		sort_priority={active_header_menu
-			? $df_state.sort_state.sort_columns.findIndex(
-					(item) => item.col === (active_header_menu?.col ?? -1)
-				) + 1 || null
+			? get_sort_info(active_header_menu.col).priority
 			: null}
 		on_filter={active_header_menu
-			? (datatype, filter, value) => {
-					if (active_header_menu) {
-						handle_filter(active_header_menu.col, datatype, filter, value);
-						df_actions.set_active_header_menu(null);
-					}
+			? (dtype, filter, fvalue) => {
+					handle_filter(active_header_menu!.col, dtype, filter, fvalue);
+					active_header_menu = null;
 				}
 			: undefined}
 		on_clear_filter={active_header_menu
 			? () => {
 					clear_filter();
-					df_actions.set_active_header_menu(null);
+					active_header_menu = null;
 				}
 			: undefined}
 		filter_active={active_header_menu
-			? $df_state.filter_state.filter_columns.some(
-					(c) => c.col === (active_header_menu?.col ?? -1)
-				)
+			? get_filter_active(active_header_menu.col)
 			: null}
 	/>
 {/if}
 
+{#if values.length === 0 && editable && row_count[1] === "dynamic"}
+	<EmptyRowButton on_click={() => add_row()} />
+{/if}
+
 <style>
 	.table-container {
 		display: flex;
 		flex-direction: column;
 		gap: var(--size-2);
 		position: relative;
+		max-width: 100%;
+		overflow: hidden;
+	}
+
+	.table-container.fullscreen {
+		padding: var(--size-4);
+		height: 100%;
+		box-sizing: border-box;
+	}
+
+	.table-container.fullscreen .table-wrap {
+		flex: 1 1 auto;
+		min-height: 0;
+		display: flex;
+		flex-direction: column;
+	}
+
+	.table-container.fullscreen .table-wrap > :global(*) {
+		flex: 1 1 auto;
+		min-height: 0;
+		display: flex;
+		flex-direction: column;
+	}
+
+	.table-container.fullscreen .virtual-table-viewport {
+		max-height: none !important;
+		flex: 1 1 auto;
+		min-height: 0;
 	}
 
 	.table-wrap {
 		position: relative;
 		transition: 150ms;
+		width: 100%;
+	}
+
+	/* Constrain Upload component wrapper */
+	.table-wrap > :global(*) {
+		max-width: 100%;
 	}
 
 	.table-wrap.menu-open {
@@ -1165,56 +1173,147 @@
 		overflow: hidden;
 	}
 
-	table {
-		position: absolute;
-		opacity: 0;
-		z-index: -1;
-		transition: 150ms;
-		width: var(--size-full);
-		table-layout: auto;
+	/* Virtual scroll container */
+	.virtual-table-viewport {
+		display: flex;
+		flex-direction: column;
+		overflow: auto;
+		position: relative;
+		-webkit-overflow-scrolling: touch;
+		min-width: 0;
+		max-width: 100%;
+		scrollbar-width: thin;
+		scrollbar-color: rgba(128, 128, 128, 0.5) transparent;
+	}
+
+	.virtual-table-viewport::-webkit-scrollbar {
+		width: 4px;
+		height: 4px;
+	}
+
+	.virtual-table-viewport::-webkit-scrollbar-thumb {
+		background-color: rgba(128, 128, 128, 0.5);
+		border-radius: 4px;
+	}
+
+	.virtual-table-viewport:hover {
+		scrollbar-color: rgba(160, 160, 160, 0.7) transparent;
+	}
+
+	.virtual-table-viewport.disable-scroll {
+		overflow: hidden !important;
+	}
+
+	/* Header table: auto-sizes columns by content, sticky */
+	.header-table {
+		width: 100%;
 		color: var(--body-text-color);
 		font-size: var(--input-text-size);
 		line-height: var(--line-md);
 		font-family: var(--font-mono);
 		border-spacing: 0;
 		border-collapse: separate;
-	}
-
-	thead {
+		table-layout: auto;
 		position: sticky;
 		top: 0;
-		z-index: 5;
-		box-shadow: var(--shadow-drop);
+		z-index: 7;
+		flex-shrink: 0;
 	}
 
-	thead :global(th.pinned-column) {
-		position: sticky;
-		z-index: 6;
-		background: var(--table-even-background-fill) !important;
+	/* Hidden sizing row — visibility:collapse hides the row but keeps column width contribution */
+	.sizing-body tr {
+		visibility: collapse;
 	}
 
-	.dragging {
-		border-color: var(--color-accent);
+	.sizing-body td {
+		padding: var(--size-2);
+		border: none;
+		white-space: nowrap;
 	}
 
-	.no-wrap {
-		white-space: nowrap;
+	/* Virtual body */
+	.virtual-body {
+		box-sizing: border-box;
 	}
 
-	div:not(.no-wrap) td {
-		overflow-wrap: anywhere;
+	.virtual-row {
+		display: flex;
+		align-items: stretch;
+		background: var(--table-odd-background-fill);
+
+		text-align: left;
+		font-size: var(--input-text-size);
+		line-height: var(--line-md);
+		font-family: var(--font-mono);
+		color: var(--body-text-color);
+		min-height: var(--size-9);
 	}
 
-	div.no-wrap td {
-		overflow-x: hidden;
+	.virtual-row:last-child {
+		border-bottom: none;
 	}
 
-	tr {
+	.virtual-row.row-odd {
 		background: var(--table-even-background-fill);
 	}
 
-	tr.row-odd {
-		background: var(--table-odd-background-fill);
+	.virtual-row:hover {
+		background: var(--table-row-focus);
+	}
+
+	/* Cell content wrapper (used in sizing-body) */
+	.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;
+		gap: var(--size-1);
+		overflow: visible;
+		min-width: 0;
+	}
+
+	/* Row number cells */
+	.row-number-header {
+		text-align: center;
+		padding: var(--size-1);
+		min-width: var(--size-12);
+		width: var(--size-12);
+		font-weight: var(--weight-semibold);
+		border-right: 1px solid var(--border-color-primary);
+		background: var(--table-even-background-fill) !important;
+	}
+
+	.row-number-cell {
+		text-align: center;
+		padding: var(--size-1);
+		min-width: var(--size-12);
+		width: var(--size-12);
+		flex-shrink: 0;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		font-weight: var(--weight-semibold);
+		border-right: 1px solid var(--border-color-primary);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.no-wrap {
+		white-space: nowrap;
+	}
+
+	div:not(.no-wrap) :global(td) {
+		overflow-wrap: anywhere;
+	}
+
+	div.no-wrap :global(td) {
+		overflow-x: hidden;
 	}
 
 	.header-row {
@@ -1238,8 +1337,6 @@
 		color: var(--block-label-text-color);
 		font-size: var(--block-label-text-size);
 		line-height: var(--line-sm);
-		position: relative;
-		z-index: 4;
 	}
 
 	.scroll-top-button {
@@ -1264,9 +1361,4 @@
 	.scroll-top-button:hover {
 		opacity: 1;
 	}
-
-	tr {
-		border-bottom: 1px solid var(--border-color-primary);
-		text-align: left;
-	}
 </style>