matterviz 0.4.1 → 0.4.3

package/dist/table/HeatmapTable.svelte

@@ -6,21 +6,25 @@
   import { SettingsSection } from '../layout'
   import ContextMenu from '../overlays/ContextMenu.svelte'
   import DraggablePane from '../overlays/DraggablePane.svelte'
+  import { portal } from '../overlays/portal'
   import type {
+    CellColor,
     CellSnippet,
     CellVal,
+    DateTimeFormatMode,
     ExportData,
     InitialSort,
     Label,
     MultiSortState,
     Pagination,
+    VirtualScroll,
     RowData,
     Search,
     SortHint,
     SortState,
     SpecialCells,
   } from './'
-  import { calc_cell_color, strip_html } from './'
+  import { make_cell_color_scale, strip_html } from './'
   import { sanitize_html } from '../sanitize'
   import { normalize_unicode_minus } from '../utils'
   import type { Snippet } from 'svelte'
@@ -84,8 +88,32 @@
     }
   }
 
+  const close_datetime_select_on_outside_pointerdown = (event: PointerEvent) => {
+    if (datetime_select_open_col_id === null) return
+    if (event.target instanceof Element && event.target.closest(`.datetime-format-control`))
+      return
+    datetime_select_open_col_id = null
+  }
+
   const NUMERIC_WITH_ERROR_RE =
-    /^([-+−]?(?:\d+\.?\d*|\d*\.\d+)(?:[eE][-+−]?\d+)?)\s*(?:±|\+[-−]|\()/
+    /^(?<numeric>[-+−]?(?:\d+\.?\d*|\d*\.\d+)(?:[eE][-+−]?\d+)?)\s*(?:±|\+[-−]|\()/
+  const DATA_SORT_VALUE_RE = /data-sort-value="(?<value>[^"]*)"/
+  const DATE_ONLY_RE = /^(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})$/
+  const DATE_TIME_RE =
+    /^\d{4}-\d{2}-\d{2}(?:[T\s]\d{2}:\d{2}(?::\d{2}(?:\.\d{1,9})?)?(?:Z|[+-]\d{2}:?\d{2})?)?$/
+  type DateTimeColumnKind = `date` | `time` | `datetime`
+  const datetime_format_modes_by_kind: Record<DateTimeColumnKind, DateTimeFormatMode[]> = {
+    date: [`date`, `relative`],
+    time: [`time`],
+    datetime: [`date`, `time`, `datetime`, `iso`, `relative`],
+  }
+  const datetime_format_labels: Record<DateTimeFormatMode, string> = {
+    date: `Date`,
+    time: `Time`,
+    datetime: `Date + time`,
+    iso: `ISO`,
+    relative: `Since now`,
+  }
 
   const parse_numeric_string = (val: string): number | null => {
     const numeric_str = val.match(NUMERIC_WITH_ERROR_RE)?.[1] ?? val
@@ -94,14 +122,18 @@
     return isNaN(num) ? null : num
   }
 
+  const get_data_sort_value = (val: string): string | null =>
+    val.match(DATA_SORT_VALUE_RE)?.groups?.value ?? null
+
   // Get sort value from a cell (handles HTML data-sort-value and numbers with errors)
   const get_sort_val = (val: CellVal): string | number => {
+    if (val instanceof Date) return val.getTime()
     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
+      const sort_attr = get_data_sort_value(val)
+      if (sort_attr != null) {
+        const num = Number(sort_attr)
+        return isNaN(num) ? sort_attr : num
       }
       const num = parse_numeric_string(val)
       if (num !== null) return num
@@ -109,6 +141,9 @@
     return val as string | number
   }
 
+  const get_cell_sort_attr = (val: CellVal): CellVal | number | null =>
+    is_html_str(val) ? null : val instanceof Date ? val.getTime() : val
+
   let {
     data = $bindable([]),
     columns = [],
@@ -122,14 +157,20 @@
     default_num_format = `.3`,
     show_heatmap = $bindable(true),
     heatmap_class = `heatmap`,
+    onrowpointerdown,
     onrowclick,
     onrowdblclick,
+    row_title,
     column_order = $bindable([]),
     export_data = false,
     show_column_toggle = false,
     search = false,
+    search_query = $bindable(``),
     show_row_select = false,
     pagination = false,
+    virtual = false,
+    on_visible_range,
+    controls_target = undefined,
     selected_rows = $bindable([]),
     hidden_columns = $bindable([]),
     scroll_style,
@@ -160,8 +201,12 @@
     default_num_format?: string
     show_heatmap?: boolean
     heatmap_class?: string
+    onrowpointerdown?: (event: PointerEvent, row: RowData) => void
     onrowclick?: (event: MouseEvent | KeyboardEvent, row: RowData) => void
     onrowdblclick?: (event: MouseEvent, row: RowData) => void
+    // Per-row hover tooltip content (rendered via the table tooltip
+    // attachment; `\r` breaks lines, HTML must be pre-escaped by the caller)
+    row_title?: (row: RowData) => string | null | undefined
     // 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})`
@@ -170,8 +215,22 @@
     export_data?: ExportData
     show_column_toggle?: boolean
     search?: Search
+    // Current search/filter query. Bindable so parents can control or persist it.
+    search_query?: string
     show_row_select?: boolean
     pagination?: Pagination
+    // Opt-in infinite-scroll row virtualization. Renders only the rows near the
+    // viewport plus spacer rows, so DOM size stays bounded for any data length.
+    // Inactive when pagination is enabled. Off by default (every row renders);
+    // pass true (or a config object) to enable.
+    virtual?: VirtualScroll
+    // Notifies the parent which slice of the sorted+filtered rows is rendered
+    // (e.g. to progressively fetch more data as the user scrolls near the end).
+    on_visible_range?: (range: { start: number; end: number; total: number }) => void
+    // Host element to render the search/export/settings buttons into (e.g. an
+    // embedding panel's own header) instead of a row above the table. When set,
+    // the buttons are always visible; when unset they render inline as usual.
+    controls_target?: HTMLElement | null
     selected_rows?: RowData[]
     hidden_columns?: string[]
     scroll_style?: string
@@ -215,8 +274,7 @@
     if (!container_el) return
     const read_page_bg = () => {
       if (!container_el) return
-      const page_bg = getComputedStyle(container_el).getPropertyValue(`--page-bg`)
-        .trim()
+      const page_bg = getComputedStyle(container_el).getPropertyValue(`--page-bg`).trim()
       page_bg_lum = luminance(page_bg || `white`)
     }
     read_page_bg()
@@ -251,30 +309,31 @@
       : null,
   )
 
-  // Mutable page size — writable $derived allows user to change via dropdown
+  // Mutable page size: user can change it, but parent pagination.page_size changes still resync.
   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 : {}),
-      }
+          placeholder: `Filter...`,
+          expanded: false,
+          keys: undefined as string[] | undefined,
+          fuzzy: false,
+          ...(typeof search === `object` ? search : {}),
+        }
       : 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 : {}),
-      }
+          formats: [`csv`, `json`] as ExportFormat[],
+          filename: `table-export`,
+          ...(typeof export_data === `object` ? export_data : {}),
+        }
       : null,
   )
 
@@ -282,16 +341,13 @@
   // 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`,
+    ascending: sort.column ? 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(``)
+  // Search/filter state (query itself is the bindable search_query prop)
   let search_expanded = $derived(search_config?.expanded ?? false)
 
   // Pagination state
@@ -307,6 +363,10 @@
   // Per-column color scale overrides
   let color_scale_overrides = new SvelteMap<string, string>()
 
+  // Per-column date/time display overrides (user-toggled via header)
+  let datetime_format_overrides = new SvelteMap<string, DateTimeFormatMode>()
+  let datetime_select_open_col_id = $state<string | null>(null)
+
   const color_scale_options = [
     `interpolateViridis`,
     `interpolatePlasma`,
@@ -320,11 +380,7 @@
   ] as const
 
   // Columns that have a color gradient
-  let colored_columns = $derived(
-    columns.filter((col) =>
-      col.color_scale !== null && col.color_scale !== undefined
-    ),
-  )
+  let colored_columns = $derived(columns.filter((col) => col.color_scale != null))
 
   // Column resize state
   let resize_col_id = $state<string | null>(null)
@@ -347,6 +403,169 @@
   // 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)
+  const get_datetime_label_id = (col_id: string) =>
+    `datetime-format-label-${encodeURIComponent(col_id)}`
+
+  const has_explicit_datetime_format = (col: Label): boolean =>
+    col.format_type === `datetime` || Boolean(col.datetime_format)
+
+  const normalize_timestamp = (val: number): number | null => {
+    if (!Number.isFinite(val)) return null
+    const abs = Math.abs(val)
+    if (abs >= 1_000_000_000_000 && abs < 100_000_000_000_000) return val
+    if (abs >= 1_000_000_000 && abs < 1_000_000_000_000) return val * 1000
+    return null
+  }
+
+  const parse_datetime_string = (val: string): number | null => {
+    const clean = strip_html(val).trim()
+    const date_only = clean.match(DATE_ONLY_RE)
+    if (date_only?.groups) {
+      const year = Number(date_only.groups.year)
+      const month = Number(date_only.groups.month)
+      const day = Number(date_only.groups.day)
+      return new Date(year, month - 1, day).getTime()
+    }
+    if (!DATE_TIME_RE.test(clean)) return null
+    const parsed = Date.parse(
+      clean.replace(` `, `T`).replace(/\.(?<millis>\d{3})\d+/, `.$<millis>`),
+    )
+    return Number.isNaN(parsed) ? null : parsed
+  }
+
+  const value_datetime_kind = (val: CellVal, col: Label): DateTimeColumnKind | null => {
+    if (typeof val === `string` && DATE_ONLY_RE.test(strip_html(val).trim())) {
+      return `date`
+    }
+    return parse_datetime_val(val, col) === null ? null : `datetime`
+  }
+
+  const parse_datetime_val = (val: CellVal, col: Label): number | null => {
+    if (val instanceof Date) return Number.isNaN(val.getTime()) ? null : val.getTime()
+    if (typeof val === `number`) {
+      return has_explicit_datetime_format(col) ? normalize_timestamp(val) : null
+    }
+    if (typeof val !== `string`) return null
+
+    const parsed_text = parse_datetime_string(val)
+    if (parsed_text !== null) return parsed_text
+    if (!has_explicit_datetime_format(col)) return null
+
+    const sort_attr = get_data_sort_value(val)
+    return normalize_timestamp(Number(sort_attr ?? strip_html(val).trim()))
+  }
+
+  const infer_datetime_column_kind = (col: Label): DateTimeColumnKind | null => {
+    if (col.datetime_format === `date`) return `date`
+    if (col.datetime_format === `time`) return `time`
+    if (col.datetime_format || col.format_type === `datetime`) return `datetime`
+
+    const col_id = get_col_id(col)
+    let has_date_value = false
+    for (const row of data.slice(0, 25)) {
+      const kind = value_datetime_kind(row[col_id], col)
+      if (kind === `datetime`) return `datetime`
+      if (kind === `date`) has_date_value = true
+    }
+    if (has_date_value) return `date`
+    return null
+  }
+
+  let datetime_column_kinds = $derived.by(() => {
+    const kinds = new SvelteMap<string, DateTimeColumnKind>()
+    for (const col of columns) {
+      const kind = infer_datetime_column_kind(col)
+      if (kind) kinds.set(get_col_id(col), kind)
+    }
+    return kinds
+  })
+
+  const is_datetime_column = (col: Label): boolean =>
+    datetime_column_kinds.has(get_col_id(col))
+
+  const datetime_column_kind = (col: Label): DateTimeColumnKind =>
+    datetime_column_kinds.get(get_col_id(col)) ?? `datetime`
+
+  const datetime_format_options = (col: Label): DateTimeFormatMode[] =>
+    datetime_format_modes_by_kind[datetime_column_kind(col)]
+
+  const datetime_mode = (col: Label): DateTimeFormatMode => {
+    const options = datetime_format_options(col)
+    const selected =
+      datetime_format_overrides.get(get_col_id(col)) ??
+      col.datetime_format ??
+      datetime_column_kind(col)
+    return options.includes(selected) ? selected : options[0]
+  }
+
+  function set_datetime_format(col: Label, mode: DateTimeFormatMode) {
+    if (datetime_format_options(col).includes(mode)) {
+      datetime_format_overrides.set(get_col_id(col), mode)
+    }
+  }
+
+  const pad2 = (val: number): string => String(val).padStart(2, `0`)
+
+  function format_date(date: Date): string {
+    return `${date.getFullYear()}-${pad2(date.getMonth() + 1)}-${pad2(date.getDate())}`
+  }
+
+  function format_time(date: Date): string {
+    return `${pad2(date.getHours())}:${pad2(date.getMinutes())}`
+  }
+
+  function format_datetime(date: Date): string {
+    return `${format_date(date)} ${format_time(date)}`
+  }
+
+  // Ticks once a minute while any column shows relative times, so "Xm ago"
+  // cells don't go stale (format granularity is minutes).
+  let relative_now_ms = $state(Date.now())
+  $effect(() => {
+    const shows_relative = columns.some(
+      (col) => is_datetime_column(col) && datetime_mode(col) === `relative`,
+    )
+    if (!shows_relative) return
+    relative_now_ms = Date.now() // refresh immediately when relative mode turns on
+    const interval = setInterval(() => (relative_now_ms = Date.now()), 60_000)
+    return () => clearInterval(interval)
+  })
+
+  function format_since_now(timestamp: number): string {
+    const diff = relative_now_ms - timestamp
+    let remaining_minutes = Math.max(0, Math.floor(Math.abs(diff) / 60_000))
+    const parts: string[] = []
+    const units = [
+      [`y`, 365 * 24 * 60],
+      [`mo`, 30 * 24 * 60],
+      [`w`, 7 * 24 * 60],
+      [`d`, 24 * 60],
+      [`h`, 60],
+      [`m`, 1],
+    ] as const
+
+    for (const [suffix, minutes_per_unit] of units) {
+      const value = Math.floor(remaining_minutes / minutes_per_unit)
+      if (value === 0 && parts.length === 0 && suffix !== `m`) continue
+      if (value > 0 || suffix === `m`) parts.push(`${value}${suffix}`)
+      remaining_minutes -= value * minutes_per_unit
+      if (parts.length >= 3) break
+    }
+
+    return `${parts.join(` `)} ${diff >= 0 ? `ago` : `from now`}`
+  }
+
+  function format_datetime_cell(val: CellVal, col: Label): string | null {
+    const timestamp = parse_datetime_val(val, col)
+    if (timestamp === null) return null
+    const date = new Date(timestamp)
+    const mode = datetime_mode(col)
+    if (mode === `date`) return format_date(date)
+    if (mode === `time`) return format_time(date)
+    if (mode === `datetime`) return format_datetime(date)
+    if (mode === `iso`) return date.toISOString()
+    return format_since_now(timestamp)
+  }
 
   // Sync column_order with columns: initialize if empty, remove stale IDs, append new IDs
   $effect(() => {
@@ -369,8 +588,11 @@
     // 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
+    if (
+      new_order.length === column_order.length &&
+      new_order.every((id, idx) => id === column_order[idx])
+    )
+      return
 
     column_order = new_order
   })
@@ -458,23 +680,19 @@
   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
-    }
-
-    // Block cross-group reorders to preserve group contiguity
-    if (get_drag_col_group() !== target_col.group) {
-      reset_drag_state()
-      return
-    }
-
     const target_col_id = get_col_id(target_col)
-    const drag_idx = column_order.indexOf(drag_col_id)
+    const drag_idx = drag_col_id ? column_order.indexOf(drag_col_id) : -1
     const target_idx = column_order.indexOf(target_col_id)
 
-    if (drag_idx === -1 || target_idx === -1) {
+    // Block no-op drops and cross-group (or group→ungroup) reorders to
+    // preserve group contiguity
+    if (
+      !drag_col_id ||
+      drag_col_id === target_col_id ||
+      get_drag_col_group() !== target_col.group ||
+      drag_idx === -1 ||
+      target_idx === -1
+    ) {
       reset_drag_state()
       return
     }
@@ -490,47 +708,56 @@
     reset_drag_state()
   }
 
+  // True when every char of query appears in text in order (subsequence match),
+  // e.g. "mdla" matches "Model A". Cheap fuzzy matching for short filter queries.
+  const fuzzy_match = (text: string, query: string): boolean => {
+    let query_idx = 0
+    for (const char of text) {
+      if (char === query[query_idx] && ++query_idx === query.length) return true
+    }
+    return query.length === 0
+  }
+
+  const row_matches_query = (row: RowData, query: string): boolean => {
+    const values = search_config?.keys
+      ? search_config.keys.map((key) => row[key])
+      : Object.values(row)
+    return values.some((val) => {
+      if (val == null) return false
+      const clean_val = strip_html(String(val)).toLowerCase()
+      if (clean_val.includes(query)) return true
+      return (search_config?.fuzzy ?? false) && fuzzy_match(clean_val, query)
+    })
+  }
+
   // 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 base_data =
+      data?.filter?.((row) => Object.values(row).some((val) => val !== undefined)) ?? []
 
     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)
-      })
-    )
+    if (!query) return base_data
+
+    return base_data.filter((row) => row_matches_query(row, 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
-
-    // 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]
-      : []
-
+    // Build sort criteria: multi_sort (Shift+click) takes precedence over single sort
+    const sort_criteria =
+      multi_sort.length > 0 ? multi_sort : sort_state.column ? [sort_state] : []
     if (sort_criteria.length === 0) return filtered_data
 
+    const valid_column_ids = new Set(ordered_columns.map(get_col_id))
     return [...filtered_data].sort((row1, row2) => {
       for (const { column, ascending } of sort_criteria) {
-        const matched_col = ordered_columns.find((col) => get_col_id(col) === column)
-        if (!matched_col) continue
+        // criteria hold column IDs; skip stale entries referencing removed columns
+        if (!valid_column_ids.has(column)) continue
 
-        const col_id = get_col_id(matched_col)
-        const val1 = row1[col_id]
-        const val2 = row2[col_id]
+        const val1 = row1[column]
+        const val2 = row2[column]
 
         if (val1 === val2) continue
 
@@ -560,17 +787,91 @@
     })
   })
 
-  // 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)
+  // --- Infinite scroll (virtualized rows). Opt-in via the `virtual` prop (and
+  // inactive under pagination): only rows near the viewport render; spacer rows
+  // preserve scroll geometry so the DOM stays bounded for any row count.
+  let scroll_el = $state<HTMLDivElement>()
+  let scroll_top = $state(0)
+  let viewport_height = $state(0)
+  let avg_row_height = $state(33) // refined from rendered rows after mount
+
+  let virtual_config = $derived(
+    pagination_config || !virtual
+      ? null
+      : { overscan: 10, min_window: 60, ...(typeof virtual === `object` ? virtual : {}) },
+  )
+
+  let virtual_range = $derived.by(() => {
+    const total = sorted_data.length
+    if (!virtual_config) return { start: 0, end: total }
+    const { overscan, min_window } = virtual_config
+    // Shrinking data can leave scroll_top past the new content height (the
+    // browser only clamps the real scrollTop after a re-render); clamp here so
+    // the window and spacers never index past the data.
+    const max_scroll = Math.max(0, total * avg_row_height - viewport_height)
+    const first_visible = Math.floor(Math.min(scroll_top, max_scroll) / avg_row_height)
+    const visible_count = Math.ceil(viewport_height / avg_row_height)
+    const start = Math.max(0, first_visible - overscan)
+    const end = Math.min(
+      total,
+      Math.max(first_visible + visible_count + overscan, start + min_window),
+    )
+    return { start, end }
   })
 
-  let total_pages = $derived(
-    Math.ceil(sorted_data.length / effective_page_size),
+  const sync_viewport = () => {
+    if (!scroll_el) return
+    scroll_top = scroll_el.scrollTop
+    viewport_height = scroll_el.clientHeight
+  }
+
+  // Refine the row-height estimate from actually rendered rows (needed for
+  // accurate spacer heights).
+  $effect(() => {
+    if (!virtual_config || !scroll_el) return
+    void virtual_range // re-measure whenever the rendered window changes
+    const rows = scroll_el.querySelectorAll<HTMLTableRowElement>(
+      `tbody tr:not(.virtual-spacer):not(.empty-row)`,
+    )
+    let height_sum = 0
+    for (const row of rows) height_sum += row.offsetHeight
+    const measured = rows.length ? height_sum / rows.length : 0
+    // threshold stops measure→window→measure feedback loops from tiny jitters
+    if (measured > 0 && Math.abs(measured - avg_row_height) > 0.5) {
+      avg_row_height = Math.min(400, Math.max(8, measured))
+    }
+    sync_viewport()
+  })
+
+  // Track scroll-container resizes (e.g. dashboard card resizing)
+  $effect(() => {
+    if (!virtual_config || !scroll_el || typeof ResizeObserver === `undefined`) return
+    const observer = new ResizeObserver(sync_viewport)
+    observer.observe(scroll_el)
+    return () => observer.disconnect()
+  })
+
+  // Window of sorted_data rendered in the DOM (one page, or the virtual window).
+  // start doubles as the absolute index of the first rendered row (for row
+  // numbering and stable cell-selection coordinates).
+  let display_range = $derived.by(() => {
+    if (!pagination_config) return virtual_range
+    const start = (current_page - 1) * effective_page_size
+    return { start, end: Math.min(sorted_data.length, start + effective_page_size) }
+  })
+  let display_rows = $derived(sorted_data.slice(display_range.start, display_range.end))
+  let spacer_top = $derived(virtual_config ? virtual_range.start * avg_row_height : 0)
+  let spacer_bottom = $derived(
+    virtual_config ? (sorted_data.length - virtual_range.end) * avg_row_height : 0,
   )
 
+  // Report the rendered slice so hosts can progressively fetch rows on demand
+  $effect(() => {
+    on_visible_range?.({ ...display_range, total: sorted_data.length })
+  })
+
+  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)
@@ -620,15 +921,14 @@
         } else {
           // Toggle direction
           multi_sort = multi_sort.map((sort_entry, idx) =>
-            idx === existing_idx ? { ...sort_entry, ascending: !sort_entry.ascending } : sort_entry
+            idx === existing_idx
+              ? { ...sort_entry, ascending: !sort_entry.ascending }
+              : sort_entry,
           )
         }
       } else {
         // Add to multi-sort
-        multi_sort = [...multi_sort, {
-          column: col_id,
-          ascending: col.better === `lower`,
-        }]
+        multi_sort = [...multi_sort, { column: col_id, ascending: col.better === `lower` }]
       }
       // Clear single sort when using multi-sort
       sort = { column: ``, dir: `asc` }
@@ -636,9 +936,14 @@
       // 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`)
+      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 }
@@ -677,122 +982,330 @@
     return typeof val === `string` ? parse_numeric_string(val) : 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) {
+  // Memoized per-column color scales: the O(rows) numeric scan + min/max +
+  // d3 scale construction run once per column when data/filter/overrides
+  // change, instead of once per CELL per render (which made a 50-row page over
+  // a 2,000-row snapshot rescan the full column 500+ times). Built from
+  // filtered_data (not sorted_data) since min/max don't depend on row order,
+  // so re-sorting doesn't rebuild the scales. Only visible columns get scales
+  // since calc_color is only ever invoked for visible cells.
+  let column_color_scales = $derived.by(() => {
+    const scales = new SvelteMap<string, (val: number | null | undefined) => CellColor>()
+    if (!show_heatmap) return scales
+    for (const col of visible_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])))
+      const parsed_vals = filtered_data.map((row) => parse_numeric_val(row[col_id]))
+      const better = better_overrides.get(col_id) ?? col.better
+      const scale = (color_scale_overrides.get(col_id) ??
+        col.color_scale ??
+        `interpolateViridis`) as Parameters<typeof make_cell_color_scale>[2]
+      scales.set(
+        col_id,
+        make_cell_color_scale(parsed_vals, better, scale, col.scale_type || `linear`),
+      )
     }
-    return result
+    return scales
   })
 
-  function calc_color(val: CellVal, col: Label) {
-    if (!show_heatmap || col.color_scale === null) {
-      return { bg: null, text: null }
-    }
+  function calc_color(val: CellVal, col: Label): CellColor {
+    const color_fn = column_color_scales.get(get_col_id(col))
+    if (!color_fn) 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)
-    // 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 scale = (color_scale_overrides.get(col_id) ?? col.color_scale ??
-      `interpolateViridis`) as Parameters<typeof calc_cell_color>[3]
-    const color = calc_cell_color(
-      numeric_val,
-      numeric_vals,
-      better,
-      scale,
-      col.scale_type || `linear`,
-    )
+    const color = color_fn(parse_numeric_val(val))
 
     // 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)
+      return { bg: color.bg, 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))
+    ordered_columns.filter(
+      (col) => col.visible !== false && !hidden_columns.includes(get_col_id(col)),
     ),
   )
+  // total cell count per body row (for spacer + empty-message colspans)
+  let body_colspan = $derived(
+    visible_columns.length + (show_row_select ? 1 : 0) + (show_row_numbers ? 1 : 0),
+  )
 
+  // Arrow (plus a numbered badge under multi-sort) for actively sorted columns
   const sort_indicator = (col: Label, current_sort_state: SortState) => {
-    const hide_sort_indicator = col.show_sort_indicator === false ||
-      col.style?.includes(`--hide-sort-indicator`)
-    if (hide_sort_indicator) return ``
-
+    if (col.show_sort_indicator === false || col.style?.includes(`--hide-sort-indicator`)) {
+      return ``
+    }
     const col_id = get_col_id(col)
-
-    // Check multi-sort first
     const multi_idx = multi_sort.findIndex((sort_entry) => sort_entry.column === col_id)
-    if (multi_idx !== -1) {
-      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 active =
+      multi_idx !== -1
+        ? multi_sort[multi_idx]
+        : current_sort_state.column === col_id
+          ? current_sort_state
+          : null
+    if (!active) return ``
+    const badge =
+      multi_idx !== -1 && multi_sort.length > 1 ? `<sup>${multi_idx + 1}</sup>` : ``
+    return `<span style="font-size: 0.8em;">${active.ascending ? `↓` : `↑`}${badge}</span>`
+  }
+
+  // Context menu state for column right-click (headers and body cells)
+  let context_menu_col = $state<string | null>(null)
+  let context_menu_pos = $state({ x: 0, y: 0 })
+
+  const better_section = {
+    title: `Gradient direction`,
+    options: [
+      { value: `higher`, label: `▲ Higher is better` },
+      { value: `lower`, label: `▼ Lower is better` },
+    ],
+  }
+
+  function open_column_context_menu(event: MouseEvent, col_id: string) {
+    event.preventDefault()
+    event.stopPropagation()
+    context_menu_col = col_id
+    const rect = container_el?.getBoundingClientRect()
+    context_menu_pos = {
+      x: event.clientX - (rect?.left ?? 0),
+      y: event.clientY - (rect?.top ?? 0),
     }
+  }
 
-    const is_sorted = current_sort_state.column === col_id
-    if (!is_sorted) return ``
-    // Show indicator only for actively sorted columns.
-    const arrow = current_sort_state.ascending ? `↓` : `↑`
+  // ---- Cell range selection: drag selects a rectangle of cells, Shift/Cmd+
+  // drag adds disjoint rectangles, Cmd/Ctrl+C copies as TSV (blocks separated
+  // by newlines), Escape or clicking outside clears. Selection coordinates
+  // are absolute sorted_data row indices plus visible-column indices, cleared
+  // whenever the rendered data changes (sort, page, filter, refresh).
+  interface CellRect {
+    start_row: number
+    start_col: number
+    end_row: number
+    end_col: number
+  }
+  let selected_cell_rects = $state<CellRect[]>([])
+  let cell_drag_active = $state(false)
+  let cell_drag_moved = false
+  let suppress_row_click = false
+
+  const rect_bounds = (rect: CellRect) => ({
+    row_lo: Math.min(rect.start_row, rect.end_row),
+    row_hi: Math.max(rect.start_row, rect.end_row),
+    col_lo: Math.min(rect.start_col, rect.end_col),
+    col_hi: Math.max(rect.start_col, rect.end_col),
+  })
+
+  let selected_cell_keys = $derived.by(() => {
+    const keys = new Set<string>()
+    for (const rect of selected_cell_rects) {
+      const { row_lo, row_hi, col_lo, col_hi } = rect_bounds(rect)
+      for (let row_idx = row_lo; row_idx <= row_hi; row_idx++) {
+        for (let col_idx = col_lo; col_idx <= col_hi; col_idx++) {
+          keys.add(`${row_idx}:${col_idx}`)
+        }
+      }
+    }
+    return keys
+  })
 
-    return arrow ? `<span style="font-size: 0.8em;">${arrow}</span>` : ``
+  // Stale (row, col) coordinates must not survive sort/page/filter/refresh,
+  // nor column reorder/hide (col indices point into visible_columns). Depends
+  // on sorted_data + current_page + visible_columns (not the virtual window)
+  // so plain scrolling in infinite mode doesn't wipe an active selection.
+  $effect(() => {
+    void sorted_data
+    void current_page
+    void visible_columns
+    selected_cell_rects = []
+  })
+
+  const is_interactive_cell_target = (target: EventTarget | null): boolean =>
+    target instanceof Element && Boolean(target.closest(`button, a, input, select, textarea`))
+
+  function start_cell_drag(event: PointerEvent, row_idx: number, col_idx: number) {
+    if (event.button !== 0 || is_interactive_cell_target(event.target)) return
+    const additive = event.shiftKey || event.metaKey || event.ctrlKey
+    const rect = { start_row: row_idx, start_col: col_idx, end_row: row_idx, end_col: col_idx }
+    selected_cell_rects = additive ? [...selected_cell_rects, rect] : [rect]
+    cell_drag_active = true
+    cell_drag_moved = false
+  }
+
+  function extend_cell_drag(event: PointerEvent) {
+    if (!cell_drag_active) return
+    const target_cell =
+      event.target instanceof Element
+        ? event.target.closest<HTMLElement>(`td[data-row-idx]`)
+        : null
+    const active_rect = selected_cell_rects.at(-1)
+    if (!target_cell || !active_rect) return
+    const row_idx = Number(target_cell.dataset.rowIdx)
+    const col_idx = Number(target_cell.dataset.colIdx)
+    if (row_idx === active_rect.end_row && col_idx === active_rect.end_col) return
+    if (!cell_drag_moved) {
+      cell_drag_moved = true
+      // A native text selection may have started before user-select: none
+      // kicked in; drop it so the cell selection is the only visible one.
+      globalThis.getSelection()?.removeAllRanges()
+    }
+    selected_cell_rects = [
+      ...selected_cell_rects.slice(0, -1),
+      { ...active_rect, end_row: row_idx, end_col: col_idx },
+    ]
   }
 
-  // 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 })
+  function end_cell_drag() {
+    if (!cell_drag_active) return
+    cell_drag_active = false
+    // A drag that crossed cells must not fire the row click on release
+    if (cell_drag_moved) suppress_row_click = true
+  }
+
+  function suppress_click_after_cell_drag(event: MouseEvent) {
+    if (!suppress_row_click) return
+    suppress_row_click = false
+    event.stopPropagation()
+    event.preventDefault()
+  }
 
-  const better_sections = [
+  function clear_cell_selection_on_outside_pointerdown(event: PointerEvent) {
+    // A drag's suppress flag is consumed by the click right after pointerup;
+    // if that click never fired (released outside the table), any NEW
+    // interaction must not inherit it.
+    suppress_row_click = false
+    if (selected_cell_rects.length === 0) return
+    if (event.target instanceof Node && container_el?.contains(event.target)) return
+    selected_cell_rects = []
+  }
+
+  // Raw cell value as clipboard text (numbers keep full precision, dates go
+  // ISO, HTML cells lose their markup)
+  const cell_copy_text = (val: CellVal): string => {
+    if (is_invalid(val)) return ``
+    if (val instanceof Date) return val.toISOString()
+    if (typeof val === `object`) return JSON.stringify(val)
+    return strip_html(String(val)).trim()
+  }
+
+  function copy_selected_cells() {
+    const blocks = selected_cell_rects.map((rect) => {
+      const bounds = rect_bounds(rect)
+      const { row_lo, col_lo } = bounds
+      // rects hold absolute indices into the sorted+filtered rows
+      const row_hi = Math.min(bounds.row_hi, sorted_data.length - 1)
+      const col_hi = Math.min(bounds.col_hi, visible_columns.length - 1)
+      const lines: string[] = []
+      for (let row_idx = row_lo; row_idx <= row_hi; row_idx++) {
+        const cells: string[] = []
+        for (let col_idx = col_lo; col_idx <= col_hi; col_idx++) {
+          cells.push(
+            cell_copy_text(sorted_data[row_idx][get_col_id(visible_columns[col_idx])]),
+          )
+        }
+        lines.push(cells.join(`\t`))
+      }
+      return lines.join(`\n`)
+    })
+    void navigator.clipboard?.writeText(blocks.join(`\n`))
+  }
+
+  // Every sorted+filtered value of one column (all pages), one per line
+  function copy_column_values(col_id: string) {
+    void navigator.clipboard?.writeText(
+      sorted_data.map((row) => cell_copy_text(row[col_id])).join(`\n`),
+    )
+  }
+
+  function handle_cell_selection_keydown(event: KeyboardEvent) {
+    if (selected_cell_rects.length === 0) return
+    if (event.key === `Escape`) {
+      selected_cell_rects = []
+      return
+    }
+    if (event.key !== `c` || !(event.metaKey || event.ctrlKey)) return
+    // Native text selections and focused form fields keep native copy
+    if (is_interactive_cell_target(event.target)) return
+    if (globalThis.getSelection()?.toString()) return
+    event.preventDefault()
+    copy_selected_cells()
+  }
+
+  let context_menu_column = $derived(
+    visible_columns.find((col) => get_col_id(col) === context_menu_col),
+  )
+  let context_menu_sections = $derived([
     {
-      title: `Gradient direction`,
+      title: `Copy`,
       options: [
-        { value: `higher`, label: `▲ Higher is better` },
-        { value: `lower`, label: `▼ Lower is better` },
+        { value: `copy_column`, label: `Copy column (${sorted_data.length} values)` },
+        ...(selected_cell_keys.size > 0
+          ? [
+              {
+                value: `copy_selection`,
+                label: `Copy selection (${selected_cell_keys.size} cells)`,
+              },
+            ]
+          : []),
       ],
     },
-  ] as const
+    // Gradient direction only applies to heatmap-colored columns
+    ...(allow_better_toggle && context_menu_column?.color_scale != null
+      ? [better_section]
+      : []),
+  ])
+
+  function handle_context_menu_select(section_title: string, option: { value: string }) {
+    if (section_title === `Copy`) {
+      if (option.value === `copy_column` && context_menu_col) {
+        copy_column_values(context_menu_col)
+      } else if (option.value === `copy_selection`) {
+        copy_selected_cells()
+      }
+    } else if (context_menu_col) {
+      const current = better_overrides.get(context_menu_col)
+      if (current === option.value) better_overrides.delete(context_menu_col)
+      else {
+        better_overrides.set(context_menu_col, option.value as `higher` | `lower`)
+      }
+    }
+    context_menu_col = null
+  }
+
+  // Row selection via an ID-indexed Set so per-row checks are O(1) instead of
+  // linear scans over selected_rows (matters for large virtualized datasets)
+  let selected_id_set = $derived(new Set(selected_rows.map((row) => get_row_id(row))))
 
-  // 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((selected_row) => get_row_id(selected_row) === row_id)
-    if (idx !== -1) {
-      selected_rows = selected_rows.filter((_, row_idx) => row_idx !== idx)
-    } else {
-      selected_rows = [...selected_rows, row]
-    }
+    selected_rows = selected_id_set.has(row_id)
+      ? selected_rows.filter((selected_row) => get_row_id(selected_row) !== row_id)
+      : [...selected_rows, row]
   }
 
   function is_row_selected(row: RowData): boolean {
-    const row_id = get_row_id(row)
-    return selected_rows.some((selected_row) => get_row_id(selected_row) === row_id)
+    return selected_id_set.has(get_row_id(row))
   }
 
-  // Select-all: checks if every row on the current page is selected
+  // Select-all scope: the current page under pagination, every sorted+filtered
+  // row in infinite-scroll mode (the virtual window is a rendering detail)
+  let select_all_rows = $derived(pagination_config ? display_rows : sorted_data)
   let all_page_selected = $derived(
-    paginated_data.length > 0 && paginated_data.every((row) => is_row_selected(row)),
+    select_all_rows.length > 0 &&
+      select_all_rows.every((row) => selected_id_set.has(get_row_id(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 scope_ids = new Set(select_all_rows.map(get_row_id))
+      selected_rows = selected_rows.filter((row) => !scope_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)))
+      const new_rows = select_all_rows.filter((row) => !already.has(get_row_id(row)))
       selected_rows = [...selected_rows, ...new_rows]
     }
   }
@@ -818,45 +1331,42 @@
         const val = row[get_col_id(col)]
         if (val == null) return ``
         return quote(strip_html(String(val)))
-      })
+      }),
     )
     return [headers.join(delimiter), ...rows.map((row) => row.join(delimiter))].join(`\n`)
   }
 
-  function export_csv(filename = `table-export`) {
+  function export_csv(filename: string) {
     download(serialize_table(`,`, true), `${filename}.csv`, `text/csv`)
   }
 
-  function export_json(filename = `table-export`) {
+  function export_json(filename: string) {
     const rows = export_rows.map((row) => {
       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
+        clean_row[strip_html(col.label)] = typeof val === `string` ? strip_html(val) : val
       }
       return clean_row
     })
-    download(
-      JSON.stringify(rows, null, 2),
-      `${filename}.json`,
-      `application/json`,
-    )
+    download(JSON.stringify(rows, null, 2), `${filename}.json`, `application/json`)
   }
 
+  const export_actions = [
+    [`csv`, export_csv],
+    [`json`, export_json],
+  ] as const
+
   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.includes(col_id)
+      ? hidden_columns.filter((id) => id !== col_id)
+      : [...hidden_columns, col_id]
   }
 
   // Column resize handlers
@@ -889,18 +1399,27 @@
   let hint_config = $derived(
     sort_hint
       ? {
-        position: `bottom` as const,
-        permanent: false,
-        ...(typeof sort_hint === `string` ? { text: sort_hint } : sort_hint),
-      }
+          position: `bottom` as const,
+          permanent: false,
+          ...(typeof sort_hint === `string` ? { text: sort_hint } : sort_hint),
+        }
       : null,
   )
 </script>
 
+<svelte:window
+  onpointerdown={(event) => {
+    close_datetime_select_on_outside_pointerdown(event)
+    clear_cell_selection_on_outside_pointerdown(event)
+  }}
+  onpointerup={end_cell_drag}
+  onkeydown={handle_cell_selection_keydown}
+/>
+
 {#snippet sort_hint_element(pos: `top` | `bottom`)}
   {#if hint_config?.position === pos}
     <div
-      class="sort-hint {hint_config.class ?? ``}"
+      class={[`sort-hint`, hint_config.class]}
       class:permanent={hint_config.permanent}
       style={hint_config.style}
     >
@@ -909,20 +1428,29 @@
   {/if}
 {/snippet}
 
+<!-- svelte-ignore a11y_no_static_element_interactions (capture-phase guard swallowing the click that follows a cell-range drag) -->
 <div
   {@attach table_tooltips}
   {...rest_props}
   bind:this={container_el}
-  class="table-container {rest_props.class ?? ``}"
+  class={[`table-container`, rest_props.class]}
+  class:cell-dragging={cell_drag_active}
   style:--heatmap-opacity="{heatmap_opacity * 100}%"
+  onclickcapture={suppress_click_after_cell_drag}
   onmouseleave={() => {
     show_column_dropdown = false
     show_export_dropdown = false
     context_menu_col = null
   }}
 >
-  <!-- Floating control buttons -->
-  <section class="control-buttons">
+  <!-- Control buttons: render inline above the table, or teleport into a host
+       toolbar (controls_target) so embedding panels reuse their own header row -->
+  <section
+    class="control-buttons"
+    class:portaled={Boolean(controls_target)}
+    class:force-visible={controls_open || show_column_dropdown || show_export_dropdown}
+    {@attach portal(controls_target)}
+  >
     {#if search_config}
       {#if search_expanded || search_query}
         <input
@@ -942,15 +1470,15 @@
           }}
           {@attach tooltip({ content: `Clear`, placement: `top` })}
         >
-          <Icon icon="Cross" style="width: 10px" />
+          <Icon icon="Cross" />
         </button>
       {:else}
         <button
           class="icon-btn"
-          onclick={() => search_expanded = true}
+          onclick={() => (search_expanded = true)}
           {@attach tooltip({ content: `Search`, placement: `top` })}
         >
-          <Icon icon="Search" style="width: 14px" />
+          <Icon icon="Search" />
         </button>
       {/if}
     {/if}
@@ -960,10 +1488,10 @@
         <button
           class="icon-btn"
           class:active={show_column_dropdown}
-          onclick={() => show_column_dropdown = !show_column_dropdown}
+          onclick={() => (show_column_dropdown = !show_column_dropdown)}
           {@attach tooltip({ content: `Columns`, placement: `top` })}
         >
-          <Icon icon="Columns" style="width: 14px" />
+          <Icon icon="Columns" />
         </button>
         {#if show_column_dropdown}
           <div class="dropdown-pane">
@@ -988,35 +1516,27 @@
         <button
           class="icon-btn"
           class:active={show_export_dropdown}
-          onclick={() => show_export_dropdown = !show_export_dropdown}
+          onclick={() => (show_export_dropdown = !show_export_dropdown)}
           {@attach tooltip({ content: `Export`, placement: `top` })}
         >
-          <Icon icon="Export" style="width: 14px" />
+          <Icon icon="Export" />
         </button>
         {#if show_export_dropdown}
           <div class="dropdown-pane">
-            {#if export_config.formats.includes(`csv`)}
-              <button
-                class="dropdown-option"
-                onclick={() => {
-                  export_csv(export_config.filename)
-                  show_export_dropdown = false
-                }}
-              >
-                <Icon icon="Download" style="width: 12px" /> CSV
-              </button>
-            {/if}
-            {#if export_config.formats.includes(`json`)}
-              <button
-                class="dropdown-option"
-                onclick={() => {
-                  export_json(export_config.filename)
-                  show_export_dropdown = false
-                }}
-              >
-                <Icon icon="Download" style="width: 12px" /> JSON
-              </button>
-            {/if}
+            {#each export_actions as [format, export_fn] (format)}
+              {#if export_config.formats.includes(format)}
+                <button
+                  class="dropdown-option"
+                  onclick={() => {
+                    export_fn(export_config.filename)
+                    show_export_dropdown = false
+                  }}
+                >
+                  <Icon icon="Download" style="width: 12px" />
+                  {format.toUpperCase()}
+                </button>
+              {/if}
+            {/each}
             <button
               class="dropdown-option"
               onclick={() => {
@@ -1034,118 +1554,114 @@
     {#if show_row_select && selected_rows.length > 0}
       <button
         class="icon-btn selection-badge"
-        onclick={() => selected_rows = []}
+        onclick={() => (selected_rows = [])}
         title="Clear {selected_rows.length} selected rows"
       >
         <span class="badge">{selected_rows.length}</span>
-        <Icon icon="Cross" style="width: 10px" />
+        <Icon icon="Cross" />
       </button>
     {/if}
 
-    {#if controls}
-      {@render controls()}
-    {/if}
-  </section>
-
-  {#if show_controls}
-    <DraggablePane
-      bind:show={controls_open}
-      closed_icon="Settings"
-      open_icon="Cross"
-      toggle_props={{
-        title: `${controls_open ? `Close` : `Open`} table controls`,
-        style: `position: absolute; top: 5pt; right: 1ex; z-index: 10`,
-      }}
-      pane_props={{ style: `max-height: 60vh; overflow-y: auto; font-size: 0.85em` }}
-    >
-      <SettingsSection
-        title="Heatmap"
-        current_values={{ show_heatmap, heatmap_opacity }}
-        on_reset={() => {
-          show_heatmap = true
-          heatmap_opacity = 1
-        }}
-      >
-        <label><input type="checkbox" bind:checked={show_heatmap} /> Show heatmap</label>
-        {#if show_heatmap}
-          <label>
-            Opacity
-            <input
-              type="range"
-              min="0"
-              max="1"
-              step="0.05"
-              bind:value={heatmap_opacity}
-            />
-            <input
-              type="number"
-              min="0"
-              max="1"
-              step="0.05"
-              bind:value={heatmap_opacity}
-              style="width: 3.5em"
-            />
-          </label>
-        {/if}
-      </SettingsSection>
-
-      <SettingsSection
-        title="Display"
-        current_values={{ show_row_numbers }}
-        on_reset={() => {
-          show_row_numbers = false
+    {#if show_controls}
+      <DraggablePane
+        bind:show={controls_open}
+        closed_icon="Settings"
+        open_icon="Cross"
+        toggle_props={{ title: `${controls_open ? `Close` : `Open`} table controls` }}
+        position="fixed"
+        pane_props={{
+          style: `--pane-max-height: 60vh; overflow-y: auto; font-size: 0.85em`,
         }}
       >
-        <label><input type="checkbox" bind:checked={show_row_numbers} /> Row
-          numbers</label>
-      </SettingsSection>
+        <SettingsSection
+          title="Heatmap"
+          current_values={{ show_heatmap, heatmap_opacity }}
+          on_reset={() => {
+            show_heatmap = true
+            heatmap_opacity = 1
+          }}
+        >
+          <label><input type="checkbox" bind:checked={show_heatmap} /> Show heatmap</label>
+          {#if show_heatmap}
+            <label>
+              Opacity
+              <input type="range" min="0" max="1" step="0.05" bind:value={heatmap_opacity} />
+              <input
+                type="number"
+                min="0"
+                max="1"
+                step="0.05"
+                bind:value={heatmap_opacity}
+                style="width: 3.5em"
+              />
+            </label>
+          {/if}
+        </SettingsSection>
 
-      {#if colored_columns.length > 0}
         <SettingsSection
-          title="Column Colors"
-          current_values={Object.fromEntries([...better_overrides, ...color_scale_overrides])}
+          title="Display"
+          current_values={{ show_row_numbers }}
           on_reset={() => {
-            better_overrides.clear()
-            color_scale_overrides.clear()
+            show_row_numbers = false
           }}
         >
-          {#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 sanitize_html(col.label)}</span>
-              <select
-                value={color_scale_overrides.get(col_id) ?? col.color_scale ??
-                `interpolateViridis`}
-                onchange={(event) => {
-                  const val = event.currentTarget.value
-                  if (
-                    val === (col.color_scale ?? `interpolateViridis`)
-                  ) color_scale_overrides.delete(col_id)
-                  else color_scale_overrides.set(col_id, val)
-                }}
-              >
-                {#each color_scale_options as scale (scale)}
-                  <option value={scale}>{scale.replace(`interpolate`, ``)}</option>
-                {/each}
-              </select>
-              <select
-                value={better_overrides.get(col_id) ?? col.better ?? ``}
-                onchange={(event) => {
-                  const val = event.currentTarget.value
-                  if (!val) better_overrides.delete(col_id)
-                  else better_overrides.set(col_id, val as `higher` | `lower`)
-                }}
-              >
-                <option value="">Default</option>
-                <option value="higher">▲ High</option>
-                <option value="lower">▼ Low</option>
-              </select>
-            </div>
-          {/each}
+          <label><input type="checkbox" bind:checked={show_row_numbers} /> Row numbers</label>
         </SettingsSection>
-      {/if}
-    </DraggablePane>
-  {/if}
+
+        {#if colored_columns.length > 0}
+          <SettingsSection
+            title="Column Colors"
+            current_values={Object.fromEntries([
+              ...better_overrides,
+              ...color_scale_overrides,
+            ])}
+            on_reset={() => {
+              better_overrides.clear()
+              color_scale_overrides.clear()
+            }}
+          >
+            {#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 sanitize_html(col.label)}</span>
+                <select
+                  value={color_scale_overrides.get(col_id) ??
+                    col.color_scale ??
+                    `interpolateViridis`}
+                  onchange={(event) => {
+                    const val = event.currentTarget.value
+                    if (val === (col.color_scale ?? `interpolateViridis`))
+                      color_scale_overrides.delete(col_id)
+                    else color_scale_overrides.set(col_id, val)
+                  }}
+                >
+                  {#each color_scale_options as scale (scale)}
+                    <option value={scale}>{scale.replace(`interpolate`, ``)}</option>
+                  {/each}
+                </select>
+                <select
+                  value={better_overrides.get(col_id) ?? col.better ?? ``}
+                  onchange={(event) => {
+                    const val = event.currentTarget.value
+                    if (!val) better_overrides.delete(col_id)
+                    else better_overrides.set(col_id, val as `higher` | `lower`)
+                  }}
+                >
+                  <option value="">Default</option>
+                  <option value="higher">▲ High</option>
+                  <option value="lower">▼ Low</option>
+                </select>
+              </div>
+            {/each}
+          </SettingsSection>
+        {/if}
+      </DraggablePane>
+    {/if}
+
+    {#if controls}
+      {@render controls()}
+    {/if}
+  </section>
 
   {@render sort_hint_element(`top`)}
 
@@ -1153,6 +1669,8 @@
     class="table-scroll"
     style={scroll_style}
     class:has-scroll={scroll_style}
+    bind:this={scroll_el}
+    onscroll={virtual_config ? sync_viewport : undefined}
   >
     {#if loading}
       <div class="loading-overlay">
@@ -1175,15 +1693,13 @@
               {#if !col.group}
                 <th class:sticky-col={col.sticky}></th>
               {:else}
-                {@const group_cols = visible_columns.filter((column) =>
-              column.group === col.group
-            )}
-                <!-- Only render the group header once for each group by checking if this is the first column of this group -->
-                {#if visible_columns.findIndex((column) => column.group === col.group) ===
-              visible_columns.findIndex((column) =>
-                column.group === col.group && column.label === col.label
-              )}
-                  <th title={col.description} colspan={group_cols.length}>
+                <!-- Only render the group header once per group (on its first column) -->
+                {#if visible_columns.find((column) => column.group === col.group) === col}
+                  <th
+                    title={col.description}
+                    colspan={visible_columns.filter((column) => column.group === col.group)
+                      .length}
+                  >
                     {@html sanitize_html(col.group)}
                   </th>
                 {/if}
@@ -1210,61 +1726,47 @@
           {/if}
           {#each visible_columns as col (get_col_id(col))}
             {@const col_id = get_col_id(col)}
-            {@const drag_side = drag_over_col_id === col_id
-              ? get_drag_side(col_id)
-              : null}
+            {@const is_datetime = is_datetime_column(col)}
+            {@const dt_mode = datetime_mode(col)}
+            {@const datetime_label_id = get_datetime_label_id(col_id)}
+            {@const drag_side = drag_over_col_id === col_id ? get_drag_side(col_id) : null}
             {@const col_width = column_widths[col_id]}
             <th
               title={col.description}
               tabindex={col.sortable === false ? undefined : 0}
               role={col.sortable === false ? undefined : `button`}
-              oncontextmenu={(event) => {
-                if (
-                  !allow_better_toggle || col.color_scale === null ||
-                  col.color_scale === undefined
-                ) return
-                event.preventDefault()
-                event.stopPropagation()
-                context_menu_col = col_id
-                const rect = container_el?.getBoundingClientRect()
-                context_menu_pos = {
-                  x: event.clientX - (rect?.left ?? 0),
-                  y: event.clientY - (rect?.top ?? 0),
-                }
-              }}
+              oncontextmenu={(event) => open_column_context_menu(event, col_id)}
               onclick={(event) => {
                 if (!drag_col_id && !resize_col_id) {
-                  sort_rows(
-                    col.label,
-                    col.group,
-                    event,
-                  )
+                  sort_rows(col.label, col.group, event)
                 }
               }}
               onkeydown={(event) => {
                 if (
                   (event.key === `Enter` || event.key === ` `) &&
-                  !drag_col_id && !resize_col_id
+                  !drag_col_id &&
+                  !resize_col_id
                 ) {
                   event.preventDefault()
                   sort_rows(col.label, col.group, event)
                 }
               }}
               style={`${col.style ?? ``}${
-                col_width
-                  ? `; width: ${col_width}px; min-width: ${col_width}px`
-                  : ``
+                col_width ? `; width: ${col_width}px; min-width: ${col_width}px` : ``
               }`}
               class:sticky-col={col.sticky}
               class:not-sortable={col.sortable === false}
               class:dragging={drag_col_id === col_id}
               class:resizing={resize_col_id === col_id}
+              class:datetime-select-open={datetime_select_open_col_id === col_id}
               data-drag-side={drag_side}
               draggable="true"
               aria-dropeffect="move"
               aria-sort={sort_state.column === col_id
-              ? (sort_state.ascending ? `ascending` : `descending`)
-              : `none`}
+                ? sort_state.ascending
+                  ? `ascending`
+                  : `descending`
+                : `none`}
               ondragstart={(event: DragEvent & { currentTarget: HTMLElement }) => {
                 handle_drag_start(event, col)
                 event.currentTarget.setAttribute(`aria-grabbed`, `true`)
@@ -1283,6 +1785,67 @@
                 {@html sanitize_html(col.label)}
               {/if}
               {@html sanitize_html(sort_indicator(col, sort_state))}
+              {#if is_datetime}
+                <span class="datetime-format-control">
+                  <button
+                    type="button"
+                    class="datetime-format-trigger"
+                    aria-labelledby={datetime_label_id}
+                    aria-haspopup="listbox"
+                    aria-expanded={datetime_select_open_col_id === col_id}
+                    data-mode={dt_mode}
+                    onkeydown={(event) => event.stopPropagation()}
+                    onmousedown={(event) => event.stopPropagation()}
+                    onpointerdown={(event) => event.stopPropagation()}
+                    onclick={(event) => {
+                      event.stopPropagation()
+                      datetime_select_open_col_id =
+                        datetime_select_open_col_id === col_id ? null : col_id
+                    }}
+                    {@attach tooltip({
+                      content: `Date/time format: ${datetime_format_labels[dt_mode]}`,
+                      placement: `top`,
+                    })}
+                  >
+                    <Icon icon="Calendar" />
+                    <span id={datetime_label_id} class="sr-only">
+                      Date/time format for {strip_html(col.label)}
+                    </span>
+                  </button>
+                  {#if datetime_select_open_col_id === col_id}
+                    <select
+                      class="datetime-format-select"
+                      aria-labelledby={datetime_label_id}
+                      value={dt_mode}
+                      size={datetime_format_options(col).length}
+                      onclick={(event) => {
+                        event.stopPropagation()
+                        if (event.currentTarget.value === dt_mode) {
+                          datetime_select_open_col_id = null
+                        }
+                      }}
+                      onkeydown={(event) => {
+                        event.stopPropagation()
+                        if (event.key === `Escape`) datetime_select_open_col_id = null
+                      }}
+                      onmousedown={(event) => event.stopPropagation()}
+                      onpointerdown={(event) => event.stopPropagation()}
+                      oninput={(event) => {
+                        event.stopPropagation()
+                        set_datetime_format(
+                          col,
+                          event.currentTarget.value as DateTimeFormatMode,
+                        )
+                        datetime_select_open_col_id = null
+                      }}
+                    >
+                      {#each datetime_format_options(col) as mode (mode)}
+                        <option value={mode}>{datetime_format_labels[mode]}</option>
+                      {/each}
+                    </select>
+                  {/if}
+                </span>
+              {/if}
               <!-- Column resize handle -->
               <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
               <span
@@ -1290,7 +1853,7 @@
                 onmousedown={(event) => start_resize(event, col)}
                 role="separator"
                 aria-orientation="vertical"
-                aria-valuenow={column_widths[get_col_id(col)] ?? 100}
+                aria-valuenow={col_width ?? 100}
                 aria-valuemin={50}
                 aria-valuemax={500}
               ></span>
@@ -1298,33 +1861,48 @@
           {/each}
         </tr>
       </thead>
-      <tbody>
-        {#each paginated_data as row, row_idx (get_row_id(row))}
+      {#snippet virtual_spacer(height: number)}
+        <!-- preserves scroll geometry for the unrendered rows above/below the window -->
+        {#if height > 0}
+          <tr class="virtual-spacer" aria-hidden="true" style:height="{height}px">
+            <td colspan={body_colspan}></td>
+          </tr>
+        {/if}
+      {/snippet}
+      <!-- svelte-ignore a11y_no_noninteractive_element_interactions (drag cell-range selection; keyboard copy handled on window) -->
+      <tbody onpointermove={extend_cell_drag}>
+        {@render virtual_spacer(spacer_top)}
+        {#each display_rows as row, row_idx (get_row_id(row))}
+          {@const abs_idx = display_range.start + row_idx}
           {@const row_selected = show_row_select && is_row_selected(row)}
           <tr
-            animate:flip={{ duration: 500 }}
+            animate:flip={{ duration: virtual_config ? 0 : 500 }}
             style={row.style}
-            class={row.class ?? ``}
+            class={row.class}
             class:selected={row_selected}
+            data-title={row_title?.(row) || undefined}
             tabindex={onrowclick ? 0 : undefined}
+            onpointerdown={onrowpointerdown
+              ? (event) => onrowpointerdown(event, row)
+              : undefined}
             onclick={onrowclick ? (event) => onrowclick(event, row) : undefined}
             ondblclick={onrowdblclick ? (event) => onrowdblclick(event, row) : undefined}
             onkeydown={onrowclick
-            ? (event) => {
-              if (event.key === `Enter` || event.key === ` `) {
-                event.preventDefault()
-                onrowclick(event, row)
-              } else if (event.key === `ArrowDown`) {
-                event.preventDefault()
-                const next = event.currentTarget.nextElementSibling
-                if (next instanceof HTMLElement) next.focus()
-              } else if (event.key === `ArrowUp`) {
-                event.preventDefault()
-                const prev = event.currentTarget.previousElementSibling
-                if (prev instanceof HTMLElement) prev.focus()
-              }
-            }
-            : undefined}
+              ? (event) => {
+                  if (event.key === `Enter` || event.key === ` `) {
+                    event.preventDefault()
+                    onrowclick(event, row)
+                  } else if (event.key === `ArrowDown`) {
+                    event.preventDefault()
+                    const next = event.currentTarget.nextElementSibling
+                    if (next instanceof HTMLElement) next.focus()
+                  } else if (event.key === `ArrowUp`) {
+                    event.preventDefault()
+                    const prev = event.currentTarget.previousElementSibling
+                    if (prev instanceof HTMLElement) prev.focus()
+                  }
+                }
+              : undefined}
           >
             {#if show_row_select}
               <td class="select-col">
@@ -1336,36 +1914,45 @@
               </td>
             {/if}
             {#if show_row_numbers}
-              <td class="row-num-col">
-                {(current_page - 1) * effective_page_size + row_idx + 1}
-              </td>
+              <td class="row-num-col">{abs_idx + 1}</td>
             {/if}
-            {#each visible_columns as col (get_col_id(col))}
-              {@const val = row[get_col_id(col)]}
+            {#each visible_columns as col, col_idx (get_col_id(col))}
+              {@const col_id = get_col_id(col)}
+              {@const val = row[col_id]}
               {@const color = calc_color(val, col)}
-              {@const col_width = column_widths[get_col_id(col)]}
+              {@const col_width = column_widths[col_id]}
+              {@const date_val = is_datetime_column(col)
+                ? format_datetime_cell(val, col)
+                : null}
               <td
                 data-col={col.label}
-                data-sort-value={is_html_str(val) ? null : val}
+                data-sort-value={get_cell_sort_attr(val)}
+                data-row-idx={abs_idx}
+                data-col-idx={col_idx}
                 class:sticky-col={col.sticky}
+                class:cell-selected={selected_cell_keys.has(`${abs_idx}:${col_idx}`)}
+                onpointerdown={(event) => start_cell_drag(event, abs_idx, col_idx)}
+                oncontextmenu={(event) => {
+                  // keep the native context menu for links/buttons/inputs inside cells
+                  if (is_interactive_cell_target(event.target)) return
+                  open_column_context_menu(event, col_id)
+                }}
                 style:--cell-bg={color.bg}
                 style:color={color.text}
                 style={`${col.cell_style ?? col.style ?? ``}${
-                  col_width
-                    ? `; width: ${col_width}px; max-width: ${col_width}px`
-                    : ``
+                  col_width ? `; width: ${col_width}px; max-width: ${col_width}px` : ``
                 }`}
               >
                 {#if special_cells?.[col.label]}
                   {@render special_cells[col.label]({ row, col, val })}
                 {:else if cell}
                   {@render cell({ row, col, val })}
+                {:else if date_val != null}
+                  {date_val}
                 {:else if typeof val === `number` && !Number.isNaN(val)}
                   {format_num(val, col.format ?? default_num_format)}
-                {:else if val === undefined || val === null || Number.isNaN(val)}
-                  <span {@attach tooltip({ content: `Not available` })}>
-                    n/a
-                  </span>
+                {:else if is_invalid(val)}
+                  <span {@attach tooltip({ content: `Not available` })}> n/a </span>
                 {:else}
                   {@html sanitize_html(val)}
                 {/if}
@@ -1375,15 +1962,11 @@
         {:else}
           {#if empty_message}
             <tr class="empty-row">
-              <td
-                colspan={visible_columns.length + (show_row_select ? 1 : 0) +
-                (show_row_numbers ? 1 : 0)}
-              >
-                {empty_message}
-              </td>
+              <td colspan={body_colspan}>{empty_message}</td>
             </tr>
           {/if}
         {/each}
+        {@render virtual_spacer(spacer_bottom)}
       </tbody>
       {#if footer}
         <tfoot>
@@ -1395,24 +1978,22 @@
 
   {@render sort_hint_element(`bottom`)}
 
+  {#if virtual_config && sorted_data.length > display_rows.length}
+    <div class="row-count-info">
+      {display_rows.length} of {sorted_data.length} rows
+    </div>
+  {/if}
+
+  {#snippet page_btn(label: string, title: string, target_page: number, disabled: boolean)}
+    <button class="page-btn" {disabled} onclick={() => (current_page = target_page)} {title}>
+      {label}
+    </button>
+  {/snippet}
+
   {#if pagination_config && total_pages > 1}
     <div class="pagination">
-      <button
-        class="page-btn"
-        disabled={current_page === 1}
-        onclick={() => current_page = 1}
-        title="First page"
-      >
-        «
-      </button>
-      <button
-        class="page-btn"
-        disabled={current_page === 1}
-        onclick={() => current_page--}
-        title="Previous page"
-      >
-        ‹
-      </button>
+      {@render page_btn(`«`, `First page`, 1, current_page === 1)}
+      {@render page_btn(`‹`, `Previous page`, current_page - 1, current_page === 1)}
       <span class="page-info">
         Page
         <input
@@ -1430,28 +2011,16 @@
         of {total_pages}
         <span class="row-count">({sorted_data.length} rows)</span>
       </span>
-      <button
-        class="page-btn"
-        disabled={current_page === total_pages}
-        onclick={() => current_page++}
-        title="Next page"
-      >
-        ›
-      </button>
-      <button
-        class="page-btn"
-        disabled={current_page === total_pages}
-        onclick={() => current_page = total_pages}
-        title="Last page"
-      >
-        »
-      </button>
+      {@render page_btn(`›`, `Next page`, current_page + 1, current_page === total_pages)}
+      {@render page_btn(`»`, `Last page`, total_pages, current_page === total_pages)}
       {#if pagination_config.page_sizes}
         <select
           class="page-size-select"
           onchange={(event) => {
-            effective_page_size = parseInt(event.currentTarget.value, 10)
+            const page_size = parseInt(event.currentTarget.value, 10)
+            effective_page_size = page_size
             current_page = 1
+            pagination_config.on_page_size_change?.(page_size)
           }}
         >
           {#each pagination_config.page_sizes as size (size)}
@@ -1465,11 +2034,13 @@
   {/if}
 
   <ContextMenu
-    sections={better_sections}
-    selected_values={{ 'Gradient direction': better_overrides.get(context_menu_col ?? ``) ?? `` }}
+    sections={context_menu_sections}
+    selected_values={{
+      'Gradient direction': better_overrides.get(context_menu_col ?? ``) ?? ``,
+    }}
     position={context_menu_pos}
     visible={context_menu_col !== null}
-    on_close={() => context_menu_col = null}
+    on_close={() => (context_menu_col = null)}
     style={[
       `--surface-bg: light-dark(#fff, #1e1e1e)`,
       `--border-color: light-dark(rgba(0,0,0,0.15), rgba(255,255,255,0.15))`,
@@ -1479,13 +2050,7 @@
       `--accent-color: light-dark(rgba(0,0,0,0.1), rgba(255,255,255,0.15))`,
       `z-index: 200`,
     ].join(`; `)}
-    on_select={(_, option) => {
-      if (!context_menu_col) return
-      const current = better_overrides.get(context_menu_col)
-      if (current === option.value) better_overrides.delete(context_menu_col)
-      else better_overrides.set(context_menu_col, option.value as `higher` | `lower`)
-      context_menu_col = null
-    }}
+    on_select={handle_context_menu_select}
   />
 </div>
 
@@ -1507,15 +2072,30 @@
   .table-scroll.has-scroll {
     border: 1px solid light-dark(rgba(0, 0, 0, 0.12), rgba(255, 255, 255, 0.12));
     border-radius: var(--border-radius, 3pt);
-    overflow-x: hidden;
-    overflow-y: auto;
   }
   table {
     border-collapse: separate;
     border-spacing: 0;
     display: table; /* Override global display: block to enable sticky headers */
   }
-  th, td {
+  /* during a cell-range drag, native text selection would fight the
+     rectangle highlight */
+  .table-container.cell-dragging {
+    cursor: cell;
+    user-select: none;
+  }
+  /* background-image stacks on top of the per-cell heatmap background-color,
+     so selected heatmap cells stay tinted underneath */
+  td.cell-selected {
+    background-image: linear-gradient(
+      color-mix(in srgb, var(--accent-color, #4a9eff) 30%, transparent),
+      color-mix(in srgb, var(--accent-color, #4a9eff) 30%, transparent)
+    );
+    box-shadow: inset 0 0 0 1px
+      color-mix(in srgb, var(--accent-color, #4a9eff) 55%, transparent);
+  }
+  th,
+  td {
     padding: var(--heatmap-cell-padding, 1pt 5pt);
     text-align: var(--heatmap-text-align, left);
     border: var(--heatmap-cell-border, none);
@@ -1541,6 +2121,78 @@
   th:hover {
     background: var(--heatmap-header-hover-bg, var(--nav-bg));
   }
+  th.datetime-select-open {
+    overflow: visible;
+    z-index: 30;
+  }
+  .datetime-format-control {
+    display: inline-flex;
+    align-items: center;
+    margin-left: 3px;
+    position: relative;
+    vertical-align: middle;
+  }
+  .datetime-format-trigger {
+    display: inline-grid;
+    place-items: center;
+    width: 14px;
+    height: 14px;
+    padding: 0;
+    border: 0;
+    border-radius: 3px;
+    background: transparent;
+    color: inherit;
+    cursor: pointer;
+    line-height: 1;
+  }
+  .datetime-format-trigger:hover,
+  .datetime-format-trigger[aria-expanded='true'] {
+    background: light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.16));
+  }
+  .datetime-format-trigger :global(svg) {
+    width: 10px;
+    height: 10px;
+    opacity: 0.75;
+    transform: translateY(-1px);
+  }
+  .sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
+  .datetime-format-select {
+    position: absolute;
+    top: calc(100% + 2px);
+    right: 0;
+    z-index: 20;
+    min-width: max-content;
+    max-width: 10em;
+    padding: 2px;
+    border: 1px solid light-dark(rgba(0, 0, 0, 0.12), rgba(255, 255, 255, 0.18));
+    border-radius: 3px;
+    background: var(--heatmap-header-bg, var(--page-bg, Canvas));
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
+    color: inherit;
+    cursor: pointer;
+    font-size: 0.9em;
+    line-height: 1.35;
+    outline: none;
+  }
+  .datetime-format-select option {
+    padding: 3px 8px;
+  }
+  .datetime-format-select option:checked {
+    background: light-dark(rgba(74, 158, 255, 0.18), rgba(122, 179, 255, 0.28));
+    box-shadow: 0 0 0 100vmax light-dark(rgba(74, 158, 255, 0.18), rgba(122, 179, 255, 0.28))
+      inset;
+    color: inherit;
+  }
   th.dragging {
     opacity: 0.4;
     cursor: grabbing;
@@ -1565,10 +2217,20 @@
   td.sticky-col {
     position: sticky;
     left: 0;
-    background: var(--page-bg, Canvas);
+    background: var(--heatmap-sticky-cell-bg, var(--page-bg, Canvas));
     z-index: 1;
     border-right: 1px solid var(--border, #ddd);
   }
+  /* separate odd-row var so consumers with striped rows can composite their stripe
+  color over the opaque sticky background (which must stay opaque to occlude columns
+  scrolling beneath it), e.g.
+  --heatmap-sticky-cell-odd-bg: linear-gradient(var(--stripe), var(--stripe)), var(--page-bg) */
+  tbody tr:nth-child(odd) td.sticky-col {
+    background: var(
+      --heatmap-sticky-cell-odd-bg,
+      var(--heatmap-sticky-cell-bg, var(--page-bg, Canvas))
+    );
+  }
   tbody tr:hover {
     filter: var(--heatmap-row-hover-filter, brightness(1.1));
   }
@@ -1602,35 +2264,57 @@
     transition: opacity 0.15s;
   }
   .table-container:hover .control-buttons,
-  .control-buttons:focus-within {
+  .control-buttons:focus-within,
+  /* keep visible while a dropdown/pane is open or when hosted in a panel
+     toolbar (portaled out of the table, so container hover can't reveal it) */
+  .control-buttons.force-visible,
+  .control-buttons.portaled {
     opacity: 1;
     pointer-events: auto;
   }
-  .icon-btn {
-    padding: 2px 4px;
+  .control-buttons.portaled {
+    margin: 0;
+  }
+  /* .pane-toggle = the settings-pane gear, which sits in the control row and
+     must match the other .icon-btn buttons: uniform square ghost buttons */
+  .icon-btn,
+  .control-buttons > :global(button.pane-toggle) {
+    box-sizing: border-box;
+    inline-size: 22px;
+    block-size: 22px;
+    padding: 0;
     border: none;
     border-radius: 3px;
-    background: light-dark(rgba(0, 0, 0, 0.06), rgba(255, 255, 255, 0.1));
-    color: light-dark(#333, #ddd);
+    background: transparent;
+    /* dim resting color so the hover jump to full contrast reads clearly */
+    color: light-dark(#6b7280, #98a0ae);
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 2px;
     font-size: 0.8em;
+    transition: color 0.02s linear;
   }
-  .icon-btn :global(svg) {
-    width: 12px;
-    height: 12px;
+  .icon-btn :global(svg),
+  .control-buttons > :global(button.pane-toggle svg) {
+    width: 14px;
+    height: 14px;
   }
-  .icon-btn:hover {
-    background: light-dark(rgba(0, 0, 0, 0.12), rgba(255, 255, 255, 0.2));
+  /* toolbar buttons give color-only hover feedback — no background shading */
+  .icon-btn:hover,
+  .control-buttons > :global(button.pane-toggle:hover) {
+    background: transparent;
+    color: light-dark(#000, #fff);
   }
   .icon-btn.active {
-    background: light-dark(rgba(0, 0, 0, 0.15), rgba(255, 255, 255, 0.25));
+    color: var(--active-color, #4a9eff);
   }
   .selection-badge {
     position: relative;
+    /* row-count badge next to the clear icon makes this one wider */
+    inline-size: auto;
+    padding: 0 4px;
   }
   .selection-badge .badge {
     background: var(--highlight, #4a9eff);
@@ -1716,7 +2400,8 @@
   tr.highlight {
     background-color: var(--nav-bg) !important;
   }
-  tr.highlight, tr.highlight :global(a) {
+  tr.highlight,
+  tr.highlight :global(a) {
     color: var(--highlight) !important;
   }
 
@@ -1727,10 +2412,6 @@
     vertical-align: middle;
     padding: 2px !important;
   }
-  .select-col :global(svg) {
-    display: block;
-    margin: auto;
-  }
   tr.selected {
     background: var(--highlight-bg, rgba(74, 158, 255, 0.15)) !important;
   }
@@ -1738,6 +2419,18 @@
     border-top: 1px solid var(--highlight, #4a9eff);
     border-bottom: 1px solid var(--highlight, #4a9eff);
   }
+  /* Virtualized rows: spacers keep scroll geometry; the count line replaces
+     pagination in infinite-scroll mode */
+  .virtual-spacer td {
+    padding: 0;
+    border: none;
+  }
+  .row-count-info {
+    padding: 4px 8px;
+    font-size: 0.8em;
+    text-align: right;
+    opacity: 0.6;
+  }
   /* Pagination */
   .pagination {
     display: flex;
@@ -1857,11 +2550,13 @@
     font-style: italic;
   }
   .row-num-col {
-    text-align: right;
+    text-align: var(--heatmap-row-num-align, right);
     color: var(--text-muted, #888);
     font-size: 0.85em;
     width: 2em;
-    padding-right: 8px !important;
+    /* left default matches the th,td --heatmap-cell-padding fallback */
+    padding-left: var(--heatmap-row-num-padding-left, 5pt);
+    padding-right: var(--heatmap-row-num-padding-right, 8px) !important;
   }
   .page-size-select {
     padding: 2px 4px;