@vueye-table/headless 3.0.0-beta.6 → 3.0.0-beta.8

package/dist/index.js

@@ -1,6 +1,6 @@
 import { injectDataGrid, injectDataTable, provideDataGrid, provideDataTable, useDataGrid, useTableLocale, useVirtualColumns, useVirtualRows } from "@vueye-table/vue";
-import { Fragment, computed, defineComponent, h, inject, mergeProps, nextTick, onMounted, onScopeDispose, provide, ref, shallowRef, useId, watch } from "vue";
-import { formatValue, getRowItemKey, gridCommand } from "@vueye-table/core";
+import { Fragment, cloneVNode, computed, defineComponent, getCurrentInstance, h, inject, isVNode, mergeProps, nextTick, onMounted, onScopeDispose, onUpdated, provide, ref, shallowRef, useId, watch } from "vue";
+import { clampColumnWidth, formatValue, getRowItemKey, gridCommand } from "@vueye-table/core";
 
 //#region src/shared.ts
 /** Leading native utility cells, independent of data-column coordinates. */
@@ -370,173 +370,447 @@ const DataTableLoadMore = defineComponent({
 });
 
 //#endregion
-//#region src/editor.ts
-function editorText(value, kind) {
-	if (value === null || value === void 0) return "";
-	if (kind === "date" && value instanceof Date) return Number.isFinite(value.getTime()) ? value.toISOString().slice(0, 10) : "";
-	return formatValue(value);
+//#region src/row-layout.ts
+const groupingProps = { aggregatePosition: {
+	type: String,
+	default: "group"
+} };
+const layoutKey$1 = Symbol("vt-row-layout");
+const pinnedKey = Symbol("vt-pinned-row");
+function injectRowLayout() {
+	return inject(layoutKey$1, void 0);
 }
-const cellEditorProps = {
-	editor: {
-		type: Object,
-		required: true
-	},
-	spec: {
-		type: Object,
-		default: () => ({ kind: "text" })
-	},
-	/** Keyboard movement is owned by the surrounding cell. */
-	finish: {
-		type: Function,
-		default: void 0
-	},
-	autofocus: {
-		type: Boolean,
-		default: true
+function injectPinnedRow() {
+	return inject(pinnedKey, void 0);
+}
+/** Presentation indices include group headers and optional footers; grid positions stay on leaves. */
+function provideRowLayout(table, options, element) {
+	const measured = shallowRef(/* @__PURE__ */ new Map());
+	const headerHeight = shallowRef(0);
+	const targets = /* @__PURE__ */ new Map();
+	let head = null;
+	let observer;
+	const plan = computed(() => {
+		if (!table.grouped && table.topRows.length === 0 && table.bottomRows.length === 0) return {
+			items: table.renderItems,
+			footers: /* @__PURE__ */ new Map(),
+			indices: /* @__PURE__ */ new Map(),
+			levels: /* @__PURE__ */ new Map(),
+			structured: false
+		};
+		const items = [];
+		const footers = /* @__PURE__ */ new Map();
+		const stack = [];
+		const levels = /* @__PURE__ */ new Map();
+		let depth = 0;
+		const appendFooter = () => {
+			const group = stack.pop();
+			const key = JSON.stringify(["aggregate-footer", group.key]);
+			footers.set(key, group);
+			items.push(Object.freeze({
+				...group,
+				key
+			}));
+		};
+		const footerMode = options.aggregatePosition === "footer" && table.columns.some((column) => column.aggregate);
+		for (const item of table.renderItems) {
+			if (item.kind === "group") depth = item.depth;
+			else levels.set(item.row.key, depth + 2);
+			if (footerMode && item.kind === "group") {
+				while (stack.length && stack.at(-1).depth >= item.depth) appendFooter();
+				if (item.isExpanded) stack.push(item);
+			}
+			items.push(item);
+		}
+		while (stack.length) appendFooter();
+		const structured = table.grouped || table.topRows.length > 0 || table.bottomRows.length > 0;
+		const indices = /* @__PURE__ */ new Map();
+		table.topRows.forEach((row, index) => indices.set(getRowItemKey(row.key), index + 2));
+		items.forEach((item, index) => indices.set(item.key, table.topRows.length + index + 2));
+		table.bottomRows.forEach((row, index) => indices.set(getRowItemKey(row.key), table.topRows.length + items.length + index + 2));
+		return {
+			items: Object.freeze(items),
+			footers,
+			indices,
+			structured,
+			levels
+		};
+	});
+	const size = (key) => measured.value.get(key) ?? (options.rowHeight > 0 ? options.rowHeight : 40);
+	const region = (side) => side === "top" ? table.topRows : table.bottomRows;
+	const height = (side) => region(side).reduce((sum, row) => sum + size(row.key), 0);
+	const measure = (target, key) => {
+		const value = target.getBoundingClientRect().height;
+		if (key === void 0) {
+			if (Number.isFinite(value)) headerHeight.value = Math.max(0, value);
+		} else if (value > 0 && Number.isFinite(value) && measured.value.get(key) !== value) measured.value = new Map(measured.value).set(key, value);
+	};
+	const refresh = () => {
+		const next = element()?.querySelector("thead") ?? null;
+		if (head !== next) {
+			if (head) observer?.unobserve(head);
+			head = next;
+			if (head) observer?.observe(head);
+		}
+		if (head) measure(head);
+		for (const [key, target] of targets) measure(target, key);
+	};
+	onMounted(() => {
+		const Observer = element()?.ownerDocument.defaultView?.ResizeObserver;
+		if (Observer) observer = new Observer((entries) => {
+			for (const { target } of entries) if (target === head) measure(target);
+			else for (const [key, value] of targets) if (value === target) measure(target, key);
+		});
+		refresh();
+		for (const [key, target] of targets) {
+			observer?.observe(target);
+			measure(target, key);
+		}
+	});
+	onUpdated(refresh);
+	onScopeDispose(() => {
+		observer?.disconnect();
+		targets.clear();
+	});
+	const layout = {
+		get aggregatePosition() {
+			return options.aggregatePosition;
+		},
+		get items() {
+			return plan.value.items;
+		},
+		get headerHeight() {
+			return headerHeight.value;
+		},
+		get topHeight() {
+			return height("top");
+		},
+		get bottomHeight() {
+			return height("bottom");
+		},
+		get count() {
+			return plan.value.structured ? table.topRows.length + plan.value.items.length + table.bottomRows.length + 1 : void 0;
+		},
+		index(key, kind = "row") {
+			return plan.value.structured ? plan.value.indices.get(kind === "group" ? key : getRowItemKey(key, kind)) : void 0;
+		},
+		level(key) {
+			return table.grouped ? plan.value.levels.get(key) ?? 1 : void 0;
+		},
+		footer: (key) => plan.value.footers.get(key),
+		register(key, target, owner) {
+			const previous = targets.get(key);
+			if (!target && owner && previous !== owner) return;
+			if (previous === target) return;
+			if (previous) observer?.unobserve(previous);
+			if (target) {
+				targets.set(key, target);
+				observer?.observe(target);
+				measure(target, key);
+			} else {
+				targets.delete(key);
+				if (measured.value.has(key)) {
+					const next = new Map(measured.value);
+					next.delete(key);
+					measured.value = next;
+				}
+			}
+		},
+		pinStyle(side, key, columnPinned) {
+			const rows = region(side);
+			const index = rows.findIndex((row) => row.key === key);
+			const offset = (side === "top" ? rows.slice(0, index) : rows.slice(index + 1)).reduce((sum, row) => sum + size(row.key), 0);
+			return {
+				position: "sticky",
+				[side === "top" ? "insetBlockStart" : "insetBlockEnd"]: `${offset + (side === "top" ? headerHeight.value : 0)}px`,
+				zIndex: columnPinned ? "5" : "3"
+			};
+		},
+		headerStyle(columnPinned) {
+			return table.topRows.length || table.bottomRows.length ? {
+				position: "sticky",
+				insetBlockStart: "0px",
+				zIndex: columnPinned ? "6" : "4"
+			} : void 0;
+		}
+	};
+	provide(layoutKey$1, layout);
+	return layout;
+}
+/** Apply region context to an ordinary data row without changing its cell/grid coordinates. */
+const DataTablePinnedRow = defineComponent({
+	name: "DataTablePinnedRow",
+	props: {
+		row: rowProp,
+		side: {
+			type: String,
+			required: true
+		}
 	},
-	blurCommit: {
+	slots: Object,
+	setup(props, { slots }) {
+		const layout = injectRowLayout();
+		const instance = getCurrentInstance();
+		let current;
+		const register = () => {
+			const target = instance?.subTree.el;
+			if (target && "getBoundingClientRect" in target) {
+				current = target;
+				layout?.register(props.row.key, target);
+			}
+		};
+		onMounted(register);
+		onUpdated(register);
+		onScopeDispose(() => layout?.register(props.row.key, null, current));
+		provide(pinnedKey, {
+			get side() {
+				return props.side;
+			},
+			attrs: (columnPinned = false) => ({
+				"data-row-pinned": props.side,
+				style: layout?.pinStyle(props.side, props.row.key, columnPinned)
+			})
+		});
+		return () => {
+			const child = slots.default?.()[0];
+			return child ? cloneVNode(child, { "data-row-pinned": props.side }, true) : h("tr");
+		};
+	}
+});
+
+//#endregion
+//#region src/column-layout.ts
+const resizingProps = {
+	resizableColumns: {
 		type: Boolean,
-		default: true
+		default: false
 	},
-	tabCommit: {
-		type: Boolean,
-		default: true
+	/** Pixel widths of leading utility columns; unspecified widths default to 48. */
+	leadingColumnWidths: {
+		type: Array,
+		default: void 0
 	}
 };
-/** Plain native fields. Select results are searched and capped at 50 mounted options. */
-const DataCellEditor = defineComponent({
-	name: "DataCellEditor",
-	props: cellEditorProps,
+const layoutKey = Symbol("vt-column-layout");
+const headerKey = Symbol("vt-header-column");
+function provideHeaderColumn(column) {
+	provide(headerKey, column);
+}
+function injectColumnLayout() {
+	return inject(layoutKey, void 0);
+}
+function effectiveColumnWidth(column, fallback = 120) {
+	return Math.max(1, clampColumnWidth(column, column.width ?? fallback));
+}
+/** CSS-only preview keeps one gesture to one engine operation. */
+function provideColumnLayout(table, options, element) {
+	const columns = computed(() => table.columns);
+	const previewVariables = /* @__PURE__ */ new Set();
+	const variable = (column) => `--vt-column-${columns.value.findIndex((item) => item.id === column.id)}-width`;
+	const sum = (values) => values.length ? `calc(${values.join(" + ")})` : "0px";
+	const layout = {
+		enabled: () => options.resizableColumns && columns.value.some((column) => column.resizable) || columns.value.some((column) => column.pinned),
+		resizable: () => options.resizableColumns,
+		effectiveWidth: (column) => effectiveColumnWidth(column, options.columnWidth ?? 120),
+		width: (column, fallback = layout.effectiveWidth(column)) => `var(${variable(column)}, ${fallback}px)`,
+		leadingWidths: () => Array.from({ length: options.leadingColumns }, (_, index) => {
+			const width = options.leadingColumnWidths?.[index] ?? (options.gutter ? options.gutter / Math.max(1, options.leadingColumns) : 48);
+			return Number.isFinite(width) && width > 0 ? width : 48;
+		}),
+		attrs(column, header = false) {
+			if (!layout.enabled()) return {};
+			const style = {};
+			if (column.width !== void 0) style["width"] = `${column.width}px`;
+			if (column.minWidth !== void 0) style["minWidth"] = `${column.minWidth}px`;
+			if (layout.enabled()) style["width"] = layout.width(column);
+			if (column.pinned) {
+				const pins = columns.value.filter((item) => item.pinned === column.pinned);
+				const index = pins.findIndex((item) => item.id === column.id);
+				const previous = column.pinned === "start" ? pins.slice(0, index) : pins.slice(index + 1);
+				style["position"] = "sticky";
+				style[column.pinned === "start" ? "insetInlineStart" : "insetInlineEnd"] = sum([...column.pinned === "start" ? layout.leadingWidths().map((width) => `${width}px`) : [], ...previous.map((item) => layout.width(item))]);
+				style["zIndex"] = header ? "4" : "2";
+			}
+			return {
+				"data-pinned": column.pinned,
+				"data-pinned-edge": flag(column.isPinnedEdge),
+				"data-resizable": header ? flag(options.resizableColumns && column.resizable) : void 0,
+				style
+			};
+		},
+		leading(index, header) {
+			const pinned = columns.value.some((column) => column.pinned);
+			return {
+				"data-leading-column": index,
+				"data-pinned": pinned ? "start" : void 0,
+				"data-pinned-edge": flag(pinned && !columns.value.some((column) => column.pinned === "start") && index === options.leadingColumns - 1),
+				style: pinned ? {
+					position: "sticky",
+					insetInlineStart: `${layout.leadingWidths().slice(0, index).reduce((a, b) => a + b, 0)}px`,
+					zIndex: header ? "4" : "2"
+				} : void 0
+			};
+		},
+		style(total) {
+			if (!layout.enabled() && total === void 0) return void 0;
+			return {
+				tableLayout: "fixed",
+				width: total === void 0 ? sum([...layout.leadingWidths().map((value) => `${value}px`), ...columns.value.map((column) => layout.width(column))]) : `calc(${total}px + var(--vt-resize-delta, 0px))`
+			};
+		},
+		preview(column, width) {
+			element()?.style.setProperty(variable(column), `${width}px`);
+			previewVariables.add(variable(column));
+			element()?.style.setProperty("--vt-resize-delta", `${width - layout.effectiveWidth(column)}px`);
+		},
+		clear() {
+			for (const name of previewVariables) element()?.style.removeProperty(name);
+			previewVariables.clear();
+			element()?.style.removeProperty("--vt-resize-delta");
+		},
+		colgroup() {
+			return layout.enabled() ? h("colgroup", [...layout.leadingWidths().map((width) => h("col", { style: { width: `${width}px` } })), ...columns.value.map((column) => h("col", {
+				key: column.id,
+				style: { width: layout.width(column) }
+			}))]) : null;
+		}
+	};
+	provide(layoutKey, layout);
+	return layout;
+}
+/** Leading selection, disclosure or row-number cells share start-region offsets. */
+const DataTableLeadingCell = defineComponent({
+	name: "DataTableLeadingCell",
+	props: {
+		as: asProp("td"),
+		index: {
+			type: Number,
+			default: 0
+		}
+	},
+	slots: Object,
+	setup(props, { slots, attrs }) {
+		const layout = injectColumnLayout();
+		const rows = injectRowLayout();
+		const pin = injectPinnedRow();
+		return () => {
+			const header = props.as === "th" && attrs["scope"] !== "row";
+			const leading = layout?.leading(props.index, header) ?? {};
+			return h(props.as, mergeProps(leading, { style: header ? rows?.headerStyle(!!leading["data-pinned"]) : void 0 }, pin?.attrs(!!leading["data-pinned"]) ?? {}), slots.default?.());
+		};
+	}
+});
+/** A keyboard-operable separator; pointer movement previews and release commits once. */
+const DataTableColumnResizer = defineComponent({
+	name: "DataTableColumnResizer",
+	props: { column: {
+		type: Object,
+		default: void 0
+	} },
 	setup(props) {
+		const table = injectDataTable("<DataTableColumnResizer>");
+		const header = inject(headerKey, void 0);
+		const layout = injectColumnLayout();
 		const locale = useTableLocale();
-		const field = ref();
-		const query = ref("");
-		const options = props.spec.options ?? [];
-		const matches = computed(() => {
-			const search = query.value.trim().toLocaleLowerCase();
-			return options.map((value, index) => ({
-				value,
-				index
-			})).filter(({ value }) => String(value ?? "").toLocaleLowerCase().includes(search));
-		});
-		onMounted(() => {
-			if (!props.autofocus) return;
-			field.value?.focus();
-			if (field.value && "setSelectionRange" in field.value && ["text", "number"].includes(props.spec.kind)) field.value.setSelectionRange(field.value.value.length, field.value.value.length);
-		});
-		const finish = (direction) => {
-			if (props.finish) props.finish(direction);
-			else props.editor.commit();
+		const preview = shallowRef();
+		let drag;
+		const column = () => props.column ?? header?.();
+		const currentWidth = (value) => layout?.effectiveWidth(value) ?? effectiveColumnWidth(value);
+		const stop = (commit = false) => {
+			const current = drag;
+			if (!current) return;
+			drag = void 0;
+			const width = preview.value;
+			if (commit && width !== void 0) table.resizeColumn(current.column.id, width);
+			layout?.clear(current.column);
+			preview.value = void 0;
+			if (current.target.hasPointerCapture?.(current.pointer)) current.target.releasePointerCapture(current.pointer);
 		};
-		const keydown = (event) => {
-			if (event.isComposing) return;
-			if (event.key === "Escape") {
-				event.preventDefault();
-				event.stopPropagation();
-				if (!props.editor.pending) props.editor.cancel();
-			} else if (event.key === "Enter" || event.key === "Tab") {
-				if (event.key === "Tab" && !props.tabCommit) return;
-				event.preventDefault();
-				event.stopPropagation();
-				if (!props.editor.pending) finish(event.key === "Tab" ? event.shiftKey ? "left" : "right" : event.shiftKey ? "up" : "down");
-			}
-		};
-		const paste = (event) => {
-			const text = event.clipboardData?.getData("text/plain");
-			if (text === void 0 || props.editor.pending) return;
-			event.preventDefault();
-			const target = event.target;
-			const start = target.selectionStart ?? 0;
-			const end = target.selectionEnd ?? target.value.length;
-			props.editor.input(target.value.slice(0, start) + text + target.value.slice(end));
+		const move = (event) => {
+			if (!drag || drag.pointer !== event.pointerId) return;
+			preview.value = Math.max(1, clampColumnWidth(drag.column, drag.width + (event.clientX - drag.x) * drag.sign));
+			layout?.preview(drag.column, preview.value);
 		};
+		watch(() => table.columns, () => stop(), { flush: "sync" });
+		onScopeDispose(() => stop());
 		return () => {
-			const { editor, spec } = props;
-			const { messages, count } = locale();
-			const attrs = {
-				...editor.attrs,
-				"aria-label": messages.editCell(editor.column.header),
-				"data-editor": "",
-				disabled: editor.pending,
-				onKeydown: keydown
-			};
-			if (spec.kind === "select") {
-				const shown = matches.value.slice(0, 50);
-				return h("div", {
-					"data-select-editor": "",
-					onKeydown: (event) => {
-						if (event.key === "Escape") keydown(event);
+			const current = column();
+			if (!current?.resizable) return null;
+			return h("span", {
+				role: "separator",
+				tabindex: 0,
+				"aria-orientation": "vertical",
+				"aria-label": locale().messages.resizeColumn(current.header),
+				"aria-description": locale().messages.resizeColumnHelp,
+				"aria-valuenow": preview.value ?? currentWidth(current),
+				"aria-valuemin": Math.max(1, current.minWidth ?? 1),
+				"aria-valuemax": current.maxWidth === void 0 ? void 0 : Math.max(1, current.minWidth ?? 1, current.maxWidth),
+				"data-column-resizer": "",
+				"data-resizing": flag(preview.value !== void 0),
+				style: {
+					touchAction: "none",
+					cursor: "col-resize",
+					userSelect: "none"
+				},
+				onClick: (event) => event.stopPropagation(),
+				onDblclick: (event) => {
+					event.stopPropagation();
+					stop();
+					table.resetColumnSize(current.id);
+				},
+				onPointerdown: (event) => {
+					if (event.button !== 0 || drag || !layout) return;
+					const target = event.currentTarget;
+					target.focus({ preventScroll: true });
+					target.setPointerCapture?.(event.pointerId);
+					event.preventDefault();
+					event.stopPropagation();
+					drag = {
+						target,
+						pointer: event.pointerId,
+						x: event.clientX,
+						width: currentWidth(current),
+						column: current,
+						sign: directionOf(target) === "rtl" ? -1 : 1
+					};
+					preview.value = drag.width;
+				},
+				onPointermove: move,
+				onPointerup: (event) => {
+					if (drag?.pointer === event.pointerId) {
+						move(event);
+						stop(true);
 					}
-				}, [
-					h("input", {
-						ref: field,
-						type: "search",
-						value: query.value,
-						"aria-label": messages.searchOptions(editor.column.header),
-						disabled: editor.pending,
-						onInput: (event) => {
-							query.value = event.target.value;
-						},
-						onKeydown: (event) => {
-							if (event.key === "Enter" && shown[0]) {
-								event.preventDefault();
-								editor.commit(shown[0].value);
-							} else keydown(event);
-						}
-					}),
-					h("select", {
-						...attrs,
-						value: options.findIndex((value) => Object.is(value, editor.value)),
-						size: Math.max(2, Math.min(5, shown.length)),
-						onChange: (event) => {
-							const index = Number(event.target.value);
-							if (index >= 0) editor.commit(options[index]);
-						}
-					}, shown.map(({ value, index }) => h("option", {
-						key: index,
-						value: index
-					}, value === null || value === void 0 ? messages.emptyOption : String(value)))),
-					h("span", {
-						role: "status",
-						"data-editor-hint": ""
-					}, matches.value.length === 0 ? messages.noMatchingOptions : matches.value.length > 50 ? messages.firstMatchesOnly(count(50)) : messages.optionCount(count(matches.value.length)))
-				]);
-			}
-			return h("input", {
-				...attrs,
-				ref: field,
-				type: spec.kind === "date" ? "date" : spec.kind === "checkbox" ? "checkbox" : "text",
-				inputmode: spec.kind === "number" ? "decimal" : void 0,
-				value: editor.draft,
-				checked: spec.kind === "checkbox" ? editor.value === true : void 0,
-				onInput: spec.kind === "checkbox" ? void 0 : (event) => editor.input(event.target.value),
-				onChange: spec.kind === "checkbox" ? (event) => editor.commit(event.target.checked) : void 0,
-				onBlur: () => {
-					if (props.blurCommit && !editor.pending) finish();
 				},
-				onPaste: spec.kind === "checkbox" ? void 0 : paste
+				onPointercancel: (event) => {
+					if (drag?.pointer === event.pointerId) stop();
+				},
+				onLostpointercapture: (event) => {
+					if (drag?.pointer === event.pointerId) stop();
+				},
+				onKeydown: (event) => {
+					if (event.key === "Escape" && drag) {
+						event.preventDefault();
+						event.stopPropagation();
+						stop();
+						return;
+					}
+					if (drag) return;
+					let width;
+					const sign = directionOf(event.currentTarget) === "rtl" ? -1 : 1;
+					if (event.key === "ArrowLeft" || event.key === "ArrowRight") width = currentWidth(current) + (event.key === "ArrowRight" ? 1 : -1) * sign * (event.shiftKey ? 50 : 10);
+					else if (event.key === "Home") width = Math.max(1, current.minWidth ?? 1);
+					else if (event.key === "End") width = current.maxWidth;
+					else if (event.key === "Enter") table.resetColumnSize(current.id);
+					else return;
+					event.preventDefault();
+					event.stopPropagation();
+					if (width !== void 0) table.resizeColumn(current.id, Math.max(1, width));
+				}
 			});
 		};
 	}
 });
-/** The cell owns the id so it remains stable while its editor mounts and unmounts. */
-function issueAttrs(id, issues, pending) {
-	return {
-		"aria-invalid": issues.length ? "true" : void 0,
-		"aria-describedby": issues.length ? id : void 0,
-		"aria-busy": pending ? "true" : void 0
-	};
-}
-function editorIssues(id, issues, pending = false) {
-	return issues.length || pending ? h("span", {
-		id,
-		"data-edit-issues": "",
-		role: "status"
-	}, pending ? "Checking changes…" : issues.map((problem) => problem.message).join(" ")) : null;
-}
-function useEditorId() {
-	return `vt-edit-${useId()}`;
-}
 
 //#endregion
 //#region src/virtual.ts
@@ -608,21 +882,27 @@ const DataTableViewport = defineComponent({
 });
 function createComponentVirtual(table, options, tableElement, grid, virtualColumns = false, gutter = 0) {
 	const scrollElement = inject(viewportKey, shallowRef(null));
+	const layout = injectRowLayout();
 	const rows = useVirtualRows(table, {
 		scrollElement,
 		estimateRowHeight: options.rowHeight,
 		overscan: options.overscan,
 		initialCount: options.initialCount,
 		grid,
-		scrollMargin: () => tableElement()?.querySelector("thead")?.getBoundingClientRect().height ?? 0
+		renderItems: () => layout?.items ?? table.renderItems,
+		pinnedRowHeights: () => ({
+			top: layout?.topHeight ?? 0,
+			bottom: layout?.bottomHeight ?? 0
+		}),
+		scrollMargin: () => layout?.headerHeight ?? tableElement()?.querySelector("thead")?.getBoundingClientRect().height ?? 0
 	});
 	onMounted(() => {
 		watch(() => [
 			rows.endIndex,
-			table.renderItems.length,
+			layout?.items.length ?? table.renderItems.length,
 			table.canLoadMore
 		], () => {
-			if (table.loadingMode === "cursor" && table.canLoadMore && rows.endIndex >= table.renderItems.length - 1 - table.endThreshold) table.loadNext();
+			if (table.loadingMode === "cursor" && table.canLoadMore && rows.endIndex >= (layout?.items.length ?? table.renderItems.length) - 1 - table.endThreshold) table.loadNext();
 		}, { immediate: true });
 	});
 	const columns = grid && virtualColumns ? useVirtualColumns(grid, {
@@ -632,22 +912,27 @@ function createComponentVirtual(table, options, tableElement, grid, virtualColum
 		initialCount: options.initialColumnCount ?? 5,
 		scrollMargin: gutter
 	}) : void 0;
-	const pinnedRows = computed(() => {
+	const retainedRows = computed(() => {
 		const result = [...rows.items];
 		const positions = /* @__PURE__ */ new Set([grid?.selection?.focus.row, grid?.editor?.position.row]);
 		for (const position of positions) {
 			if (position === void 0 || result.some((item) => item.renderItem.kind === "row" && item.renderItem.rowIndex === position)) continue;
-			const direct = table.renderItems[position];
-			const index = direct?.kind === "row" && direct.rowIndex === position ? position : table.renderItems.findIndex((item) => item.kind === "row" && item.rowIndex === position);
+			const items = layout?.items ?? table.renderItems;
+			const direct = items[position];
+			const index = direct?.kind === "row" && direct.rowIndex === position ? position : items.findIndex((item) => item.kind === "row" && item.rowIndex === position);
 			const item = rows.getItem(index);
 			if (item) result.push(item);
 		}
 		return result.sort((a, b) => a.index - b.index);
 	});
-	const pinnedColumns = computed(() => {
+	const retainedColumns = computed(() => {
 		if (!columns) return void 0;
 		const result = [...columns.items];
-		const positions = /* @__PURE__ */ new Set([grid?.selection?.focus.column, grid?.editor?.position.column]);
+		const positions = /* @__PURE__ */ new Set([
+			grid?.selection?.focus.column,
+			grid?.editor?.position.column,
+			...table.grouped ? [0] : []
+		]);
 		for (const position of positions) {
 			if (position === void 0 || result.some((item) => item.index === position)) continue;
 			const item = columns.getItem(position);
@@ -660,10 +945,10 @@ function createComponentVirtual(table, options, tableElement, grid, virtualColum
 		columns,
 		gutter,
 		get rowItems() {
-			return pinnedRows.value;
+			return retainedRows.value;
 		},
 		get columnItems() {
-			return pinnedColumns.value;
+			return retainedColumns.value;
 		}
 	};
 	provide(virtualKey, binding);
@@ -724,55 +1009,357 @@ function rowSpacer(size, colspan, key) {
 		}
 	})]) : null;
 }
-function columnSpacer(size, tag, key) {
-	return size > 0 ? h(tag, {
-		key,
-		"aria-hidden": "true",
-		role: "presentation",
-		"data-virtual-spacer": "",
-		style: {
-			width: `${size}px`,
-			minWidth: `${size}px`,
-			padding: "0",
-			border: "0"
-		}
-	}) : null;
+function columnSpacer(size, tag, key) {
+	return size > 0 ? h(tag, {
+		key,
+		"aria-hidden": "true",
+		role: "presentation",
+		"data-virtual-spacer": "",
+		style: {
+			width: `${size}px`,
+			minWidth: `${size}px`,
+			padding: "0",
+			border: "0"
+		}
+	}) : null;
+}
+function renderColumns(tableColumns, binding, render, tag) {
+	if (!binding?.columns || !binding.columnItems) return tableColumns.map(render);
+	const result = [];
+	let end = 0;
+	for (const item of binding.columnItems) {
+		result.push(columnSpacer(item.start - end, tag, `gap-${item.index}`), render(item.column, item.index));
+		end = item.start + item.size;
+	}
+	result.push(columnSpacer(binding.columns.totalSize - end, tag, "gap-end"));
+	return result;
+}
+/** Native colspans count rendered cells and spacers, rather than logical omitted columns. */
+function physicalColumnCount(binding, count, leading = 0) {
+	if (!binding?.columns || !binding.columnItems) return Math.max(1, count + leading);
+	let end = 0;
+	let size = leading;
+	for (const item of binding.columnItems) {
+		if (item.start > end) size++;
+		size++;
+		end = item.start + item.size;
+	}
+	if (binding.columns.totalSize > end) size++;
+	return Math.max(1, size);
+}
+function renderRows(binding, colspan, render) {
+	const result = [];
+	let end = 0;
+	for (const item of binding.rowItems) {
+		result.push(rowSpacer(item.start - end, colspan, `gap-${item.index}`), render(item));
+		end = item.start + item.size;
+	}
+	result.push(rowSpacer(binding.rows.totalSize - end, colspan, "gap-end"));
+	return result;
+}
+function virtualColgroup(tableColumns, binding, width, leadingWidths) {
+	if (!binding.columns || !binding.columnItems) return null;
+	const cols = leadingWidths?.length ? leadingWidths.map((size) => h("col", { style: { width: `${size}px` } })) : binding.gutter ? [h("col", { style: { width: `${binding.gutter}px` } })] : [];
+	let end = 0;
+	for (const item of binding.columnItems) {
+		if (item.start > end) cols.push(h("col", { style: { width: `${item.start - end}px` } }));
+		cols.push(h("col", { style: { width: width?.(item.column, item.size) ?? `${item.size}px` } }));
+		end = item.start + item.size;
+	}
+	if (binding.columns.totalSize > end) cols.push(h("col", { style: { width: `${binding.columns.totalSize - end}px` } }));
+	return h("colgroup", cols);
+}
+function virtualRow(binding, row) {
+	return binding.rowItems.find((item) => item.renderItem.kind === "row" && item.renderItem.row.key === row.key);
+}
+
+//#endregion
+//#region src/grouped-rows.ts
+const groupProp = {
+	type: Object,
+	required: true
+};
+const DataTableAggregateCell = defineComponent({
+	name: "DataTableAggregateCell",
+	props: {
+		group: groupProp,
+		column: columnProp,
+		as: asProp("td")
+	},
+	slots: Object,
+	setup(props, { slots }) {
+		const layout = injectColumnLayout();
+		const table = injectDataTable("<DataTableAggregateCell>");
+		const offset = injectColumnOffset();
+		return () => h(props.as, {
+			"data-aggregate": props.column.id,
+			"aria-readonly": props.as === "td" ? "true" : void 0,
+			"data-align": props.column.align,
+			"aria-colindex": props.as === "td" ? table.columns.indexOf(props.column) + offset() + 1 : void 0,
+			...props.as === "td" ? layout?.attrs(props.column) : {}
+		}, props.column.aggregate ? slots.default?.({
+			group: props.group,
+			column: props.column,
+			value: props.group.getAggregate(props.column.id),
+			display: props.group.getAggregateDisplay(props.column.id)
+		}) ?? props.group.getAggregateDisplay(props.column.id) : void 0);
+	}
+});
+/** A read-only structural row; aggregate cells use the same native column layout as data cells. */
+const DataTableGroupRow = defineComponent({
+	name: "DataTableGroupRow",
+	props: {
+		group: groupProp,
+		footer: {
+			type: Boolean,
+			default: false
+		},
+		itemKey: {
+			type: String,
+			default: void 0
+		},
+		aggregates: {
+			type: Boolean,
+			default: true
+		}
+	},
+	slots: Object,
+	setup(props, { slots }) {
+		const table = injectDataTable("<DataTableGroupRow>");
+		const locale = useTableLocale();
+		const offset = injectColumnOffset();
+		const virtual = injectVirtual();
+		const layout = injectRowLayout();
+		return () => {
+			const { group } = props;
+			const label = locale().messages.groupLabel(table.getColumn(group.columnId)?.header ?? group.columnId, String(group.value), locale().count(group.leafCount));
+			const toggle = () => table.toggleGroup(group.key);
+			const content = props.footer ? locale().messages.groupTotals(label) : [table.selectionMode !== "none" ? h("input", {
+				type: "checkbox",
+				checked: group.selection === "all",
+				indeterminate: group.selection === "some",
+				"aria-label": locale().messages.selectGroup(label),
+				onChange: (event) => table.toggleGroupSelection(group.key, event.target.checked)
+			}) : null, h("button", {
+				type: "button",
+				"aria-expanded": String(group.isExpanded),
+				"aria-label": (group.isExpanded ? locale().messages.collapseGroup : locale().messages.expandGroup)(label),
+				onClick: toggle,
+				onKeydown: (event) => event.stopPropagation()
+			}, slots.group?.({
+				group,
+				label,
+				toggle
+			}) ?? label)];
+			const aggregate = (column, as = "td") => h(DataTableAggregateCell, {
+				key: column.id,
+				group,
+				column,
+				as
+			}, { default: slots[`aggregate.${column.id}`] });
+			const hasAggregates = props.aggregates && table.columns.some((column) => column.aggregate);
+			const labelCell = h("td", {
+				"data-group-label": "",
+				"aria-readonly": "true",
+				colspan: hasAggregates ? offset() + 1 : physicalColumnCount(virtual, table.columns.length, offset()),
+				style: { "--vt-group-depth": group.depth }
+			}, [h("div", { class: "vt-group-label-content" }, content), hasAggregates && table.columns[0]?.aggregate ? aggregate(table.columns[0], "span") : null]);
+			const cells = hasAggregates ? [labelCell, ...renderColumns(table.columns, virtual, (column, index) => index === 0 ? null : aggregate(column), "td")] : [labelCell];
+			const key = props.itemKey ?? group.key;
+			return h("tr", {
+				role: "row",
+				"data-group": group.key,
+				"data-group-depth": group.depth,
+				"data-aggregate-footer": props.footer ? "" : void 0,
+				"aria-level": group.depth + 1,
+				"aria-expanded": props.footer ? void 0 : String(group.isExpanded),
+				"aria-rowindex": layout?.index(key, "group"),
+				...virtual ? {
+					"data-virtual-row": "",
+					ref: (target) => virtual.rows.measureElement(target, key)
+				} : {}
+			}, cells);
+		};
+	}
+});
+function groupRow(item, slots, aggregatePosition, footer) {
+	return h(DataTableGroupRow, {
+		key: item.key,
+		itemKey: item.key,
+		group: footer ?? item,
+		footer: !!footer,
+		aggregates: !!footer || aggregatePosition === "group",
+		class: "vt-group-row"
+	}, slots);
+}
+
+//#endregion
+//#region src/editor.ts
+function editorText(value, kind) {
+	if (value === null || value === void 0) return "";
+	if (kind === "date" && value instanceof Date) return Number.isFinite(value.getTime()) ? value.toISOString().slice(0, 10) : "";
+	return formatValue(value);
 }
-function renderColumns(tableColumns, binding, render, tag) {
-	if (!binding?.columns || !binding.columnItems) return tableColumns.map(render);
-	const result = [];
-	let end = 0;
-	for (const item of binding.columnItems) {
-		result.push(columnSpacer(item.start - end, tag, `gap-${item.index}`), render(item.column, item.index));
-		end = item.start + item.size;
+const cellEditorProps = {
+	editor: {
+		type: Object,
+		required: true
+	},
+	spec: {
+		type: Object,
+		default: () => ({ kind: "text" })
+	},
+	/** Keyboard movement is owned by the surrounding cell. */
+	finish: {
+		type: Function,
+		default: void 0
+	},
+	autofocus: {
+		type: Boolean,
+		default: true
+	},
+	blurCommit: {
+		type: Boolean,
+		default: true
+	},
+	tabCommit: {
+		type: Boolean,
+		default: true
 	}
-	result.push(columnSpacer(binding.columns.totalSize - end, tag, "gap-end"));
-	return result;
-}
-function renderRows(binding, colspan, render) {
-	const result = [];
-	let end = 0;
-	for (const item of binding.rowItems) {
-		result.push(rowSpacer(item.start - end, colspan, `gap-${item.index}`), render(item));
-		end = item.start + item.size;
+};
+/** Plain native fields. Select results are searched and capped at 50 mounted options. */
+const DataCellEditor = defineComponent({
+	name: "DataCellEditor",
+	props: cellEditorProps,
+	setup(props) {
+		const locale = useTableLocale();
+		const field = ref();
+		const query = ref("");
+		const options = props.spec.options ?? [];
+		const matches = computed(() => {
+			const search = query.value.trim().toLocaleLowerCase();
+			return options.map((value, index) => ({
+				value,
+				index
+			})).filter(({ value }) => String(value ?? "").toLocaleLowerCase().includes(search));
+		});
+		onMounted(() => {
+			if (!props.autofocus) return;
+			field.value?.focus();
+			if (field.value && "setSelectionRange" in field.value && ["text", "number"].includes(props.spec.kind)) field.value.setSelectionRange(field.value.value.length, field.value.value.length);
+		});
+		const finish = (direction) => {
+			if (props.finish) props.finish(direction);
+			else props.editor.commit();
+		};
+		const keydown = (event) => {
+			if (event.isComposing) return;
+			if (event.key === "Escape") {
+				event.preventDefault();
+				event.stopPropagation();
+				if (!props.editor.pending) props.editor.cancel();
+			} else if (event.key === "Enter" || event.key === "Tab") {
+				if (event.key === "Tab" && !props.tabCommit) return;
+				event.preventDefault();
+				event.stopPropagation();
+				if (!props.editor.pending) finish(event.key === "Tab" ? event.shiftKey ? "left" : "right" : event.shiftKey ? "up" : "down");
+			}
+		};
+		const paste = (event) => {
+			const text = event.clipboardData?.getData("text/plain");
+			if (text === void 0 || props.editor.pending) return;
+			event.preventDefault();
+			const target = event.target;
+			const start = target.selectionStart ?? 0;
+			const end = target.selectionEnd ?? target.value.length;
+			props.editor.input(target.value.slice(0, start) + text + target.value.slice(end));
+		};
+		return () => {
+			const { editor, spec } = props;
+			const { messages, count } = locale();
+			const attrs = {
+				...editor.attrs,
+				"aria-label": messages.editCell(editor.column.header),
+				"data-editor": "",
+				disabled: editor.pending,
+				onKeydown: keydown
+			};
+			if (spec.kind === "select") {
+				const shown = matches.value.slice(0, 50);
+				return h("div", {
+					"data-select-editor": "",
+					onKeydown: (event) => {
+						if (event.key === "Escape") keydown(event);
+					}
+				}, [
+					h("input", {
+						ref: field,
+						type: "search",
+						value: query.value,
+						"aria-label": messages.searchOptions(editor.column.header),
+						disabled: editor.pending,
+						onInput: (event) => {
+							query.value = event.target.value;
+						},
+						onKeydown: (event) => {
+							if (event.key === "Enter" && shown[0]) {
+								event.preventDefault();
+								editor.commit(shown[0].value);
+							} else keydown(event);
+						}
+					}),
+					h("select", {
+						...attrs,
+						value: options.findIndex((value) => Object.is(value, editor.value)),
+						size: Math.max(2, Math.min(5, shown.length)),
+						onChange: (event) => {
+							const index = Number(event.target.value);
+							if (index >= 0) editor.commit(options[index]);
+						}
+					}, shown.map(({ value, index }) => h("option", {
+						key: index,
+						value: index
+					}, value === null || value === void 0 ? messages.emptyOption : String(value)))),
+					h("span", {
+						role: "status",
+						"data-editor-hint": ""
+					}, matches.value.length === 0 ? messages.noMatchingOptions : matches.value.length > 50 ? messages.firstMatchesOnly(count(50)) : messages.optionCount(count(matches.value.length)))
+				]);
+			}
+			return h("input", {
+				...attrs,
+				ref: field,
+				type: spec.kind === "date" ? "date" : spec.kind === "checkbox" ? "checkbox" : "text",
+				inputmode: spec.kind === "number" ? "decimal" : void 0,
+				value: editor.draft,
+				checked: spec.kind === "checkbox" ? editor.value === true : void 0,
+				onInput: spec.kind === "checkbox" ? void 0 : (event) => editor.input(event.target.value),
+				onChange: spec.kind === "checkbox" ? (event) => editor.commit(event.target.checked) : void 0,
+				onBlur: () => {
+					if (props.blurCommit && !editor.pending) finish();
+				},
+				onPaste: spec.kind === "checkbox" ? void 0 : paste
+			});
+		};
 	}
-	result.push(rowSpacer(binding.rows.totalSize - end, colspan, "gap-end"));
-	return result;
+});
+/** The cell owns the id so it remains stable while its editor mounts and unmounts. */
+function issueAttrs(id, issues, pending) {
+	return {
+		"aria-invalid": issues.length ? "true" : void 0,
+		"aria-describedby": issues.length ? id : void 0,
+		"aria-busy": pending ? "true" : void 0
+	};
 }
-function virtualColgroup(tableColumns, binding) {
-	if (!binding.columns || !binding.columnItems) return null;
-	const cols = binding.gutter ? [h("col", { style: { width: `${binding.gutter}px` } })] : [];
-	let end = 0;
-	for (const item of binding.columnItems) {
-		if (item.start > end) cols.push(h("col", { style: { width: `${item.start - end}px` } }));
-		cols.push(h("col", { style: { width: `${item.size}px` } }));
-		end = item.start + item.size;
-	}
-	if (binding.columns.totalSize > end) cols.push(h("col", { style: { width: `${binding.columns.totalSize - end}px` } }));
-	return h("colgroup", cols);
+function editorIssues(id, issues, pending = false) {
+	return issues.length || pending ? h("span", {
+		id,
+		"data-edit-issues": "",
+		role: "status"
+	}, pending ? "Checking changes…" : issues.map((problem) => problem.message).join(" ")) : null;
 }
-function virtualRow(binding, row) {
-	return binding.rowItems.find((item) => item.renderItem.kind === "row" && item.renderItem.row.key === row.key);
+function useEditorId() {
+	return `vt-edit-${useId()}`;
 }
 
 //#endregion
@@ -857,8 +1444,9 @@ function treeKeydown(event, context, virtual) {
 	if (!table.tree || !target?.closest) return;
 	if (target.closest("input, textarea, select, [contenteditable=true]") || target.closest("button") && !target.closest("[data-expand-toggle]")) return;
 	const key = target.closest("tr")?.getAttribute("data-tree-key");
-	const index = table.rows.findIndex((row) => getRowItemKey(row.key) === key);
-	const row = table.rows[index];
+	const visible = table.gridRows;
+	const index = visible.findIndex((row) => getRowItemKey(row.key) === key);
+	const row = visible[index];
 	if (!row) return;
 	const command = gridCommand({
 		key: event.key,
@@ -874,11 +1462,15 @@ function treeKeydown(event, context, virtual) {
 	let next = row;
 	if (command?.type === "tree") {
 		if (command.action === "expand" || command.action === "collapse") table.toggleExpanded(row.key, command.action === "expand");
-		else if (command.action === "siblings") for (const sibling of table.processedRows.filter((candidate) => candidate.parentKey === row.parentKey && candidate.canExpand)) table.toggleExpanded(sibling.key, true);
-		else if (command.action === "child") next = table.rows.find((candidate) => candidate.parentKey === row.key) ?? row;
-		else next = table.rows.find((candidate) => candidate.key === row.parentKey) ?? row;
-	} else if (event.key === "ArrowDown" || event.key === "ArrowUp") next = table.rows[index + (event.key === "ArrowDown" ? 1 : -1)] ?? row;
-	else if (event.key === "Home" || event.key === "End") next = table.rows[event.key === "Home" ? 0 : table.rows.length - 1] ?? row;
+		else if (command.action === "siblings") for (const sibling of [
+			...table.topRows,
+			...table.processedRows,
+			...table.bottomRows
+		].filter((candidate) => candidate.parentKey === row.parentKey && candidate.canExpand)) table.toggleExpanded(sibling.key, true);
+		else if (command.action === "child") next = visible.find((candidate) => candidate.parentKey === row.key) ?? row;
+		else next = visible.find((candidate) => candidate.key === row.parentKey) ?? row;
+	} else if (event.key === "ArrowDown" || event.key === "ArrowUp") next = visible[index + (event.key === "ArrowDown" ? 1 : -1)] ?? row;
+	else if (event.key === "Home" || event.key === "End") next = visible[event.key === "Home" ? 0 : visible.length - 1] ?? row;
 	else return;
 	event.preventDefault();
 	const root = target.closest("table");
@@ -912,11 +1504,12 @@ const DataTableExpandToggle = defineComponent({
 	slots: Object,
 	setup(props, { slots }) {
 		const table = injectDataTable("<DataTableExpandToggle>");
+		const pin = injectPinnedRow();
 		const context = injectHierarchy();
 		const grid = injectDataGrid();
 		const locale = useTableLocale();
 		const label = () => props.row.isExpanded ? props.collapseLabel ?? locale().messages.collapseRow : props.expandLabel ?? locale().messages.expandRow;
-		return () => props.row.canExpand ? h("button", {
+		return () => props.row.canExpand && !(pin && !table.tree) ? h("button", {
 			type: "button",
 			"data-expand-toggle": "",
 			tabindex: table.tree ? -1 : void 0,
@@ -928,7 +1521,7 @@ const DataTableExpandToggle = defineComponent({
 			onClick: (event) => {
 				event.stopPropagation();
 				if (grid?.table === table) grid.focusCell({
-					row: table.rows.indexOf(props.row),
+					row: table.gridRows.indexOf(props.row),
 					column: Math.max(0, table.columns.findIndex((column) => column.id === resolveTreeColumn(table, context?.treeColumn)))
 				});
 				table.toggleExpanded(props.row.key);
@@ -965,7 +1558,7 @@ const DataTableTreeCell = defineComponent({
 					event.stopPropagation();
 					const element = event.currentTarget.closest("table");
 					if (grid?.table === table) grid.focusCell({
-						row: table.rows.indexOf(props.row),
+						row: table.gridRows.indexOf(props.row),
 						column: Math.max(0, table.columns.findIndex((column) => column.id === resolveTreeColumn(table, context?.treeColumn)))
 					});
 					table.toggleExpanded(props.row.key, true);
@@ -999,8 +1592,10 @@ const DataTableDetailRow = defineComponent({
 	slots: Object,
 	setup(props, { slots }) {
 		const table = injectDataTable("<DataTableDetailRow>");
+		const columnOffset = injectColumnOffset();
 		const context = injectHierarchy();
 		const virtual = injectVirtual();
+		const rowLayout = injectRowLayout();
 		let opened = false;
 		return () => {
 			if (props.row.isExpanded && !props.hidden) opened = true;
@@ -1009,10 +1604,11 @@ const DataTableDetailRow = defineComponent({
 			return h("tr", {
 				id: itemId(context, props.row, true),
 				"data-detail": "",
+				"aria-rowindex": hidden ? void 0 : rowLayout?.index(props.row.key, "detail"),
 				hidden,
 				...virtual && !hidden ? { ref: (target) => virtual.rows.measureElement(target, getRowItemKey(props.row.key, "detail")) } : {}
 			}, [h("td", {
-				colspan: Math.max(1, props.colspan ?? table.columns.length),
+				colspan: virtual ? physicalColumnCount(virtual, table.columns.length, columnOffset()) : Math.max(1, props.colspan ?? table.columns.length),
 				class: "vt-detail-cell"
 			}, [slots.default?.({ row: props.row })])]);
 		};
@@ -1043,7 +1639,7 @@ function createDetails(table, slot, colspan) {
 					visited.delete(key);
 					return [];
 				}
-				return visible.has(key) ? [] : [render(table.rows[index], index, true)];
+				return visible.has(key) ? [] : [render(table.rows[index], index + table.topRows.length, true)];
 			});
 		}
 	};
@@ -1066,29 +1662,36 @@ const DataTableRoot = defineComponent({
 		as: asProp("table"),
 		...virtualProps,
 		...hierarchyProps,
-		...columnLayoutProps
+		...columnLayoutProps,
+		...resizingProps,
+		...groupingProps
 	},
 	setup(props, { slots }) {
 		provideDataTable(props.table);
 		provideColumnOffset(() => props.leadingColumns);
 		const hierarchy = provideHierarchy(props.table, props);
 		const element = shallowRef();
+		const layout = provideColumnLayout(props.table, props, () => element.value);
+		const rowLayout = provideRowLayout(props.table, props, () => element.value);
 		const editingGrid = injectEditingGrid();
+		const virtualGrid = props.virtualColumns ? editingGrid ?? useDataGrid(props.table) : editingGrid;
 		const render = (virtual) => h(props.as, {
-			role: props.table.tree ? "treegrid" : void 0,
-			"aria-rowcount": (props.table.tree ? props.table.processedRows.length : props.table.rowCount) + 1,
+			ref: element,
+			style: layout.style(virtual?.columns ? virtual.columns.totalSize + virtual.gutter : void 0),
+			"data-column-layout": flag(layout.enabled()),
+			role: props.table.tree || props.table.grouped ? "treegrid" : void 0,
+			"aria-rowcount": rowLayout.count ?? (props.table.tree ? props.table.processedRows.length : props.table.rowCount) + 1,
 			"aria-colcount": props.table.columns.length + props.leadingColumns,
 			"aria-busy": props.table.loadState === "loading" || props.table.loadState === "streaming" ? "true" : void 0,
-			"data-empty": flag(props.table.rowCount === 0),
+			"data-empty": flag(props.table.renderItems.length === 0 && props.table.topRows.length === 0 && props.table.bottomRows.length === 0),
 			onKeydown: (event) => treeKeydown(event, hierarchy, virtual),
-			...virtual ? {
-				ref: element,
-				"data-virtual": ""
-			} : {}
-		}, slots.default?.({ table: props.table }) ?? [h(DataTableHeader), h(DataTableBody)]);
+			...virtual ? { "data-virtual": "" } : {}
+		}, [virtual?.columns ? virtualColgroup(props.table.columns, virtual, layout.width, layout.leadingWidths()) : layout.colgroup(), slots.default?.({ table: props.table }) ?? [h(DataTableHeader), h(DataTableBody)]]);
 		return () => props.virtual ? h(VirtualContent, {
 			table: props.table,
-			...editingGrid ? { grid: editingGrid } : {},
+			...virtualGrid ? { grid: virtualGrid } : {},
+			virtualColumns: props.virtualColumns,
+			gutter: layout.leadingWidths().reduce((sum, width) => sum + width, 0),
 			options: virtualOptions(props),
 			tableElement: () => element.value,
 			render
@@ -1159,6 +1762,9 @@ const DataTableHeaderCell = defineComponent({
 	setup(props, { slots }) {
 		const table = injectDataTable("<DataTableHeaderCell>");
 		const columnOffset = injectColumnOffset();
+		const layout = injectColumnLayout();
+		const rows = injectRowLayout();
+		provideHeaderColumn(() => props.column);
 		return () => {
 			const { column } = props;
 			const sort = table.getSort(column.id);
@@ -1175,9 +1781,14 @@ const DataTableHeaderCell = defineComponent({
 				"data-align": column.align,
 				"data-sortable": flag(column.sortable),
 				"data-sort": sort?.direction,
-				style: columnStyle(column),
+				...layout?.attrs(column, true),
+				style: [
+					columnStyle(column),
+					layout?.attrs(column, true)["style"],
+					rows?.headerStyle(!!column.pinned)
+				],
 				"aria-colindex": table.columns.indexOf(column) + columnOffset() + 1
-			}, content);
+			}, [content, layout?.resizable() && column.resizable ? h(DataTableColumnResizer) : null]);
 		};
 	}
 });
@@ -1219,6 +1830,7 @@ const DataTableSortButton = defineComponent({
 */
 const DataTableBody = defineComponent({
 	name: "DataTableBody",
+	inheritAttrs: false,
 	slots: Object,
 	props: {
 		as: asProp("tbody"),
@@ -1228,36 +1840,74 @@ const DataTableBody = defineComponent({
 			default: void 0
 		}
 	},
-	setup(props, { slots }) {
+	setup(props, { slots, attrs }) {
 		const table = injectDataTable("<DataTableBody>");
 		const locale = useTableLocale();
 		const virtual = injectVirtual();
+		const rowLayout = injectRowLayout();
 		const details = createDetails(table, () => slots.detail, () => props.colspan ?? table.columns.length);
 		return () => {
-			if (props.virtual && !virtual) return h(VirtualDataTableBody, props, slots);
-			if (virtual) return renderTableBody(table, virtual, props.as, props.colspan, slots, details);
+			if (props.virtual && !virtual) return h(VirtualDataTableBody, mergeProps(props, attrs), slots);
+			if (virtual) return pinnedTableSections(table, renderTableBody(table, virtual, props.as, props.colspan, slots, details, void 0, rowLayout), props.as, slots, attrs);
 			let content = slots.default?.({ rows: table.rows });
-			if (!content) content = table.rows.length === 0 && slots.empty ? h("tr", { "data-empty": "" }, [h("td", { colspan: Math.max(1, table.columns.length) }, slots.empty())]) : table.renderItems.map((item) => item.kind === "row" ? slots.row ? h(Fragment, { key: item.key }, [slots.row(item)]) : h(DataTableRow, {
+			if (!content) content = table.renderItems.length === 0 && slots.empty ? h("tr", { "data-empty": "" }, [h("td", { colspan: Math.max(1, table.columns.length) }, slots.empty())]) : (rowLayout?.items ?? table.renderItems).map((item) => item.kind === "row" ? slots.row ? h(Fragment, { key: item.key }, [slots.row(item)]) : h(DataTableRow, {
 				key: item.key,
 				row: item.row,
 				rowIndex: item.rowIndex
-			}) : item.kind === "detail" ? details.render(item.row, item.rowIndex) : null);
+			}) : item.kind === "detail" ? details.render(item.row, item.rowIndex) : groupRow(item, slots, rowLayout?.aggregatePosition ?? "group", rowLayout?.footer(item.key)));
 			const visibleDetails = new Set(table.renderItems.filter((item) => item.kind === "detail").map((item) => item.row.key));
 			const retained = slots.default ? [] : details.retained(visibleDetails);
 			const sentinel = loadSentinel(table, props.colspan ?? table.columns.length, locale());
-			return h(props.as, [
+			return pinnedTableSections(table, h(props.as, { "data-row-region": "centre" }, [
 				...Array.isArray(content) ? content : content ? [content] : [],
 				...retained,
 				...sentinel ? [sentinel] : []
-			]);
+			]), props.as, slots, attrs);
 		};
 	}
 });
-function renderTableBody(table, virtual, as, colspan, slots, details, element) {
-	const width = colspan ?? table.columns.length;
-	const attrs = element ? { ref: element } : {};
+function pinnedTableSections(table, centre, as, slots, attrs = {}) {
+	const body = cloneVNode(centre, {
+		...attrs,
+		"data-row-region": "centre"
+	});
+	const region = (side) => {
+		const rows = side === "top" ? table.topRows : table.bottomRows;
+		return rows.length ? h(as, {
+			"data-row-region": side,
+			class: attrs["class"]
+		}, rows.map((row, index) => {
+			const rowIndex = side === "top" ? index : table.topRows.length + table.rows.length + index;
+			return h(DataTablePinnedRow, {
+				key: getRowItemKey(row.key),
+				row,
+				side
+			}, { default: () => {
+				const child = slots.row?.({
+					row,
+					rowIndex
+				}) ?? h(DataTableRow, {
+					row,
+					rowIndex
+				});
+				return [isVNode(child) ? child : h(Fragment, null, [child])];
+			} });
+		})) : null;
+	};
+	return table.topRows.length || table.bottomRows.length ? h(Fragment, [
+		region("top"),
+		body,
+		region("bottom")
+	]) : body;
+}
+function renderTableBody(table, virtual, as, colspan, slots, details, element, rowLayout) {
+	const width = physicalColumnCount(virtual, table.columns.length, Math.max(0, (colspan ?? table.columns.length) - table.columns.length));
+	const attrs = {
+		"data-row-region": "centre",
+		...element ? { ref: element } : {}
+	};
 	const content = slots.default?.({ rows: virtual.rowItems.flatMap((item) => item.renderItem.kind === "row" ? [item.renderItem.row] : []) });
-	if (table.rows.length === 0 && slots.empty) return h(as, attrs, h("tr", { "data-empty": "" }, [h("td", { colspan: Math.max(1, width) }, slots.empty())]));
+	if (table.renderItems.length === 0 && slots.empty) return h(as, attrs, h("tr", { "data-empty": "" }, [h("td", { colspan: Math.max(1, width) }, slots.empty())]));
 	if (content) return h(as, attrs, [
 		rowSpacer(virtual.rows.paddingStart, width, "gap-start"),
 		...content,
@@ -1269,13 +1919,15 @@ function renderTableBody(table, virtual, as, colspan, slots, details, element) {
 			key: item.key,
 			row: item.renderItem.row,
 			rowIndex: item.renderItem.rowIndex
-		}) : item.renderItem.kind === "detail" ? details.render(item.renderItem.row, item.renderItem.rowIndex) : null),
+		}) : item.renderItem.kind === "detail" ? details.render(item.renderItem.row, item.renderItem.rowIndex) : groupRow(item.renderItem, slots, rowLayout?.aggregatePosition ?? "group", rowLayout?.footer(item.key))),
+		...table.bottomRows.length ? [rowSpacer(Math.max(0, virtual.rows.viewportSize - virtual.rows.totalSize), width, "pin-fill")] : [],
 		...details.retained(new Set(virtual.rowItems.flatMap((item) => item.renderItem.kind === "detail" ? [item.renderItem.row.key] : []))),
 		...loadSentinel(table, width) ? [loadSentinel(table, width)] : []
 	]);
 }
 const VirtualDataTableBody = defineComponent({
 	name: "DataTableVirtualBody",
+	inheritAttrs: false,
 	props: {
 		as: asProp("tbody"),
 		...virtualProps,
@@ -1285,12 +1937,13 @@ const VirtualDataTableBody = defineComponent({
 		}
 	},
 	slots: Object,
-	setup(props, { slots }) {
+	setup(props, { slots, attrs }) {
 		const table = injectDataTable("<DataTableBody>");
+		const rowLayout = injectRowLayout();
 		const element = shallowRef();
 		const virtual = createComponentVirtual(table, virtualOptions(props), () => element.value?.closest("table"));
 		const details = createDetails(table, () => slots.detail, () => props.colspan ?? table.columns.length);
-		return () => renderTableBody(table, virtual, props.as, props.colspan, slots, details, element);
+		return () => pinnedTableSections(table, renderTableBody(table, virtual, props.as, props.colspan, slots, details, element, rowLayout), props.as, slots, attrs);
 	}
 });
 /** A body row; `aria-selected` and `data-selected` follow the selection. */
@@ -1317,19 +1970,21 @@ const DataTableRow = defineComponent({
 		const table = injectDataTable("<DataTableRow>");
 		const virtual = injectVirtual();
 		const hierarchy = injectHierarchy();
+		const rowLayout = injectRowLayout();
 		return () => {
 			const { row } = props;
 			const selected = table.isSelected(row.key);
 			const item = virtual ? virtualRow(virtual, row) : void 0;
-			const position = props.rowIndex ?? (item?.renderItem.kind === "row" ? item.renderItem.rowIndex : table.rows.indexOf(row));
+			const position = props.rowIndex ?? (item?.renderItem.kind === "row" ? item.renderItem.rowIndex : table.gridRows.indexOf(row));
 			return h(props.as, mergeProps(props.attributes ?? {}, {
-				"aria-rowindex": position === -1 ? void 0 : table.pageStart + position + 1,
+				"aria-rowindex": rowLayout?.index(row.key) ?? (position === -1 ? void 0 : table.pageStart + position + 1),
 				"aria-selected": table.selectionMode === "none" ? void 0 : String(selected),
+				"aria-level": rowLayout?.level(row.key),
 				"data-selected": flag(selected),
 				"data-key": String(row.key),
 				"data-dirty": flag(row.isDirty),
 				...hierarchyRowAttrs(table, row, hierarchy),
-				tabindex: table.tree ? (hierarchy?.focusKey ?? table.rows[0]?.key) === row.key ? 0 : -1 : void 0,
+				tabindex: table.tree ? (hierarchy?.focusKey ?? table.gridRows[0]?.key) === row.key ? 0 : -1 : void 0,
 				onFocus: () => {
 					if (hierarchy) hierarchy.focus.value = row.key;
 				},
@@ -1341,11 +1996,11 @@ const DataTableRow = defineComponent({
 				row,
 				selected,
 				columns: table.columns
-			}) ?? table.columns.map((column) => h(DataTableCell, {
+			}) ?? renderColumns(table.columns, virtual, (column) => h(DataTableCell, {
 				key: column.id,
 				row,
 				column
-			})));
+			}), "td"));
 		};
 	}
 });
@@ -1366,6 +2021,8 @@ const DataTableCell = defineComponent({
 		const table = injectDataTable("<DataTableCell>");
 		const columnOffset = injectColumnOffset();
 		const hierarchy = injectHierarchy();
+		const layout = injectColumnLayout();
+		const pin = injectPinnedRow();
 		return () => {
 			const { row, column } = props;
 			const value = row.getValue(column.id);
@@ -1379,6 +2036,8 @@ const DataTableCell = defineComponent({
 			return h(props.as, {
 				"data-column": column.id,
 				"data-align": column.align,
+				...layout?.attrs(column),
+				...pin ? mergeProps(layout?.attrs(column) ?? {}, pin.attrs(!!column.pinned)) : {},
 				"aria-colindex": table.columns.indexOf(column) + columnOffset() + 1
 			}, props.tree && table.tree && column.id === resolveTreeColumn(table, hierarchy?.treeColumn) ? h(DataTableTreeCell, { row }, { default: content }) : content());
 		};
@@ -1499,7 +2158,7 @@ const DataTableEditCell = defineComponent({
 		const id = useEditorId();
 		const element = shallowRef();
 		const position = () => ({
-			row: props.rowIndex ?? table.rows.indexOf(props.row),
+			row: props.rowIndex ?? table.gridRows.indexOf(props.row),
 			column: table.columns.indexOf(props.column)
 		});
 		const active = computed(() => context.mode === "row" ? context.draft?.rowKey === props.row.key : grid.isEditing(position()));
@@ -1652,6 +2311,22 @@ const DataTableRowActions = defineComponent({
 		const context = inject(editingKey, void 0);
 		const id = useEditorId();
 		const element = shallowRef();
+		const virtual = injectVirtual();
+		const pin = (side) => {
+			const root = element.value?.closest("table");
+			const key = props.row.key;
+			table.pinRow(key, side);
+			if (side === false) virtual?.rows.scrollToKey(key);
+			nextTick(() => {
+				const control = [...root?.querySelectorAll("[data-row-actions-key]") ?? []].find((target) => target.getAttribute("data-row-actions-key") === getRowItemKey(key))?.querySelector("summary");
+				control?.focus({ preventScroll: true });
+				if (side === false) control?.scrollIntoView?.({
+					block: "nearest",
+					inline: "nearest"
+				});
+				if (!control) root?.querySelector("thead button")?.focus();
+			});
+		};
 		watch(() => context?.draft?.rowKey === props.row.key, (active, previous) => {
 			const target = element.value;
 			if (previous && !active && !context?.draft && target?.closest("tr")?.contains(target.ownerDocument.activeElement)) nextTick(() => target.querySelector("button[data-edit-row]")?.focus());
@@ -1672,6 +2347,7 @@ const DataTableRowActions = defineComponent({
 			return h("div", {
 				ref: element,
 				"data-row-actions": "",
+				"data-row-actions-key": getRowItemKey(props.row.key),
 				role: "group",
 				"aria-label": messages.rowActionsFor(rowName),
 				"aria-busy": draft?.pending ? "true" : void 0
@@ -1683,7 +2359,13 @@ const DataTableRowActions = defineComponent({
 						block: "nearest",
 						inline: "nearest"
 					}));
-				} }, [h("summary", { "aria-label": messages.actionsForRow(rowName) }, messages.actions), h("div", { "data-row-menu": "" }, [button(messages.revertRow, () => table.revert([props.row.key]), !props.row.isDirty || !!draft), props.removable ? button(messages.removeRow, () => table.removeRows([props.row.key]), !!draft) : null])]),
+				} }, [h("summary", { "aria-label": messages.actionsForRow(rowName) }, messages.actions), h("div", { "data-row-menu": "" }, [
+					button(messages.pinRowTop, () => pin("top"), !!draft || table.rowPinning.top.includes(props.row.key)),
+					button(messages.pinRowBottom, () => pin("bottom"), !!draft || table.rowPinning.bottom.includes(props.row.key)),
+					table.rowPinning.top.includes(props.row.key) || table.rowPinning.bottom.includes(props.row.key) ? button(messages.unpinRow, () => pin(false), !!draft) : null,
+					button(messages.revertRow, () => table.revert([props.row.key]), !props.row.isDirty || !!draft),
+					props.removable ? button(messages.removeRow, () => table.removeRows([props.row.key]), !!draft) : null
+				])]),
 				editorIssues(id, issues, !!draft?.pending)
 			]);
 		};
@@ -1743,6 +2425,8 @@ const DataGridRoot = defineComponent({
 		...virtualProps,
 		...hierarchyProps,
 		...columnLayoutProps,
+		...resizingProps,
+		...groupingProps,
 		/** Width reserved before data columns, for a row-number/header column. */
 		gutter: {
 			type: Number,
@@ -1760,6 +2444,8 @@ const DataGridRoot = defineComponent({
 		provideDataGrid(grid);
 		provideHierarchy(props.table, props);
 		const element = ref();
+		const layout = provideColumnLayout(props.table, props, () => element.value);
+		const rowLayout = provideRowLayout(props.table, props, () => element.value);
 		const id = `vt-grid-${useId()}`;
 		const focus = () => {
 			nextTick(() => {
@@ -1794,7 +2480,7 @@ const DataGridRoot = defineComponent({
 					row: 0,
 					column: 0
 				} : {
-					row: props.table.rows.length - 1,
+					row: props.table.gridRows.length - 1,
 					column: props.table.columns.length - 1
 				}, { extend: event.shiftKey });
 				event.preventDefault();
@@ -1842,11 +2528,11 @@ const DataGridRoot = defineComponent({
 			return h(props.as, {
 				ref: element,
 				id,
-				role: props.table.tree ? "treegrid" : "grid",
+				role: props.table.tree || props.table.grouped ? "treegrid" : "grid",
 				tabindex: 0,
 				"aria-label": props.label,
 				"aria-multiselectable": "true",
-				"aria-rowcount": (props.table.tree ? props.table.processedRows.length : binding ? props.table.rowCount : props.table.rows.length) + 1,
+				"aria-rowcount": rowLayout.count ?? (props.table.tree ? props.table.processedRows.length : binding ? props.table.rowCount : props.table.rows.length) + props.table.topRows.length + props.table.bottomRows.length + 1,
 				"aria-colcount": props.table.columns.length + props.leadingColumns,
 				"aria-busy": props.table.loadState === "loading" || props.table.loadState === "streaming" ? "true" : void 0,
 				"aria-activedescendant": focusPosition && !grid.editor ? cellId(id, focusPosition.row, focusPosition.column) : void 0,
@@ -1854,20 +2540,16 @@ const DataGridRoot = defineComponent({
 				onCopy: (event) => onCopy(event),
 				onCut: (event) => onCopy(event, true),
 				onPaste,
-				...binding ? {
-					"data-virtual": "",
-					style: binding.columns ? {
-						tableLayout: "fixed",
-						width: `${binding.columns.totalSize + binding.gutter}px`
-					} : void 0
-				} : {}
-			}, binding ? [virtualColgroup(props.table.columns, binding), slots.default?.({
+				"data-column-layout": flag(layout.enabled()),
+				style: layout.style(binding?.columns ? binding.columns.totalSize + binding.gutter : void 0),
+				...binding ? { "data-virtual": "" } : {}
+			}, binding ? [binding.columns ? virtualColgroup(props.table.columns, binding, layout.width, layout.leadingWidths()) : layout.colgroup(), slots.default?.({
 				table: props.table,
 				grid
-			}) ?? [h(DataTableHeader), h(DataGridBody)]] : slots.default?.({
+			}) ?? [h(DataTableHeader), h(DataGridBody)]] : [layout.colgroup(), slots.default?.({
 				table: props.table,
 				grid
-			}) ?? [h(DataTableHeader), h(DataGridBody)]);
+			}) ?? [h(DataTableHeader), h(DataGridBody)]]);
 		};
 		return () => props.virtual ? h(VirtualContent, {
 			table: props.table,
@@ -1886,6 +2568,7 @@ const DataGridRoot = defineComponent({
 */
 const DataGridBody = defineComponent({
 	name: "DataGridBody",
+	inheritAttrs: false,
 	slots: Object,
 	props: {
 		as: asProp("tbody"),
@@ -1904,22 +2587,76 @@ const DataGridBody = defineComponent({
 			default: void 0
 		}
 	},
-	setup(props, { slots }) {
+	setup(props, { slots, attrs }) {
 		const table = injectDataTable("<DataGridBody>");
 		const { grid } = useGrid("<DataGridBody>");
 		const virtual = injectVirtual();
 		const hierarchy = injectHierarchy();
+		const rowLayout = injectRowLayout();
+		const columnOffset = injectColumnOffset();
 		const details = createDetails(table, () => slots.detail, () => props.colspan ?? table.columns.length + (slots.rowHeader ? 1 : 0));
 		const element = ref();
+		const pinnedSections = (centre, binding) => {
+			const body = cloneVNode(centre, {
+				...attrs,
+				"data-row-region": "centre"
+			});
+			const region = (side) => {
+				const rows = side === "top" ? table.topRows : table.bottomRows;
+				return rows.length ? h(props.as, {
+					"data-row-region": side,
+					class: attrs["class"]
+				}, rows.map((row, index) => {
+					const rowIndex = side === "top" ? index : table.topRows.length + table.rows.length + index;
+					return h(DataTablePinnedRow, {
+						key: row.key,
+						row,
+						side
+					}, { default: () => [h("tr", mergeProps(rowAttributes(props.rowAttrs, row), {
+						role: "row",
+						"data-key": String(row.key),
+						"data-dirty": flag(row.isDirty),
+						"aria-rowindex": rowLayout?.index(row.key),
+						"aria-level": rowLayout?.level(row.key),
+						...hierarchyRowAttrs(table, row, hierarchy)
+					}), [slots.rowHeader?.({
+						row,
+						index: rowIndex
+					}), ...renderColumns(table.columns, binding, (column, columnIndex) => h(DataGridCell, {
+						key: column.id,
+						row,
+						column,
+						rowIndex,
+						columnIndex,
+						tree: props.treeCell
+					}, {
+						default: slots.cell,
+						editor: slots.editor,
+						$stable: true
+					}), "td")])] });
+				})) : null;
+			};
+			return table.topRows.length || table.bottomRows.length ? h(Fragment, [
+				region("top"),
+				body,
+				region("bottom")
+			]) : body;
+		};
 		const render = (binding) => {
 			if (binding && slots.default) {
 				const sentinel = loadSentinel(table, props.colspan ?? table.columns.length + (slots.rowHeader ? 1 : 0));
 				const content = slots.default({ rows: binding.rowItems.flatMap((item) => item.renderItem.kind === "row" ? [item.renderItem.row] : []) });
-				return h(props.as, { ref: element }, sentinel ? [...content, sentinel] : content);
+				return pinnedSections(h(props.as, {
+					ref: element,
+					"data-row-region": "centre"
+				}, sentinel ? [...content, sentinel] : content), binding);
 			}
-			if (binding) return h(props.as, { ref: element }, [
-				...renderRows(binding, props.colspan ?? table.columns.length + (slots.rowHeader ? 1 : 0), (item) => {
-					if (item.renderItem.kind === "group") return null;
+			if (binding) return pinnedSections(h(props.as, {
+				ref: element,
+				"data-row-region": "centre"
+			}, [
+				...renderRows(binding, physicalColumnCount(binding, table.columns.length, columnOffset()), (item) => {
+					if (item.renderItem.kind === "group") return groupRow(item.renderItem, slots, rowLayout?.aggregatePosition ?? "group", rowLayout?.footer(item.key));
 					if (item.renderItem.kind !== "row") return details.render(item.renderItem.row, item.renderItem.rowIndex);
 					const { row, rowIndex } = item.renderItem;
 					const columns = renderColumns(table.columns, binding, (column, columnIndex) => h(DataGridCell, {
@@ -1937,7 +2674,8 @@ const DataGridBody = defineComponent({
 					return h("tr", mergeProps(rowAttributes(props.rowAttrs, row), {
 						key: item.key,
 						role: "row",
-						"aria-rowindex": table.pageStart + rowIndex + 1,
+						"aria-rowindex": rowLayout?.index(row.key) ?? table.pageStart + rowIndex + 1,
+						"aria-level": rowLayout?.level(row.key),
 						"data-key": String(row.key),
 						"data-dirty": flag(row.isDirty),
 						...hierarchyRowAttrs(table, row, hierarchy),
@@ -1948,15 +2686,17 @@ const DataGridBody = defineComponent({
 						index: rowIndex
 					}), ...columns]);
 				}),
+				...table.bottomRows.length ? [rowSpacer(Math.max(0, binding.rows.viewportSize - binding.rows.totalSize), physicalColumnCount(binding, table.columns.length, columnOffset()), "pin-fill")] : [],
 				...details.retained(new Set(binding.rowItems.flatMap((item) => item.renderItem.kind === "detail" ? [item.renderItem.row.key] : []))),
 				...loadSentinel(table, props.colspan ?? table.columns.length + (slots.rowHeader ? 1 : 0)) ? [loadSentinel(table, props.colspan ?? table.columns.length + (slots.rowHeader ? 1 : 0))] : []
-			]);
-			const content = slots.default?.({ rows: table.rows }) ?? table.renderItems.map((item) => item.kind === "group" ? null : item.kind === "detail" ? details.render(item.row, item.rowIndex) : (() => {
+			]), binding);
+			const content = slots.default?.({ rows: table.rows }) ?? (rowLayout?.items ?? table.renderItems).map((item) => item.kind === "group" ? groupRow(item, slots, rowLayout?.aggregatePosition ?? "group", rowLayout?.footer(item.key)) : item.kind === "detail" ? details.render(item.row, item.rowIndex) : (() => {
 				const { row, rowIndex } = item;
 				return h("tr", mergeProps(rowAttributes(props.rowAttrs, row), {
 					key: item.key,
 					role: "row",
-					"aria-rowindex": rowIndex + 2,
+					"aria-rowindex": rowLayout?.index(row.key) ?? rowIndex + 2,
+					"aria-level": rowLayout?.level(row.key),
 					"data-key": String(row.key),
 					"data-dirty": flag(row.isDirty),
 					...hierarchyRowAttrs(table, row, hierarchy)
@@ -1977,11 +2717,11 @@ const DataGridBody = defineComponent({
 				}))]);
 			})());
 			const sentinel = loadSentinel(table, props.colspan ?? table.columns.length + (slots.rowHeader ? 1 : 0));
-			return h(props.as, [
+			return pinnedSections(h(props.as, { "data-row-region": "centre" }, [
 				...content,
 				...slots.default ? [] : details.retained(new Set(table.renderItems.filter((item) => item.kind === "detail").map((item) => item.row.key))),
 				sentinel
-			]);
+			]));
 		};
 		return () => props.virtual && !virtual ? h(VirtualContent, {
 			table,
@@ -2022,12 +2762,14 @@ const DataGridCell = defineComponent({
 		const table = injectDataTable("<DataGridCell>");
 		const columnOffset = injectColumnOffset();
 		const { grid, context } = useGrid("<DataGridCell>");
+		const layout = injectColumnLayout();
+		const pin = injectPinnedRow();
 		const virtual = injectVirtual();
 		const hierarchy = injectHierarchy();
 		const element = ref();
 		const issueId = useEditorId();
 		const position = () => ({
-			row: props.rowIndex ?? table.rows.indexOf(props.row),
+			row: props.rowIndex ?? table.gridRows.indexOf(props.row),
 			column: props.columnIndex ?? table.columns.indexOf(props.column)
 		});
 		watch(() => grid.isFocused(position()), (focused) => {
@@ -2110,6 +2852,8 @@ const DataGridCell = defineComponent({
 				"data-dirty": flag(row.isDirty),
 				...issueAttrs(issueId, issues, pending),
 				style: columnStyle(column),
+				...layout?.attrs(column),
+				...pin ? mergeProps(layout?.attrs(column) ?? {}, pin.attrs(!!column.pinned)) : {},
 				onMousedown: (event) => {
 					if (editing || event.button !== 0) return;
 					grid.focusCell(at, { extend: event.shiftKey });
@@ -2128,5 +2872,5 @@ const DataGridCell = defineComponent({
 });
 
 //#endregion
-export { DataCellEditor, DataGridBody, DataGridCell, DataGridRoot, DataTableBody, DataTableCaption, DataTableCell, DataTableColumnVisibility, DataTableDetailRow, DataTableEditCell, DataTableEditRoot, DataTableEmpty, DataTableExpandToggle, DataTableHeader, DataTableHeaderCell, DataTableHeaderRow, DataTableLoadMore, DataTablePageSize, DataTablePagination, DataTableRoot, DataTableRow, DataTableRowActions, DataTableSearch, DataTableSelectAll, DataTableSelectRow, DataTableSortButton, DataTableStatus, DataTableTreeCell, DataTableViewport, DataTableVirtualColumns, cellEditorProps, cellId, columnStyle, expandToggleProps, hierarchyProps, injectVirtual as injectVirtualRenderer, resolveTreeColumn, rowAttributes, treeCellProps, virtualProps };
+export { DataCellEditor, DataGridBody, DataGridCell, DataGridRoot, DataTableAggregateCell, DataTableBody, DataTableCaption, DataTableCell, DataTableColumnResizer, DataTableColumnVisibility, DataTableDetailRow, DataTableEditCell, DataTableEditRoot, DataTableEmpty, DataTableExpandToggle, DataTableGroupRow, DataTableHeader, DataTableHeaderCell, DataTableHeaderRow, DataTableLeadingCell, DataTableLoadMore, DataTablePageSize, DataTablePagination, DataTablePinnedRow, DataTableRoot, DataTableRow, DataTableRowActions, DataTableSearch, DataTableSelectAll, DataTableSelectRow, DataTableSortButton, DataTableStatus, DataTableTreeCell, DataTableViewport, DataTableVirtualColumns, cellEditorProps, cellId, columnStyle, expandToggleProps, groupingProps, hierarchyProps, injectVirtual as injectVirtualRenderer, resolveTreeColumn, rowAttributes, treeCellProps, virtualProps };
 //# sourceMappingURL=index.js.map