@lavalogic/scoria 0.36.0 → 0.37.0

package/dist/Components/Table/Table.svelte

@@ -8,12 +8,9 @@
 		ContextMenuContext,
 		type IContextMenuOption,
 	} from '../../Contexts/ContextMenuContext.svelte';
-	import { devCatch, refWrapper } from '../../Helpers/Helpers.svelte';
-	import type { RefWrapper } from '../../Types/Internal/RefWrapper.js';
+	import { cssLength, devCatch, refWrapper } from '../../Helpers/Helpers.svelte';
 	import { getContext, onMount, setContext, tick, untrack } from 'svelte';
 	import LoadingOverlay from '../LoadingOverlay.svelte';
-	import type { HeightData } from './Body/HeightData.js';
-	import { shownPopup } from './Body/Rows/Columns/ActionsCell.svelte';
 	import TableBody from './Body/TableBody.svelte';
 	import TableHead from './Headers/TableHead.svelte';
 	import TableFooter from './Misc/TableFooter.svelte';
@@ -32,24 +29,61 @@
 		}
 	}
 
+	/**
+	 * Top-level orchestrator props. Accepts either:
+	 *
+	 * - `table`: the structured `Table` instance returned by `createTable(...)`.
+	 *   This is the consumer-facing form.
+	 * - `tableContext`: the underlying `TableContext`. Used internally by
+	 *   `NestedTable` which constructs a context directly for each
+	 *   expansion. Not intended for consumer use.
+	 *
+	 * Exactly one of the two must be supplied; a runtime guard inside the
+	 * component throws if both are missing. The reference passed in is
+	 * captured at mount via `setContext` and should not be reassigned
+	 * afterwards.
+	 */
 	export interface TableProps<T extends object, IdType extends Primitive> {
-		readonly tableContext: TableContext<T, IdType>;
+		readonly table?: { readonly _context: TableContext<T, IdType> };
+		readonly tableContext?: TableContext<T, IdType>;
 		nested?: boolean;
 	}
 
+	/**
+	 * Symbol used to share the currently-open quick-filter select across
+	 * every header in a single Table tree. Stored via `setContext` on
+	 * the same component that hosts the Table tree so multiple
+	 * independent tables on a page each own their own popup state.
+	 */
 	export const quickFilterContextIdentifier: symbol = Symbol();
 
-	const openedQuickFilterSelect = refWrapper(null);
+	const openedQuickFilterSelect = refWrapper<symbol | null>(null);
 </script>
 
 <script
 	lang="ts"
 	generics="T extends object,IdType extends Primitive"
 >
-	const { nested = false, tableContext }: TableProps<T, IdType> = $props();
+	const { nested = false, table, tableContext: tableContextProp }: TableProps<T, IdType> = $props();
+
+	// Resolve the underlying TableContext from whichever prop the caller
+	// passed. Consumers pass `table` (the structured instance); the
+	// internal `NestedTable` passes `tableContext` directly. Exactly one
+	// must be present; throw cleanly otherwise so the failure mode is
+	// obvious rather than a downstream null-deref. Result is bound to a
+	// `tableContext` const so the existing 30+ references in this file
+	// keep resolving without per-site renames.
+	const tableContext: TableContext<T, IdType> = (() => {
+		const ctx = table?._context ?? tableContextProp;
+		if (!ctx) {
+			throw new Error(
+				'scoria: <Table /> requires either a `table` prop (the structured instance returned by createTable) or a `tableContext` prop (used internally by NestedTable).'
+			);
+		}
+		return ctx;
+	})();
 
 	// NOTE: known limitation. This is passed as a wrapper, and they should never require reassignment. It is deeply reactive
-	// svelte-ignore state_referenced_locally
 	setContext(TableContext.identifier, tableContext);
 
 	const { openContextMenu: _openContextMenu } = getContext<ContextMenuContext>(
@@ -61,6 +95,10 @@
 
 	setContext(quickFilterContextIdentifier, openedQuickFilterSelect);
 
+	// Focus-restore on focusStart change. The query/focus DOM work runs
+	// inside `untrack` so a future selector tweak that reads reactive
+	// state (e.g. document.activeElement) does not retrigger this
+	// effect on every focus change.
 	$effect(() => {
 		void tableContext.focusStart;
 		void ref;
@@ -89,21 +127,35 @@
 		});
 	});
 
+	// Scroll-into-view on focusEnd change. The DOM work is wrapped in
+	// untrack so reading layout properties from the queried cell never
+	// silently re-establishes a reactive dependency.
 	$effect(() => {
-		if (tableContext.focusEnd && ref) {
-			const { row, column: index } = tableContext.focusEnd;
-			const cell = ref.querySelector(
-				`#${tableContext.tableName}-cell-${row}-${tableContext.columnDefs[index].id}`
-			) as HTMLElement | undefined;
-
-			cell?.scrollIntoView({
-				behavior: 'instant',
-				block: 'nearest',
-				inline: 'nearest',
-			});
-		}
+		void tableContext.focusEnd;
+		void ref;
+		untrack(() => {
+			if (tableContext.focusEnd && ref) {
+				const { row, column: index } = tableContext.focusEnd;
+				const cell = ref.querySelector(
+					`#${tableContext.tableName}-cell-${row}-${tableContext.columnDefs[index].id}`
+				) as HTMLElement | undefined;
+
+				cell?.scrollIntoView({
+					behavior: 'instant',
+					block: 'nearest',
+					inline: 'nearest',
+				});
+			}
+		});
 	});
 
+	/**
+	 * Routes a right-click into either a "focus the cell that was
+	 * clicked" path (if the click landed on a cell other than the
+	 * current focus) or a "show copy options" context menu (when the
+	 * Table is configured with `allowCopy` and the platform exposes the
+	 * Clipboard API).
+	 */
 	function openContextMenu(e: MouseEvent) {
 		e.stopPropagation();
 
@@ -126,7 +178,11 @@
 			) {
 				const columnIndex = tableContext.columnDefs.find((it) => it.id === columnId)?.index;
 
-				if (columnIndex) {
+				// Use `!= null` rather than a truthy check so a column at
+				// memory index 0 (the leftmost column) is not silently
+				// rejected. The previous truthy check broke right-click
+				// copy on the first column.
+				if (columnIndex != null) {
 					tableContext.moveFocus({
 						column: columnIndex,
 						row,
@@ -163,16 +219,30 @@
 		}
 	}
 
+	/**
+	 * Closes the quick-filter popup and the actions-cell popup whenever
+	 * the user clicks somewhere that is not inside either floating UI.
+	 */
 	function handleClickOutside(e: MouseEvent) {
 		const target = e.target as HTMLElement;
 		if (target.isConnected) {
-			if (target.closest('div.floating') == null && target.closest('div.stick-right') == null) {
+			// A click in a teleported Svelecte dropdown (see
+			// `Helpers/dropdownPortal.ts`) is a logical extension of
+			// the trigger inside the quick-filter popup, so it must
+			// not close either floating popover. The portal helper
+			// sets `data-scoria-portal-dropdown` on the dropdown
+			// while it is teleported to `document.body`.
+			const insidePortalDropdown = target.closest('[data-scoria-portal-dropdown]') != null;
+			if (
+				!insidePortalDropdown &&
+				target.closest('div.floating') == null &&
+				target.closest('div.stick-right') == null
+			) {
 				openedQuickFilterSelect.value = null;
 			}
 
-			if (target.closest('div.slot-wrapper') == null) {
-				// svelte type gen/eslint miscommunication
-				(shownPopup as RefWrapper<symbol | undefined>).value = undefined;
+			if (!insidePortalDropdown && target.closest('div.slot-wrapper') == null) {
+				tableContext.shownActionsPopup = undefined;
 			}
 		}
 	}
@@ -182,29 +252,40 @@
 	let remPxRatio = $state(0);
 	const minNestedHeight = $derived(20 * remPxRatio);
 
-	// HACK please figure this one out
-	let nestedHeight = $derived(minNestedHeight);
+	let nestedHeight = $state(0);
+	$effect.pre(() => {
+		if (!isResizing) {
+			nestedHeight = minNestedHeight;
+		}
+	});
 
-	let tableRef: HTMLDivElement | undefined = undefined;
+	let tableRef: HTMLDivElement | undefined = $state();
 	let mousedDownEmptySpace = $state(false);
 
 	onMount(() => {
 		remPxRatio = parseFloat(getComputedStyle(document.documentElement).fontSize);
 	});
 
-	function addOverrideResizeHandler() {
-		isResizing = true;
+	$effect(() => {
+		if (!isResizing) {
+			return;
+		}
+		const onResize = (e: MouseEvent) => {
+			const sliderHeight = tableRef ? e.clientY - tableRef.getBoundingClientRect().top : 0;
+			nestedHeight = Math.max(sliderHeight, minNestedHeight);
+		};
 		window.addEventListener('mousemove', onResize);
-	}
+		return () => {
+			window.removeEventListener('mousemove', onResize);
+		};
+	});
 
-	function onResize(e: MouseEvent) {
-		const sliderHeight = tableRef ? e.clientY - tableRef.getBoundingClientRect().top : 0;
-		nestedHeight = Math.max(sliderHeight, minNestedHeight);
+	function addOverrideResizeHandler() {
+		isResizing = true;
 	}
 
 	function removeOverrideResizeHandler() {
 		isResizing = false;
-		window.removeEventListener('mousemove', onResize);
 	}
 
 	const usesLoading = $derived(
@@ -225,10 +306,11 @@
 
 	$effect(() => {
 		if ((shouldUnfocusRemote || shouldUnfocusLocal) && unfocusRef) {
+			const el = unfocusRef;
 			untrack(() => {
 				tableContext.unfocus();
+				el.scrollTop = 0;
 			});
-			unfocusRef.scrollTop = 0;
 		} else if (usesLoading && tableContext.paginationRepo?.isLoading === false) {
 			// refocus same element after a reload
 			// this does not break mutifocus
@@ -241,77 +323,234 @@
 
 				tick()
 					.then(() => {
-						if (idToFocusTo) {
-							(document.querySelector(idToFocusTo) as HTMLTableCellElement | undefined)?.focus();
-						}
+						(document.querySelector(idToFocusTo) as HTMLElement | undefined)?.focus();
 					})
 					.catch(devCatch);
 			});
 		}
 	});
 
-	const leftTotalSize = $derived(tableContext.table.getLeftTotalSize());
-	const centreTotalSize = $derived(tableContext.table.getCenterTotalSize());
-	const rightTotalSize = $derived(tableContext.table.getRightTotalSize());
-
 	const leftColumns = $derived(tableContext.table.getLeftVisibleLeafColumns());
 	const centreColumns = $derived(tableContext.table.getCenterVisibleLeafColumns());
 	const rightColumns = $derived(tableContext.table.getRightVisibleLeafColumns());
 
-	const appropriateSide = $derived.by(() => {
-		if (leftColumns.length > 0) {
-			return 'left';
-		} else if (rightColumns.length != tableContext.columnDefs.length) {
-			return 'centre';
-		} else {
-			return 'right';
+	const visibleColumns = $derived([...leftColumns, ...centreColumns, ...rightColumns]);
+
+	// CSS Grid template for the table.
+	//
+	// - First track is the highlight column (always present, fixed at
+	//   20px to match the existing visual).
+	// - Each other track uses one of two strategies based on the
+	//   column's `userResized` flag:
+	//   - `userResized = false` (default): `minmax(width, 1fr)`. The
+	//     column flexes to share the row's remaining horizontal space
+	//     so the grid fills the container, and it automatically takes
+	//     back any space a sibling column gives up when shrunk - this
+	//     means the table never ends up narrower than its container
+	//     while any column is still in the flexible set.
+	//   - `userResized = true`: `${width}px` (fixed). The column sits
+	//     at exactly the size the user dragged it to, and dragging the
+	//     handle again only changes this column - other user-resized
+	//     columns keep their explicit widths and non-resized columns
+	//     just adjust their flex share.
+	// - Pinned and centre columns use the same per-column rule so
+	//   toggling a column's pin state does not change its width.
+	// - Sticky-cell offsets are read from `_columnRenderedWidths`
+	//   (populated by TableHead's ResizeObserver), which gives
+	//   accurate sticky positions in both states.
+	const colsTemplate = $derived.by(() => {
+		void tableContext.columnSizing;
+		const track = (col: { columnDef: { width: number; userResized: boolean } }) =>
+			col.columnDef.userResized
+				? `${col.columnDef.width}px`
+				: `minmax(${col.columnDef.width}px, 1fr)`;
+		const tracks: Array<string> = ['20px'];
+		for (const col of leftColumns) {
+			tracks.push(track(col));
+		}
+		for (const col of centreColumns) {
+			tracks.push(track(col));
 		}
+		for (const col of rightColumns) {
+			tracks.push(track(col));
+		}
+		return tracks.join(' ');
 	});
 
-	type SvelteTableElement = {
-		rowHeights: RefWrapper<Array<number>>;
-	};
+	// Total rendered width of the pinned-left and pinned-right column
+	// stacks. Driven by `_columnRenderedWidths` (populated by
+	// TableHead's ResizeObserver) so the values track actual layout,
+	// not the declared `columnDef.width`. Exposed to CSS via
+	// `--pinned-left` / `--pinned-right` on `.datatable`; the SCSS
+	// then uses them in `scroll-padding-left` / `scroll-padding-right`
+	// so that `scrollIntoView` (called by keyboard arrow navigation
+	// and tab focus restore) keeps the focused cell out from behind
+	// the pinned columns. The highlight column is always 20px and
+	// always pinned-left when present, so it is added to the left
+	// total unconditionally.
+	const totalPinnedLeftWidth = $derived.by(() => {
+		void tableContext._columnRenderedWidths.size;
+		let total = 20;
+		for (const col of leftColumns) {
+			total += tableContext._columnRenderedWidths.get(col.id) ?? col.columnDef.width;
+		}
+		return total;
+	});
+	const totalPinnedRightWidth = $derived.by(() => {
+		void tableContext._columnRenderedWidths.size;
+		let total = 0;
+		for (const col of rightColumns) {
+			total += tableContext._columnRenderedWidths.get(col.id) ?? col.columnDef.width;
+		}
+		return total;
+	});
 
-	let leftTable: SvelteTableElement | undefined = $state();
-	let centreTable: SvelteTableElement | undefined = $state();
-	let rightTable: SvelteTableElement | undefined = $state();
+	// Phase 7.4 row virtualisation - wire the single scroll listener
+	// for the shared scroll container. The single grid container is
+	// the scroll host now (the previous three-table siblings have
+	// collapsed into one).
+	//
+	// The same handler also drives `hasScrolledPastHeader` /
+	// `hasContentBelowFooter`, which feed the CSS variables that
+	// gate the sticky-row drop shadows. The shadows only appear when
+	// there is actually content scrolled under the relevant sticky
+	// row, so a freshly mounted (or fully-in-viewport) table shows no
+	// shadows.
+	let hasScrolledPastHeader = $state(false);
+	let hasContentBelowFooter = $state(false);
+
+	// Measured rendered height of the sticky strip at the top of
+	// `.datatable` (header row + quick-filter row when active).
+	// Drives `scroll-padding-top` via `--sticky-top-height` on
+	// `.datatable`, so `scrollIntoView` (keyboard arrow navigation,
+	// focus restore) parks the focused cell below the actual strip
+	// even at sub-pixel rounding and any borders. Using `calc(var(--height) + 61px)`
+	// statically left a 1-2px gap that hid the top edge of the
+	// first visible body row when navigating to it.
+	let stickyTopHeight: number = $state(0);
+
+	function recomputeScrollShadows(): void {
+		if (!tableRef) {
+			hasScrolledPastHeader = false;
+			hasContentBelowFooter = false;
+			return;
+		}
+		// `.datatable` has `overflow-x: auto`. Per the CSS spec, when
+		// one overflow axis is non-visible the other axis becomes
+		// auto too, so `.datatable` is itself the vertical scroll
+		// container for the sticky header / footer when the table
+		// is constrained inside a fixed-height parent (the typical
+		// app shell). Detect that internal scroll directly.
+		const internalScrolledPast = tableRef.scrollTop > 0;
+		const internalContentBelow =
+			tableRef.scrollTop + tableRef.clientHeight < tableRef.scrollHeight - 1;
+		// Fall back to window-relative checks for the case where the
+		// table is not constrained and the page itself is the scroll
+		// container (e.g. a story with no wrapper height).
+		const rect = tableRef.getBoundingClientRect();
+		const windowScrolledPast = rect.top < 0;
+		const windowContentBelow = rect.bottom > window.innerHeight;
+		hasScrolledPastHeader = internalScrolledPast || windowScrolledPast;
+		hasContentBelowFooter = internalContentBelow || windowContentBelow;
+	}
 
-	const totalRowSizes: Array<HeightData<T>> = $derived.by(() => {
-		if (!leftTable || !centreTable || !rightTable) {
-			return [];
+	$effect(() => {
+		void tableRef;
+		void unfocusRef;
+		const handler = (e: Event): void => {
+			const el = e.currentTarget as HTMLElement | null;
+			if (!el) {
+				return;
+			}
+			tableContext._virtualisation.registerScrollPosition(el.scrollTop, el.clientHeight);
+			// Internal scroll inside `.datatable` is the sticky-context
+			// for the header / footer in the constrained-height case,
+			// so the shadow flags need to refresh on every internal
+			// scroll, not just window scroll. Without this, scrolling
+			// the table body never flips `hasScrolledPastHeader` /
+			// `hasContentBelowFooter` and the shadows never appear.
+			recomputeScrollShadows();
+		};
+		const elements: Array<HTMLElement> = [];
+		if (tableRef) {
+			elements.push(tableRef);
+		}
+		if (unfocusRef && unfocusRef !== tableRef) {
+			elements.push(unfocusRef);
+		}
+		for (const el of elements) {
+			el.addEventListener('scroll', handler, { passive: true });
+		}
+		const primary = tableRef ?? unfocusRef;
+		if (primary) {
+			tableContext._virtualisation.registerScrollPosition(primary.scrollTop, primary.clientHeight);
 		}
 
-		// console.debug(`got refs for all tables`);
-		const centre = centreTable.rowHeights.value;
-		const right = rightTable.rowHeights.value;
+		// Window-level scroll + resize cover the case where the table
+		// is not constrained and the page itself scrolls instead.
+		// `recomputeScrollShadows` checks both internal and window-level
+		// scroll position so either path flips the shadow flags.
+		const onWindow = (): void => {
+			recomputeScrollShadows();
+		};
+		window.addEventListener('scroll', onWindow, { passive: true });
+		window.addEventListener('resize', onWindow, { passive: true });
+
+		// Content-height changes (rows added / removed, pagination
+		// turning the page, expand toggled) flip whether there is
+		// anything below the footer or above the header, so shadow
+		// flags need to re-evaluate any time the table's intrinsic
+		// height changes - not just on actual user scroll.
+		const ro =
+			typeof ResizeObserver === 'undefined'
+				? null
+				: new ResizeObserver(() => {
+						recomputeScrollShadows();
+					});
+		if (ro && tableRef) {
+			ro.observe(tableRef);
+		}
 
-		return leftTable.rowHeights.value.map((_leftHeight, index) => {
-			const leftHeight = _leftHeight || 0;
-			const centreHeight = centre[index] || 0;
-			const rightHeight = right[index] || 0;
+		// Measure the actual rendered height of the sticky strip
+		// (header row + quick-filter row when active) so
+		// `scroll-padding-top` matches it to the pixel. Static
+		// `calc(var(--height) + 61px)` ignored the header's
+		// border-bottom plus any sub-pixel rounding, leaving the
+		// first visible body row 1-2px behind the strip when
+		// `scrollIntoView` parked it at the top edge.
+		const measureStickyTop = (): void => {
+			if (!tableRef) {
+				return;
+			}
+			const headerRow = tableRef.querySelector('.datatable-row.header-row') as HTMLElement | null;
+			const filterRow = tableRef.querySelector(
+				'.datatable-row.quick-filter-row'
+			) as HTMLElement | null;
+			stickyTopHeight = (headerRow?.offsetHeight ?? 0) + (filterRow?.offsetHeight ?? 0);
+		};
+		const stickyRo =
+			typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(measureStickyTop);
+		if (stickyRo && tableRef) {
+			// Observe the scroll host so any change inside (mode
+			// toggle, rows added, etc.) re-measures on the next frame.
+			stickyRo.observe(tableRef);
+		}
+		// Initial measurement so the very first focus / arrow-key
+		// navigation lands below the strip without waiting for the
+		// observer's first frame.
+		measureStickyTop();
 
-			const maxHeight = Math.max(leftHeight, centreHeight, rightHeight);
-			const applyTo: HeightData<T>['applyTo'] = [];
+		recomputeScrollShadows();
 
-			if (leftHeight < maxHeight) {
-				// console.debug(`left (${leftHeight}) was lower than max (${maxHeight})`);
-				applyTo.push('left');
+		return () => {
+			for (const el of elements) {
+				el.removeEventListener('scroll', handler);
 			}
-			if (centreHeight < maxHeight) {
-				// console.debug(`centre (${centreHeight}) was lower than max (${maxHeight})`);
-				applyTo.push('centre');
-			}
-			if (rightHeight < maxHeight) {
-				// console.debug(`right (${rightHeight}) was lower than max (${maxHeight})`);
-				applyTo.push('right');
-			}
-
-			return {
-				index,
-				applyTo,
-				maxHeight,
-			};
-		});
+			window.removeEventListener('scroll', onWindow);
+			window.removeEventListener('resize', onWindow);
+			ro?.disconnect();
+			stickyRo?.disconnect();
+		};
 	});
 </script>
 
@@ -347,11 +586,14 @@
 <div
 	class="grid"
 	class:nested
+	style="--show-top-shadow: {hasScrolledPastHeader
+		? 1
+		: 0}; --show-bottom-shadow: {hasContentBelowFooter ? 1 : 0};"
 >
 	{#if tableContext.dataRepo.isLoading}
 		<LoadingOverlay
 			absolute
-			borderRadius="4px"
+			borderRadius={cssLength('4px')}
 			message={tableContext.dataRepo.loadingMessage}
 		/>
 	{/if}
@@ -402,6 +644,7 @@
 		class:compact={tableContext.isCompact}
 		class:quick-filtering={tableContext.showQuickFiltering}
 		onkeydown={tableContext.handleTdKeydown}
+		style="--pinned-left: {totalPinnedLeftWidth}px; --pinned-right: {totalPinnedRightWidth}px; --sticky-top-height: {stickyTopHeight}px;"
 	>
 		<div
 			class="flex_table"
@@ -413,66 +656,15 @@
 				class="table-wrapper"
 				oncontextmenu={openContextMenu}
 			>
-				<!-- {#if leftTotalSize > 0} -->
-				<table
-					class="datatable__table left"
-					style="min-width: {leftTotalSize}px"
+				<div
+					role="table"
+					class="datatable-grid"
+					style="--cols: {colsTemplate};"
 				>
-					<TableHead
-						showHighlight={leftTotalSize > 0}
-						side="left"
-					/>
-					<TableBody
-						includeHighlight={appropriateSide == 'left'}
-						columns={leftColumns}
-						side="left"
-						heights={totalRowSizes}
-						bind:this={leftTable}
-					/>
-				</table>
-				<!-- {/if} -->
-
-				<!-- {#if centreTotalSize > 0} -->
-
-				<table
-					class="datatable__table centre"
-					style="min-width: {centreTotalSize}px"
-				>
-					<TableHead
-						showHighlight={leftTotalSize == 0}
-						side="centre"
-					/>
-					<TableBody
-						includeHighlight={appropriateSide == 'centre'}
-						columns={centreColumns}
-						side="centre"
-						heights={totalRowSizes}
-						bind:this={centreTable}
-					/>
-				</table>
-				<!-- {/if} -->
-
-				<!-- {#if rightTotalSize > 0} -->
-				<table
-					class="datatable__table right"
-					style="min-width: {rightTotalSize}px"
-				>
-					<TableHead
-						showHighlight={false}
-						side="right"
-					/>
-					<TableBody
-						includeHighlight={appropriateSide == 'right'}
-						columns={rightColumns}
-						side="right"
-						heights={totalRowSizes}
-						bind:this={rightTable}
-					/>
-				</table>
-				<!-- {/if} -->
+					<TableHead />
+					<TableBody />
+				</div>
 			</div>
-
-			<!-- TODO add filter callbacks -->
 		</div>
 
 		{#if nested}
@@ -552,14 +744,6 @@ div.resizer.isResizing {
   opacity: 1;
 }
 
-.left {
-  border-right: solid 2px #3a4952;
-}
-
-.right {
-  border-left: solid 2px #3a4952;
-}
-
 div.sidebar-wrapper {
   display: flex;
   flex-flow: row nowrap;
@@ -604,7 +788,6 @@ div.sidebar-wrapper .sidebar.toolbar-right {
   position: relative;
   flex-grow: 2;
   max-height: 100%;
-  scroll-padding-top: calc(3rem + 0px);
 }
 
 .datatable {
@@ -621,6 +804,9 @@ div.sidebar-wrapper .sidebar.toolbar-right {
   height: 100%;
   flex-grow: 1;
   --progress-bar-radius: 18px;
+  scroll-padding-top: var(--sticky-top-height, 0px);
+  scroll-padding-left: var(--pinned-left, 0px);
+  scroll-padding-right: var(--pinned-right, 0px);
 }
 .datatable.quick-filtering {
   --quick-filter-height: 3rem;
@@ -638,23 +824,12 @@ div.sidebar-wrapper .sidebar.toolbar-right {
   max-height: var(--nested-height, 20rem);
 }
 
-.datatable__table {
-  table-layout: fixed;
-  border-collapse: collapse;
-  border-spacing: 0;
+.datatable-grid {
+  display: flex;
+  flex-flow: column nowrap;
+  flex-grow: 2;
+  width: 100%;
   text-align: left;
-}
-.datatable__table.left {
-  position: sticky;
-  z-index: 2;
-  left: 0;
-}
-.datatable__table.centre {
-  z-index: 1;
-  flex-grow: 10;
-}
-.datatable__table.right {
-  position: sticky;
-  z-index: 2;
-  right: 0;
+  min-width: max-content;
+  isolation: isolate;
 }</style>