@lavalogic/scoria 0.37.44 → 0.37.46

package/dist/Components/Table/Headers/TableHead.svelte

@@ -1,415 +1,417 @@
-<svelte:options runes />
-
-<script
-	module
-	lang="ts"
->
-	import Icon from '../../Icon.svelte';
-	import { TooltipContext } from '../../../Contexts/TooltipContext.svelte.js';
-	import { Delay } from '../../../Delay/Delay.js';
-	import { devCatch } from '../../../Helpers/Helpers.svelte.js';
-	import { Colour } from '../../../scss/colours.js';
-	import { Side } from '../../../Types/Internal/Side.js';
-	import { Size } from '../../../Types/Internal/Size.js';
-	import { Variant } from '../../../Types/Internal/Variant.js';
-	import { getContext } from 'svelte';
-	import type { ColumnDef } from '../Types/Columns/Definitions/ColumnDef.svelte.js';
-	import { ExpandDef } from '../Types/Columns/Definitions/Expand/ExpandDef.svelte.js';
-	import { RowSelectionDef } from '../Types/Columns/Definitions/RowSelection/RowSelectionDef.svelte.js';
-	import { TableContext } from '../Types/Context/TableContext.svelte.js';
-	import type { Primitive } from '../Types/Context/TableInitOptions.js';
-	import type { Header } from '../Types/Header.js';
-
-	/** Local alias: scoria's headers never carry custom filter generics here. */
-	type AnyHeader<T extends object> = Header<T, never, unknown>;
-	import HighlightAllHeader from './HighlightAllHeader.svelte';
-	import SelectAllHeader from './SelectAllHeader.svelte';
-	import type { TableHeadProps } from './TableHeadProps.js';
-
-	/** Per-column toggle queue. The header onclick fires this so multiple
-	 *  clicks within a small window stack and apply on a single timer
-	 *  flush, which lets a fast double-click cycle straight to desc (or
-	 *  to clear-sort) without the user having to wait for the asc state
-	 *  to apply and reload data first. Single clicks pay a ~150 ms delay
-	 *  before the toggle runs, which is below most users' perceived
-	 *  latency threshold while still wide enough to batch dblclicks. */
-	const SORT_DEBOUNCE_MS = 150;
-	const sortDebounce = new WeakMap<
-		object,
-		{ count: number; timer: ReturnType<typeof setTimeout> | null }
-	>();
-	function debouncedSortToggle(columnRef: object, handler: ((e?: unknown) => void) | undefined): void {
-		if (!handler) {
-			return;
-		}
-		let entry = sortDebounce.get(columnRef);
-		if (!entry) {
-			entry = { count: 0, timer: null };
-			sortDebounce.set(columnRef, entry);
-		}
-		entry.count += 1;
-		if (entry.timer != null) {
-			clearTimeout(entry.timer);
-		}
-		entry.timer = setTimeout(() => {
-			const toFire = entry!.count;
-			entry!.count = 0;
-			entry!.timer = null;
-			for (let i = 0; i < toFire; i++) {
-				handler();
-			}
-		}, SORT_DEBOUNCE_MS);
-	}
-</script>
-
-<script
-	lang="ts"
-	generics="T extends object, IdType extends Primitive"
->
-	const { oncontextmenu }: TableHeadProps = $props();
-
-	const tableContext = getContext<TableContext<T, IdType>>(TableContext.identifier);
-	const tooltipContext = getContext<TooltipContext>(TooltipContext.identifier);
-
-	const leftHeaders: Array<AnyHeader<T>> = $derived.by(() => {
-		void tableContext.table.columnVisibility;
-		void tableContext.table.columnPinning.left?.size;
-		void tableContext.table.columnPinning.right?.size;
-		return tableContext.table.getLeftHeaderGroups().flatMap((it) => it.headers);
-	});
-
-	const centreHeaders: Array<AnyHeader<T>> = $derived.by(() => {
-		void tableContext.table.columnVisibility;
-		void tableContext.table.columnPinning.left?.size;
-		void tableContext.table.columnPinning.right?.size;
-		return tableContext.table.getCenterHeaderGroups().flatMap((it) => it.headers);
-	});
-
-	const rightHeaders: Array<AnyHeader<T>> = $derived.by(() => {
-		void tableContext.table.columnVisibility;
-		void tableContext.table.columnPinning.left?.size;
-		void tableContext.table.columnPinning.right?.size;
-		return tableContext.table.getRightHeaderGroups().flatMap((it) => it.headers);
-	});
-
-	// Cumulative pinning offsets for the sticky-positioned cells. Each
-	// pinned-left cell is anchored to `left: (sum of widths of preceding
-	// pinned-left cells)`; pinned-right cells are anchored to `right:
-	// (sum of widths of following pinned-right cells)`. Recomputed
-	// whenever a header width changes (which happens on resize handle
-	// drag or column sizing reset).
-	// Read rendered widths from the shared context map; this map is
-	// populated by the ResizeObserver below as the header cells lay
-	// out. The fallback to `header.getSize()` (declared width) covers
-	// the first frame before the observer has fired.
-	function renderedWidth(columnId: string, declared: number): number {
-		return tableContext._columnRenderedWidths.get(columnId) ?? declared;
-	}
-
-	// Single ResizeObserver instance shared across all header cells.
-	// Each `<div role="columnheader">` registers itself via the
-	// `observeHeader` attachment below; the callback writes the cell's
-	// rendered inline-size into the shared `_columnRenderedWidths` map
-	// so TableRow / TableHead / TableBody can read accurate sticky
-	// pinning offsets.
-	// eslint-disable-next-line svelte/prefer-svelte-reactivity
-	const elementToColumnId = new WeakMap<Element, string>();
-	const headerObserver =
-		typeof ResizeObserver === 'undefined'
-			? null
-			: new ResizeObserver((entries) => {
-					for (const entry of entries) {
-						const columnId = elementToColumnId.get(entry.target);
-						if (columnId == null) {
-							continue;
-						}
-						const inlineSize = entry.borderBoxSize[0]?.inlineSize ?? entry.contentRect.width;
-						tableContext._columnRenderedWidths.set(columnId, inlineSize);
-					}
-				});
-
-	$effect(() => () => {
-		headerObserver?.disconnect();
-	});
-
-	function observeHeader(node: HTMLElement, columnId: string): () => void {
-		if (!headerObserver) {
-			return () => {};
-		}
-		elementToColumnId.set(node, columnId);
-		headerObserver.observe(node);
-		return () => {
-			headerObserver.unobserve(node);
-			elementToColumnId.delete(node);
-			tableContext._columnRenderedWidths.delete(columnId);
-		};
-	}
-
-	const leftOffsets: Array<number> = $derived.by(() => {
-		void tableContext._columnRenderedWidths.size;
-		const offsets: Array<number> = [];
-		// Highlight column is always 20px wide and always the first
-		// pinned-left cell when present, so subsequent pinned-left
-		// headers must be offset past it.
-		let cumulative = showHighlightColumn ? 20 : 0;
-		for (const header of leftHeaders) {
-			offsets.push(cumulative);
-			cumulative += renderedWidth(header.column.id, header.getSize());
-		}
-		return offsets;
-	});
-
-	const rightOffsets: Array<number> = $derived.by(() => {
-		void tableContext._columnRenderedWidths.size;
-		const offsets = new Array<number>(rightHeaders.length).fill(0);
-		let cumulative = 0;
-		for (let i = rightHeaders.length - 1; i >= 0; i--) {
-			offsets[i] = cumulative;
-			cumulative += renderedWidth(rightHeaders[i].column.id, rightHeaders[i].getSize());
-		}
-		return offsets;
-	});
-
-	const showHighlightColumn = $derived(
-		leftHeaders.length > 0 || centreHeaders.length > 0 || rightHeaders.length > 0
-	);
-
-	const iconNames = {
-		asc: 'sort-asc',
-		desc: 'sort-desc',
-		none: 'sort-none',
-	} as const;
-
-	let currentDropTarget: HTMLElement | null = $state(null);
-
-	function setCurrentDropTarget(target: EventTarget | null) {
-		currentDropTarget = target as HTMLElement | null;
-	}
-
-	function showtooltip(e: MouseEvent, columnDef: ColumnDef<T>): void {
-		if (columnDef instanceof ExpandDef) {
-			const rect = (e.target as HTMLElement)
-				.closest('[role="columnheader"]')
-				?.getBoundingClientRect();
-
-			if (!rect) {
-				console.warn('could not find closest columnheader');
-
-				return;
-			}
-
-			tooltipContext.showTooltip({
-				text: `Show ${typeof columnDef.header === 'string' ? columnDef.header : columnDef.id}`,
-				arrow: Side.Bottom,
-				delay: Delay.Default,
-				rect,
-			});
-		}
-	}
-
-	function hideTooltip(columnDef: ColumnDef<T>): void {
-		if (columnDef instanceof ExpandDef) {
-			tooltipContext.hideTooltip(
-				`Show ${typeof columnDef.header === 'string' ? columnDef.header : columnDef.id}`
-			);
-		}
-	}
-
-	function onDrop() {
-		if (!tableContext.dragTarget) {
-			return;
-		}
-
-		const dropTarget = currentDropTarget?.closest<HTMLElement>('[role="columnheader"]');
-
-		if (dropTarget) {
-			tableContext.reorderColumn(dropTarget);
-		}
-
-		currentDropTarget = null;
-	}
-
-	function ariaSort(state: 'asc' | 'desc' | 'none'): 'ascending' | 'descending' | 'none' {
-		if (state === 'asc') {
-			return 'ascending';
-		}
-		if (state === 'desc') {
-			return 'descending';
-		}
-		return 'none';
-	}
-
-	function setDragTarget(def: ColumnDef<T>) {
-		tableContext.dragTarget = def;
-	}
-
-	const currentDropTargetId = $derived(
-		(currentDropTarget as HTMLElement | null | undefined)?.closest('[role="columnheader"]')?.id
-	);
-</script>
-
-<div
-	role="rowgroup"
-	class="datatable-header"
-	{oncontextmenu}
->
-	<div
-		role="row"
-		class="datatable-row header-row"
-	>
-		{#if showHighlightColumn}
-			<div
-				role="columnheader"
-				id="highlight-header"
-				class="cell header highlight-column pinned-left"
-				style="left: 0px"
-			>
-				<div class="th">
-					<HighlightAllHeader />
-				</div>
-			</div>
-		{/if}
-
-		{#each leftHeaders as header, index (header.id)}
-			<!-- eslint-disable-next-line @typescript-eslint/no-confusing-void-expression -->
-			{@render headerCell(header, 'left', leftOffsets[index])}
-		{/each}
-		{#each centreHeaders as header (header.id)}
-			<!-- eslint-disable-next-line @typescript-eslint/no-confusing-void-expression -->
-			{@render headerCell(header, undefined, 0)}
-		{/each}
-		{#each rightHeaders as header, index (header.id)}
-			<!-- eslint-disable-next-line @typescript-eslint/no-confusing-void-expression -->
-			{@render headerCell(header, 'right', rightOffsets[index])}
-		{/each}
-	</div>
-</div>
-
-{#snippet headerCell(header: AnyHeader<T>, side: 'left' | 'right' | undefined, offset: number)}
-	{@const headerId = `${tableContext.tableName}-header-${header.id}`}
-	<!-- svelte-ignore a11y_interactive_supports_focus -->
-	<div
-		role="columnheader"
-		id={headerId}
-		{@attach (node: HTMLElement) => observeHeader(node, header.column.id)}
-		draggable={tableContext.allowColumnReordering}
-		class="cell header"
-		class:pinned-left={side === 'left'}
-		class:pinned-right={side === 'right'}
-		class:action-column={!header.column.getCanSort()}
-		class:targeted={currentDropTargetId === headerId}
-		style:left={side === 'left' ? `${offset}px` : null}
-		style:right={side === 'right' ? `${offset}px` : null}
-		aria-sort={header.column.getCanSort() ? ariaSort(header.column.getIsSorted()) : undefined}
-		ondragstart={() => {
-			setDragTarget(header.column.columnDef);
-		}}
-		ondragover={(e) => {
-			e.preventDefault();
-			if (tableContext.dragTarget?.id !== header.id) {
-				setCurrentDropTarget(e.target);
-			} else {
-				setCurrentDropTarget(null);
-			}
-		}}
-		ondrop={onDrop}
-	>
-		{#if !header.isPlaceholder}
-			<div class="margin-right">
-				{#if header.column.getCanSort()}
-					<button
-						onmouseenter={(e) => {
-							showtooltip(e, header.column.columnDef);
-						}}
-						onmouseleave={() => {
-							hideTooltip(header.column.columnDef);
-						}}
-						class="contents"
-						onclick={() => debouncedSortToggle(header.column, header.column.getToggleSortingHandler())}
-					>
-						<div class="th cursor-pointer select-none">
-							<div class="header-text-wrapper">
-								{#if header.column.columnDef instanceof RowSelectionDef}
-									<SelectAllHeader />
-								{:else}
-									{#if header.column.columnDef instanceof ExpandDef}
-										<Icon
-											name={header.column.columnDef.headerIcon}
-											colour={Colour['$font-primary']}
-										/>
-									{:else if typeof header.column.columnDef.header == 'string'}
-										{header.column.columnDef.header}
-									{:else}
-										{@render header.column.columnDef.header()}
-									{/if}
-									<Icon
-										variant={Variant.HeaderIcon}
-										size={Size.Medium}
-										name={iconNames[header.column.getIsSorted()]}
-									/>
-								{/if}
-							</div>
-						</div>
-					</button>
-				{:else}
-					{@const isRowSelect = header.column.columnDef instanceof RowSelectionDef}
-					<!-- svelte-ignore a11y_no_static_element_interactions -->
-					<div
-						onmouseenter={(e) => {
-							showtooltip(e, header.column.columnDef);
-						}}
-						onmouseleave={() => {
-							hideTooltip(header.column.columnDef);
-						}}
-						class="contents"
-					>
-						<div
-							class="th"
-							class:nopadding={isRowSelect}
-						>
-							<div class="header-text-wrapper no-sort cursor-pointer select-none">
-								{#if isRowSelect}
-									<SelectAllHeader />
-								{:else if header.column.columnDef instanceof ExpandDef}
-									<Icon
-										name={header.column.columnDef.headerIcon}
-										colour={Colour['$font-primary']}
-									/>
-								{:else if typeof header.column.columnDef.header == 'string'}
-									{header.column.columnDef.header}
-								{:else}
-									{@render header.column.columnDef.header()}
-								{/if}
-							</div>
-						</div>
-					</div>
-				{/if}
-
-				{#if tableContext.enableResize}
-					<!-- svelte-ignore a11y_no_static_element_interactions -->
-					<div
-						onmousedown={(e) => {
-							e.preventDefault();
-							e.stopImmediatePropagation();
-							const handler = header.getResizeHandler();
-							handler(e);
-						}}
-						ondblclick={() => {
-							// Reset the column back to its factory-default width
-							// (clears the user-resized flag too, so the grid
-							// track returns to its original `minmax(W, 1fr)` /
-							// fixed-`${W}px` branch as configured).
-							header.column.columnDef.resetWidth();
-						}}
-						class="resizer right"
-						class:isResizing={header.column.getIsResizing()}
-					></div>
-				{/if}
-			</div>
-		{/if}
-	</div>
-{/snippet}
-
+<svelte:options runes />
+
+<script
+	module
+	lang="ts"
+>
+	import Icon from '../../Icon.svelte';
+	import { TooltipContext } from '../../../Contexts/TooltipContext.svelte.js';
+	import { Delay } from '../../../Delay/Delay.js';
+	import { Colour } from '../../../scss/colours.js';
+	import { Side } from '../../../Types/Internal/Side.js';
+	import { Size } from '../../../Types/Internal/Size.js';
+	import { Variant } from '../../../Types/Internal/Variant.js';
+	import { getContext } from 'svelte';
+	import type { ColumnDef } from '../Types/Columns/Definitions/ColumnDef.svelte.js';
+	import { ExpandDef } from '../Types/Columns/Definitions/Expand/ExpandDef.svelte.js';
+	import { RowSelectionDef } from '../Types/Columns/Definitions/RowSelection/RowSelectionDef.svelte.js';
+	import { TableContext } from '../Types/Context/TableContext.svelte.js';
+	import type { Primitive } from '../Types/Context/TableInitOptions.js';
+	import type { Header } from '../Types/Header.js';
+
+	/** Local alias: scoria's headers never carry custom filter generics here. */
+	type AnyHeader<T extends object> = Header<T, never>;
+	import HighlightAllHeader from './HighlightAllHeader.svelte';
+	import SelectAllHeader from './SelectAllHeader.svelte';
+	import type { TableHeadProps } from './TableHeadProps.js';
+
+	/** Per-column toggle queue. The header onclick funnels through this so
+	 *  multiple clicks inside the debounce window stack and apply on a
+	 *  single timer flush. A fast double-click thus cycles straight to
+	 *  desc (or clear-sort) without waiting for the asc state to apply and
+	 *  reload data first. ~150 ms is below the perceived-latency threshold
+	 *  while still wide enough to batch dblclicks. */
+	const SORT_DEBOUNCE_MS = 150;
+	const sortDebounce = new WeakMap<
+		object,
+		{ count: number; timer: ReturnType<typeof setTimeout> | null }
+	>();
+	function debouncedSortToggle(
+		columnRef: object,
+		// `never[]` rest sidesteps TypeScript's strict-function-type
+		// contravariance: any concrete handler signature (e.g. the
+		// MouseEvent-typed one tanstack returns) is assignable here, and
+		// the body never passes any args.
+		handler: ((...args: never[]) => void) | undefined
+	): void {
+		if (!handler) {
+			return;
+		}
+		let entry = sortDebounce.get(columnRef);
+		if (!entry) {
+			entry = { count: 0, timer: null };
+			sortDebounce.set(columnRef, entry);
+		}
+		entry.count += 1;
+		if (entry.timer != null) {
+			clearTimeout(entry.timer);
+		}
+		entry.timer = setTimeout(() => {
+			const toFire = entry!.count;
+			entry!.count = 0;
+			entry!.timer = null;
+			for (let i = 0; i < toFire; i++) {
+				handler();
+			}
+		}, SORT_DEBOUNCE_MS);
+	}
+</script>
+
+<script
+	lang="ts"
+	generics="T extends object, IdType extends Primitive"
+>
+	const { oncontextmenu }: TableHeadProps = $props();
+
+	const tableContext = getContext<TableContext<T, IdType>>(TableContext.identifier);
+	const tooltipContext = getContext<TooltipContext>(TooltipContext.identifier);
+
+	const leftHeaders: Array<AnyHeader<T>> = $derived.by(() => {
+		void tableContext.table.columnVisibility;
+		void tableContext.table.columnPinning.left?.size;
+		void tableContext.table.columnPinning.right?.size;
+		return tableContext.table.getLeftHeaderGroups().flatMap((it) => it.headers);
+	});
+
+	const centreHeaders: Array<AnyHeader<T>> = $derived.by(() => {
+		void tableContext.table.columnVisibility;
+		void tableContext.table.columnPinning.left?.size;
+		void tableContext.table.columnPinning.right?.size;
+		return tableContext.table.getCenterHeaderGroups().flatMap((it) => it.headers);
+	});
+
+	const rightHeaders: Array<AnyHeader<T>> = $derived.by(() => {
+		void tableContext.table.columnVisibility;
+		void tableContext.table.columnPinning.left?.size;
+		void tableContext.table.columnPinning.right?.size;
+		return tableContext.table.getRightHeaderGroups().flatMap((it) => it.headers);
+	});
+
+	// Cumulative pinning offsets for sticky-positioned cells. Each
+	// pinned-left cell anchors to `left: (sum of preceding pinned-left
+	// widths)`; pinned-right cells anchor to `right: (sum of following
+	// pinned-right widths)`. Recomputed on resize-handle drag and
+	// column-sizing reset.
+	//
+	// Rendered widths come from the shared context map populated by the
+	// ResizeObserver below. The `header.getSize()` fallback (declared
+	// width) covers the first frame before the observer fires.
+	function renderedWidth(columnId: string, declared: number): number {
+		return tableContext._columnRenderedWidths.get(columnId) ?? declared;
+	}
+
+	// Single ResizeObserver shared across all header cells. Each
+	// `<div role="columnheader">` registers via the `observeHeader`
+	// attachment; the callback writes the cell's rendered inline-size
+	// into `_columnRenderedWidths` so TableRow / TableHead / TableBody
+	// can read accurate sticky pinning offsets.
+	// eslint-disable-next-line svelte/prefer-svelte-reactivity
+	const elementToColumnId = new WeakMap<Element, string>();
+	const headerObserver =
+		typeof ResizeObserver === 'undefined'
+			? null
+			: new ResizeObserver((entries) => {
+					for (const entry of entries) {
+						const columnId = elementToColumnId.get(entry.target);
+						if (columnId == null) {
+							continue;
+						}
+						const inlineSize = entry.borderBoxSize[0]?.inlineSize ?? entry.contentRect.width;
+						tableContext._columnRenderedWidths.set(columnId, inlineSize);
+					}
+				});
+
+	$effect(() => () => {
+		headerObserver?.disconnect();
+	});
+
+	function observeHeader(node: HTMLElement, columnId: string): () => void {
+		if (!headerObserver) {
+			return () => {};
+		}
+		elementToColumnId.set(node, columnId);
+		headerObserver.observe(node);
+		return () => {
+			headerObserver.unobserve(node);
+			elementToColumnId.delete(node);
+			tableContext._columnRenderedWidths.delete(columnId);
+		};
+	}
+
+	const leftOffsets: Array<number> = $derived.by(() => {
+		void tableContext._columnRenderedWidths.size;
+		const offsets: Array<number> = [];
+		// Highlight column is 20px wide and the first pinned-left cell
+		// when present, so subsequent pinned-left headers offset past it.
+		let cumulative = showHighlightColumn ? 20 : 0;
+		for (const header of leftHeaders) {
+			offsets.push(cumulative);
+			cumulative += renderedWidth(header.column.id, header.getSize());
+		}
+		return offsets;
+	});
+
+	const rightOffsets: Array<number> = $derived.by(() => {
+		void tableContext._columnRenderedWidths.size;
+		const offsets = new Array<number>(rightHeaders.length).fill(0);
+		let cumulative = 0;
+		for (let i = rightHeaders.length - 1; i >= 0; i--) {
+			offsets[i] = cumulative;
+			cumulative += renderedWidth(rightHeaders[i].column.id, rightHeaders[i].getSize());
+		}
+		return offsets;
+	});
+
+	const showHighlightColumn = $derived(
+		leftHeaders.length > 0 || centreHeaders.length > 0 || rightHeaders.length > 0
+	);
+
+	const iconNames = {
+		asc: 'sort-asc',
+		desc: 'sort-desc',
+		none: 'sort-none',
+	} as const;
+
+	let currentDropTarget: HTMLElement | null = $state(null);
+
+	function setCurrentDropTarget(target: EventTarget | null) {
+		currentDropTarget = target as HTMLElement | null;
+	}
+
+	function showtooltip(e: MouseEvent, columnDef: ColumnDef<T>): void {
+		if (columnDef instanceof ExpandDef) {
+			const rect = (e.target as HTMLElement)
+				.closest('[role="columnheader"]')
+				?.getBoundingClientRect();
+
+			if (!rect) {
+				console.warn('could not find closest columnheader');
+
+				return;
+			}
+
+			tooltipContext.showTooltip({
+				text: `Show ${typeof columnDef.header === 'string' ? columnDef.header : columnDef.id}`,
+				arrow: Side.Bottom,
+				delay: Delay.Default,
+				rect,
+			});
+		}
+	}
+
+	function hideTooltip(columnDef: ColumnDef<T>): void {
+		if (columnDef instanceof ExpandDef) {
+			tooltipContext.hideTooltip(
+				`Show ${typeof columnDef.header === 'string' ? columnDef.header : columnDef.id}`
+			);
+		}
+	}
+
+	function onDrop() {
+		if (!tableContext.dragTarget) {
+			return;
+		}
+
+		const dropTarget = currentDropTarget?.closest<HTMLElement>('[role="columnheader"]');
+
+		if (dropTarget) {
+			tableContext.reorderColumn(dropTarget);
+		}
+
+		currentDropTarget = null;
+	}
+
+	function ariaSort(state: 'asc' | 'desc' | 'none'): 'ascending' | 'descending' | 'none' {
+		if (state === 'asc') {
+			return 'ascending';
+		}
+		if (state === 'desc') {
+			return 'descending';
+		}
+		return 'none';
+	}
+
+	function setDragTarget(def: ColumnDef<T>) {
+		tableContext.dragTarget = def;
+	}
+
+	const currentDropTargetId = $derived(
+		(currentDropTarget as HTMLElement | null | undefined)?.closest('[role="columnheader"]')?.id
+	);
+</script>
+
+<div
+	role="rowgroup"
+	class="datatable-header"
+	{oncontextmenu}
+>
+	<div
+		role="row"
+		class="datatable-row header-row"
+	>
+		{#if showHighlightColumn}
+			<div
+				role="columnheader"
+				id="highlight-header"
+				class="cell header highlight-column pinned-left"
+				style="left: 0px"
+			>
+				<div class="th">
+					<HighlightAllHeader />
+				</div>
+			</div>
+		{/if}
+
+		{#each leftHeaders as header, index (header.id)}
+			<!-- eslint-disable-next-line @typescript-eslint/no-confusing-void-expression -->
+			{@render headerCell(header, 'left', leftOffsets[index])}
+		{/each}
+		{#each centreHeaders as header (header.id)}
+			<!-- eslint-disable-next-line @typescript-eslint/no-confusing-void-expression -->
+			{@render headerCell(header, undefined, 0)}
+		{/each}
+		{#each rightHeaders as header, index (header.id)}
+			<!-- eslint-disable-next-line @typescript-eslint/no-confusing-void-expression -->
+			{@render headerCell(header, 'right', rightOffsets[index])}
+		{/each}
+	</div>
+</div>
+
+{#snippet headerCell(header: AnyHeader<T>, side: 'left' | 'right' | undefined, offset: number)}
+	{@const headerId = `${tableContext.tableName}-header-${header.id}`}
+	<!-- svelte-ignore a11y_interactive_supports_focus -->
+	<div
+		role="columnheader"
+		id={headerId}
+		{@attach (node: HTMLElement) => observeHeader(node, header.column.id)}
+		draggable={tableContext.allowColumnReordering}
+		class="cell header"
+		class:pinned-left={side === 'left'}
+		class:pinned-right={side === 'right'}
+		class:action-column={!header.column.getCanSort()}
+		class:targeted={currentDropTargetId === headerId}
+		style:left={side === 'left' ? `${offset}px` : null}
+		style:right={side === 'right' ? `${offset}px` : null}
+		aria-sort={header.column.getCanSort() ? ariaSort(header.column.getIsSorted()) : undefined}
+		ondragstart={() => {
+			setDragTarget(header.column.columnDef);
+		}}
+		ondragover={(e) => {
+			e.preventDefault();
+			if (tableContext.dragTarget?.id !== header.id) {
+				setCurrentDropTarget(e.target);
+			} else {
+				setCurrentDropTarget(null);
+			}
+		}}
+		ondrop={onDrop}
+	>
+		{#if !header.isPlaceholder}
+			<div class="margin-right">
+				{#if header.column.getCanSort()}
+					<button
+						onmouseenter={(e) => {
+							showtooltip(e, header.column.columnDef);
+						}}
+						onmouseleave={() => {
+							hideTooltip(header.column.columnDef);
+						}}
+						class="contents"
+						onclick={() => debouncedSortToggle(header.column, header.column.getToggleSortingHandler())}
+					>
+						<div class="th cursor-pointer select-none">
+							<div class="header-text-wrapper">
+								{#if header.column.columnDef instanceof RowSelectionDef}
+									<SelectAllHeader />
+								{:else}
+									{#if header.column.columnDef instanceof ExpandDef}
+										<Icon
+											name={header.column.columnDef.headerIcon}
+											colour={Colour['$font-primary']}
+										/>
+									{:else if typeof header.column.columnDef.header == 'string'}
+										{header.column.columnDef.header}
+									{:else}
+										{@render header.column.columnDef.header()}
+									{/if}
+									<Icon
+										variant={Variant.HeaderIcon}
+										size={Size.Medium}
+										name={iconNames[header.column.getIsSorted()]}
+									/>
+								{/if}
+							</div>
+						</div>
+					</button>
+				{:else}
+					{@const isRowSelect = header.column.columnDef instanceof RowSelectionDef}
+					<!-- svelte-ignore a11y_no_static_element_interactions -->
+					<div
+						onmouseenter={(e) => {
+							showtooltip(e, header.column.columnDef);
+						}}
+						onmouseleave={() => {
+							hideTooltip(header.column.columnDef);
+						}}
+						class="contents"
+					>
+						<div
+							class="th"
+							class:nopadding={isRowSelect}
+						>
+							<div class="header-text-wrapper no-sort cursor-pointer select-none">
+								{#if isRowSelect}
+									<SelectAllHeader />
+								{:else if header.column.columnDef instanceof ExpandDef}
+									<Icon
+										name={header.column.columnDef.headerIcon}
+										colour={Colour['$font-primary']}
+									/>
+								{:else if typeof header.column.columnDef.header == 'string'}
+									{header.column.columnDef.header}
+								{:else}
+									{@render header.column.columnDef.header()}
+								{/if}
+							</div>
+						</div>
+					</div>
+				{/if}
+
+				{#if tableContext.enableResize}
+					<!-- svelte-ignore a11y_no_static_element_interactions -->
+					<div
+						onmousedown={(e) => {
+							e.preventDefault();
+							e.stopImmediatePropagation();
+							const handler = header.getResizeHandler();
+							handler(e);
+						}}
+						ondblclick={() => {
+							// Reset the column to its factory-default width and
+							// clear the user-resized flag so the grid track
+							// returns to its original `minmax(W, 1fr)` or
+							// fixed-`${W}px` branch.
+							header.column.columnDef.resetWidth();
+						}}
+						class="resizer right"
+						class:isResizing={header.column.getIsResizing()}
+					></div>
+				{/if}
+			</div>
+		{/if}
+	</div>
+{/snippet}
+
 <style>.cell.header {
   position: relative;
   min-width: 0;
@@ -560,4 +562,4 @@ div.th::after {
   width: 20px;
   overflow: hidden;
   border-right: solid 1px #cbd4da;
-}</style>
+}</style>