@svelte-lean/table 0.13.2 → 0.13.4

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @svelte-lean/table
 
+## 0.13.4
+
+### Patch Changes
+
+- c97ea03: A grid-layout table with grouped columns draws its header rows straight again: a header row kept the cells that span down to it after the grouped ones, and grid auto-placement, which never moves back along a row, pushed the grouped leaves onto a second line. The cells are now in column order, and the room a spanning cell leaves above it takes the header's surface.
+
+## 0.13.3
+
+### Patch Changes
+
+- d30fe0c: A table wider than its region keeps its header in view: without `height`, a region that scrolls sideways used to leave the header behind as the page scrolled. The header now follows the page (a scroll-driven animation on the region's view timeline, run by the compositor), from `--slean-table-sticky-top` down to the table's last row. Browsers without scroll-driven animations keep the old behaviour.
+
 ## 0.13.2
 
 No changes in this release.

package/dist/style.css

@@ -327,6 +327,32 @@
 	:where(.slean-table-scroll[data-page-sticky] > .slean-table-sticky > thead) {
 		top: var(--slean-table-sticky-top, 0px);
 	}
+	/* Sideways-only region: the header follows the page (data-table.svelte, `data-head-follows`). */
+	@supports (animation-timeline: view()) {
+		:where(.slean-table-scroll[data-head-follows]) {
+			view-timeline-name: --slean-table-region;
+			view-timeline-axis: block;
+			view-timeline-inset: var(--slean-table-sticky-top, 0px) 0px;
+		}
+		:where(.slean-table-scroll[data-head-follows] > table > thead) {
+			position: relative;
+			z-index: 5;
+			animation-name: slean-table-head-follow;
+			animation-duration: auto;
+			animation-timing-function: linear;
+			animation-fill-mode: both;
+			animation-timeline: --slean-table-region;
+			animation-range: exit-crossing 0px exit-crossing var(--slean-table-travel, 0px);
+		}
+	}
+	@keyframes slean-table-head-follow {
+		from {
+			translate: 0 0;
+		}
+		to {
+			translate: 0 var(--slean-table-travel, 0px);
+		}
+	}
 	:where(
 		.slean-table
 			> .slean-table-scroll[data-page-sticky]:first-child
@@ -910,6 +936,10 @@
 	}
 	/* Each body row its own stacking context: sticky pinned cells then layerize per row, not per
 	   cell, which keeps compositing cheap while a long page scrolls. */
+	/* A header row is a grid too: the room a spanning cell leaves above it is the head's surface. */
+	:where(.slean-table[data-layout='grid'] > .slean-table-scroll > table > thead > tr) {
+		background: var(--slean-table-header-bg);
+	}
 	:where(.slean-table[data-layout='grid'] > .slean-table-scroll > table > tbody > tr) {
 		isolation: isolate;
 	}

package/dist/table/data-table.svelte

@@ -776,7 +776,8 @@
 	/**
 	 * Header rows. In grid layout every row is a grid of its own, so a cell spanning rows sits in
 	 * the lowest row it spans, placed at its first column; the leading control headers sit there
-	 * too.
+	 * too. A row's cells are kept in column order: auto-placement never moves back along a row, so
+	 * a cell placed before one to its left would push that one onto a second grid row.
 	 */
 	const leafIndex = $derived(new Map(cols.map((col, i) => [col.id, i])));
 	function firstLeaf(column: Column<T>): number {
@@ -787,15 +788,19 @@
 		const levels = table.headers;
 		if (!grid) return levels.map((row) => row.map((cell) => ({ cell })));
 		const lead = leads.length;
-		const result: { cell: HeaderCell<T>; place?: string }[][] = levels.map(() => []);
+		const result: { cell: HeaderCell<T>; place?: string; start: number }[][] = levels.map(() => []);
 		levels.forEach((row, level) =>
 			row.forEach((cell) => {
 				const target = Math.min(levels.length - 1, level + cell.rowSpan - 1);
 				const start = lead + firstLeaf(cell.column) + 1;
-				result[target]!.push({ cell, place: `grid-column:${start} / span ${cell.colSpan};` });
+				result[target]!.push({
+					cell,
+					start,
+					place: `grid-column:${start} / span ${cell.colSpan};`
+				});
 			})
 		);
-		return result;
+		return result.map((row) => row.sort((a, b) => a.start - b.start));
 	});
 	const leadLevel = $derived(grid ? table.headers.length - 1 : 0);
 	/**
@@ -825,19 +830,26 @@
 	 * header without ever letting it stick; the header is then not sticky at all (`scrollsY`), since
 	 * a sticky box in a scroller is composited, and every row painted under it is weighed against it
 	 * (at 1000 rows about a tenth of a fast scroll's main-thread work).
+	 *
+	 * Such a header follows the page instead (`data-head-follows`, style.css): a scroll-driven
+	 * animation on the region's view timeline moves it down by as much as the region has passed
+	 * under the page's top, never past its last row (`--slean-table-travel`). The compositor runs
+	 * it; script only measures the travel when a size changes.
 	 */
 	let fits = $state(false);
 	let scrollsY = $state(true);
+	let travel = $state(0);
 	$effect(() => {
 		if (!stickyHeader || height || typeof ResizeObserver === 'undefined') {
 			fits = false;
 			scrollsY = true;
 			return;
 		}
-		const table = viewport.firstElementChild as HTMLElement;
+		const table = viewport.firstElementChild as HTMLTableElement;
 		const observer = new ResizeObserver(() => {
 			fits = table.offsetWidth <= viewport.clientWidth + 1;
 			scrollsY = viewport.scrollHeight > viewport.clientHeight + 1;
+			travel = Math.max(0, table.offsetHeight - (table.tHead?.offsetHeight ?? 0));
 		});
 		observer.observe(viewport);
 		observer.observe(table);
@@ -1683,6 +1695,10 @@
 		bind:this={viewport}
 		class="slean-table-scroll"
 		data-page-sticky={fits || undefined}
+		data-head-follows={(stickyHeader && !height && !fits && !scrollsY) || undefined}
+		style:--slean-table-travel={stickyHeader && !height && !fits && !scrollsY
+			? `${travel}px`
+			: undefined}
 		style:max-height={height}
 		tabindex={height ? 0 : undefined}
 		role="region"

package/package.json

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