matterviz 0.3.2 → 0.3.3

package/dist/table/HeatmapTable.svelte

@@ -1,93 +1,232 @@
-<script lang="ts">import { luminance, watch_dark_mode } from '../colors';
-import Icon from '../Icon.svelte';
-import { format_num } from '../labels';
-import { SettingsSection } from '../layout';
-import ContextMenu from '../overlays/ContextMenu.svelte';
-import DraggablePane from '../overlays/DraggablePane.svelte';
-import { calc_cell_color, strip_html } from './';
-import { normalize_unicode_minus } from '../utils';
-import { tooltip } from 'svelte-multiselect/attachments';
-import { flip } from 'svelte/animate';
-import { SvelteMap } from 'svelte/reactivity';
-let { data = $bindable([]), columns = [], sort_hint = undefined, cell, special_cells, controls, initial_sort = undefined, sort = $bindable({ column: ``, dir: `asc` }), // allows external control/sync of sorting
-fixed_header = false, default_num_format = `.3`, show_heatmap = $bindable(true), heatmap_class = `heatmap`, onrowclick, onrowdblclick, column_order = $bindable([]), export_data = false, show_column_toggle = false, search = false, show_row_select = false, pagination = false, selected_rows = $bindable([]), hidden_columns = $bindable([]), scroll_style, root_style, onsort = undefined, onsorterror = undefined, loading = $bindable(false), sort_data = true, heatmap_opacity = $bindable(1), empty_message = `No data`, show_row_numbers = false, allow_better_toggle = false, show_controls = $bindable(false), controls_open = $bindable(false), header_cell, footer, ...rest } = $props();
-let container_el = $state();
-// Read --page-bg from computed style for text contrast calculation.
-// Recalculates on mount and when the theme changes (dark/light mode toggle).
-let page_bg_lum = $state(luminance(`white`));
-$effect(() => {
-    if (!container_el)
-        return;
+<script lang="ts">
+  import { luminance, watch_dark_mode } from '../colors'
+  import Icon from '../Icon.svelte'
+  import { format_num } from '../labels'
+  import { SettingsSection } from '../layout'
+  import ContextMenu from '../overlays/ContextMenu.svelte'
+  import DraggablePane from '../overlays/DraggablePane.svelte'
+  import type {
+    CellSnippet,
+    CellVal,
+    ExportData,
+    InitialSort,
+    Label,
+    MultiSortState,
+    Pagination,
+    RowData,
+    Search,
+    SortHint,
+    SortState,
+    SpecialCells,
+  } from './'
+  import { calc_cell_color, strip_html } from './'
+  import { sanitize_html } from '../sanitize'
+  import { normalize_unicode_minus } from '../utils'
+  import type { Snippet } from 'svelte'
+  import { tooltip } from 'svelte-multiselect/attachments'
+  import { flip } from 'svelte/animate'
+  import type { HTMLAttributes } from 'svelte/elements'
+  import { SvelteMap } from 'svelte/reactivity'
+
+  let {
+    data = $bindable([]),
+    columns = [],
+    sort_hint = undefined,
+    cell,
+    special_cells,
+    controls,
+    initial_sort = undefined,
+    sort = $bindable({ column: ``, dir: `asc` }), // allows external control/sync of sorting
+    fixed_header = false,
+    default_num_format = `.3`,
+    show_heatmap = $bindable(true),
+    heatmap_class = `heatmap`,
+    onrowclick,
+    onrowdblclick,
+    column_order = $bindable([]),
+    export_data = false,
+    show_column_toggle = false,
+    search = false,
+    show_row_select = false,
+    pagination = false,
+    selected_rows = $bindable([]),
+    hidden_columns = $bindable([]),
+    scroll_style,
+    root_style,
+    onsort = undefined,
+    onsorterror = undefined,
+    loading = $bindable(false),
+    sort_data = true,
+    heatmap_opacity = $bindable(1),
+    empty_message = `No data`,
+    show_row_numbers = false,
+    allow_better_toggle = false,
+    show_controls = $bindable(false),
+    controls_open = $bindable(false),
+    header_cell,
+    footer,
+    ...rest
+  }: HTMLAttributes<HTMLDivElement> & {
+    data: RowData[]
+    columns?: Label[]
+    sort_hint?: SortHint
+    cell?: CellSnippet
+    special_cells?: SpecialCells
+    controls?: Snippet
+    initial_sort?: InitialSort
+    sort?: { column: string; dir: `asc` | `desc` }
+    fixed_header?: boolean
+    default_num_format?: string
+    show_heatmap?: boolean
+    heatmap_class?: string
+    onrowclick?: (event: MouseEvent | KeyboardEvent, row: RowData) => void
+    onrowdblclick?: (event: MouseEvent, row: RowData) => void
+    // Array of column IDs to control display order. IDs are derived as:
+    // - Ungrouped columns: col.key ?? col.label
+    // - Grouped columns: `${col.key ?? col.label} (${col.group})`
+    // This allows persisting/restoring column order across sessions.
+    column_order?: string[]
+    export_data?: ExportData
+    show_column_toggle?: boolean
+    search?: Search
+    show_row_select?: boolean
+    pagination?: Pagination
+    selected_rows?: RowData[]
+    hidden_columns?: string[]
+    scroll_style?: string
+    // Inline styles for the root table container (merged with rest.style). Use instead of global CSS overrides.
+    root_style?: string
+    // Async callback for server-side sorting. When provided, client-side sorting is skipped
+    // and the callback is called with (column_id, direction) to fetch new data from server.
+    onsort?: (column: string, dir: `asc` | `desc`) => Promise<RowData[]>
+    // Callback when onsort fails, receives the error for parent handling (e.g. toast notification)
+    onsorterror?: (error: unknown, column: string, dir: `asc` | `desc`) => void
+    // Loading state during async sort operations
+    loading?: boolean
+    // Whether to sort data client-side. Set to false when parent handles sorting externally.
+    // When onsort is provided, sort_data behavior is implicitly false.
+    sort_data?: boolean
+    // Heatmap cell background opacity (0–1). Controls both the visual fade via CSS
+    // color-mix() and the JS text contrast correction. Default 1 (fully opaque).
+    heatmap_opacity?: number
+    // Message shown when the table has no data rows. Set to empty string to hide.
+    empty_message?: string
+    // Show a row number column as the first column
+    show_row_numbers?: boolean
+    // When true, show a toggle in colored column headers to cycle gradient direction
+    allow_better_toggle?: boolean
+    // Whether the gear icon for the controls pane is visible
+    show_controls?: boolean
+    // Whether the controls pane is expanded
+    controls_open?: boolean
+    // Custom snippet for rendering header cells. Falls back to {@html col.label}.
+    header_cell?: Snippet<[{ col: Label }]>
+    // Footer snippet rendered inside <tfoot> below the table body
+    footer?: Snippet
+  } = $props()
+
+  let container_el = $state<HTMLDivElement>()
+
+  // Read --page-bg from computed style for text contrast calculation.
+  // Recalculates on mount and when the theme changes (dark/light mode toggle).
+  let page_bg_lum = $state(luminance(`white`))
+  $effect(() => {
+    if (!container_el) return
     const read_page_bg = () => {
-        const page_bg = getComputedStyle(container_el).getPropertyValue(`--page-bg`)
-            .trim();
-        page_bg_lum = luminance(page_bg || `white`);
-    };
-    read_page_bg();
-    return watch_dark_mode(read_page_bg);
-});
-// Detect HTML to prevent setting raw HTML as data-sort-value. Simple string matching
-// suffices since false positives just skip setting the attr (sorting still works by inner data-sort-value).
-function is_html_str(val) {
-    if (typeof val !== `string`)
-        return false;
-    return ((val.includes(`<`) && val.includes(`>`)) || // Has angle brackets
-        val.startsWith(`&lt;`) || // Has HTML entity for <
-        val.includes(`href=`) || // Has href attribute
-        val.includes(`class=`) // Has class attribute
-    );
-}
-// Normalize initial_sort config
-let initial_sort_config = $derived(initial_sort
-    ? typeof initial_sort === `string`
-        ? { column: initial_sort, direction: `asc` }
-        : { direction: `asc`, ...initial_sort }
-    : null);
-// Normalize pagination config
-let pagination_config = $derived(pagination
-    ? { page_size: 25, ...(typeof pagination === `object` ? pagination : {}) }
-    : null);
-// Mutable page size — writable $derived allows user to change via dropdown
-let effective_page_size = $derived(pagination_config?.page_size ?? 25);
-// Normalize search config
-let search_config = $derived(search
-    ? {
+      if (!container_el) return
+      const page_bg = getComputedStyle(container_el).getPropertyValue(`--page-bg`)
+        .trim()
+      page_bg_lum = luminance(page_bg || `white`)
+    }
+    read_page_bg()
+    return watch_dark_mode(read_page_bg)
+  })
+
+  // Detect HTML to prevent setting raw HTML as data-sort-value. Simple string matching
+  // suffices since false positives just skip setting the attr (sorting still works by inner data-sort-value).
+  function is_html_str(val: unknown): boolean {
+    if (typeof val !== `string`) return false
+    return (
+      (val.includes(`<`) && val.includes(`>`)) || // Has angle brackets
+      val.startsWith(`&lt;`) || // Has HTML entity for <
+      val.includes(`href=`) || // Has href attribute
+      val.includes(`class=`) // Has class attribute
+    )
+  }
+
+  // Normalize initial_sort config
+  let initial_sort_config = $derived(
+    initial_sort
+      ? typeof initial_sort === `string`
+        ? { column: initial_sort, direction: `asc` as const }
+        : { direction: `asc` as const, ...initial_sort }
+      : null,
+  )
+
+  // Normalize pagination config
+  let pagination_config = $derived(
+    pagination
+      ? { page_size: 25, ...(typeof pagination === `object` ? pagination : {}) }
+      : null,
+  )
+
+  // Mutable page size — writable $derived allows user to change via dropdown
+  let effective_page_size = $derived(pagination_config?.page_size ?? 25)
+
+  // Normalize search config
+  let search_config = $derived(
+    search
+      ? {
         placeholder: `Filter...`,
         expanded: false,
         ...(typeof search === `object` ? search : {}),
-    }
-    : null);
-const default_formats = [`csv`, `json`];
-let export_config = $derived(export_data
-    ? {
+      }
+      : null,
+  )
+
+  // Normalize export_data config
+  type ExportFormat = `csv` | `json`
+  const default_formats: ExportFormat[] = [`csv`, `json`]
+  let export_config = $derived(
+    export_data
+      ? {
         formats: default_formats,
         filename: `table-export`,
         ...(typeof export_data === `object` ? export_data : {}),
-    }
-    : null);
-// Derive sort_state from bindable prop, falling back to initial_sort if sort not yet set
-// This ensures immediate sorting on first render without waiting for effects
-let sort_state = $derived({
+      }
+      : null,
+  )
+
+  // Derive sort_state from bindable prop, falling back to initial_sort if sort not yet set
+  // This ensures immediate sorting on first render without waiting for effects
+  let sort_state = $derived<SortState>({
     column: sort.column || initial_sort_config?.column || ``,
     ascending: sort.column
-        ? sort.dir !== `desc`
-        : initial_sort_config?.direction !== `desc`,
-});
-// Multi-column sort state (for Shift+click)
-let multi_sort = $state([]);
-// Search/filter state
-let search_query = $state(``);
-let search_expanded = $derived(search_config?.expanded ?? false);
-// Pagination state
-let current_page = $state(1);
-// Dropdown states
-let show_column_dropdown = $state(false);
-let show_export_dropdown = $state(false);
-// Per-column gradient direction overrides (user-toggled via header)
-let better_overrides = new SvelteMap();
-// Per-column color scale overrides
-let color_scale_overrides = new SvelteMap();
-const color_scale_options = [
+      ? sort.dir !== `desc`
+      : initial_sort_config?.direction !== `desc`,
+  })
+
+  // Multi-column sort state (for Shift+click)
+  let multi_sort = $state<MultiSortState>([])
+
+  // Search/filter state
+  let search_query = $state(``)
+  let search_expanded = $derived(search_config?.expanded ?? false)
+
+  // Pagination state
+  let current_page = $state(1)
+
+  // Dropdown states
+  let show_column_dropdown = $state(false)
+  let show_export_dropdown = $state(false)
+
+  // Per-column gradient direction overrides (user-toggled via header)
+  let better_overrides = new SvelteMap<string, `higher` | `lower`>()
+
+  // Per-column color scale overrides
+  let color_scale_overrides = new SvelteMap<string, string>()
+
+  const color_scale_options = [
     `interpolateViridis`,
     `interpolatePlasma`,
     `interpolateInferno`,
@@ -97,548 +236,645 @@ const color_scale_options = [
     `interpolateGreens`,
     `interpolateReds`,
     `interpolateYlOrRd`,
-];
-// Columns that have a color gradient
-let colored_columns = $derived(columns.filter((col) => col.color_scale !== null && col.color_scale !== undefined));
-// Column resize state
-let resize_col_id = $state(null);
-let resize_start_x = $state(0);
-let resize_start_width = $state(0);
-let column_widths = $state({});
-// Auto-discover columns from data keys when none are provided
-$effect.pre(() => {
-    if (columns.length > 0 || data.length === 0)
-        return;
-    const seen = {};
+  ] as const
+
+  // Columns that have a color gradient
+  let colored_columns = $derived(
+    columns.filter((col) =>
+      col.color_scale !== null && col.color_scale !== undefined
+    ),
+  )
+
+  // Column resize state
+  let resize_col_id = $state<string | null>(null)
+  let resize_start_x = $state(0)
+  let resize_start_width = $state(0)
+  let column_widths = $state<Record<string, number>>({})
+
+  // Auto-discover columns from data keys when none are provided
+  $effect.pre(() => {
+    if (columns.length > 0 || data.length === 0) return
+    const seen: Record<string, true> = {}
     for (const row of data.slice(0, 50)) {
-        for (const key of Object.keys(row)) {
-            if (key !== `style` && key !== `class`)
-                seen[key] = true;
-        }
+      for (const key of Object.keys(row)) {
+        if (key !== `style` && key !== `class`) seen[key] = true
+      }
     }
-    columns = Object.keys(seen).map((key) => ({ label: key }));
-});
-// Helper to make column IDs (needed since column labels in different groups can be repeated)
-const get_col_id = (col) => col.group ? `${col.key ?? col.label} (${col.group})` : (col.key ?? col.label);
-// Sync column_order with columns: initialize if empty, remove stale IDs, append new IDs
-$effect(() => {
-    if (columns.length === 0)
-        return;
-    const col_ids = columns.map(get_col_id);
+    columns = Object.keys(seen).map((key) => ({ label: key }))
+  })
+
+  // Helper to make column IDs (needed since column labels in different groups can be repeated)
+  const get_col_id = (col: Label) =>
+    col.group ? `${col.key ?? col.label} (${col.group})` : (col.key ?? col.label)
+
+  // Sync column_order with columns: initialize if empty, remove stale IDs, append new IDs
+  $effect(() => {
+    if (columns.length === 0) return
+    const col_ids = columns.map(get_col_id)
+
     // Case 1: First render - initialize with default order
     if (column_order.length === 0) {
-        column_order = col_ids;
-        return;
+      column_order = col_ids
+      return
     }
-    // Case 2: Already in sync - skip to avoid infinite effect loop
-    const arrays_equal = column_order.length === col_ids.length &&
-        column_order.every((id, idx) => id === col_ids[idx]);
-    if (arrays_equal)
-        return;
-    // Case 3: Sync needed - keep valid IDs in their order, append any new ones
-    const valid_ids = new Set(col_ids);
-    const kept = column_order.filter((id) => valid_ids.has(id));
-    const new_ids = col_ids.filter((id) => !kept.includes(id));
-    column_order = [...kept, ...new_ids];
-});
-// Reorder columns based on column_order
-let ordered_columns = $derived.by(() => {
-    if (column_order.length === 0)
-        return columns;
-    const col_map = new SvelteMap(columns.map((col) => [get_col_id(col), col]));
+
+    // Case 2: Sync needed - keep valid IDs in their order, append any new ones
+    const valid_ids = new Set(col_ids)
+    const kept = column_order.filter((id) => valid_ids.has(id))
+    const new_ids = col_ids.filter((id) => !kept.includes(id))
+    const new_order = [...kept, ...new_ids]
+
+    // Skip assignment if content is unchanged to prevent infinite effect loop.
+    // After drag reorder, column_order differs from col_ids (default order) but the
+    // computed new_order equals the current column_order — assigning a new array
+    // reference would re-trigger this effect endlessly.
+    if (new_order.length === column_order.length &&
+      new_order.every((id, idx) => id === column_order[idx])) return
+
+    column_order = new_order
+  })
+
+  // Reorder columns based on column_order
+  let ordered_columns = $derived.by(() => {
+    if (column_order.length === 0) return columns
+
+    const col_map = new SvelteMap(columns.map((col) => [get_col_id(col), col]))
+
     // Add columns in specified order, then any remaining columns that weren't in the order list
     const ordered = column_order
-        .map((id) => col_map.get(id))
-        .filter((col) => col != null);
-    const ordered_ids = new Set(ordered.map(get_col_id));
-    const remaining = columns.filter((col) => !ordered_ids.has(get_col_id(col)));
-    return [...ordered, ...remaining];
-});
-let drag_col_id = $state(null);
-let drag_over_col_id = $state(null);
-// Merge root_style with rest.style for root div; omit style from rest to avoid duplicate
-let rest_props = $derived.by(() => {
-    const { style: rest_style, ...other_props } = rest;
-    const merged = [rest_style, root_style].filter(Boolean).join(`; `);
-    return { ...other_props, ...(merged ? { style: merged } : {}) };
-});
-// WeakMap to assign stable unique IDs to row objects for efficient comparison and keying
-// This avoids O(n) JSON.stringify calls and prevents unnecessary re-renders
-const row_id_map = new WeakMap();
-let row_id_counter = 0;
-function get_row_id(row) {
-    let id = row_id_map.get(row);
+      .map((id) => col_map.get(id))
+      .filter((col): col is Label => col != null)
+
+    const ordered_ids = new Set(ordered.map(get_col_id))
+    const remaining = columns.filter((col) => !ordered_ids.has(get_col_id(col)))
+
+    return [...ordered, ...remaining]
+  })
+
+  let drag_col_id = $state<string | null>(null)
+  let drag_over_col_id = $state<string | null>(null)
+
+  // Merge root_style with rest.style for root div; omit style from rest to avoid duplicate
+  let rest_props = $derived.by(() => {
+    const { style: rest_style, ...other_props } = rest
+    const merged = [rest_style, root_style].filter(Boolean).join(`; `)
+    return { ...other_props, ...(merged ? { style: merged } : {}) }
+  })
+
+  // WeakMap to assign stable unique IDs to row objects for efficient comparison and keying
+  // This avoids O(n) JSON.stringify calls and prevents unnecessary re-renders
+  const row_id_map = new WeakMap<RowData, string>()
+  let row_id_counter = 0
+
+  function get_row_id(row: RowData): string {
+    let id = row_id_map.get(row)
     if (id === undefined) {
-        id = `row_${row_id_counter++}`;
-        row_id_map.set(row, id);
+      id = `row_${row_id_counter++}`
+      row_id_map.set(row, id)
     }
-    return id;
-}
-// Returns 'left' or 'right' to indicate which side of target to insert dragged column
-function get_drag_side(target_col_id) {
-    if (!drag_col_id)
-        return null;
-    const drag_idx = column_order.indexOf(drag_col_id);
-    const target_idx = column_order.indexOf(target_col_id);
-    if (drag_idx === -1 || target_idx === -1)
-        return null;
-    return drag_idx < target_idx ? `right` : `left`;
-}
-function reset_drag_state() {
-    drag_col_id = null;
-    drag_over_col_id = null;
-}
-const get_drag_col_group = () => ordered_columns.find((col) => get_col_id(col) === drag_col_id)?.group;
-function handle_drag_start(event, col) {
-    if (!event.dataTransfer)
-        return;
-    drag_col_id = get_col_id(col);
-    event.dataTransfer.effectAllowed = `move`;
-    event.dataTransfer.setData(`text/html`, ``);
-}
-function handle_drag_over(event, col) {
-    event.preventDefault();
-    if (!event.dataTransfer)
-        return;
-    event.dataTransfer.dropEffect = `move`;
+    return id
+  }
+
+  // Returns 'left' or 'right' to indicate which side of target to insert dragged column
+  function get_drag_side(target_col_id: string): `left` | `right` | null {
+    if (!drag_col_id) return null
+    const drag_idx = column_order.indexOf(drag_col_id)
+    const target_idx = column_order.indexOf(target_col_id)
+    if (drag_idx === -1 || target_idx === -1) return null
+    return drag_idx < target_idx ? `right` : `left`
+  }
+
+  function reset_drag_state() {
+    drag_col_id = null
+    drag_over_col_id = null
+  }
+
+  const get_drag_col_group = () =>
+    ordered_columns.find((col) => get_col_id(col) === drag_col_id)?.group
+
+  function handle_drag_start(event: DragEvent, col: Label) {
+    if (!event.dataTransfer) return
+    drag_col_id = get_col_id(col)
+    event.dataTransfer.effectAllowed = `move`
+    event.dataTransfer.setData(`text/html`, ``)
+  }
+
+  function handle_drag_over(event: DragEvent, col: Label) {
+    event.preventDefault()
+    if (!event.dataTransfer) return
+    event.dataTransfer.dropEffect = `move`
+
     // Prevent cross-group drag-over to keep group headers contiguous
     if (get_drag_col_group() !== col.group) {
-        event.dataTransfer.dropEffect = `none`;
-        drag_over_col_id = null;
-        return;
+      event.dataTransfer.dropEffect = `none`
+      drag_over_col_id = null
+      return
     }
-    drag_over_col_id = get_col_id(col);
-}
-function handle_drop(event, target_col) {
-    event.preventDefault();
+
+    drag_over_col_id = get_col_id(col)
+  }
+
+  function handle_drop(event: DragEvent, target_col: Label) {
+    event.preventDefault()
+
     // Block cross-group (or group→ungroup) reorders to preserve group contiguity
     if (!drag_col_id || drag_col_id === get_col_id(target_col)) {
-        reset_drag_state();
-        return;
+      reset_drag_state()
+      return
     }
+
     // Block cross-group reorders to preserve group contiguity
     if (get_drag_col_group() !== target_col.group) {
-        reset_drag_state();
-        return;
+      reset_drag_state()
+      return
     }
-    const target_col_id = get_col_id(target_col);
-    const drag_idx = column_order.indexOf(drag_col_id);
-    const target_idx = column_order.indexOf(target_col_id);
+
+    const target_col_id = get_col_id(target_col)
+    const drag_idx = column_order.indexOf(drag_col_id)
+    const target_idx = column_order.indexOf(target_col_id)
+
     if (drag_idx === -1 || target_idx === -1) {
-        reset_drag_state();
-        return;
+      reset_drag_state()
+      return
     }
+
     // Reorder: remove dragged column, then insert at target position
     // When dragging left-to-right (drag_idx < target_idx), removing the dragged
     // element shifts all subsequent indices down by 1, so we must adjust target_idx
-    const new_order = [...column_order];
-    new_order.splice(drag_idx, 1);
-    const adjusted_target = drag_idx < target_idx ? target_idx - 1 : target_idx;
-    new_order.splice(adjusted_target, 0, drag_col_id);
-    column_order = new_order;
-    reset_drag_state();
-}
-// Filter data based on search query
-let filtered_data = $derived.by(() => {
-    const base_data = data?.filter?.((row) => Object.values(row).some((val) => val !== undefined)) ?? [];
-    if (!search_query.trim())
-        return base_data;
-    const query = search_query.toLowerCase().trim();
-    return base_data.filter((row) => Object.values(row).some((val) => {
-        if (val == null)
-            return false;
-        const clean_val = strip_html(String(val)).toLowerCase();
-        return clean_val.includes(query);
-    }));
-});
-let sorted_data = $derived.by(() => {
+    const new_order = [...column_order]
+    new_order.splice(drag_idx, 1)
+    const adjusted_target = drag_idx < target_idx ? target_idx - 1 : target_idx
+    new_order.splice(adjusted_target, 0, drag_col_id)
+    column_order = new_order
+    reset_drag_state()
+  }
+
+  // Filter data based on search query
+  let filtered_data = $derived.by(() => {
+    const base_data = data?.filter?.((row) =>
+      Object.values(row).some((val) => val !== undefined)
+    ) ?? []
+
+    if (!search_query.trim()) return base_data
+
+    const query = search_query.toLowerCase().trim()
+    return base_data.filter((row) =>
+      Object.values(row).some((val) => {
+        if (val == null) return false
+        const clean_val = strip_html(String(val)).toLowerCase()
+        return clean_val.includes(query)
+      })
+    )
+  })
+
+  let sorted_data = $derived.by(() => {
     // Skip client-side sorting when using async onsort callback or sort_data is false
-    if (onsort || !sort_data)
-        return filtered_data;
-    if (!sort_state.column && multi_sort.length === 0)
-        return filtered_data;
+    if (onsort || !sort_data) return filtered_data
+
+    if (!sort_state.column && multi_sort.length === 0) return filtered_data
+
     // Helper to check if value is invalid (null, undefined, NaN)
-    const is_invalid = (val) => val == null || (typeof val === `number` && Number.isNaN(val));
+    const is_invalid = (val: unknown) =>
+      val == null || (typeof val === `number` && Number.isNaN(val))
+
     // Get sort value from a cell (handles HTML data-sort-value and numbers with errors)
-    const get_sort_val = (val) => {
-        if (typeof val === `string`) {
-            // Check for HTML data-sort-value attribute first
-            const sort_attr_match = val.match(/data-sort-value="([^"]*)"/);
-            if (sort_attr_match) {
-                const num = Number(sort_attr_match[1]);
-                return isNaN(num) ? sort_attr_match[1] : num;
-            }
-            // Handle numbers with error notation: "1.23 ± 0.05" or "1.23 +- 0.05" or "1.23(5)"
-            // Extract the primary number before the ± or +- or (
-            // Supports: ± (U+00B1), ASCII +-, Unicode minus − (U+2212), with optional whitespace
-            const error_match = val.match(/^([+-−]?\d+\.?\d*(?:[eE][+-−]?\d+)?)\s*(?:[±\u00B1]|[+][−-]|\()/);
-            if (error_match) {
-                const num = Number(error_match[1]);
-                if (!isNaN(num))
-                    return num;
-            }
-            // Try parsing as a plain number (handles "1.23" strings)
-            const plain_num = Number(val);
-            if (!isNaN(plain_num) && val.trim() !== ``)
-                return plain_num;
+    const get_sort_val = (val: CellVal): string | number => {
+      if (typeof val === `string`) {
+        // Check for HTML data-sort-value attribute first
+        const sort_attr_match = val.match(/data-sort-value="([^"]*)"/)
+        if (sort_attr_match) {
+          const num = Number(sort_attr_match[1])
+          return isNaN(num) ? sort_attr_match[1] : num
+        }
+        // Handle numbers with error notation: "1.23 ± 0.05" or "1.23 +- 0.05" or "1.23(5)"
+        // Extract the primary number before the ± or +- or (
+        // Supports: ± (U+00B1), ASCII +-, Unicode minus − (U+2212), with optional whitespace
+        const error_match = val.match(
+          /^([+-−]?\d+\.?\d*(?:[eE][+-−]?\d+)?)\s*(?:[±\u00B1]|[+][−-]|\()/,
+        )
+        if (error_match) {
+          const num = Number(error_match[1])
+          if (!isNaN(num)) return num
         }
-        return val;
-    };
+        // Try parsing as a plain number (handles "1.23" strings)
+        const plain_num = Number(val)
+        if (!isNaN(plain_num) && val.trim() !== ``) return plain_num
+      }
+      return val as string | number
+    }
+
     // Build sort criteria: multi_sort takes precedence, fallback to single sort
     const sort_criteria = multi_sort.length > 0
-        ? multi_sort
-        : sort_state.column
-            ? [sort_state]
-            : [];
-    if (sort_criteria.length === 0)
-        return filtered_data;
+      ? multi_sort
+      : sort_state.column
+      ? [sort_state]
+      : []
+
+    if (sort_criteria.length === 0) return filtered_data
+
     return [...filtered_data].sort((row1, row2) => {
-        for (const { column, ascending } of sort_criteria) {
-            const matched_col = ordered_columns.find((c) => get_col_id(c) === column);
-            if (!matched_col)
-                continue;
-            const col_id = get_col_id(matched_col);
-            const val1 = row1[col_id];
-            const val2 = row2[col_id];
-            if (val1 === val2)
-                continue;
-            // Push invalid values to bottom
-            if (is_invalid(val1) || is_invalid(val2)) {
-                return +is_invalid(val1) - +is_invalid(val2);
-            }
-            const sort_val1 = get_sort_val(val1);
-            const sort_val2 = get_sort_val(val2);
-            const modifier = ascending ? 1 : -1;
-            if (typeof sort_val1 === `string` && typeof sort_val2 === `string`) {
-                const cmp = sort_val1.localeCompare(sort_val2, undefined, {
-                    numeric: true,
-                    sensitivity: `base`,
-                });
-                if (cmp !== 0)
-                    return cmp * modifier;
-            }
-            else {
-                if (sort_val1 !== sort_val2) {
-                    return (sort_val1 ?? 0) < (sort_val2 ?? 0) ? -modifier : modifier;
-                }
-            }
+      for (const { column, ascending } of sort_criteria) {
+        const matched_col = ordered_columns.find((c) => get_col_id(c) === column)
+        if (!matched_col) continue
+
+        const col_id = get_col_id(matched_col)
+        const val1 = row1[col_id]
+        const val2 = row2[col_id]
+
+        if (val1 === val2) continue
+
+        // Push invalid values to bottom
+        if (is_invalid(val1) || is_invalid(val2)) {
+          return +is_invalid(val1) - +is_invalid(val2)
         }
-        return 0;
-    });
-});
-// Paginated data
-let paginated_data = $derived.by(() => {
-    if (!pagination_config)
-        return sorted_data;
-    const start = (current_page - 1) * effective_page_size;
-    return sorted_data.slice(start, start + effective_page_size);
-});
-let total_pages = $derived(Math.ceil(sorted_data.length / effective_page_size));
-// Track previous values to detect actual changes
-let prev_search_query = $state(``);
-let prev_data_length = $state(0);
-// Track async sort requests to prevent race conditions
-let sort_request_id = 0;
-// Reset to page 1 when search query or data length actually changes
-$effect(() => {
-    const query_changed = search_query !== prev_search_query;
-    const data_changed = sorted_data.length !== prev_data_length;
+
+        const sort_val1 = get_sort_val(val1)
+        const sort_val2 = get_sort_val(val2)
+        const modifier = ascending ? 1 : -1
+
+        if (typeof sort_val1 === `string` && typeof sort_val2 === `string`) {
+          const cmp = sort_val1.localeCompare(sort_val2, undefined, {
+            numeric: true,
+            sensitivity: `base`,
+          })
+          if (cmp !== 0) return cmp * modifier
+        } else {
+          if (sort_val1 !== sort_val2) {
+            return (sort_val1 ?? 0) < (sort_val2 ?? 0) ? -modifier : modifier
+          }
+        }
+      }
+      return 0
+    })
+  })
+
+  // Paginated data
+  let paginated_data = $derived.by(() => {
+    if (!pagination_config) return sorted_data
+    const start = (current_page - 1) * effective_page_size
+    return sorted_data.slice(start, start + effective_page_size)
+  })
+
+  let total_pages = $derived(
+    Math.ceil(sorted_data.length / effective_page_size),
+  )
+
+  // Track previous values to detect actual changes
+  let prev_search_query = $state(``)
+  let prev_data_length = $state(0)
+
+  // Track async sort requests to prevent race conditions
+  let sort_request_id = 0
+
+  // Reset to page 1 when search query or data length actually changes
+  $effect(() => {
+    const query_changed = search_query !== prev_search_query
+    const data_changed = sorted_data.length !== prev_data_length
+
     if (query_changed || data_changed) {
-        current_page = 1;
-        prev_search_query = search_query;
-        prev_data_length = sorted_data.length;
+      current_page = 1
+      prev_search_query = search_query
+      prev_data_length = sorted_data.length
+    } else if (total_pages > 0 && current_page > total_pages) {
+      // Clamp when total pages decreases (e.g., page size increase)
+      current_page = total_pages
     }
-    else if (total_pages > 0 && current_page > total_pages) {
-        // Clamp when total pages decreases (e.g., page size increase)
-        current_page = total_pages;
-    }
-});
-async function sort_rows(column, group, event) {
+  })
+
+  async function sort_rows(
+    column: string,
+    group: string | undefined,
+    event: MouseEvent | KeyboardEvent,
+  ) {
     // Find the column using both label and group if provided
-    const col = ordered_columns.find((c) => c.label === column && c.group === group);
-    if (!col)
-        return; // Skip if column not found
-    if (col.sortable === false)
-        return; // Skip sorting if column marked as unsortable
-    const col_id = get_col_id(col);
+    const col = ordered_columns.find(
+      (c) => c.label === column && c.group === group,
+    )
+
+    if (!col) return // Skip if column not found
+    if (col.sortable === false) return // Skip sorting if column marked as unsortable
+
+    const col_id = get_col_id(col)
+
     // Shift+click for multi-column sort
     if (event.shiftKey) {
-        const existing_idx = multi_sort.findIndex((s) => s.column === col_id);
-        if (existing_idx >= 0) {
-            // Toggle direction or remove if clicked again
-            const existing = multi_sort[existing_idx];
-            if (existing.ascending === (col.better === `lower`)) {
-                // Remove from multi-sort
-                multi_sort = multi_sort.filter((_, idx) => idx !== existing_idx);
-            }
-            else {
-                // Toggle direction
-                multi_sort = multi_sort.map((s, idx) => idx === existing_idx ? { ...s, ascending: !s.ascending } : s);
-            }
-        }
-        else {
-            // Add to multi-sort
-            multi_sort = [...multi_sort, {
-                    column: col_id,
-                    ascending: col.better === `lower`,
-                }];
+      const existing_idx = multi_sort.findIndex((s) => s.column === col_id)
+      if (existing_idx >= 0) {
+        // Toggle direction or remove if clicked again
+        const existing = multi_sort[existing_idx]
+        if (existing.ascending === (col.better === `lower`)) {
+          // Remove from multi-sort
+          multi_sort = multi_sort.filter((_, idx) => idx !== existing_idx)
+        } else {
+          // Toggle direction
+          multi_sort = multi_sort.map((s, idx) =>
+            idx === existing_idx ? { ...s, ascending: !s.ascending } : s
+          )
         }
-        // Clear single sort when using multi-sort
-        sort = { column: ``, dir: `asc` };
-    }
-    else {
-        // Regular click - single column sort
-        multi_sort = []; // Clear multi-sort
-        // Use sort_state.column for comparison since it includes initial_sort fallback
-        const new_dir = sort_state.column !== col_id
-            ? (col.better === `lower` ? `asc` : `desc`)
-            : (sort_state.ascending ? `desc` : `asc`);
-        // Save previous sort state in case we need to revert on error
-        const prev_sort = { ...sort };
-        sort = { column: col_id, dir: new_dir };
-        // If onsort callback provided, fetch new data from server
-        if (onsort) {
-            loading = true;
-            const request_id = ++sort_request_id;
-            try {
-                const result = await onsort(col_id, new_dir);
-                // Only update if this is still the most recent request (avoid race condition)
-                if (request_id === sort_request_id) {
-                    data = result;
-                }
-            }
-            catch (err) {
-                console.error(`Sort callback failed:`, err);
-                // Revert sort state on failure so UI doesn't show wrong direction
-                if (request_id === sort_request_id) {
-                    sort = prev_sort;
-                    onsorterror?.(err, col_id, new_dir);
-                }
-            }
-            finally {
-                // Only clear loading if this is still the most recent request
-                if (request_id === sort_request_id) {
-                    loading = false;
-                }
-            }
+      } else {
+        // Add to multi-sort
+        multi_sort = [...multi_sort, {
+          column: col_id,
+          ascending: col.better === `lower`,
+        }]
+      }
+      // Clear single sort when using multi-sort
+      sort = { column: ``, dir: `asc` }
+    } else {
+      // Regular click - single column sort
+      multi_sort = [] // Clear multi-sort
+      // Use sort_state.column for comparison since it includes initial_sort fallback
+      const new_dir = sort_state.column !== col_id
+        ? (col.better === `lower` ? `asc` : `desc`)
+        : (sort_state.ascending ? `desc` : `asc`)
+
+      // Save previous sort state in case we need to revert on error
+      const prev_sort = { ...sort }
+      sort = { column: col_id, dir: new_dir }
+
+      // If onsort callback provided, fetch new data from server
+      if (onsort) {
+        loading = true
+        const request_id = ++sort_request_id
+        try {
+          const result = await onsort(col_id, new_dir)
+          // Only update if this is still the most recent request (avoid race condition)
+          if (request_id === sort_request_id) {
+            data = result
+          }
+        } catch (err) {
+          console.error(`Sort callback failed:`, err)
+          // Revert sort state on failure so UI doesn't show wrong direction
+          if (request_id === sort_request_id) {
+            sort = prev_sort
+            onsorterror?.(err, col_id, new_dir)
+          }
+        } finally {
+          // Only clear loading if this is still the most recent request
+          if (request_id === sort_request_id) {
+            loading = false
+          }
         }
+      }
     }
-}
-// Extract numeric value from strings with uncertainty notation: "1.23 ± 0.05", "1.23 +- 0.05", "1.23(5)"
-function parse_numeric_val(val) {
-    if (typeof val === `number`)
-        return Number.isNaN(val) ? null : val;
-    if (typeof val !== `string`)
-        return null;
+  }
+
+  // Extract numeric value from strings with uncertainty notation: "1.23 ± 0.05", "1.23 +- 0.05", "1.23(5)"
+  function parse_numeric_val(val: CellVal): number | null {
+    if (typeof val === `number`) return Number.isNaN(val) ? null : val
+    if (typeof val !== `string`) return null
+
     // Handle numbers with error notation: "1.23 ± 0.05" or "1.23 +- 0.05" or "1.23(5)"
     // Supports: ± (U+00B1), ASCII +-, Unicode minus − (U+2212), with optional whitespace
     // Note: [-+−] has hyphen first to avoid regex range interpretation
     // Pattern allows leading decimals like .5 or -.5 via (?:\d+\.?\d*|\d*\.\d+)
-    const error_match = val.match(/^([-+−]?(?:\d+\.?\d*|\d*\.\d+)(?:[eE][-+−]?\d+)?)\s*(?:±|\+[-−]|\()/);
+    const error_match = val.match(
+      /^([-+−]?(?:\d+\.?\d*|\d*\.\d+)(?:[eE][-+−]?\d+)?)\s*(?:±|\+[-−]|\()/,
+    )
     if (error_match) {
-        // Normalize unicode minus (U+2212) to ASCII hyphen for Number()
-        const normalized = normalize_unicode_minus(error_match[1]);
-        const num = Number(normalized);
-        if (!isNaN(num))
-            return num;
+      // Normalize unicode minus (U+2212) to ASCII hyphen for Number()
+      const normalized = normalize_unicode_minus(error_match[1])
+      const num = Number(normalized)
+      if (!isNaN(num)) return num
     }
     // Try parsing as a plain number (handles "1.23" strings)
     // Also normalize unicode minus for plain numbers
-    const normalized_val = normalize_unicode_minus(val);
-    const plain_num = Number(normalized_val);
-    if (!isNaN(plain_num) && val.trim() !== ``)
-        return plain_num;
-    return null;
-}
-// Memoize parsed column values to avoid O(N²) re-parsing in calc_color
-let parsed_column_values = $derived.by(() => {
-    const result = new SvelteMap();
+    const normalized_val = normalize_unicode_minus(val)
+    const plain_num = Number(normalized_val)
+    if (!isNaN(plain_num) && val.trim() !== ``) return plain_num
+    return null
+  }
+
+  // Memoize parsed column values to avoid O(N²) re-parsing in calc_color
+  let parsed_column_values = $derived.by(() => {
+    const result = new SvelteMap<string, (number | null)[]>()
     for (const col of ordered_columns) {
-        if (col.color_scale === null)
-            continue;
-        const col_id = get_col_id(col);
-        result.set(col_id, sorted_data.map((row) => parse_numeric_val(row[col_id])));
+      if (col.color_scale === null) continue
+      const col_id = get_col_id(col)
+      result.set(col_id, sorted_data.map((row) => parse_numeric_val(row[col_id])))
     }
-    return result;
-});
-function calc_color(val, col) {
+    return result
+  })
+
+  function calc_color(val: CellVal, col: Label) {
     if (!show_heatmap || col.color_scale === null) {
-        return { bg: null, text: null };
+      return { bg: null, text: null }
     }
+
     // Parse numeric value from strings with uncertainty notation
-    const numeric_val = parse_numeric_val(val);
-    if (numeric_val === null)
-        return { bg: null, text: null };
-    const col_id = get_col_id(col);
+    const numeric_val = parse_numeric_val(val)
+    if (numeric_val === null) return { bg: null, text: null }
+
+    const col_id = get_col_id(col)
     // Use memoized parsed values for the column
-    const numeric_vals = parsed_column_values.get(col_id) ?? [];
-    const better = better_overrides.get(col_id) ?? col.better;
+    const numeric_vals = parsed_column_values.get(col_id) ?? []
+
+    const better = better_overrides.get(col_id) ?? col.better
     const scale = (color_scale_overrides.get(col_id) ?? col.color_scale ??
-        `interpolateViridis`);
-    const color = calc_cell_color(numeric_val, numeric_vals, better, scale, col.scale_type || `linear`);
+      `interpolateViridis`) as Parameters<typeof calc_cell_color>[3]
+    const color = calc_cell_color(
+      numeric_val,
+      numeric_vals,
+      better,
+      scale,
+      col.scale_type || `linear`,
+    )
+
     // Recompute text contrast against effective bg (cell bg blended with page bg by opacity).
     // Approximation: blend luminances directly; accurate enough for black/white text choice.
     if (color.bg && heatmap_opacity < 1) {
-        const blended_lum = luminance(color.bg) * heatmap_opacity +
-            page_bg_lum * (1 - heatmap_opacity);
-        color.text = blended_lum > 0.7 ? `black` : `white`;
+      const blended_lum = luminance(color.bg) * heatmap_opacity +
+        page_bg_lum * (1 - heatmap_opacity)
+      color.text = blended_lum > 0.7 ? `black` : `white`
     }
-    return color;
-}
-let visible_columns = $derived(ordered_columns.filter((col) => col.visible !== false && !hidden_columns.includes(get_col_id(col))));
-const sort_indicator = (col, sort_state) => {
+    return color
+  }
+
+  let visible_columns = $derived(
+    ordered_columns.filter((col) =>
+      col.visible !== false && !hidden_columns.includes(get_col_id(col))
+    ),
+  )
+
+  const sort_indicator = (col: Label, sort_state: SortState) => {
     const hide_sort_indicator = col.show_sort_indicator === false ||
-        col.style?.includes(`--hide-sort-indicator`);
-    if (hide_sort_indicator)
-        return ``;
-    const col_id = get_col_id(col);
+      col.style?.includes(`--hide-sort-indicator`)
+    if (hide_sort_indicator) return ``
+
+    const col_id = get_col_id(col)
+
     // Check multi-sort first
-    const multi_idx = multi_sort.findIndex((s) => s.column === col_id);
+    const multi_idx = multi_sort.findIndex((s) => s.column === col_id)
     if (multi_idx >= 0) {
-        const arrow = multi_sort[multi_idx].ascending ? `↓` : `↑`;
-        const badge = multi_sort.length > 1 ? `<sup>${multi_idx + 1}</sup>` : ``;
-        return `<span style="font-size: 0.8em;">${arrow}${badge}</span>`;
+      const arrow = multi_sort[multi_idx].ascending ? `↓` : `↑`
+      const badge = multi_sort.length > 1 ? `<sup>${multi_idx + 1}</sup>` : ``
+      return `<span style="font-size: 0.8em;">${arrow}${badge}</span>`
     }
-    const is_sorted = sort_state.column === col_id;
-    if (!is_sorted)
-        return ``;
+
+    const is_sorted = sort_state.column === col_id
+    if (!is_sorted) return ``
     // Show indicator only for actively sorted columns.
-    const arrow = sort_state.ascending ? `↓` : `↑`;
-    return arrow ? `<span style="font-size: 0.8em;">${arrow}</span>` : ``;
-};
-// Context menu state for column header right-click
-let context_menu_col = $state(null);
-let context_menu_pos = $state({ x: 0, y: 0 });
-const better_sections = [
+    const arrow = sort_state.ascending ? `↓` : `↑`
+
+    return arrow ? `<span style="font-size: 0.8em;">${arrow}</span>` : ``
+  }
+
+  // Context menu state for column header right-click
+  let context_menu_col = $state<string | null>(null)
+  let context_menu_pos = $state({ x: 0, y: 0 })
+
+  const better_sections = [
     {
-        title: `Gradient direction`,
-        options: [
-            { value: `higher`, label: `▲ Higher is better` },
-            { value: `lower`, label: `▼ Lower is better` },
-        ],
+      title: `Gradient direction`,
+      options: [
+        { value: `higher`, label: `▲ Higher is better` },
+        { value: `lower`, label: `▼ Lower is better` },
+      ],
     },
-];
-// Row selection using WeakMap-based ID lookup instead of O(n) JSON.stringify comparison
-function toggle_row_select(row) {
-    const row_id = get_row_id(row);
-    const idx = selected_rows.findIndex((r) => get_row_id(r) === row_id);
+  ] as const
+
+  // Row selection using WeakMap-based ID lookup instead of O(n) JSON.stringify comparison
+  function toggle_row_select(row: RowData) {
+    const row_id = get_row_id(row)
+    const idx = selected_rows.findIndex((r) => get_row_id(r) === row_id)
     if (idx >= 0) {
-        selected_rows = selected_rows.filter((_, i) => i !== idx);
+      selected_rows = selected_rows.filter((_, i) => i !== idx)
+    } else {
+      selected_rows = [...selected_rows, row]
     }
-    else {
-        selected_rows = [...selected_rows, row];
-    }
-}
-function is_row_selected(row) {
-    const row_id = get_row_id(row);
-    return selected_rows.some((r) => get_row_id(r) === row_id);
-}
-// Select-all: checks if every row on the current page is selected
-let all_page_selected = $derived(paginated_data.length > 0 && paginated_data.every((row) => is_row_selected(row)));
-function toggle_select_all() {
+  }
+
+  function is_row_selected(row: RowData): boolean {
+    const row_id = get_row_id(row)
+    return selected_rows.some((r) => get_row_id(r) === row_id)
+  }
+
+  // Select-all: checks if every row on the current page is selected
+  let all_page_selected = $derived(
+    paginated_data.length > 0 && paginated_data.every((row) => is_row_selected(row)),
+  )
+
+  function toggle_select_all() {
     if (all_page_selected) {
-        const page_ids = new Set(paginated_data.map(get_row_id));
-        selected_rows = selected_rows.filter((row) => !page_ids.has(get_row_id(row)));
+      const page_ids = new Set(paginated_data.map(get_row_id))
+      selected_rows = selected_rows.filter((row) => !page_ids.has(get_row_id(row)))
+    } else {
+      const already = new Set(selected_rows.map(get_row_id))
+      const new_rows = paginated_data.filter((row) => !already.has(get_row_id(row)))
+      selected_rows = [...selected_rows, ...new_rows]
     }
-    else {
-        const already = new Set(selected_rows.map(get_row_id));
-        const new_rows = paginated_data.filter((row) => !already.has(get_row_id(row)));
-        selected_rows = [...selected_rows, ...new_rows];
+  }
+
+  // Data source for exports: selected rows when any are selected, otherwise all sorted data
+  let export_rows = $derived(
+    show_row_select && selected_rows.length > 0 ? selected_rows : sorted_data,
+  )
+
+  // Serialize table as delimited text (shared by CSV export and clipboard copy)
+  // Per RFC 4180, fields containing commas, double quotes, or newlines must be quoted
+  function serialize_table(delimiter: string, csv_quote = false): string {
+    const quote = (str: string) => {
+      if (!csv_quote) return str
+      if (str.includes(`,`) || str.includes(`"`) || str.includes(`\n`)) {
+        return `"${str.replace(/"/g, `""`)}"`
+      }
+      return str
     }
-}
-// Data source for exports: selected rows when any are selected, otherwise all sorted data
-let export_rows = $derived(show_row_select && selected_rows.length > 0 ? selected_rows : sorted_data);
-// Serialize table as delimited text (shared by CSV export and clipboard copy)
-// Per RFC 4180, fields containing commas, double quotes, or newlines must be quoted
-function serialize_table(delimiter, csv_quote = false) {
-    const quote = (str) => {
-        if (!csv_quote)
-            return str;
-        if (str.includes(`,`) || str.includes(`"`) || str.includes(`\n`)) {
-            return `"${str.replace(/"/g, `""`)}"`;
-        }
-        return str;
-    };
-    const headers = visible_columns.map((col) => quote(strip_html(col.label)));
-    const rows = export_rows.map((row) => visible_columns.map((col) => {
-        const val = row[get_col_id(col)];
-        if (val == null)
-            return ``;
-        return quote(strip_html(String(val)));
-    }));
-    return [headers.join(delimiter), ...rows.map((r) => r.join(delimiter))].join(`\n`);
-}
-function export_csv(filename = `table-export`) {
-    download_file(serialize_table(`,`, true), `${filename}.csv`, `text/csv`);
-}
-function export_json(filename = `table-export`) {
+    const headers = visible_columns.map((col) => quote(strip_html(col.label)))
+    const rows = export_rows.map((row) =>
+      visible_columns.map((col) => {
+        const val = row[get_col_id(col)]
+        if (val == null) return ``
+        return quote(strip_html(String(val)))
+      })
+    )
+    return [headers.join(delimiter), ...rows.map((r) => r.join(delimiter))].join(`\n`)
+  }
+
+  function export_csv(filename = `table-export`) {
+    download_file(serialize_table(`,`, true), `${filename}.csv`, `text/csv`)
+  }
+
+  function export_json(filename = `table-export`) {
     const rows = export_rows.map((row) => {
-        const clean_row = {};
-        for (const col of visible_columns) {
-            const col_id = get_col_id(col);
-            const val = row[col_id];
-            clean_row[strip_html(col.label)] = typeof val === `string`
-                ? strip_html(val)
-                : val;
-        }
-        return clean_row;
-    });
-    download_file(JSON.stringify(rows, null, 2), `${filename}.json`, `application/json`);
-}
-function download_file(content, filename, mime_type) {
-    const blob = new Blob([content], { type: mime_type });
-    const url = URL.createObjectURL(blob);
-    const link = document.createElement(`a`);
-    link.href = url;
-    link.download = filename;
-    document.body.appendChild(link);
-    link.click();
-    document.body.removeChild(link);
-    URL.revokeObjectURL(url);
-}
-function copy_to_clipboard() {
-    navigator.clipboard.writeText(serialize_table(`\t`));
-}
-// Column visibility toggle
-function toggle_column(col_id) {
+      const clean_row: Record<string, unknown> = {}
+      for (const col of visible_columns) {
+        const col_id = get_col_id(col)
+        const val = row[col_id]
+        clean_row[strip_html(col.label)] = typeof val === `string`
+          ? strip_html(val)
+          : val
+      }
+      return clean_row
+    })
+    download_file(
+      JSON.stringify(rows, null, 2),
+      `${filename}.json`,
+      `application/json`,
+    )
+  }
+
+  function download_file(content: string, filename: string, mime_type: string) {
+    const blob = new Blob([content], { type: mime_type })
+    const url = URL.createObjectURL(blob)
+    const link = document.createElement(`a`)
+    link.href = url
+    link.download = filename
+    document.body.appendChild(link)
+    link.click()
+    document.body.removeChild(link)
+    URL.revokeObjectURL(url)
+  }
+
+  function copy_to_clipboard() {
+    navigator.clipboard.writeText(serialize_table(`\t`))
+  }
+
+  // Column visibility toggle
+  function toggle_column(col_id: string) {
     if (hidden_columns.includes(col_id)) {
-        hidden_columns = hidden_columns.filter((id) => id !== col_id);
-    }
-    else {
-        hidden_columns = [...hidden_columns, col_id];
+      hidden_columns = hidden_columns.filter((id) => id !== col_id)
+    } else {
+      hidden_columns = [...hidden_columns, col_id]
     }
-}
-// Column resize handlers
-function start_resize(event, col) {
-    event.preventDefault();
-    event.stopPropagation();
-    resize_col_id = get_col_id(col);
-    resize_start_x = event.clientX;
-    const th = event.target instanceof Element ? event.target.parentElement : null;
-    resize_start_width = th?.offsetWidth ?? 100;
-    document.addEventListener(`mousemove`, handle_resize);
-    document.addEventListener(`mouseup`, stop_resize);
-}
-function handle_resize(event) {
-    if (!resize_col_id)
-        return;
-    const delta = event.clientX - resize_start_x;
-    const new_width = Math.min(500, Math.max(50, resize_start_width + delta));
-    column_widths = { ...column_widths, [resize_col_id]: new_width };
-}
-function stop_resize() {
-    resize_col_id = null;
-    document.removeEventListener(`mousemove`, handle_resize);
-    document.removeEventListener(`mouseup`, stop_resize);
-}
-// Normalize sort_hint to a config object with defaults
-let hint_config = $derived(sort_hint
-    ? {
-        position: `bottom`,
+  }
+
+  // Column resize handlers
+  function start_resize(event: MouseEvent, col: Label) {
+    event.preventDefault()
+    event.stopPropagation()
+    resize_col_id = get_col_id(col)
+    resize_start_x = event.clientX
+    const th = event.target instanceof Element ? event.target.parentElement : null
+    resize_start_width = th?.offsetWidth ?? 100
+
+    document.addEventListener(`mousemove`, handle_resize)
+    document.addEventListener(`mouseup`, stop_resize)
+  }
+
+  function handle_resize(event: MouseEvent) {
+    if (!resize_col_id) return
+    const delta = event.clientX - resize_start_x
+    const new_width = Math.min(500, Math.max(50, resize_start_width + delta))
+    column_widths = { ...column_widths, [resize_col_id]: new_width }
+  }
+
+  function stop_resize() {
+    resize_col_id = null
+    document.removeEventListener(`mousemove`, handle_resize)
+    document.removeEventListener(`mouseup`, stop_resize)
+  }
+
+  // Normalize sort_hint to a config object with defaults
+  let hint_config = $derived(
+    sort_hint
+      ? {
+        position: `bottom` as const,
         permanent: false,
         ...(typeof sort_hint === `string` ? { text: sort_hint } : sort_hint),
-    }
-    : null);
+      }
+      : null,
+  )
 </script>
 
 {#snippet sort_hint_element(pos: `top` | `bottom`)}
@@ -719,7 +955,7 @@ let hint_config = $derived(sort_hint
                   checked={!hidden_columns.includes(col_id)}
                   onchange={() => toggle_column(col_id)}
                 />
-                {@html col.label}
+                {@html sanitize_html(col.label)}
               </label>
             {/each}
           </div>
@@ -856,7 +1092,7 @@ let hint_config = $derived(sort_hint
           {#each colored_columns as col (get_col_id(col))}
             {@const col_id = get_col_id(col)}
             <div class="col-color-row">
-              <span class="col-color-label">{@html col.label}</span>
+              <span class="col-color-label">{@html sanitize_html(col.label)}</span>
               <select
                 value={color_scale_overrides.get(col_id) ?? col.color_scale ??
                 `interpolateViridis`}
@@ -928,7 +1164,7 @@ let hint_config = $derived(sort_hint
                 c.group === col.group && c.label === col.label
               )}
                   <th title={col.description} colspan={group_cols.length}>
-                    {@html col.group}
+                    {@html sanitize_html(col.group)}
                   </th>
                 {/if}
               {/if}
@@ -1024,9 +1260,9 @@ let hint_config = $derived(sort_hint
               {#if header_cell}
                 {@render header_cell({ col })}
               {:else}
-                {@html col.label}
+                {@html sanitize_html(col.label)}
               {/if}
-              {@html sort_indicator(col, sort_state)}
+              {@html sanitize_html(sort_indicator(col, sort_state))}
               <!-- Column resize handle -->
               <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
               <span
@@ -1111,7 +1347,7 @@ let hint_config = $derived(sort_hint
                     n/a
                   </span>
                 {:else}
-                  {@html val}
+                  {@html sanitize_html(val)}
                 {/if}
               </td>
             {/each}