@svelte-lean/table 0.15.1 → 0.15.2

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @svelte-lean/table
 
+## 0.15.2
+
+### Patch Changes
+
+- Pinned columns: the edge shade is drawn once per pinned side instead of once per row. 0.15.1 drew it as a `::after` on every edge cell, two pseudo-elements per row to paint and composite, and a fast scroll through a long page paid for them. The scroll region now holds one `.slean-table-pin-shade` element per pinned side (`data-pin="left|right"`, `aria-hidden`), stacked with the table in one grid cell (the region carries `data-pinned`; the table there is its own stacking context, `isolation: isolate`, so a page scroll reuses its paint instead of repainting every sticky cell), so it is as tall as the table, header to footer, sticky at the side's pinned width (`--slean-table-pin-inset`, set by the renderer, so a resize or a pin change moves it), above the sticky header and below the column panel and the top layer, and never takes the pointer. The look is the same: `--slean-table-pin-shadow` to transparent, `--slean-table-pin-shadow-size` (8px) wide, mirrored in RTL, over the edge cell's line, and shown only while content lies past that side (scroll-state queries). It is also continuous across the lines between rows, which the per-cell shade left out. Where scroll-state queries are missing it shows while the rows overflow sideways (`data-overflows`, read by a ResizeObserver only there), not on a table that fits. A table without pinned columns renders no shade and its region stays a plain block. Placeholder (skeleton) rows now carry the pin attributes too, so pinned columns stay in place while a table loads. Behavior changes: an edge cell's `::after` is no longer used (a theme that styled `[data-pin-edge]::after` styles `.slean-table-pin-shade` instead), and in a table with pinned columns a cell's `z-index` no longer reaches outside the table (menus and popovers are in the top layer and unaffected). Tested in `apps/playground/tests/table/pinned.spec.ts` (position, continuity by pixel sampling, visibility at both ends, RTL, resize and pin change, region and page scrolling, pointer, loading, empty, compact, no pins) and measured by `apps/playground/tests/bench/pin-shade.bench.spec.ts` (1000 rows, fast page scroll at 4x CPU, no shade, the 0.15.1 shade and this one interleaved; `apps/playground/results/pin-shade-bench.json`): in grid layout the per-cell shade added about a tenth to the rendering work and this one is within noise of no shade; in table layout, where the table's own stacking context lets a page scroll reuse its paint, the rendering work is about a third of either.
+
 ## 0.15.1
 
 ### Patch Changes

package/dist/style.css

@@ -641,46 +641,58 @@
 	:where(thead .slean-table-mover, thead .slean-table-selection, thead .slean-table-expander) {
 		z-index: 4;
 	}
-	/* Pinned edges: a line and a shade as tall as the cell (a blurred shadow faded at each row's
-	   ends, a dashed line); with scroll-state queries, only while content lies past the edge. */
+	/* Pinned edges: a line on the edge cells, one shade per side. */
 	:where(.slean-table-scroll > table > * > tr > [data-pin='left'][data-pin-edge]) {
 		border-inline-end: 1px solid var(--slean-table-border);
 	}
 	:where(.slean-table-scroll > table > * > tr > [data-pin='right'][data-pin-edge]) {
 		border-inline-start: 1px solid var(--slean-table-border);
 	}
-	:where(.slean-table-scroll > table > * > tr > [data-pin-edge])::after {
-		content: '';
-		position: absolute;
-		inset-block: 0;
-		inset-inline-start: 100%;
+	/* One grid cell the table's size (a grid table's width is known); the table is a stacking
+	   context, so a page scroll reuses its paint. */
+	:where(.slean-table-scroll[data-pinned]) {
+		display: grid;
+	}
+	:where(.slean-table[data-layout='grid'] > .slean-table-scroll[data-pinned]) {
+		grid-template-columns: max(100%, var(--slean-table-min-width, 0px));
+	}
+	:where(.slean-table-scroll[data-pinned] > *) {
+		grid-area: 1 / 1;
+		isolation: isolate;
+	}
+	/* Sticky at the pinned width, over the edge line; above the sticky header (5). */
+	:where(.slean-table-pin-shade) {
+		position: sticky;
+		z-index: 6;
+		inset-inline-start: var(--slean-table-pin-inset);
+		margin-inline-start: var(--slean-table-pin-inset);
 		inline-size: var(--slean-table-pin-shadow-size);
 		background: linear-gradient(to right, var(--slean-table-pin-shadow), transparent);
 		pointer-events: none;
 	}
-	:where(.slean-table-scroll > table > * > tr > [data-pin='right'][data-pin-edge])::after {
-		inset-inline: auto 100%;
-		scale: -1 1;
+	:where(.slean-table-pin-shade[data-pin='right']) {
+		justify-self: end;
+		inset-inline: auto var(--slean-table-pin-inset);
+		margin-inline: 0 var(--slean-table-pin-inset);
 	}
-	:where(.slean-table-scroll > table > * > tr > [data-pin-edge]:dir(rtl))::after {
+	:where(
+		.slean-table-pin-shade[data-pin='right']:dir(ltr),
+		.slean-table-pin-shade[data-pin='left']:dir(rtl)
+	) {
 		scale: -1 1;
 	}
-	:where(.slean-table-scroll > table > * > tr > [data-pin='right'][data-pin-edge]:dir(rtl))::after {
-		scale: none;
+	/* Shown while content lies past that side; without scroll-state, while rows overflow. */
+	:where(.slean-table-scroll:not([data-overflows]) > .slean-table-pin-shade) {
+		opacity: 0;
 	}
-	@supports (container-type: scroll-state) {
-		:where(.slean-table-scroll > table > * > tr > [data-pin-edge])::after {
-			opacity: 0;
-		}
-		@container scroll-state(scrollable: inline-start) {
-			:where(.slean-table-scroll > table > * > tr > [data-pin='left'][data-pin-edge])::after {
-				opacity: 1;
-			}
+	@container scroll-state(scrollable: inline-start) {
+		:where(.slean-table-pin-shade[data-pin='left']) {
+			opacity: 1;
 		}
-		@container scroll-state(scrollable: inline-end) {
-			:where(.slean-table-scroll > table > * > tr > [data-pin='right'][data-pin-edge])::after {
-				opacity: 1;
-			}
+	}
+	@container scroll-state(scrollable: inline-end) {
+		:where(.slean-table-pin-shade[data-pin='right']) {
+			opacity: 1;
 		}
 	}
 	:where(.slean-table-scroll > table > tbody > tr > td[data-range='true']) {
@@ -1186,7 +1198,8 @@
 			.slean-table-pagination,
 			.slean-table-resize,
 			.slean-table-edit,
-			.slean-table-grip
+			.slean-table-grip,
+			.slean-table-pin-shade
 		) {
 			display: none !important;
 		}

package/dist/table/data-table.svelte

@@ -878,32 +878,56 @@
 	/**
 	 * Sticky offsets of the pinned columns, computed once per column change instead of per cell.
 	 * Logical insets follow the table's own direction. `edge` marks the last start-pinned and the
-	 * first end-pinned column, where the stylesheet draws the pin shadow.
+	 * first end-pinned column, where the stylesheet draws the edge line.
+	 *
+	 * `edges` places the shade of each pinned side: one element in the scroll region (style.css),
+	 * not one per edge cell, at that side's pinned width less the edge line (1px, which the shade
+	 * covers), so a resize or a pin change moves it.
 	 */
-	const pins = $derived.by(() => {
-		const result = new Map<string, { pin: Exclude<Pin, false>; style: string; edge?: true }>();
+	const pinning = $derived.by(() => {
+		const cells = new Map<string, { pin: Exclude<Pin, false>; style: string; edge?: true }>();
+		const edges: [Exclude<Pin, false>, string][] = [];
 		const lead = leads;
 		for (const side of ['left', 'right'] as const) {
 			const ordered = side === 'left' ? cols : [...cols].reverse();
+			const at = (offset: number) =>
+				side === 'left' && lead.length ? `calc(${offset}px + ${lead.join(' + ')})` : `${offset}px`;
 			let offset = 0;
 			let last: string | undefined;
 			for (const col of ordered) {
 				if (table.pinOf(col) !== side) continue;
-				const inset =
-					side === 'left' && lead.length
-						? `calc(${offset}px + ${lead.join(' + ')})`
-						: `${offset}px`;
 				const property = side === 'left' ? 'inset-inline-start' : 'inset-inline-end';
-				result.set(col.id, { pin: side, style: `${property}:${inset};` });
+				cells.set(col.id, { pin: side, style: `${property}:${at(offset)};` });
 				offset += grid ? gridWidth(col) : table.columnWidth(col);
 				last = col.id;
 			}
-			const edge = last === undefined ? undefined : result.get(last);
-			if (edge) edge.edge = true;
+			if (last === undefined) continue;
+			cells.get(last)!.edge = true;
+			edges.push([side, at(offset - 1)]);
 		}
-		return result;
+		return { cells, edges };
+	});
+	const pins = $derived(pinning.cells);
+	/**
+	 * Where scroll-state queries are missing, the shades show only while the rows overflow sideways
+	 * (`data-overflows`, read when a size changes): a table stretched to fit widens its columns.
+	 */
+	let overflows = $state(false);
+	$effect(() => {
+		if (
+			!pinning.edges.length ||
+			typeof ResizeObserver === 'undefined' ||
+			globalThis.CSS?.supports('container-type', 'scroll-state')
+		)
+			return;
+		const observer = new ResizeObserver(
+			() => (overflows = viewport.scrollWidth > viewport.clientWidth + 1)
+		);
+		observer.observe(viewport);
+		observer.observe(tableElement);
+		return () => observer.disconnect();
 	});
-	/** Pin attributes of a filter or footer cell. */
+	/** Pin attributes of a filter, footer or placeholder cell. */
 	function pinned(col: Column<T>) {
 		const pin = pins.get(col.id);
 		return pin ? { 'data-pin': pin.pin, 'data-pin-edge': pin.edge, style: pin.style } : {};
@@ -1269,8 +1293,9 @@
 			class="slean-table-skeleton-row"
 			aria-hidden="true"
 			role={grid ? 'row' : undefined}
-			>{@render leading()}{#each cols as col (col.id)}<td role={grid ? 'cell' : undefined}
-					><span class="slean-table-skeleton"></span></td
+			>{@render leading()}{#each cols as col (col.id)}<td
+					role={grid ? 'cell' : undefined}
+					{...pinned(col)}><span class="slean-table-skeleton"></span></td
 				>{/each}</tr
 		>{/each}
 	{#if !model.rows.length && !skeleton.length}<tr role={grid ? 'row' : undefined}
@@ -1698,6 +1723,9 @@
 		class="slean-table-scroll"
 		data-page-sticky={fits || undefined}
 		data-head-follows={(stickyHeader && !height && !fits && !scrollsY) || undefined}
+		data-pinned={pinning.edges.length > 0 || undefined}
+		data-overflows={overflows || undefined}
+		style:--slean-table-min-width={tracks?.min}
 		style:--slean-table-travel={stickyHeader && !height && !fits && !scrollsY
 			? `${travel}px`
 			: undefined}
@@ -1724,7 +1752,6 @@
 			class:slean-table-sticky={stickyHeader && (fits || scrollsY)}
 			style:table-layout={grid ? undefined : tableLayout}
 			style:--slean-table-tracks={tracks?.template}
-			style:--slean-table-min-width={tracks?.min}
 		>
 			{#if caption}<caption>{caption}</caption>{/if}
 			{#if !grid}<colgroup
@@ -1870,6 +1897,12 @@
 					></tfoot
 				>{/if}
 		</table>
+		{#each pinning.edges as [side, inset]}<div
+				class="slean-table-pin-shade"
+				data-pin={side}
+				aria-hidden="true"
+				style:--slean-table-pin-inset={inset}
+			></div>{/each}
 	</div>
 	{#if pagination}<div class="slean-table-pagination">
 			<span class="slean-table-page-status" aria-live="polite"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@svelte-lean/table",
-  "version": "0.15.1",
+  "version": "0.15.2",
   "description": "A Svelte-native table and data-grid engine that ships only the features you use.",
   "license": "MIT",
   "author": "Ömer Say",