@gradio/dataframe 0.16.5 → 0.17.0

package/shared/Table.svelte

@@ -1,35 +1,38 @@
+<script lang="ts" context="module">
+	import {
+		type SortDirection,
+		create_dataframe_context
+	} from "./context/table_context";
+	import { create_keyboard_context } from "./context/keyboard_context";
+	import { create_selection_context } from "./context/selection_context";
+</script>
+
 <script 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,
-		HeadersWithIDs,
-		DataframeValue,
-		Datatype
-	} from "./utils";
+	import type { Headers, DataframeValue, Datatype } from "./utils";
 	import CellMenu from "./CellMenu.svelte";
 	import Toolbar from "./Toolbar.svelte";
-	import SortIcon from "./icons/SortIcon.svelte";
-	import type { CellCoordinate, EditingState } from "./types";
+	import type { CellCoordinate } from "./types";
 	import {
 		is_cell_selected,
-		handle_selection,
-		handle_delete_key,
 		should_show_cell_menu,
 		get_next_cell_coordinates,
 		get_range_selection,
 		move_cursor,
 		get_current_indices,
 		handle_click_outside as handle_click_outside_util,
-		select_column,
-		select_row,
 		calculate_selection_positions
 	} from "./selection_utils";
 	import {
@@ -38,6 +41,13 @@
 		handle_file_upload,
 		sort_table_data
 	} from "./utils/table_utils";
+	import { make_headers, process_data } from "./utils/data_processing";
+	import { handle_keydown } from "./utils/keyboard_utils";
+	import {
+		create_drag_handlers,
+		type DragState,
+		type DragHandlers
+	} from "./utils/drag_utils";
 
 	export let datatype: Datatype | Datatype[];
 	export let label: string | null = null;
@@ -51,6 +61,7 @@
 		right: string;
 		display: boolean;
 	}[];
+	export let components: Record<string, any> = {};
 
 	export let editable = true;
 	export let wrap = false;
@@ -69,24 +80,40 @@
 	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)[] = [];
 
-	let actual_pinned_columns = 0;
 	$: actual_pinned_columns =
 		pinned_columns && data?.[0]?.length
 			? Math.min(pinned_columns, data[0].length)
 			: 0;
 
-	let selected_cells: CellCoordinate[] = [];
-	$: selected_cells = [...selected_cells];
-	let selected: CellCoordinate | false = false;
-	$: selected =
-		selected_cells.length > 0
-			? selected_cells[selected_cells.length - 1]
-			: false;
+	const { state: df_state, actions: df_actions } = create_dataframe_context({
+		show_fullscreen_button,
+		show_copy_button,
+		show_search,
+		show_row_numbers,
+		editable,
+		pinned_columns,
+		show_label,
+		line_breaks,
+		wrap,
+		max_height,
+		column_widths,
+		max_chars
+	});
+
+	$: selected_cells = $df_state.ui_state.selected_cells; // $: {
+	let previous_selected_cells: [number, number][] = [];
+	$: {
+		if (copy_flash && !dequal(selected_cells, previous_selected_cells)) {
+			keyboard_ctx?.set_copy_flash(false);
+		}
+		previous_selected_cells = selected_cells;
+	}
+	$: selected = $df_state.ui_state.selected;
 
 	export let display_value: string[][] | null = null;
 	export let styling: string[][] | null = null;
-	let t_rect: DOMRectReadOnly;
 	let els: Record<
 		string,
 		{ cell: null | HTMLTableCellElement; input: null | HTMLInputElement }
@@ -100,21 +127,12 @@
 		search: string | null;
 	}>();
 
-	let editing: EditingState = false;
+	$: editing = $df_state.ui_state.editing;
 	let clear_on_focus = false;
-	let header_edit: number | false = false;
-	let selected_header: number | false = false;
-	let active_cell_menu: {
-		row: number;
-		col: number;
-		x: number;
-		y: number;
-	} | null = null;
-	let active_header_menu: {
-		col: number;
-		x: number;
-		y: number;
-	} | null = null;
+	$: header_edit = $df_state.ui_state.header_edit;
+	$: selected_header = $df_state.ui_state.selected_header;
+	$: active_cell_menu = $df_state.ui_state.active_cell_menu;
+	$: active_header_menu = $df_state.ui_state.active_header_menu;
 	let is_fullscreen = false;
 	let dragging = false;
 	let copy_flash = false;
@@ -138,336 +156,153 @@
 		return Math.random().toString(36).substring(2, 15);
 	}
 
-	function make_headers(
-		_head: Headers,
-		col_count: [number, "fixed" | "dynamic"],
-		els: Record<
-			string,
-			{ cell: null | HTMLTableCellElement; input: null | HTMLInputElement }
-		>
-	): HeadersWithIDs {
-		let _h = _head || [];
-		if (col_count[1] === "fixed" && _h.length < col_count[0]) {
-			const fill = Array(col_count[0] - _h.length)
-				.fill("")
-				.map((_, i) => `${i + _h.length}`);
-			_h = _h.concat(fill);
-		}
-
-		if (!_h || _h.length === 0) {
-			return Array(col_count[0])
-				.fill(0)
-				.map((_, i) => {
-					const _id = make_id();
-					els[_id] = { cell: null, input: null };
-					return { id: _id, value: JSON.stringify(i + 1) };
-				});
-		}
-
-		return _h.map((h, i) => {
-			const _id = make_id();
-			els[_id] = { cell: null, input: null };
-			return { id: _id, value: h ?? "" };
-		});
-	}
-
-	function process_data(_values: (string | number)[][]): {
-		value: string | number;
-		id: string;
-	}[][] {
-		const data_row_length = _values.length;
-		if (data_row_length === 0) return [];
-		return Array(row_count[1] === "fixed" ? row_count[0] : data_row_length)
-			.fill(0)
-			.map((_, i) => {
-				return Array(
-					col_count[1] === "fixed"
-						? col_count[0]
-						: _values[0].length || headers.length
-				)
-					.fill(0)
-					.map((_, j) => {
-						const id = make_id();
-						els[id] = els[id] || { input: null, cell: null };
-						const obj = { value: _values?.[i]?.[j] ?? "", id };
-						data_binding[id] = obj;
-						return obj;
-					});
-			});
-	}
-
-	let _headers = make_headers(headers, col_count, els);
+	let _headers = make_headers(headers, col_count, els, make_id);
 	let old_headers: string[] = headers;
 
 	$: {
 		if (!dequal(headers, old_headers)) {
-			_headers = make_headers(headers, col_count, els);
+			_headers = make_headers(headers, col_count, els, make_id);
 			old_headers = JSON.parse(JSON.stringify(headers));
 		}
 	}
 
 	let data: { id: string; value: string | number }[][] = [[]];
 	let old_val: undefined | (string | number)[][] = undefined;
+	let search_results: {
+		id: string;
+		value: string | number;
+		display_value?: string;
+		styling?: string;
+	}[][] = [[]];
 
 	$: if (!dequal(values, old_val)) {
-		data = process_data(values as (string | number)[][]);
+		if (parent) {
+			for (let i = 0; i < 50; i++) {
+				parent.style.removeProperty(`--cell-width-${i}`);
+			}
+		}
+		// 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 (string | number)[][],
+			els,
+			data_binding,
+			make_id,
+			display_value
+		);
 		old_val = JSON.parse(JSON.stringify(values)) as (string | number)[][];
-	}
-
-	let previous_headers = _headers.map((h) => h.value);
-	let previous_data = data.map((row) => row.map((cell) => String(cell.value)));
 
-	async function trigger_change(): Promise<void> {
-		// shouldnt trigger if data changed due to search
-		if (current_search_query) return;
-		const current_headers = _headers.map((h) => h.value);
-		const current_data = data.map((row) =>
-			row.map((cell) => String(cell.value))
-		);
+		if (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);
+		}
 
-		if (
-			!dequal(current_data, previous_data) ||
-			!dequal(current_headers, previous_headers)
-		) {
-			// We dispatch the value as part of the change event to ensure that the value is updated
-			// in the parent component and the updated value is passed into the user's function
-			dispatch("change", {
-				data: data.map((row) => row.map((cell) => cell.value)),
-				headers: _headers.map((h) => h.value),
-				metadata: null // the metadata (display value, styling) cannot be changed by the user so we don't need to pass it up
-			});
-			if (!value_is_output) {
-				dispatch("input");
-			}
-			previous_data = current_data;
-			previous_headers = current_headers;
+		if ($df_state.current_search_query) {
+			df_actions.handle_search(null);
 		}
-	}
 
-	function get_sort_status(
-		name: string,
-		_sort?: number,
-		direction?: SortDirection
-	): "none" | "ascending" | "descending" {
-		if (!_sort) return "none";
-		if (headers[_sort] === name) {
-			if (direction === "asc") return "ascending";
-			if (direction === "des") return "descending";
+		if (parent && cells.length > 0) {
+			set_cell_widths();
 		}
-		return "none";
 	}
 
-	// eslint-disable-next-line complexity
-	async function handle_keydown(event: KeyboardEvent): Promise<void> {
-		if (selected_header !== false && header_edit === false) {
-			switch (event.key) {
-				case "ArrowDown":
-					selected = [0, selected_header];
-					selected_cells = [[0, selected_header]];
-					selected_header = false;
-					return;
-				case "ArrowLeft":
-					selected_header =
-						selected_header > 0 ? selected_header - 1 : selected_header;
-					return;
-				case "ArrowRight":
-					selected_header =
-						selected_header < _headers.length - 1
-							? selected_header + 1
-							: selected_header;
-					return;
-				case "Escape":
-					event.preventDefault();
-					selected_header = false;
-					break;
-				case "Enter":
-					event.preventDefault();
-					if (editable) {
-						header_edit = selected_header;
-					}
-					break;
-			}
-		}
+	$: if ($df_state.current_search_query !== undefined) {
+		const cell_map = new Map();
 
-		if (event.key === "Delete" || event.key === "Backspace") {
-			if (!editable) return;
+		data.forEach((row, row_idx) => {
+			row.forEach((cell, col_idx) => {
+				cell_map.set(cell.id, {
+					value: cell.value,
+					styling: styling?.[row_idx]?.[col_idx] || ""
+				});
+			});
+		});
 
-			if (editing) {
-				const [row, col] = editing;
-				const input_el = els[data[row][col].id].input;
-				if (input_el && input_el.selectionStart !== input_el.selectionEnd) {
-					return;
-				}
-				if (
-					event.key === "Delete" &&
-					input_el?.selectionStart !== input_el?.value.length
-				) {
-					return;
-				}
-				if (event.key === "Backspace" && input_el?.selectionStart !== 0) {
-					return;
-				}
-			}
+		const filtered = df_actions.filter_data(data);
+
+		search_results = filtered.map((row) =>
+			row.map((cell) => {
+				const original = cell_map.get(cell.id);
+				return {
+					...cell,
+					display_value: original?.display_value || String(cell.value),
+					styling: original?.styling || ""
+				};
+			})
+		);
+	}
 
-			event.preventDefault();
-			if (selected_cells.length > 0) {
-				data = handle_delete_key(data, selected_cells);
-				dispatch("change", {
-					data: data.map((row) => row.map((cell) => cell.value)),
-					headers: _headers.map((h) => h.value),
-					metadata: null
-				});
-				if (!value_is_output) {
-					dispatch("input");
-				}
-			}
-			return;
-		}
+	let previous_headers = _headers.map((h) => h.value);
+	let previous_data = data.map((row) => row.map((cell) => String(cell.value)));
 
-		if (event.key === "c" && (event.metaKey || event.ctrlKey)) {
-			event.preventDefault();
-			if (selected_cells.length > 0) {
-				await handle_copy();
-			}
-			return;
+	$: {
+		if (data || _headers) {
+			df_actions.trigger_change(
+				data,
+				_headers,
+				previous_data,
+				previous_headers,
+				value_is_output,
+				dispatch
+			);
+			previous_data = data.map((row) => row.map((cell) => String(cell.value)));
+			previous_headers = _headers.map((h) => h.value);
 		}
+	}
 
-		if (!selected) {
-			return;
-		}
+	function handle_sort(col: number, direction: SortDirection): void {
+		df_actions.handle_sort(col, direction);
+		sort_data(data, display_value, styling);
+	}
 
-		const [i, j] = selected;
-
-		switch (event.key) {
-			case "ArrowRight":
-			case "ArrowLeft":
-			case "ArrowDown":
-			case "ArrowUp":
-				if (editing) break;
-				event.preventDefault();
-				const next_coords = move_cursor(event.key, [i, j], data);
-				if (next_coords) {
-					if (event.shiftKey) {
-						selected_cells = get_range_selection(
-							selected_cells.length > 0 ? selected_cells[0] : [i, j],
-							next_coords
-						);
-						editing = false;
-					} else {
-						selected_cells = [next_coords];
-						editing = false;
-					}
-					selected = next_coords;
-				} else if (
-					next_coords === false &&
-					event.key === "ArrowUp" &&
-					i === 0
-				) {
-					selected_header = j;
-					selected = false;
-					selected_cells = [];
-					editing = false;
-				}
-				break;
-
-			case "Escape":
-				if (!editable) break;
-				event.preventDefault();
-				editing = false;
-				break;
-			case "Enter":
-				event.preventDefault();
-				if (editable) {
-					if (event.shiftKey) {
-						add_row(i);
-						await tick();
-						selected = [i + 1, j];
-					} else {
-						if (dequal(editing, [i, j])) {
-							const cell_id = data[i][j].id;
-							const input_el = els[cell_id].input;
-							if (input_el) {
-								data[i][j].value = input_el.value;
-							}
-							editing = false;
-							await tick();
-							selected = [i, j];
-						} else {
-							editing = [i, j];
-							clear_on_focus = false;
-						}
-					}
-				}
-				break;
-			case "Tab":
-				event.preventDefault();
-				editing = false;
-				const next_cell = get_next_cell_coordinates(
-					[i, j],
-					data,
-					event.shiftKey
-				);
-				if (next_cell) {
-					selected_cells = [next_cell];
-					selected = next_cell;
-					if (editable) {
-						editing = next_cell;
-						clear_on_focus = false;
-					}
-				}
-				break;
-			default:
-				if (!editable) break;
-				if (
-					(!editing || (editing && dequal(editing, [i, j]))) &&
-					event.key.length === 1
-				) {
-					clear_on_focus = true;
-					editing = [i, j];
-				}
-		}
+	function clear_sort(): void {
+		df_actions.reset_sort_state();
+		sort_data(data, display_value, styling);
 	}
 
-	type SortDirection = "asc" | "des";
-	let sort_direction: SortDirection | undefined;
-	let sort_by: number | undefined;
+	$: {
+		df_actions.sort_data(data, display_value, styling);
+		df_actions.update_row_order(data);
+	}
 
-	function handle_sort(col: number, direction: SortDirection): void {
-		if (typeof sort_by !== "number" || sort_by !== col) {
-			sort_direction = direction;
-			sort_by = col;
-		} else if (sort_by === col) {
-			if (sort_direction === direction) {
-				sort_direction = undefined;
-				sort_by = undefined;
-			} else {
-				sort_direction = direction;
+	$: {
+		if ($df_state.sort_state.sort_columns) {
+			if ($df_state.sort_state.sort_columns.length > 0) {
+				sort_data(data, display_value, styling);
 			}
 		}
 	}
 
 	async function edit_header(i: number, _select = false): Promise<void> {
 		if (!editable || header_edit === i) return;
-		selected = false;
-		selected_cells = [];
-		selected_header = i;
-		header_edit = i;
+		if (!editable || col_count[1] !== "dynamic" || header_edit === i) return;
+		df_actions.set_header_edit(i);
 	}
 
-	function end_header_edit(event: CustomEvent<KeyboardEvent>): void {
+	function handle_header_click(event: MouseEvent, col: number): void {
+		if (event.target instanceof HTMLAnchorElement) {
+			return;
+		}
+		event.preventDefault();
+		event.stopPropagation();
 		if (!editable) return;
+		clear_on_focus = false;
+		df_actions.set_editing(false);
+		df_actions.handle_header_click(col, editable);
+		parent.focus();
+	}
 
-		switch (event.detail.key) {
-			case "Escape":
-			case "Enter":
-			case "Tab":
-				event.preventDefault();
-				selected = false;
-				selected_header = header_edit;
-				header_edit = false;
-				parent.focus();
-				break;
-		}
+	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> {
@@ -495,29 +330,27 @@
 		selected = [index !== undefined ? index : data.length - 1, 0];
 	}
 
-	$: (data || _headers) && trigger_change();
-
 	async function add_col(index?: number): Promise<void> {
 		parent.focus();
 		if (col_count[1] !== "dynamic") return;
 
-		const insert_index = index !== undefined ? index : data[0].length;
+		const result = df_actions.add_col(data, headers, make_id, index);
 
-		for (let i = 0; i < data.length; i++) {
-			const _id = make_id();
-			els[_id] = { cell: null, input: null };
-			data[i].splice(insert_index, 0, { id: _id, value: "" });
-		}
-
-		headers.splice(insert_index, 0, `Header ${headers.length + 1}`);
+		result.data.forEach((row) => {
+			row.forEach((cell) => {
+				if (!els[cell.id]) {
+					els[cell.id] = { cell: null, input: null };
+				}
+			});
+		});
 
-		data = data;
-		headers = headers;
+		data = result.data;
+		headers = result.headers;
 
 		await tick();
 
 		requestAnimationFrame(() => {
-			edit_header(insert_index, true);
+			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 });
 		});
@@ -525,12 +358,9 @@
 
 	function handle_click_outside(event: Event): void {
 		if (handle_click_outside_util(event, parent)) {
-			editing = false;
-			selected_cells = [];
+			df_actions.clear_ui_state();
 			header_edit = false;
 			selected_header = false;
-			active_cell_menu = null;
-			active_header_menu = null;
 		}
 	}
 
@@ -548,19 +378,29 @@
 		if (show_row_numbers) {
 			parent.style.setProperty(`--cell-width-row-number`, `${widths[0]}px`);
 		}
-		const data_cells = show_row_numbers ? widths.slice(1) : widths;
-		data_cells.forEach((width, i) => {
+
+		for (let i = 0; i < 50; i++) {
+			if (!column_widths[i]) {
+				parent.style.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]) {
-				parent.style.setProperty(
-					`--cell-width-${i}`,
-					`${width - scrollbar_width / data_cells.length}px`
-				);
+				const calculated_width = `${Math.max(width, 45)}px`;
+				parent.style.setProperty(`--cell-width-${i}`, calculated_width);
 			}
 		});
 	}
 
 	function get_cell_width(index: number): string {
-		return column_widths[index] || `var(--cell-width-${index})`;
+		return `var(--cell-width-${index})`;
 	}
 
 	let table_height: number =
@@ -570,19 +410,19 @@
 	function sort_data(
 		_data: typeof data,
 		_display_value: string[][] | null,
-		_styling: string[][] | null,
-		col?: number,
-		dir?: SortDirection
+		_styling: string[][] | null
 	): void {
 		let id = null;
 		if (selected && selected[0] in _data && selected[1] in _data[selected[0]]) {
 			id = _data[selected[0]][selected[1]].id;
 		}
-		if (typeof col !== "number" || !dir) {
-			return;
-		}
 
-		sort_table_data(_data, _display_value, _styling, col, dir);
+		sort_table_data(
+			_data,
+			_display_value,
+			_styling,
+			$df_state.sort_state.sort_columns
+		);
 		data = data;
 
 		if (id) {
@@ -591,7 +431,7 @@
 		}
 	}
 
-	$: sort_data(data, display_value, styling, sort_by, sort_direction);
+	$: sort_data(data, display_value, styling);
 
 	$: selected_index = !!selected && selected[0];
 
@@ -624,114 +464,65 @@
 		};
 	});
 
+	$: keyboard_ctx = create_keyboard_context({
+		selected_header,
+		header_edit,
+		editing,
+		selected,
+		selected_cells,
+		editable,
+		data,
+		headers: _headers,
+		els,
+		df_actions,
+		dispatch,
+		add_row,
+		get_next_cell_coordinates,
+		get_range_selection,
+		move_cursor,
+		copy_flash,
+		parent_element: parent,
+		set_copy_flash: (value: boolean) => {
+			copy_flash = value;
+			if (value) {
+				setTimeout(() => {
+					copy_flash = false;
+				}, 800);
+			}
+		}
+	});
+
+	$: selection_ctx = create_selection_context({
+		df_actions,
+		dispatch,
+		data,
+		els,
+		editable,
+		show_row_numbers,
+		get_data_at,
+		clear_on_focus,
+		selected_cells,
+		parent_element: parent
+	});
+
 	function handle_cell_click(
 		event: MouseEvent,
 		row: number,
 		col: number
 	): void {
-		if (event.target instanceof HTMLAnchorElement) {
-			return;
-		}
-
-		event.preventDefault();
-		event.stopPropagation();
-
-		if (show_row_numbers && col === -1) return;
-
-		clear_on_focus = false;
-		active_cell_menu = null;
-		active_header_menu = null;
-		selected_header = false;
-		header_edit = false;
-
-		selected_cells = handle_selection([row, col], selected_cells, event);
-		parent.focus();
-
-		if (editable) {
-			if (selected_cells.length === 1) {
-				editing = [row, col];
-				tick().then(() => {
-					const input_el = els[data[row][col].id].input;
-					if (input_el) {
-						input_el.focus();
-						input_el.selectionStart = input_el.selectionEnd =
-							input_el.value.length;
-					}
-				});
-			} else {
-				editing = false;
-			}
-		}
-
-		toggle_cell_button(row, col);
-
-		dispatch("select", {
-			index: [row, col],
-			value: get_data_at(row, col),
-			row_value: data[row].map((d) => d.value)
-		});
+		selection_ctx.actions.handle_cell_click(event, row, col);
 	}
 
 	function toggle_cell_menu(event: MouseEvent, row: number, col: number): void {
-		event.stopPropagation();
-		if (
-			active_cell_menu &&
-			active_cell_menu.row === row &&
-			active_cell_menu.col === col
-		) {
-			active_cell_menu = null;
-		} else {
-			const cell = (event.target as HTMLElement).closest("td");
-			if (cell) {
-				const rect = cell.getBoundingClientRect();
-				active_cell_menu = { row, col, x: rect.right, y: rect.bottom };
-			}
-		}
-	}
-
-	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;
-	}
-
-	function handle_resize(): void {
-		active_cell_menu = null;
-		active_header_menu = null;
-		selected_cells = [];
-		selected = false;
-		editing = false;
-		set_cell_widths();
+		selection_ctx.actions.toggle_cell_menu(event, row, col);
 	}
 
-	let active_button: {
-		type: "header" | "cell";
-		row?: number;
-		col: number;
-	} | null = null;
-
-	function toggle_header_button(col: number): void {
-		active_button =
-			active_button?.type === "header" && active_button.col === col
-				? null
-				: { type: "header", col };
+	function handle_select_column(col: number): void {
+		selection_ctx.actions.handle_select_column(col);
 	}
 
-	function toggle_cell_button(row: number, col: number): void {
-		active_button =
-			active_button?.type === "cell" &&
-			active_button.row === row &&
-			active_button.col === col
-				? null
-				: { type: "cell", row, col };
+	function handle_select_row(row: number): void {
+		selection_ctx.actions.handle_select_row(row);
 	}
 
 	function toggle_fullscreen(): void {
@@ -748,23 +539,19 @@
 		is_fullscreen = !!document.fullscreenElement;
 	}
 
-	async function handle_copy(): Promise<void> {
-		await copy_table_data(data, selected_cells);
-		copy_flash = true;
-		setTimeout(() => {
-			copy_flash = false;
-		}, 800);
-	}
-
 	function toggle_header_menu(event: MouseEvent, col: number): void {
 		event.stopPropagation();
 		if (active_header_menu && active_header_menu.col === col) {
-			active_header_menu = null;
+			df_actions.set_active_header_menu(null);
 		} else {
 			const header = (event.target as HTMLElement).closest("th");
 			if (header) {
 				const rect = header.getBoundingClientRect();
-				active_header_menu = { col, x: rect.right, y: rect.bottom };
+				df_actions.set_active_header_menu({
+					col,
+					x: rect.right,
+					y: rect.bottom
+				});
 			}
 		}
 	}
@@ -773,86 +560,25 @@
 		value_is_output = false;
 	});
 
-	async function delete_row(index: number): Promise<void> {
-		parent.focus();
-		if (row_count[1] !== "dynamic") return;
-		if (data.length <= 1) return;
-		data.splice(index, 1);
-		data = data;
-		selected = false;
-	}
-
-	async function delete_col(index: number): Promise<void> {
-		parent.focus();
+	function delete_col_at(index: number): void {
 		if (col_count[1] !== "dynamic") return;
-		if (_headers.length <= 1) return;
-
-		_headers.splice(index, 1);
-		_headers = _headers;
+		if (data[0].length <= 1) return;
 
-		if (data.length > 0) {
-			data.forEach((row) => {
-				row.splice(index, 1);
-			});
-			data = data;
-		}
-		selected = false;
+		const result = df_actions.delete_col_at(data, headers, index);
+		data = result.data;
+		headers = result.headers;
+		_headers = make_headers(headers, col_count, els, make_id);
+		df_actions.set_active_cell_menu(null);
+		df_actions.set_active_header_menu(null);
+		df_actions.set_selected(false);
+		df_actions.set_selected_cells([]);
+		df_actions.set_editing(false);
 	}
 
 	function delete_row_at(index: number): void {
-		delete_row(index);
-		active_cell_menu = null;
-		active_header_menu = null;
-	}
-
-	function delete_col_at(index: number): void {
-		delete_col(index);
-		active_cell_menu = null;
-		active_header_menu = null;
-	}
-
-	let row_order: number[] = [];
-
-	$: {
-		if (
-			typeof sort_by === "number" &&
-			sort_direction &&
-			sort_by >= 0 &&
-			sort_by < data[0].length
-		) {
-			const indices = [...Array(data.length)].map((_, i) => i);
-			const sort_index = sort_by as number;
-			indices.sort((a, b) => {
-				const row_a = data[a];
-				const row_b = data[b];
-				if (
-					!row_a ||
-					!row_b ||
-					sort_index >= row_a.length ||
-					sort_index >= row_b.length
-				)
-					return 0;
-				const val_a = row_a[sort_index].value;
-				const val_b = row_b[sort_index].value;
-				const comp = val_a < val_b ? -1 : val_a > val_b ? 1 : 0;
-				return sort_direction === "asc" ? comp : -comp;
-			});
-			row_order = indices;
-		} else {
-			row_order = [...Array(data.length)].map((_, i) => i);
-		}
-	}
-
-	function handle_select_column(col: number): void {
-		selected_cells = select_column(data, col);
-		selected = selected_cells[0];
-		editing = false;
-	}
-
-	function handle_select_row(row: number): void {
-		selected_cells = select_row(data, row);
-		selected = selected_cells[0];
-		editing = false;
+		data = df_actions.delete_row_at(data, index);
+		df_actions.set_active_cell_menu(null);
+		df_actions.set_active_header_menu(null);
 	}
 
 	let coords: CellCoordinate;
@@ -870,55 +596,125 @@
 			"--selected-col-pos",
 			positions.col_pos
 		);
-		if (positions.row_pos) {
-			document.documentElement.style.setProperty(
-				"--selected-row-pos",
-				positions.row_pos
-			);
-		}
+		document.documentElement.style.setProperty(
+			"--selected-row-pos",
+			positions.row_pos || "0px"
+		);
 	}
 
-	let current_search_query: string | null = null;
+	function commit_filter(): void {
+		if ($df_state.current_search_query && show_search === "filter") {
+			const filtered_data: (string | number)[][] = [];
+			const filtered_display_values: string[][] = [];
+			const filtered_styling: string[][] = [];
+
+			search_results.forEach((row) => {
+				const data_row: (string | number)[] = [];
+				const display_row: string[] = [];
+				const styling_row: string[] = [];
+
+				row.forEach((cell) => {
+					data_row.push(cell.value);
+					display_row.push(cell.display_value || String(cell.value));
+					styling_row.push(cell.styling || "");
+				});
 
-	function handle_search(search_query: string | null): void {
-		current_search_query = search_query;
-		dispatch("search", search_query);
-	}
+				filtered_data.push(data_row);
+				filtered_display_values.push(display_row);
+				filtered_styling.push(styling_row);
+			});
 
-	function commit_filter(): void {
-		if (current_search_query && show_search === "filter") {
-			dispatch("change", {
-				data: data.map((row) => row.map((cell) => cell.value)),
+			const change_payload = {
+				data: filtered_data,
 				headers: _headers.map((h) => h.value),
-				metadata: null
-			});
+				metadata: {
+					display_value: filtered_display_values,
+					styling: filtered_styling
+				}
+			};
+
+			dispatch("change", change_payload);
+
 			if (!value_is_output) {
 				dispatch("input");
 			}
-			current_search_query = null;
+
+			df_actions.handle_search(null);
 		}
 	}
 
-	function handle_header_click(event: MouseEvent, col: number): void {
-		if (event.target instanceof HTMLAnchorElement) {
-			return;
-		}
+	let viewport: HTMLTableElement;
+	let show_scroll_button = false;
 
-		event.preventDefault();
-		event.stopPropagation();
+	function scroll_to_top(): void {
+		viewport.scrollTo({
+			top: 0
+		});
+	}
 
-		if (!editable) return;
+	function handle_resize(): void {
+		df_actions.set_active_cell_menu(null);
+		df_actions.set_active_header_menu(null);
+		selected_cells = [];
+		selected = false;
+		editing = false;
+		set_cell_widths();
+	}
 
-		clear_on_focus = false;
+	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;
-		selected = false;
-		selected_cells = [];
-		selected_header = col;
-		header_edit = col;
+	}
 
-		parent.focus();
+	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();
+	}
+
+	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) =>
+				selection_ctx.actions.handle_cell_click(event, row, col),
+			show_row_numbers,
+			parent
+		);
 	}
+
+	$: if (parent) init_drag_handlers();
+
+	$: handle_mouse_down = drag_handlers?.handle_mouse_down || (() => {});
+	$: handle_mouse_move = drag_handlers?.handle_mouse_move || (() => {});
+	$: handle_mouse_up = drag_handlers?.handle_mouse_up || (() => {});
 </script>
 
 <svelte:window on:resize={() => set_cell_widths()} />
@@ -935,140 +731,70 @@
 				{show_fullscreen_button}
 				{is_fullscreen}
 				on:click={toggle_fullscreen}
-				on_copy={handle_copy}
+				on_copy={async () => await copy_table_data(data, null)}
 				{show_copy_button}
 				{show_search}
-				on:search={(e) => handle_search(e.detail)}
+				on:search={(e) => df_actions.handle_search(e.detail)}
 				on_commit_filter={commit_filter}
-				{current_search_query}
+				current_search_query={$df_state.current_search_query}
 			/>
 		</div>
 	{/if}
 	<div
 		bind:this={parent}
 		class="table-wrap"
-		class:dragging
+		class:dragging={is_dragging}
 		class:no-wrap={!wrap}
 		style="height:{table_height}px;"
 		class:menu-open={active_cell_menu || active_header_menu}
-		on:keydown={(e) => handle_keydown(e)}
+		on:keydown={(e) => handle_keydown(e, keyboard_ctx)}
+		on:mousemove={handle_mouse_move}
+		on:mouseup={handle_mouse_up}
+		on:mouseleave={handle_mouse_up}
 		role="grid"
 		tabindex="0"
 	>
-		{#if selected !== false && selected_cells.length === 1}
-			<button
-				class="selection-button selection-button-column"
-				on:click|stopPropagation={() => handle_select_column(coords[1])}
-				aria-label="Select column"
-			>
-				&#8942;
-			</button>
-			<button
-				class="selection-button selection-button-row"
-				on:click|stopPropagation={() => handle_select_row(coords[0])}
-				aria-label="Select row"
-			>
-				&#8942;
-			</button>
-		{/if}
-		<table
-			bind:contentRect={t_rect}
-			bind:this={table}
-			class:fixed-layout={column_widths.length != 0}
-		>
+		<table bind:this={table}>
 			{#if label && label.length !== 0}
 				<caption class="sr-only">{label}</caption>
 			{/if}
 			<thead>
 				<tr>
 					{#if show_row_numbers}
-						<th
-							class="row-number-header frozen-column always-frozen"
-							style="left: 0;"
-						>
-							<div class="cell-wrap">
-								<div class="header-content">
-									<div class="header-text"></div>
-								</div>
-							</div>
-						</th>
+						<RowNumber is_header={true} />
 					{/if}
 					{#each _headers as { value, id }, i (id)}
-						<th
-							class:frozen-column={i < actual_pinned_columns}
-							class:last-frozen={i === actual_pinned_columns - 1}
-							class:focus={header_edit === i || selected_header === i}
-							aria-sort={get_sort_status(value, sort_by, sort_direction)}
-							style="width: {get_cell_width(i)}; left: {i <
-							actual_pinned_columns
-								? i === 0
-									? show_row_numbers
-										? 'var(--cell-width-row-number)'
-										: '0'
-									: `calc(${show_row_numbers ? 'var(--cell-width-row-number) + ' : ''}${Array(
-											i
-										)
-											.fill(0)
-											.map((_, idx) => `var(--cell-width-${idx})`)
-											.join(' + ')})`
-								: 'auto'};"
-							on:click={(event) => handle_header_click(event, i)}
-							on:mousedown={(event) => {
-								event.preventDefault();
-								event.stopPropagation();
-							}}
-						>
-							<div class="cell-wrap">
-								<div class="header-content">
-									<EditableCell
-										{max_chars}
-										bind:value={_headers[i].value}
-										bind:el={els[id].input}
-										{latex_delimiters}
-										{line_breaks}
-										edit={header_edit === i}
-										on:keydown={end_header_edit}
-										header
-										{root}
-										{editable}
-									/>
-									{#if header_edit !== i}
-										<div class="sort-buttons">
-											<SortIcon
-												direction={sort_by === i ? sort_direction : null}
-												on:sort={({ detail }) => handle_sort(i, detail)}
-												{i18n}
-											/>
-										</div>
-									{/if}
-								</div>
-								{#if editable}
-									<button
-										class="cell-menu-button"
-										on:click={(event) => toggle_header_menu(event, i)}
-										on:touchstart={(event) => {
-											event.preventDefault();
-											const touch = event.touches[0];
-											const mouseEvent = new MouseEvent("click", {
-												clientX: touch.clientX,
-												clientY: touch.clientY,
-												bubbles: true,
-												cancelable: true,
-												view: window
-											});
-											toggle_header_menu(mouseEvent, i);
-										}}
-									>
-										&#8942;
-									</button>
-								{/if}
-							</div>
-						</th>
+						<TableHeader
+							bind:value={_headers[i].value}
+							{i}
+							{actual_pinned_columns}
+							{header_edit}
+							{selected_header}
+							get_sort_status={df_actions.get_sort_status}
+							{headers}
+							{get_cell_width}
+							{handle_header_click}
+							{toggle_header_menu}
+							{end_header_edit}
+							sort_columns={$df_state.sort_state.sort_columns}
+							{latex_delimiters}
+							{line_breaks}
+							{max_chars}
+							{root}
+							{editable}
+							is_static={static_columns.includes(i)}
+							{i18n}
+							bind:el={els[id].input}
+							{col_count}
+						/>
 					{/each}
 				</tr>
 			</thead>
 			<tbody>
 				<tr>
+					{#if show_row_numbers}
+						<RowNumber index={0} />
+					{/if}
 					{#each max as { value, id }, j (id)}
 						<td tabindex="-1" bind:this={cells[j]}>
 							<div class="cell-wrap">
@@ -1081,6 +807,14 @@
 									el={null}
 									{root}
 									{editable}
+									{i18n}
+									show_selection_buttons={selected_cells.length === 1 &&
+										selected_cells[0][0] === 0 &&
+										selected_cells[0][1] === j}
+									coords={[0, j]}
+									on_select_column={handle_select_column}
+									on_select_row={handle_select_row}
+									{is_dragging}
 								/>
 							</div>
 						</td>
@@ -1103,7 +837,8 @@
 						_headers = make_headers(
 							head.map((h) => h ?? ""),
 							col_count,
-							els
+							els,
+							make_id
 						);
 						return _headers;
 					},
@@ -1116,258 +851,159 @@
 		>
 			<div class="table-wrap">
 				<VirtualTable
-					bind:items={data}
+					bind:items={search_results}
 					{max_height}
 					bind:actual_height={table_height}
 					bind:table_scrollbar_width={scrollbar_width}
 					selected={selected_index}
 					disable_scroll={active_cell_menu !== null ||
 						active_header_menu !== null}
+					bind:viewport
+					bind:show_scroll_button
+					on:scroll_top={(_) => {}}
 				>
 					{#if label && label.length !== 0}
 						<caption class="sr-only">{label}</caption>
 					{/if}
 					<tr slot="thead">
 						{#if show_row_numbers}
-							<th
-								class="row-number-header frozen-column always-frozen"
-								style="left: 0;"
-							>
-								<div class="cell-wrap">
-									<div class="header-content">
-										<div class="header-text"></div>
-									</div>
-								</div>
-							</th>
+							<RowNumber is_header={true} />
 						{/if}
 						{#each _headers as { value, id }, i (id)}
-							<th
-								class:frozen-column={i < actual_pinned_columns}
-								class:last-frozen={i === actual_pinned_columns - 1}
-								class:focus={header_edit === i || selected_header === i}
-								aria-sort={get_sort_status(value, sort_by, sort_direction)}
-								style="width: {get_cell_width(i)}; left: {i <
-								actual_pinned_columns
-									? i === 0
-										? show_row_numbers
-											? 'var(--cell-width-row-number)'
-											: '0'
-										: `calc(${show_row_numbers ? 'var(--cell-width-row-number) + ' : ''}${Array(
-												i
-											)
-												.fill(0)
-												.map((_, idx) => `var(--cell-width-${idx})`)
-												.join(' + ')})`
-									: 'auto'};"
-								on:click={(event) => handle_header_click(event, i)}
-								on:mousedown={(event) => {
-									event.preventDefault();
-									event.stopPropagation();
-								}}
-							>
-								<div class="cell-wrap">
-									<div class="header-content">
-										<EditableCell
-											{max_chars}
-											bind:value={_headers[i].value}
-											bind:el={els[id].input}
-											{latex_delimiters}
-											{line_breaks}
-											edit={header_edit === i}
-											header
-											{root}
-											{editable}
-										/>
-										{#if header_edit !== i}
-											<div class="sort-buttons">
-												<SortIcon
-													direction={sort_by === i ? sort_direction : null}
-													on:sort={({ detail }) => handle_sort(i, detail)}
-													{i18n}
-												/>
-											</div>
-										{/if}
-									</div>
-									{#if editable}
-										<button
-											class="cell-menu-button"
-											on:click={(event) => toggle_header_menu(event, i)}
-											on:touchstart={(event) => {
-												event.preventDefault();
-												const touch = event.touches[0];
-												const mouseEvent = new MouseEvent("click", {
-													clientX: touch.clientX,
-													clientY: touch.clientY,
-													bubbles: true,
-													cancelable: true,
-													view: window
-												});
-												toggle_header_menu(mouseEvent, i);
-											}}
-										>
-											&#8942;
-										</button>
-									{/if}
-								</div>
-							</th>
+							<TableHeader
+								bind:value={_headers[i].value}
+								{i}
+								{actual_pinned_columns}
+								{header_edit}
+								{selected_header}
+								get_sort_status={df_actions.get_sort_status}
+								{headers}
+								{get_cell_width}
+								{handle_header_click}
+								{toggle_header_menu}
+								{end_header_edit}
+								sort_columns={$df_state.sort_state.sort_columns}
+								{latex_delimiters}
+								{line_breaks}
+								{max_chars}
+								{root}
+								{editable}
+								is_static={static_columns.includes(i)}
+								{i18n}
+								bind:el={els[id].input}
+								{col_count}
+							/>
 						{/each}
 					</tr>
-					<tr slot="tbody" let:item let:index class:row_odd={index % 2 === 0}>
+					<tr slot="tbody" let:item let:index class:row-odd={index % 2 === 0}>
 						{#if show_row_numbers}
-							<td
-								class="row-number frozen-column always-frozen"
-								style="left: 0;"
-								tabindex="-1"
-							>
-								{index + 1}
-							</td>
+							<RowNumber {index} />
 						{/if}
 						{#each item as { value, id }, j (id)}
-							<td
-								class:frozen-column={j < actual_pinned_columns}
-								class:last-frozen={j === actual_pinned_columns - 1}
-								tabindex={show_row_numbers && j === 0 ? -1 : 0}
-								bind:this={els[id].cell}
-								on:touchstart={(event) => {
-									const touch = event.touches[0];
-									const mouseEvent = new MouseEvent("click", {
-										clientX: touch.clientX,
-										clientY: touch.clientY,
-										bubbles: true,
-										cancelable: true,
-										view: window
-									});
-									handle_cell_click(mouseEvent, index, j);
-								}}
-								on:mousedown={(event) => {
-									event.preventDefault();
-									event.stopPropagation();
-								}}
-								on:click={(event) => handle_cell_click(event, index, j)}
-								style="width: {get_cell_width(j)}; left: {j <
-								actual_pinned_columns
-									? j === 0
-										? show_row_numbers
-											? 'var(--cell-width-row-number)'
-											: '0'
-										: `calc(${show_row_numbers ? 'var(--cell-width-row-number) + ' : ''}${Array(
-												j
-											)
-												.fill(0)
-												.map((_, idx) => `var(--cell-width-${idx})`)
-												.join(' + ')})`
-									: 'auto'}; {styling?.[index]?.[j] || ''}"
-								class:flash={copy_flash &&
-									is_cell_selected([index, j], selected_cells)}
-								class={is_cell_selected([index, j], selected_cells)}
-								class:menu-active={active_cell_menu &&
-									active_cell_menu.row === index &&
-									active_cell_menu.col === j}
-							>
-								<div class="cell-wrap">
-									<EditableCell
-										bind:value={data[index][j].value}
-										bind:el={els[id].input}
-										display_value={display_value?.[index]?.[j]}
-										{latex_delimiters}
-										{line_breaks}
-										{editable}
-										edit={dequal(editing, [index, j])}
-										datatype={Array.isArray(datatype) ? datatype[j] : datatype}
-										on:blur={() => {
-											clear_on_focus = false;
-											parent.focus();
-										}}
-										on:focus={() => {
-											const row = index;
-											const col = j;
-											if (
-												!selected_cells.some(([r, c]) => r === row && c === col)
-											) {
-												selected_cells = [[row, col]];
-											}
-										}}
-										{clear_on_focus}
-										{root}
-										{max_chars}
-									/>
-									{#if editable && should_show_cell_menu([index, j], selected_cells, editable)}
-										<button
-											class="cell-menu-button"
-											on:click={(event) => toggle_cell_menu(event, index, j)}
-										>
-											&#8942;
-										</button>
-									{/if}
-								</div>
-							</td>
+							<TableCell
+								bind:value={search_results[index][j].value}
+								{index}
+								{j}
+								{actual_pinned_columns}
+								{get_cell_width}
+								handle_cell_click={(e, r, c) => handle_mouse_down(e, r, c)}
+								{toggle_cell_menu}
+								{is_cell_selected}
+								{should_show_cell_menu}
+								{selected_cells}
+								{copy_flash}
+								{active_cell_menu}
+								styling={search_results[index][j].styling}
+								{latex_delimiters}
+								{line_breaks}
+								datatype={Array.isArray(datatype) ? datatype[j] : datatype}
+								{editing}
+								{clear_on_focus}
+								{max_chars}
+								{root}
+								{editable}
+								is_static={static_columns.includes(j)}
+								{i18n}
+								{components}
+								{handle_select_column}
+								{handle_select_row}
+								bind:el={els[id]}
+								{is_dragging}
+							/>
 						{/each}
 					</tr>
 				</VirtualTable>
 			</div>
 		</Upload>
+		{#if show_scroll_button}
+			<button class="scroll-top-button" on:click={scroll_to_top}>
+				&uarr;
+			</button>
+		{/if}
 	</div>
 </div>
 {#if data.length === 0 && editable && row_count[1] === "dynamic"}
-	<div class="add-row-container">
-		<button class="add-row-button" on:click={() => add_row()}>
-			<span>+</span>
-		</button>
-	</div>
-{/if}
-
-{#if active_cell_menu}
-	<CellMenu
-		x={active_cell_menu.x}
-		y={active_cell_menu.y}
-		row={active_cell_menu.row}
-		{col_count}
-		{row_count}
-		on_add_row_above={() => add_row_at(active_cell_menu?.row || 0, "above")}
-		on_add_row_below={() => add_row_at(active_cell_menu?.row || 0, "below")}
-		on_add_column_left={() => add_col_at(active_cell_menu?.col || 0, "left")}
-		on_add_column_right={() => add_col_at(active_cell_menu?.col || 0, "right")}
-		on_delete_row={() => delete_row_at(active_cell_menu?.row || 0)}
-		on_delete_col={() => delete_col_at(active_cell_menu?.col || 0)}
-		can_delete_rows={data.length > 1}
-		can_delete_cols={data[0].length > 1}
-		{i18n}
-	/>
+	<EmptyRowButton on_click={() => add_row()} />
 {/if}
 
-{#if active_header_menu !== null}
+{#if active_cell_menu || active_header_menu}
 	<CellMenu
-		{i18n}
-		x={active_header_menu.x}
-		y={active_header_menu.y}
-		row={-1}
+		x={active_cell_menu?.x ?? active_header_menu?.x ?? 0}
+		y={active_cell_menu?.y ?? active_header_menu?.y ?? 0}
+		row={active_header_menu ? -1 : active_cell_menu?.row ?? 0}
 		{col_count}
 		{row_count}
 		on_add_row_above={() => add_row_at(active_cell_menu?.row ?? -1, "above")}
 		on_add_row_below={() => add_row_at(active_cell_menu?.row ?? -1, "below")}
-		on_add_column_left={() => add_col_at(active_header_menu?.col ?? -1, "left")}
+		on_add_column_left={() =>
+			add_col_at(
+				active_cell_menu?.col ?? active_header_menu?.col ?? -1,
+				"left"
+			)}
 		on_add_column_right={() =>
-			add_col_at(active_header_menu?.col ?? -1, "right")}
+			add_col_at(
+				active_cell_menu?.col ?? active_header_menu?.col ?? -1,
+				"right"
+			)}
 		on_delete_row={() => delete_row_at(active_cell_menu?.row ?? -1)}
-		on_delete_col={() => delete_col_at(active_header_menu?.col ?? -1)}
-		can_delete_rows={false}
-		can_delete_cols={_headers.length > 1}
+		on_delete_col={() =>
+			delete_col_at(active_cell_menu?.col ?? active_header_menu?.col ?? -1)}
+		can_delete_rows={!active_header_menu && data.length > 1}
+		can_delete_cols={data.length > 0 && data[0]?.length > 1}
+		{i18n}
+		on_sort={active_header_menu
+			? (direction) => {
+					if (active_header_menu) {
+						handle_sort(active_header_menu.col, direction);
+						df_actions.set_active_header_menu(null);
+					}
+				}
+			: undefined}
+		on_clear_sort={active_header_menu
+			? () => {
+					clear_sort();
+					df_actions.set_active_header_menu(null);
+				}
+			: undefined}
+		sort_direction={active_header_menu
+			? $df_state.sort_state.sort_columns.find(
+					(item) => item.col === (active_header_menu?.col ?? -1)
+				)?.direction ?? null
+			: null}
+		sort_priority={active_header_menu
+			? $df_state.sort_state.sort_columns.findIndex(
+					(item) => item.col === (active_header_menu?.col ?? -1)
+				) + 1 || null
+			: null}
 	/>
 {/if}
 
 <style>
-	.label p {
-		position: relative;
-		z-index: var(--layer-4);
-		margin-bottom: var(--size-2);
-		color: var(--block-label-text-color);
-		font-size: var(--block-label-text-size);
-	}
-
 	.table-container {
 		display: flex;
 		flex-direction: column;
 		gap: var(--size-2);
+		position: relative;
 	}
 
 	.table-wrap {
@@ -1383,17 +1019,26 @@
 		outline: none;
 	}
 
-	.dragging {
-		border-color: var(--color-accent);
+	.table-wrap.dragging {
+		cursor: crosshair !important;
+		user-select: none;
 	}
 
-	.no-wrap {
-		white-space: nowrap;
+	.table-wrap.dragging * {
+		cursor: crosshair !important;
+		user-select: none;
+	}
+
+	.table-wrap > :global(button) {
+		border: 1px solid var(--border-color-primary);
+		border-radius: var(--table-radius);
+		overflow: hidden;
 	}
 
 	table {
 		position: absolute;
 		opacity: 0;
+		z-index: -1;
 		transition: 150ms;
 		width: var(--size-full);
 		table-layout: auto;
@@ -1405,159 +1050,39 @@
 		border-collapse: separate;
 	}
 
-	.table-wrap > :global(button) {
-		border: 1px solid var(--border-color-primary);
-		border-radius: var(--table-radius);
-		overflow: hidden;
-	}
-
-	div:not(.no-wrap) td {
-		overflow-wrap: anywhere;
-	}
-
-	div.no-wrap td {
-		overflow-x: hidden;
-	}
-
-	table.fixed-layout {
-		table-layout: fixed;
-	}
-
 	thead {
 		position: sticky;
 		top: 0;
-		z-index: var(--layer-2);
+		z-index: 5;
 		box-shadow: var(--shadow-drop);
 	}
 
-	tr {
-		border-bottom: 1px solid var(--border-color-primary);
-		text-align: left;
-	}
-
-	tr > * + * {
-		border-right-width: 0px;
-		border-left-width: 1px;
-		border-style: solid;
-		border-color: var(--border-color-primary);
-	}
-
-	th,
-	td {
-		--ring-color: transparent;
-		position: relative;
-		outline: none;
-		box-shadow: inset 0 0 0 1px var(--ring-color);
-		padding: 0;
-	}
-
-	th:first-child {
-		border-top-left-radius: var(--table-radius);
-		border-bottom-left-radius: var(--table-radius);
-	}
-
-	th:last-child {
-		border-top-right-radius: var(--table-radius);
-		border-bottom-right-radius: var(--table-radius);
-	}
-
-	th.focus,
-	td.focus {
-		--ring-color: var(--color-accent);
-		box-shadow: inset 0 0 0 2px var(--ring-color);
-		z-index: var(--layer-1);
-	}
-
-	th.focus {
-		z-index: var(--layer-2);
-	}
-
-	tr:last-child td:first-child {
-		border-bottom-left-radius: var(--table-radius);
-	}
-
-	tr:last-child td:last-child {
-		border-bottom-right-radius: var(--table-radius);
-	}
-
-	tr th {
-		background: var(--table-even-background-fill);
+	thead :global(th.pinned-column) {
+		position: sticky;
+		z-index: 6;
+		background: var(--table-even-background-fill) !important;
 	}
 
-	.sort-buttons {
-		display: flex;
-		align-items: center;
-		flex-shrink: 0;
-		order: -1;
+	.dragging {
+		border-color: var(--color-accent);
 	}
 
-	.editing {
-		background: var(--table-editing);
+	.no-wrap {
+		white-space: nowrap;
 	}
 
-	.cell-wrap {
-		display: flex;
-		align-items: center;
-		justify-content: flex-start;
-		outline: none;
-		min-height: var(--size-9);
-		position: relative;
-		height: 100%;
-		padding: var(--size-2);
-		box-sizing: border-box;
-		margin: 0;
-		gap: var(--size-1);
-		overflow: visible;
-		min-width: 0;
-		border-radius: var(--table-radius);
+	div:not(.no-wrap) td {
+		overflow-wrap: anywhere;
 	}
 
-	.header-content {
-		display: flex;
-		align-items: center;
-		overflow: hidden;
-		flex-grow: 1;
-		min-width: 0;
-		white-space: normal;
-		overflow-wrap: break-word;
-		word-break: normal;
-		height: 100%;
-		gap: var(--size-1);
+	div.no-wrap td {
+		overflow-x: hidden;
 	}
 
-	.row_odd {
+	.row-odd {
 		background: var(--table-odd-background-fill);
 	}
 
-	.row_odd.focus {
-		background: var(--background-fill-primary);
-	}
-
-	.cell-menu-button {
-		flex-shrink: 0;
-		display: none;
-		background-color: var(--block-background-fill);
-		border: 1px solid var(--border-color-primary);
-		border-radius: var(--block-radius);
-		width: var(--size-5);
-		height: var(--size-5);
-		min-width: var(--size-5);
-		padding: 0;
-		margin-right: var(--spacing-sm);
-		z-index: var(--layer-1);
-		position: absolute;
-		right: var(--size-1);
-		top: 50%;
-		transform: translateY(-50%);
-	}
-
-	.cell-selected .cell-menu-button,
-	th:hover .cell-menu-button {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-	}
-
 	.header-row {
 		display: flex;
 		justify-content: flex-end;
@@ -1568,225 +1093,45 @@
 		width: 100%;
 	}
 
-	.label {
+	.header-row .label {
 		flex: 1 1 auto;
 		margin-right: auto;
 	}
 
-	.label p {
+	.header-row .label p {
 		margin: 0;
 		color: var(--block-label-text-color);
 		font-size: var(--block-label-text-size);
 		line-height: var(--line-sm);
-	}
-
-	.toolbar {
-		flex: 0 0 auto;
-	}
-
-	.row-number,
-	.row-number-header {
-		text-align: center;
-		background: var(--table-even-background-fill);
-		font-size: var(--input-text-size);
-		color: var(--body-text-color);
-		padding: var(--size-1);
-		min-width: var(--size-12);
-		width: var(--size-12);
-		overflow: hidden;
-		text-overflow: ellipsis;
-		white-space: nowrap;
-		font-weight: var(--weight-semibold);
-	}
-
-	.row-number-header .header-content {
-		justify-content: space-between;
-		padding: var(--size-1);
-		height: var(--size-9);
-		display: flex;
-		align-items: center;
-	}
-
-	.row-number-header :global(.sort-icons) {
-		margin-right: 0;
-	}
-
-	:global(tbody > tr:nth-child(odd)) .row-number {
-		background: var(--table-odd-background-fill);
-	}
-
-	.cell-selected {
-		--ring-color: var(--color-accent);
-		box-shadow: inset 0 0 0 2px var(--ring-color);
-		z-index: var(--layer-1);
 		position: relative;
+		z-index: 4;
 	}
 
-	.cell-selected.no-top {
-		box-shadow:
-			inset 2px 0 0 var(--ring-color),
-			inset -2px 0 0 var(--ring-color),
-			inset 0 -2px 0 var(--ring-color);
-	}
-
-	.cell-selected.no-bottom {
-		box-shadow:
-			inset 2px 0 0 var(--ring-color),
-			inset -2px 0 0 var(--ring-color),
-			inset 0 2px 0 var(--ring-color);
-	}
-
-	.cell-selected.no-left {
-		box-shadow:
-			inset 0 2px 0 var(--ring-color),
-			inset -2px 0 0 var(--ring-color),
-			inset 0 -2px 0 var(--ring-color);
-	}
-
-	.cell-selected.no-right {
-		box-shadow:
-			inset 0 2px 0 var(--ring-color),
-			inset 2px 0 0 var(--ring-color),
-			inset 0 -2px 0 var(--ring-color);
-	}
-
-	.cell-selected.no-top.no-left {
-		box-shadow:
-			inset -2px 0 0 var(--ring-color),
-			inset 0 -2px 0 var(--ring-color);
-	}
-
-	.cell-selected.no-top.no-right {
-		box-shadow:
-			inset 2px 0 0 var(--ring-color),
-			inset 0 -2px 0 var(--ring-color);
-	}
-
-	.cell-selected.no-bottom.no-left {
-		box-shadow:
-			inset -2px 0 0 var(--ring-color),
-			inset 0 2px 0 var(--ring-color);
-	}
-
-	.cell-selected.no-bottom.no-right {
-		box-shadow:
-			inset 2px 0 0 var(--ring-color),
-			inset 0 2px 0 var(--ring-color);
-	}
-
-	.cell-selected.no-top.no-bottom {
-		box-shadow:
-			inset 2px 0 0 var(--ring-color),
-			inset -2px 0 0 var(--ring-color);
-	}
-
-	.cell-selected.no-left.no-right {
-		box-shadow:
-			inset 0 2px 0 var(--ring-color),
-			inset 0 -2px 0 var(--ring-color);
-	}
-
-	.cell-selected.no-top.no-left.no-right {
-		box-shadow: inset 0 -2px 0 var(--ring-color);
-	}
-
-	.cell-selected.no-bottom.no-left.no-right {
-		box-shadow: inset 0 2px 0 var(--ring-color);
-	}
-
-	.cell-selected.no-left.no-top.no-bottom {
-		box-shadow: inset -2px 0 0 var(--ring-color);
-	}
-
-	.cell-selected.no-right.no-top.no-bottom {
-		box-shadow: inset 2px 0 0 var(--ring-color);
-	}
-
-	.cell-selected.no-top.no-bottom.no-left.no-right {
-		box-shadow: none;
-	}
-
-	.selection-button {
+	.scroll-top-button {
 		position: absolute;
+		right: var(--size-4);
+		bottom: var(--size-4);
+		width: var(--size-8);
+		height: var(--size-8);
+		border-radius: var(--table-radius);
+		background: var(--color-accent);
+		color: white;
+		border: none;
+		cursor: pointer;
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		background: var(--color-accent);
-		color: white;
-		border-radius: var(--radius-sm);
-		z-index: var(--layer-4);
-	}
-
-	.selection-button-column {
-		width: var(--size-3);
-		height: var(--size-5);
-		top: -10px;
-		left: var(--selected-col-pos);
-		transform: rotate(90deg);
-	}
-
-	.selection-button-row {
-		width: var(--size-3);
-		height: var(--size-5);
-		left: -7px;
-		top: calc(var(--selected-row-pos) - var(--size-5) / 2);
-	}
-
-	.table-wrap:not(:focus-within) .selection-button {
-		opacity: 0;
-		pointer-events: none;
+		font-size: var(--text-lg);
+		z-index: 9;
+		opacity: 0.5;
 	}
 
-	.flash.cell-selected {
-		animation: flash-color 700ms ease-out;
-	}
-
-	@keyframes flash-color {
-		0%,
-		30% {
-			background: var(--color-accent-copied);
-		}
-
-		100% {
-			background: transparent;
-		}
-	}
-
-	.frozen-column {
-		position: sticky;
-		z-index: var(--layer-2);
-		border-right: 1px solid var(--border-color-primary);
-	}
-
-	tr:nth-child(odd) .frozen-column {
-		background: var(--table-odd-background-fill);
+	.scroll-top-button:hover {
+		opacity: 1;
 	}
 
-	tr:nth-child(even) .frozen-column {
-		background: var(--table-even-background-fill);
-	}
-
-	.always-frozen {
-		z-index: var(--layer-3);
-	}
-
-	.add-row-container {
-		margin-top: var(--size-2);
-	}
-
-	.add-row-button {
-		width: 100%;
-		padding: var(--size-1);
-		background: transparent;
-		border: 1px dashed var(--border-color-primary);
-		border-radius: var(--radius-sm);
-		color: var(--body-text-color);
-		cursor: pointer;
-		transition: all 150ms;
-	}
-
-	.add-row-button:hover {
-		background: var(--background-fill-secondary);
-		border-style: solid;
+	tr {
+		border-bottom: 1px solid var(--border-color-primary);
+		text-align: left;
 	}
 </style>