@svelte-lean/table 0.13.3 → 0.13.4

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @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

package/dist/style.css

@@ -936,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);
 	/**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@svelte-lean/table",
-  "version": "0.13.3",
+  "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",