virtua 0.52.0 → 0.52.2

package/lib/solid/index.jsx

@@ -405,14 +405,30 @@ var createListLayout = (length, itemSize, snapshot) => {
 var getAxisLength = (axis) => typeof axis === "number" ? axis : axis.length;
 var getAxisItem = (axis, index) => typeof axis === "number" ? index : axis[index];
 var createGridLayout = (axis, size, gap = 0) => {
+	let header = 0;
+	let footer = 0;
+	const setPinned = (nextHeader = 0, nextFooter = 0) => {
+		header = nextHeader;
+		footer = nextFooter;
+	};
+	const getPinnedStart = (length) => min(header, length);
+	const getTrailStart = (length) => max(length - footer, getPinnedStart(length));
+	const pinRange = (getRange, getOffset, length, startOffset, endOffset) => {
+		const insetStart = getOffset(getPinnedStart(length));
+		const insetEnd = getOffset(length) - getOffset(getTrailStart(length));
+		const start = startOffset + (insetStart ? insetStart - gap : 0);
+		return getRange(start, max(start, endOffset - (insetEnd ? insetEnd - gap : 0)));
+	};
 	if (typeof size === "number") {
 		let length = getAxisLength(axis);
 		let itemSize = size;
 		const findIndex = (offset) => itemSize + gap ? clamp(floor(offset / (itemSize + gap)), 0, length - 1) : 0;
+		const getItemOffset = (index) => index * (itemSize + gap);
+		const findRange = (startOffset, endOffset) => [findIndex(startOffset), findIndex(endOffset)];
 		return {
-			$getRange: (startOffset, endOffset) => [findIndex(startOffset), findIndex(endOffset)],
+			$getRange: (startOffset, endOffset) => pinRange(findRange, getItemOffset, length, startOffset, endOffset),
 			$findIndex: findIndex,
-			$getItemOffset: (index) => index * (itemSize + gap),
+			$getItemOffset: getItemOffset,
 			$getItemSize: () => itemSize,
 			$setItemSize: () => false,
 			$isSizeEqual: () => false,
@@ -423,6 +439,9 @@ var createGridLayout = (axis, size, gap = 0) => {
 				return 0;
 			},
 			$isMeasurable: () => false,
+			$setPinned: setPinned,
+			$getPinnedStart: () => getPinnedStart(length),
+			$getTrailStart: () => getTrailStart(length),
 			$setAxis: (_axis, nextSize, scrollOffset) => {
 				if (typeof nextSize !== "number" || nextSize === itemSize) {
 					return;
@@ -441,7 +460,7 @@ var createGridLayout = (axis, size, gap = 0) => {
 	const inner = createListLayout(length, undefined, [[], 40 + gap]);
 	const isMeasurable = (index) => isAuto || !!autos[index];
 	const layout = {
-		$getRange: inner.$getRange,
+		$getRange: (startOffset, endOffset) => pinRange(inner.$getRange, inner.$getItemOffset, inner.$getLength(), startOffset, endOffset),
 		$findIndex: inner.$findIndex,
 		$getItemOffset: inner.$getItemOffset,
 		$getItemSize: (index) => inner.$getItemSize(index) - gap,
@@ -452,6 +471,9 @@ var createGridLayout = (axis, size, gap = 0) => {
 		$setLength: inner.$setLength,
 		$estimateDefaultSize: isAuto ? inner.$estimateDefaultSize : undefined,
 		$isMeasurable: isMeasurable,
+		$setPinned: setPinned,
+		$getPinnedStart: () => getPinnedStart(inner.$getLength()),
+		$getTrailStart: () => getTrailStart(inner.$getLength()),
 		$setAxis: (nextAxis, requestedSize, scrollOffset, mutable) => {
 			if (isAuto) {
 				return;
@@ -492,8 +514,9 @@ var createGridLayout = (axis, size, gap = 0) => {
 
 //#endregion
 //#region src/core/grid.ts
-var updateGridAxis = (store, layout, axis, size, mutable) => {
+var updateGridAxis = (store, layout, axis, size, header, footer, mutable) => {
 	const length = getAxisLength(axis);
+	layout.$setPinned(header, footer);
 	if (length !== store.$getItemsLength()) {
 		store.$update(5, [length]);
 	}
@@ -523,7 +546,7 @@ var getSectionStarts = (sectionRows, pinnedStart, trailStart) => {
 	}
 	return sort(starts);
 };
-var getSection = (starts, rowIndex, trailStart) => {
+var getSectionIndex = (starts, rowIndex, trailStart) => {
 	if (rowIndex >= trailStart) {
 		return -1;
 	}
@@ -540,37 +563,32 @@ var getSection = (starts, rowIndex, trailStart) => {
 	return lo - 1;
 };
 var addSectionHeader = (extras, sectionStarts, rowIndex, trailStart) => {
-	const section = getSection(sectionStarts, rowIndex, trailStart);
+	const section = getSectionIndex(sectionStarts, rowIndex, trailStart);
 	if (section >= 0) {
 		extras.push(sectionStarts[section]);
 	}
 };
-var getTrackIndexes = (extras, count, pinnedStart, start, end, trailStart) => {
-	const indexes = [];
-	for (let i = 0; i < pinnedStart; i++) {
-		indexes.push(i);
-	}
+var addExtras = (indexes, extras, e, bound, lastRendered) => {
 	const extrasLength = extras.length;
-	let e = 0;
-	let last = pinnedStart - 1;
-	for (; e < extrasLength && extras[e] < start; e++) {
+	for (; e < extrasLength && extras[e] < bound; e++) {
 		const i = extras[e];
-		if (i > last) {
+		if (i > lastRendered) {
 			indexes.push(i);
-			last = i;
+			lastRendered = i;
 		}
 	}
-	for (let i = start; i <= end; i++) {
+	return e;
+};
+var getTrackIndexes = (extras, count, pinnedStart, start, end, trailStart) => {
+	const indexes = [];
+	for (let i = 0; i < pinnedStart; i++) {
 		indexes.push(i);
 	}
-	last = end;
-	for (; e < extrasLength && extras[e] < trailStart; e++) {
-		const i = extras[e];
-		if (i > last) {
-			indexes.push(i);
-			last = i;
-		}
+	const e = addExtras(indexes, extras, 0, start, pinnedStart - 1);
+	for (let i = start; i <= end; i++) {
+		indexes.push(i);
 	}
+	addExtras(indexes, extras, e, trailStart, end);
 	for (let i = trailStart; i < count; i++) {
 		indexes.push(i);
 	}
@@ -585,29 +603,24 @@ var getTemplate = (layout, indexes, measured, sortedCuts, measuredSize, count) =
 	let line = 0;
 	let i = 0;
 	let c = 0;
-	while (i < indexesLength || c < cutsLength) {
-		const index = i < indexesLength ? indexes[i] : count;
-		const cut = c < cutsLength ? sortedCuts[c] : count;
-		if (cut <= line) {
+	while (line < count) {
+		while (c < cutsLength && sortedCuts[c] <= line) {
 			c++;
+		}
+		const index = i < indexesLength ? indexes[i] : count;
+		let to;
+		let size;
+		if (index === line) {
+			to = line + 1;
+			const m = measured[i];
+			size = m == null ? layout.$getItemSize(line) + "px" : m ? measuredSize : "minmax(" + layout.$getItemSize(line) + "px,auto)";
+			i++;
 		} else {
-			let to;
-			let size;
-			if (index === line) {
-				to = line + 1;
-				const m = measured[i];
-				size = m == null ? layout.$getItemSize(line) + "px" : m ? measuredSize : "minmax(" + layout.$getItemSize(line) + "px,auto)";
-				i++;
-			} else {
-				to = min(index, cut);
-				size = "minmax(" + (layout.$getItemOffset(to - 1) + layout.$getItemSize(to - 1) - layout.$getItemOffset(line)) + "px,auto)";
-			}
-			template += " " + size + " [l" + to + "]";
-			line = to;
+			to = min(index, c < cutsLength ? sortedCuts[c] : count);
+			size = "minmax(" + (layout.$getItemOffset(to - 1) + layout.$getItemSize(to - 1) - layout.$getItemOffset(line)) + "px,auto)";
 		}
-	}
-	if (line < count) {
-		template += " minmax(" + (layout.$getTotalSize() - layout.$getItemOffset(line)) + "px,auto) [l" + count + "]";
+		template += " " + size + " [l" + to + "]";
+		line = to;
 	}
 	return template;
 };
@@ -618,13 +631,13 @@ var gridStyleToString = (style) => {
 	}
 	return css;
 };
-var createGridPlan = (rowLayout, colLayout, rowRange, colRange, headerRows = 0, sectionRows = EMPTY, footerRows = 0, headerCols = 0, footerCols = 0, spans = EMPTY, kept = EMPTY, sortedCell) => {
-	const rowCount = rowLayout.$getLength();
-	const colCount = colLayout.$getLength();
-	const rowPinnedStart = min(headerRows, rowCount);
-	const rowTrailStart = max(rowCount - footerRows, rowPinnedStart);
-	const colPinnedStart = min(headerCols, colCount);
-	const colTrailStart = max(colCount - footerCols, colPinnedStart);
+var createGridPlan = (rowLayout, colLayout, rowRange, colRange, sectionRows = EMPTY, spans = EMPTY, kept = EMPTY, sortedCell) => {
+	const totalRowCount = rowLayout.$getLength();
+	const totalColCount = colLayout.$getLength();
+	const rowPinnedStart = rowLayout.$getPinnedStart();
+	const rowTrailStart = rowLayout.$getTrailStart();
+	const colPinnedStart = colLayout.$getPinnedStart();
+	const colTrailStart = colLayout.$getTrailStart();
 	const rowRangeStart = clamp(rowRange[0], rowPinnedStart, rowTrailStart);
 	const rowRangeEnd = min(rowRange[1], rowTrailStart - 1);
 	const colRangeStart = clamp(colRange[0], colPinnedStart, colTrailStart);
@@ -635,7 +648,7 @@ var createGridPlan = (rowLayout, colLayout, rowRange, colRange, headerRows = 0,
 	const extraCols = [];
 	const extraCells = [];
 	for (const cell of kept) {
-		if (cell.rowIndex < rowCount && cell.colIndex < colCount) {
+		if (cell.rowIndex < totalRowCount && cell.colIndex < totalColCount) {
 			extraCells.push(cell);
 		}
 	}
@@ -657,17 +670,16 @@ var createGridPlan = (rowLayout, colLayout, rowRange, colRange, headerRows = 0,
 		for (const span of waiting) {
 			const row = span.rowIndex;
 			const col = span.colIndex;
-			const rowTo = getSpanRowEnd(span, rowCount);
-			const colTo = getSpanColEnd(span, colCount);
-			if (row < rowCount && col < colCount && (rowTo - row > 1 || colTo - col > 1)) {
-				if (hasTrackIn(extraRows, row, rowTo, rowPinnedStart, rowRangeStart, rowRangeEnd, rowTrailStart)) {
-					if (hasTrackIn(extraCols, col, colTo, colPinnedStart, colRangeStart, colRangeEnd, colTrailStart)) {
-						extraCells.push(span);
-					} else {
-						const section = getSection(sectionStarts, rowTo - 1, rowTrailStart);
-						if (row < rowPinnedStart || section >= 0 && sectionStarts[section] >= row) {
-							rest.push(span);
-						}
+			const rowTo = getSpanRowEnd(span, totalRowCount);
+			const colTo = getSpanColEnd(span, totalColCount);
+			if (row < totalRowCount && col < totalColCount && (rowTo - row > 1 || colTo - col > 1)) {
+				const hasRenderedRow = hasTrackIn(extraRows, row, rowTo, rowPinnedStart, rowRangeStart, rowRangeEnd, rowTrailStart);
+				if (hasRenderedRow && hasTrackIn(extraCols, col, colTo, colPinnedStart, colRangeStart, colRangeEnd, colTrailStart)) {
+					extraCells.push(span);
+				} else if (hasRenderedRow) {
+					const section = getSectionIndex(sectionStarts, rowTo - 1, rowTrailStart);
+					if (row < rowPinnedStart || section >= 0 && sectionStarts[section] >= row) {
+						rest.push(span);
 					}
 				} else if (col < colPinnedStart) {
 					rest.push(span);
@@ -678,22 +690,22 @@ var createGridPlan = (rowLayout, colLayout, rowRange, colRange, headerRows = 0,
 	} while (l < extraCells.length);
 	sort(extraRows);
 	sort(extraCols);
-	const rowIndexes = getTrackIndexes(extraRows, rowCount, rowPinnedStart, rowRangeStart, rowRangeEnd, rowTrailStart);
-	const cols = getTrackIndexes(extraCols, colCount, colPinnedStart, colRangeStart, colRangeEnd, colTrailStart);
-	const rowLength = rowIndexes.length;
-	const colLength = cols.length;
+	const rows = getTrackIndexes(extraRows, totalRowCount, rowPinnedStart, rowRangeStart, rowRangeEnd, rowTrailStart);
+	const cols = getTrackIndexes(extraCols, totalColCount, colPinnedStart, colRangeStart, colRangeEnd, colTrailStart);
+	const rowsLength = rows.length;
+	const colsLength = cols.length;
 	const spanCells = new Map();
 	const rowCuts = [];
 	const colCuts = [];
 	for (const span of extraCells) {
-		const rowTo = getSpanRowEnd(span, rowCount);
-		const colTo = getSpanColEnd(span, colCount);
+		const rowTo = getSpanRowEnd(span, totalRowCount);
+		const colTo = getSpanColEnd(span, totalColCount);
 		rowCuts.push(rowTo);
 		colCuts.push(colTo);
 		const colStart = cols.indexOf(span.colIndex);
-		for (let i = rowIndexes.indexOf(span.rowIndex); i < rowLength && rowIndexes[i] < rowTo; i++) {
-			const rowKey = rowIndexes[i] * colCount;
-			for (let j = colStart; j < colLength && cols[j] < colTo; j++) {
+		for (let i = rows.indexOf(span.rowIndex); i < rowsLength && rows[i] < rowTo; i++) {
+			const rowKey = rows[i] * totalColCount;
+			for (let j = colStart; j < colsLength && cols[j] < colTo; j++) {
 				spanCells.set(rowKey + cols[j], span);
 			}
 		}
@@ -703,137 +715,138 @@ var createGridPlan = (rowLayout, colLayout, rowRange, colRange, headerRows = 0,
 		measuredCols.push(colLayout.$isMeasurable(colIndex) ? false : null);
 	}
 	const measuredRows = [];
-	const stickyTop = rowLayout.$getItemOffset(rowPinnedStart);
+	const sectionHeaderTop = rowLayout.$getItemOffset(rowPinnedStart);
 	const groups = [];
 	let groupRows = groups;
 	const prev = rowStatesCache.get(rowLayout);
 	const rowStates = new Map();
-	for (const rowIndex of rowIndexes) {
-		const pinnedTop = rowIndex < rowPinnedStart;
-		const pinnedBottom = rowIndex >= rowTrailStart;
-		const rowInRangeOrPinnedToEnd = pinnedBottom || rowIndex >= rowRangeStart && rowIndex <= rowRangeEnd;
-		const section = getSection(sectionStarts, rowIndex, rowTrailStart);
-		const groupStart = pinnedTop ? 0 : pinnedBottom ? rowTrailStart : section < 0 ? -1 : sectionStarts[section];
+	for (const rowIndex of rows) {
+		const isRowPinnedStart = rowIndex < rowPinnedStart;
+		const isRowPinnedEnd = rowIndex >= rowTrailStart;
+		const isRowInRangeOrPinnedToEnd = isRowPinnedEnd || rowIndex >= rowRangeStart && rowIndex <= rowRangeEnd;
+		const section = getSectionIndex(sectionStarts, rowIndex, rowTrailStart);
+		const groupStart = isRowPinnedStart ? 0 : isRowPinnedEnd ? rowTrailStart : section < 0 ? -1 : sectionStarts[section];
 		if (rowIndex === groupStart) {
-			const groupEnd = pinnedTop ? rowPinnedStart : pinnedBottom ? rowCount : section + 1 < sectionLength ? sectionStarts[section + 1] : rowTrailStart;
+			const groupEnd = isRowPinnedStart ? rowPinnedStart : isRowPinnedEnd ? totalRowCount : section + 1 < sectionLength ? sectionStarts[section + 1] : rowTrailStart;
 			rowCuts.push(groupEnd);
-			const rows = [];
+			const groupedRows = [];
 			groups.push({
-				$key: pinnedTop ? -1 : pinnedBottom ? -2 : -3 - groupStart,
-				$rows: rows,
-				$style: getBoxStyle(groupStart, groupEnd, pinnedTop || pinnedBottom ? 0 : null, pinnedBottom ? "bottom" : "top", 4)
+				$key: isRowPinnedStart ? -1 : isRowPinnedEnd ? -2 : -3 - groupStart,
+				$rows: groupedRows,
+				$style: getBoxStyle(groupStart, groupEnd, isRowPinnedStart || isRowPinnedEnd ? 0 : null, isRowPinnedEnd ? "bottom" : "top", 4)
 			});
-			groupRows = rows;
+			groupRows = groupedRows;
 		} else if (groupStart < 0) {
 			groupRows = groups;
 		}
 		const isSectionHeaderRow = section >= 0 && rowIndex === groupStart;
-		const rowTop = isSectionHeaderRow ? stickyTop : null;
-		const rowKey = rowIndex * colCount;
+		const rowTop = isSectionHeaderRow ? sectionHeaderTop : null;
+		const rowKey = rowIndex * totalColCount;
 		const prevRow = prev && prev.get(rowIndex);
 		const prevCells = prevRow && prevRow.$cells;
 		const rowCells = [];
 		let p = 0;
 		let measuredRow = rowLayout.$isMeasurable(rowIndex) ? false : null;
 		let rowEnd = rowIndex + 1;
-		let changed = false;
-		for (let i = 0; i < colLength; i++) {
+		let hasChanged = false;
+		for (let i = 0; i < colsLength; i++) {
 			const colIndex = cols[i];
-			const startPinned = colIndex < colPinnedStart;
-			const endPinned = colIndex >= colTrailStart;
-			const colInRangeOrPinnedToEnd = endPinned || colIndex >= colRangeStart && colIndex <= colRangeEnd;
+			const isColPinnedStart = colIndex < colPinnedStart;
+			const isColPinnedEnd = colIndex >= colTrailStart;
+			const isColInRangeOrPinnedToEnd = isColPinnedEnd || colIndex >= colRangeStart && colIndex <= colRangeEnd;
 			const span = spanCells.get(rowKey + colIndex);
-			if (span ? span.rowIndex !== rowIndex || span.colIndex !== colIndex : !(rowInRangeOrPinnedToEnd && colInRangeOrPinnedToEnd) && !pinnedTop && !isSectionHeaderRow && !startPinned) {
-				continue;
-			}
-			const rowTo = span ? getSpanRowEnd(span, rowCount) : rowIndex + 1;
-			const colTo = span ? getSpanColEnd(span, colCount) : colIndex + 1;
-			const spansRows = rowTo - rowIndex > 1;
-			const spansCols = colTo - colIndex > 1;
-			const spanning = spansRows || spansCols;
-			const rowSpan = spanning ? rowTo - rowIndex : undefined;
-			const colSpan = spanning ? colTo - colIndex : undefined;
-			let measureRowIndex;
-			let measureColIndex;
-			rowEnd = max(rowEnd, rowTo);
-			const stickyStart = startPinned ? colLayout.$getItemOffset(colIndex) : null;
-			const stickyEnd = endPinned ? colLayout.$getTotalSize() - colLayout.$getItemOffset(colTo - 1) - colLayout.$getItemSize(colTo - 1) : null;
-			if (measuredRow === false && !spansRows) {
-				measureRowIndex = rowIndex;
-				measuredRow = true;
-			}
-			if (measuredCols[i] === false && !spansCols) {
-				measureColIndex = colIndex;
-				measuredCols[i] = true;
-			}
-			const role = pinnedTop ? "columnheader" : colIndex === rowHeaderCol && (startPinned || isSectionHeaderRow) ? "rowheader" : "cell";
-			const sortOrder = role !== "cell" && sortedCell && sortedCell.rowIndex === rowIndex && sortedCell.colIndex === colIndex ? sortedCell.order : undefined;
-			let cell;
-			if (prevCells) {
-				while (p < prevCells.length && prevCells[p].$col < colIndex) {
-					p++;
+			if (span ? span.rowIndex === rowIndex && span.colIndex === colIndex : isRowInRangeOrPinnedToEnd && isColInRangeOrPinnedToEnd || isRowPinnedStart || isSectionHeaderRow || isColPinnedStart) {
+				const rowTo = span ? getSpanRowEnd(span, totalRowCount) : rowIndex + 1;
+				const colTo = span ? getSpanColEnd(span, totalColCount) : colIndex + 1;
+				const rowSpan = rowTo - rowIndex;
+				const colSpan = colTo - colIndex;
+				const isSpanningRows = rowSpan > 1;
+				const isSpanningCols = colSpan > 1;
+				const isSpanning = isSpanningRows || isSpanningCols;
+				let measureRowIndex;
+				let measureColIndex;
+				rowEnd = max(rowEnd, rowTo);
+				const stickyStart = isColPinnedStart ? colLayout.$getItemOffset(colIndex) : null;
+				const stickyEnd = isColPinnedEnd ? colLayout.$getTotalSize() - colLayout.$getItemOffset(colTo - 1) - colLayout.$getItemSize(colTo - 1) : null;
+				if (measuredRow === false && !isSpanningRows) {
+					measureRowIndex = rowIndex;
+					measuredRow = true;
 				}
-				if (p < prevCells.length) {
-					cell = prevCells[p];
-				}
-			}
-			if (!cell || cell.$col !== colIndex || cell.$rowSpan !== rowSpan || cell.$colSpan !== colSpan || cell.$start !== stickyStart || cell.$end !== stickyEnd || cell.$measureRow !== measureRowIndex || cell.$measureCol !== measureColIndex || cell.$role !== role || cell.$sort !== sortOrder) {
-				const style = {
-					contain: "layout style",
-					display: "grid",
-					gridArea: spanning ? "1/l" + colIndex + "/l" + rowTo + "/l" + colTo : "1/l" + colIndex
-				};
-				if (spansRows) {
-					style["height"] = "0px";
-					style["minHeight"] = "100%";
-					style["zIndex"] = 1;
+				if (measuredCols[i] === false && !isSpanningCols) {
+					measureColIndex = colIndex;
+					measuredCols[i] = true;
 				}
-				if (spansCols) {
-					style["width"] = "0px";
-					style["minWidth"] = "100%";
+				const role = isRowPinnedStart ? "columnheader" : colIndex === rowHeaderCol && (isColPinnedStart || isSectionHeaderRow) ? "rowheader" : "cell";
+				const ariaRowSpan = isSpanning ? rowSpan : undefined;
+				const ariaColSpan = isSpanning ? colSpan : undefined;
+				const ariaSort = role !== "cell" && sortedCell && sortedCell.rowIndex === rowIndex && sortedCell.colIndex === colIndex ? sortedCell.order : undefined;
+				let cell;
+				if (prevCells) {
+					const prevCellsLength = prevCells.length;
+					while (p < prevCellsLength && prevCells[p].$col < colIndex) {
+						p++;
+					}
+					if (p < prevCellsLength && prevCells[p].$col === colIndex) {
+						cell = prevCells[p];
+					}
 				}
-				if (startPinned || endPinned) {
-					if (startPinned) {
-						style["insetInlineStart"] = stickyStart + "px";
-					} else {
-						style["insetInlineEnd"] = stickyEnd + "px";
+				if (!cell || cell.$rowSpan !== ariaRowSpan || cell.$colSpan !== ariaColSpan || cell.$start !== stickyStart || cell.$end !== stickyEnd || cell.$measureRow !== measureRowIndex || cell.$measureCol !== measureColIndex || cell.$role !== role || cell.$sort !== ariaSort) {
+					let gridArea = "1/l" + colIndex;
+					if (isSpanning) {
+						gridArea += "/l" + rowTo + "/l" + colTo;
+					}
+					const style = {
+						contain: "layout style",
+						display: "grid",
+						gridArea
+					};
+					if (isSpanningRows) {
+						style["height"] = "0px";
+						style["minHeight"] = "100%";
+						style["zIndex"] = 1;
+					}
+					if (isSpanningCols) {
+						style["width"] = "0px";
+						style["minWidth"] = "100%";
 					}
-					style["position"] = "sticky";
-					style["zIndex"] = 2;
+					if (isColPinnedStart || isColPinnedEnd) {
+						style[isColPinnedStart ? "insetInlineStart" : "insetInlineEnd"] = (isColPinnedStart ? stickyStart : stickyEnd) + "px";
+						style["position"] = "sticky";
+						style["zIndex"] = 2;
+					}
+					cell = {
+						$col: colIndex,
+						$rowSpan: ariaRowSpan,
+						$colSpan: ariaColSpan,
+						$measureRow: measureRowIndex,
+						$measureCol: measureColIndex,
+						$role: role,
+						$sort: ariaSort,
+						$style: style,
+						$start: stickyStart,
+						$end: stickyEnd
+					};
+					hasChanged = true;
 				}
-				cell = {
-					$col: colIndex,
-					$rowSpan: rowSpan,
-					$colSpan: colSpan,
-					$measureRow: measureRowIndex,
-					$measureCol: measureColIndex,
-					$role: role,
-					$sort: sortOrder,
-					$style: style,
-					$start: stickyStart,
-					$end: stickyEnd
-				};
-				changed = true;
+				rowCells.push(cell);
 			}
-			rowCells.push(cell);
 		}
 		measuredRows.push(measuredRow);
-		if (!rowCells.length) {
-			continue;
+		if (rowCells.length) {
+			const row = prevRow && !hasChanged && prevRow.$cells.length === rowCells.length && prevRow.$top === rowTop ? prevRow : {
+				$row: rowIndex,
+				$cells: rowCells,
+				$style: getBoxStyle(rowIndex, rowEnd, rowTop, "top", 3),
+				$top: rowTop
+			};
+			rowStates.set(rowIndex, row);
+			groupRows.push(row);
 		}
-		const row = prevRow && !changed && prevRow.$cells.length === rowCells.length && prevRow.$top === rowTop ? prevRow : {
-			$row: rowIndex,
-			$cells: rowCells,
-			$style: getBoxStyle(rowIndex, rowEnd, rowTop, "top", 3),
-			$top: rowTop
-		};
-		rowStates.set(rowIndex, row);
-		groupRows.push(row);
 	}
 	rowStatesCache.set(rowLayout, rowStates);
 	return {
-		$rowTemplate: getTemplate(rowLayout, rowIndexes, measuredRows, sort(rowCuts), "max-content", rowCount),
-		$colTemplate: getTemplate(colLayout, cols, measuredCols, sort(colCuts), "minmax(max-content,auto)", colCount),
+		$rowTemplate: getTemplate(rowLayout, rows, measuredRows, sort(rowCuts), "max-content", totalRowCount),
+		$colTemplate: getTemplate(colLayout, cols, measuredCols, sort(colCuts), "minmax(max-content,auto)", totalColCount),
 		$groups: groups
 	};
 };
@@ -1298,47 +1311,49 @@ var gridScrollBy = (driver, rowStore, colStore, vertical, horizontal) => {
 		driver.$scroll(true, () => offset);
 	}
 };
-var scrollGridAxisToIndex = (driver, store, header, sections, footer, index, align, isHorizontal) => {
+var scrollGridAxisToIndex = (driver, store, layout, sections, index, align, isHorizontal) => {
 	const count = store.$getItemsLength();
-	const pinnedStart = min(header, count);
-	const trailStart = max(count - footer, pinnedStart);
+	const pinnedStart = layout.$getPinnedStart();
+	const trailStart = layout.$getTrailStart();
 	index = clamp(index, 0, count - 1);
 	const starts = getSectionStarts(sections, pinnedStart, trailStart);
-	const section = getSection(starts, index, trailStart);
+	const section = getSectionIndex(starts, index, trailStart);
 	const sectionHeader = section < 0 ? -1 : starts[section];
-	const getInsets = () => [store.$getItemOffset(pinnedStart) - store.$getItemOffset(0) + (sectionHeader < 0 || sectionHeader === index ? 0 : store.$getItemOffset(sectionHeader + 1) - store.$getItemOffset(sectionHeader)), store.$getItemOffset(count) - store.$getItemOffset(trailStart)];
+	const getInsetStart = () => layout.$getItemOffset(pinnedStart) + (sectionHeader < 0 || sectionHeader === index ? 0 : store.$getItemOffset(sectionHeader + 1) - store.$getItemOffset(sectionHeader));
+	const getInsetEnd = () => layout.$getItemOffset(count) - layout.$getItemOffset(trailStart);
 	if (align === "nearest") {
 		if (index < pinnedStart || index >= trailStart) {
 			return;
 		}
-		const [insetStart, insetEnd] = getInsets();
-		const scrollOffset = store.$getScrollOffset();
+		const insetStart = getInsetStart();
+		const scrollOffset = store.$getScrollOffset() + insetStart;
+		const viewportSize = store.$getViewportSize() - insetStart - getInsetEnd();
 		const itemSize = store.$getItemSize(index);
 		let itemOffset = store.$getItemOffset(index);
 		if (sectionHeader === index) {
 			const lastIndex = (section + 1 < starts.length ? starts[section + 1] : trailStart) - 1;
-			itemOffset = max(itemOffset, min(scrollOffset + insetStart, store.$getItemOffset(lastIndex) + store.$getItemSize(lastIndex) - itemSize));
+			itemOffset = max(itemOffset, min(scrollOffset, store.$getItemOffset(lastIndex) + store.$getItemSize(lastIndex) - itemSize));
 		}
-		if (itemOffset < scrollOffset + insetStart) {
+		if (itemOffset < scrollOffset) {
 			align = "start";
-		} else if (itemOffset + itemSize > scrollOffset + store.$getViewportSize() - insetEnd) {
+		} else if (itemOffset + itemSize > scrollOffset + viewportSize) {
 			align = "end";
 		} else {
 			return;
 		}
 	}
 	driver.$scroll(isHorizontal, () => {
-		const [insetStart, insetEnd] = getInsets();
-		const rest = store.$getItemSize(index) - store.$getViewportSize();
-		return store.$getItemOffset(index) + (align === "end" ? rest + insetEnd : align === "center" ? (rest + insetEnd - insetStart) / 2 : -insetStart);
+		const insetStart = getInsetStart();
+		const rest = store.$getItemSize(index) - (store.$getViewportSize() - insetStart - getInsetEnd());
+		return store.$getItemOffset(index) - insetStart + (align === "end" ? rest : align === "center" ? rest / 2 : 0);
 	});
 };
-var gridScrollToIndex = (driver, rowStore, colStore, headerRows = 0, sectionRows = EMPTY, footerRows = 0, headerCols = 0, footerCols = 0, { rowIndex, colIndex, rowAlign, colAlign }) => {
+var gridScrollToIndex = (driver, rowStore, colStore, rowLayout, colLayout, sectionRows = EMPTY, { rowIndex, colIndex, rowAlign, colAlign }) => {
 	if (rowIndex != null) {
-		scrollGridAxisToIndex(driver, rowStore, headerRows, sectionRows, footerRows, rowIndex, rowAlign, false);
+		scrollGridAxisToIndex(driver, rowStore, rowLayout, sectionRows, rowIndex, rowAlign, false);
 	}
 	if (colIndex != null) {
-		scrollGridAxisToIndex(driver, colStore, headerCols, EMPTY, footerCols, colIndex, colAlign, true);
+		scrollGridAxisToIndex(driver, colStore, colLayout, EMPTY, colIndex, colAlign, true);
 	}
 };
 
@@ -1746,16 +1761,16 @@ var VGrid = (props) => {
 	rowStore.$subscribe(8, notifyScrollEnd);
 	colStore.$subscribe(8, notifyScrollEnd);
 	createComputed(() => {
-		updateGridAxis(rowStore, rowLayout, props.rows, props.rowHeight, true);
+		updateGridAxis(rowStore, rowLayout, props.rows, props.rowHeight, props.headerRows, props.footerRows, true);
 	});
 	createComputed(() => {
-		updateGridAxis(colStore, colLayout, props.cols, props.colWidth, true);
+		updateGridAxis(colStore, colLayout, props.cols, props.colWidth, props.headerCols, props.footerCols, true);
 	});
 	const rowCount = createMemo(() => stateVersion() && rowStore.$getItemsLength());
 	const colCount = createMemo(() => stateVersion() && colStore.$getItemsLength());
 	const plan = createMemo(() => {
 		stateVersion();
-		return createGridPlan(rowLayout, colLayout, rowStore.$getRange(props.bufferSize), colStore.$getRange(props.bufferSize), props.headerRows, props.sectionRows, props.footerRows, props.headerCols, props.footerCols, props.spans, props.keepMounted, props.ariaSort);
+		return createGridPlan(rowLayout, colLayout, rowStore.$getRange(props.bufferSize), colStore.$getRange(props.bufferSize), props.sectionRows, props.spans, props.keepMounted, props.ariaSort);
 	});
 	const keys = createMemo(() => plan().$groups.map((state) => "$rows" in state ? state.$key : state.$row));
 	const isScrolling = createMemo(() => stateVersion() && (rowStore.$isScrolling() || colStore.$isScrolling()));
@@ -1804,7 +1819,7 @@ var VGrid = (props) => {
 			getColOffset: colStore.$getItemOffset,
 			getRowSize: rowStore.$getItemSize,
 			getColSize: colStore.$getItemSize,
-			scrollToIndex: (opts) => gridScrollToIndex(driver, rowStore, colStore, props.headerRows, props.sectionRows, props.footerRows, props.headerCols, props.footerCols, opts),
+			scrollToIndex: (opts) => gridScrollToIndex(driver, rowStore, colStore, rowLayout, colLayout, props.sectionRows, opts),
 			scrollTo: ({ vertical, horizontal }) => gridScrollTo(driver, vertical, horizontal),
 			scrollBy: ({ vertical, horizontal }) => gridScrollBy(driver, rowStore, colStore, vertical, horizontal)
 		});