argus-table 0.3.0 → 0.4.0

package/dist/argus-table.js

@@ -1,6 +1,9 @@
 import { clickSelection, sameSelection, selectAll, selectRange, toggleRow } from "./core/src/state/selection.js";
 import { controllable } from "./core/src/state/controllable.js";
+import { groupKey } from "./core/src/columns/column-groups.js";
 import { RowLayout } from "./core/src/grid/row-layout.js";
+import { sameUnit } from "./core/src/columns/column-order.js";
+import { spreadWidth } from "./core/src/columns/spread-width.js";
 import "./core/src/table/create-table.js";
 import { announce } from "./announce.js";
 import { AutoWidths, measureColumns } from "./controllers/auto-width.js";
@@ -14,15 +17,16 @@ import { canStartReorder, dropTarget, startReorderDrag } from "./controllers/reo
 import { startResizeDrag } from "./controllers/resize-drag.js";
 import { TableController } from "./controllers/table-controller.js";
 import { VirtualController } from "./controllers/virtual-controller.js";
-import { CELL_CLICK, COLUMN_FILTER, COLUMN_HIDE, COLUMN_PIN, COLUMN_REORDER, COLUMN_RESIZE, LOAD_ERROR, RANGE_CHANGE, ROW_CLICK, ROW_SELECT, SORT_CHANGE, fire } from "./events.js";
+import { CELL_CLICK, COLUMN_FILTERS_CHANGE, COLUMN_ORDER_CHANGE, COLUMN_PINNING_CHANGE, COLUMN_SIZING_CHANGE, COLUMN_VISIBILITY_CHANGE, LOAD_ERROR, RANGE_CHANGE, ROW_CLICK, SELECTION_CHANGE, SORTING_CHANGE, fire } from "./events.js";
 import { fromInteractive } from "./interactive.js";
 import { bodyCap, watchMaxElementHeight } from "./max-height.js";
 import { renderBody } from "./render/body.js";
 import { renderLightDom } from "./render/cells.js";
 import { content, flushContent } from "./render/content-directive.js";
-import { renderHeader } from "./render/header.js";
+import { columnKey, renderHeader } from "./render/header.js";
 import { renderPinnedRows } from "./render/pinned-rows.js";
 import { baseStyles } from "./styles/base.js";
+import { switchConverter } from "./attributes.js";
 import __decorate from "./_virtual/_@oxc-project_runtime@0.156.0/helpers/esm/decorate.js";
 import { LitElement, html, nothing } from "lit";
 import { customElement, property } from "lit/decorators.js";
@@ -50,7 +54,7 @@ function sortColumnOf(event) {
 		if (target.dataset.resizeCol !== void 0) return void 0;
 		if (target.matches("button,input,select,textarea,a[href],label,[contenteditable],[popover],dialog")) return void 0;
 		if (target.dataset.sortCol !== void 0) return target.dataset.sortCol;
-		if (target.getAttribute("part") === "header-row") return void 0;
+		if (target.getAttribute("role") === "row") return void 0;
 	}
 }
 var RESIZE_STEP = 10;
@@ -62,13 +66,13 @@ var rowHeightConverter = { fromAttribute(value) {
 	const px = Number(text.replace(/px$/, ""));
 	return text !== "" && px > 0 ? px : void 0;
 } };
-var HEADER = {
-	section: "header",
-	index: 0
-};
-/** Where the rows sit in the grid: header, pinned top, body, pinned bottom. */
+/** Where the rows sit in the grid: header rows, pinned top, body, pinned bottom. */
 function layoutOf(model) {
-	return new RowLayout(model.pinnedCount("top"), model.rowCount, model.pinnedCount("bottom"));
+	return new RowLayout(model.pinnedCount("top"), model.rowCount, model.pinnedCount("bottom"), model.headerRows);
+}
+/** The drop slot and applied-move key of a column or group (`HeaderDrag.key`). */
+function unitKey(unit) {
+	return unit.kind === "column" ? columnKey(unit.id) : groupKey(unit.id, unit.pin);
 }
 /** The grid cell or column header an element is, if any. */
 function gridCell(target) {
@@ -76,11 +80,19 @@ function gridCell(target) {
 	const role = target.getAttribute("role");
 	return role === "gridcell" || role === "columnheader" ? target : void 0;
 }
+/** The column group header an element is, if any. */
+function groupCell(target) {
+	return target instanceof HTMLElement && target.dataset.groupKey !== void 0 ? target : void 0;
+}
 /** The grid row a rendered row element is, from its `aria-rowindex`. */
 function gridRowOf(row, layout) {
 	const index = row?.getAttribute("aria-rowindex");
 	return index ? layout.fromAriaRowIndex(Number(index)) : void 0;
 }
+/** The grid row a cell or column header is in. */
+function gridRowOfCell(cell, layout) {
+	return gridRowOf(cell.parentElement, layout);
+}
 /**
 * The pinned edge's shadow, drawn once per side over the scroller rather than
 * per row: a shadow on every pinned cell repaints on every scroll frame. It
@@ -103,6 +115,10 @@ function pinShadow(side, width, contentPx) {
 function track(column) {
 	return column.flex === void 0 ? `${String(column.width)}px` : `minmax(${String(column.minWidth)}px, ${String(column.flex)}fr)`;
 }
+/** Total width of the columns pinned to one side. */
+function pinnedWidth(columns, side) {
+	return columns.reduce((sum, c) => c.pin === side ? sum + c.width : sum, 0);
+}
 var ArgusTable = class ArgusTable extends LitElement {
 	static {
 		this.styles = baseStyles;
@@ -119,6 +135,21 @@ var ArgusTable = class ArgusTable extends LitElement {
 		this.#columnsProp = value ?? [];
 	}
 	/**
+	* Headers over several columns: `{ id, header, columns }`, where `columns` lists
+	* column ids and nested groups. Each level of nesting adds a header row. A group's
+	* columns stay next to each other: they move within the group, and the group
+	* moves as a whole (drag its header, or Alt+Shift+Arrow). A group whose columns
+	* are pinned to different sides shows on each side. Property only. While empty
+	* and `columns` is too, the table reads its `<argus-column-group>` children.
+	* `null` or `undefined` means `[]`.
+	*/
+	get columnGroups() {
+		return this.#columnGroupsProp;
+	}
+	set columnGroups(value) {
+		this.#columnGroupsProp = value ?? [];
+	}
+	/**
 	* The rows to show. Replace the array to update; changes inside it aren't
 	* detected. `null` or `undefined` means `[]`.
 	*/
@@ -138,7 +169,7 @@ var ArgusTable = class ArgusTable extends LitElement {
 	/**
 	* The sort order, e.g. `[{ id: 'total', desc: true }]`; `[]` when unsorted. Unset,
 	* the table keeps it itself and header clicks change it. Once set, it is
-	* controlled: a click only fires `argus-sort-change` with the proposed order,
+	* controlled: a click only fires `argus-sorting-change` with the proposed order,
 	* and nothing changes until you set the property. Set `undefined` to hand it back.
 	*/
 	get sorting() {
@@ -150,7 +181,7 @@ var ArgusTable = class ArgusTable extends LitElement {
 	/**
 	* Resized widths in px by column id, e.g. `{ name: 240 }`. A resized flex column
 	* becomes fixed. Uncontrolled until set, like `sorting`: once set, a resize only
-	* fires `argus-column-resize` with the proposed widths. `undefined` hands it back.
+	* fires `argus-column-sizing-change` with the proposed widths. `undefined` hands it back.
 	*/
 	get columnSizing() {
 		return this.#sizing.value;
@@ -164,7 +195,7 @@ var ArgusTable = class ArgusTable extends LitElement {
 	* Each pin group (start-pinned, scrolling, end-pinned) takes its columns in this
 	* order; unknown ids are ignored and columns it doesn't list follow the listed
 	* ones of their group. After a move it holds every column id. Uncontrolled
-	* until set, like `sorting`: once set, a move only fires `argus-column-reorder`
+	* until set, like `sorting`: once set, a move only fires `argus-column-order-change`
 	* with the proposed order. `undefined` hands it back.
 	*/
 	get columnOrder() {
@@ -179,7 +210,7 @@ var ArgusTable = class ArgusTable extends LitElement {
 	* `{ total: 'end', id: false }`. Columns it doesn't list keep their `pin`. A pinned
 	* column joins the edge of its group nearest its place in `columnOrder`, and stops
 	* flexing. Uncontrolled until set, like `sorting`: once set, pinning from a plugin
-	* only fires `argus-column-pin` with the proposed pins. `undefined` hands it back.
+	* only fires `argus-column-pinning-change` with the proposed pins. `undefined` hands it back.
 	*/
 	get columnPinning() {
 		return this.#pinning.value;
@@ -193,7 +224,7 @@ var ArgusTable = class ArgusTable extends LitElement {
 	* doesn't list keep their `hidden`. A hidden column isn't rendered, but sorting by
 	* it still works and it keeps its place in `columnOrder`. Uncontrolled until set,
 	* like `sorting`: once set, hiding or showing from a plugin only fires
-	* `argus-column-hide` with the proposed visibility. `undefined` hands it back.
+	* `argus-column-visibility-change` with the proposed visibility. `undefined` hands it back.
 	*/
 	get columnVisibility() {
 		return this.#visibility.value;
@@ -209,7 +240,7 @@ var ArgusTable = class ArgusTable extends LitElement {
 	* `dataSource`, the filters go to `getRows()` and the server filters. Users set
 	* filters through plugins (the column menu) on columns with a `filter` kind.
 	* Uncontrolled until set, like `sorting`: once set, a change from a plugin only
-	* fires `argus-column-filter` with the proposed filters. `undefined` hands it back.
+	* fires `argus-column-filters-change` with the proposed filters. `undefined` hands it back.
 	*/
 	get columnFilters() {
 		return this.#filters.value;
@@ -232,7 +263,7 @@ var ArgusTable = class ArgusTable extends LitElement {
 	/**
 	* The selected rows, as row ids (from `getRowId`, or the row's index as a
 	* string), e.g. `['p4', 'p7']`. Uncontrolled until set, like `sorting`: once
-	* set, a click only fires `argus-row-select` with the proposed ids.
+	* set, a click only fires `argus-selection-change` with the proposed ids.
 	* `undefined` hands it back. The table never drops ids on its own: they stay
 	* through sorting, a new `data` or reloaded pages. With a `dataSource`,
 	* Ctrl/Cmd+A selects the loaded rows only.
@@ -258,6 +289,10 @@ var ArgusTable = class ArgusTable extends LitElement {
 		if (!sameItems(next, this.#pluginsProp)) this.#pluginsProp = next;
 	}
 	#columnsProp;
+	#columnGroupsProp;
+	/** The groups last passed to the model: `columnGroups`, or the `<argus-column-group>` children. */
+	#groups;
+	#groupsChanged;
 	#pluginsProp;
 	#dataProp;
 	#overscan;
@@ -286,13 +321,13 @@ var ArgusTable = class ArgusTable extends LitElement {
 	/** Whether the checkbox column was last shown; a change re-measures the pinned columns. */
 	#selectionColumn;
 	#selectionColumnChanged;
-	/** The select-all checkbox's state, kept until `selection`, `data` or `getRowId` change. */
+	/** The select-all checkbox's state, kept until the selection or the shown rows change. */
 	#checkAll;
-	/** Moves the table applied itself, by column; their events fire once the update is done. */
+	/** Moves the table applied itself, by column or group; their events fire once the update is done. */
 	#appliedReorders;
 	/** The header being dragged to a new position, if any. */
 	#drag;
-	/** A move from the keyboard, announced once it has rendered: the column and its old position. */
+	/** A move from the keyboard, announced once it has rendered: what moved and its old position. */
 	#announceMove;
 	/** Resizes the table applied itself, by column; their events fire once the update is done. */
 	#appliedResizes;
@@ -316,6 +351,8 @@ var ArgusTable = class ArgusTable extends LitElement {
 	#columns;
 	#columnsChanged;
 	#warnedColumns;
+	/** The header row of column headers at the last reconcile (`#reconcileActive`). */
+	#leafLevel;
 	/** End of the light-DOM part holding cell content, so later children stay outside it. */
 	#contentEnd;
 	/** The light-DOM part: disconnected with the table, so foreign content is released. */
@@ -346,6 +383,10 @@ var ArgusTable = class ArgusTable extends LitElement {
 	* aren't counted yet. Scrolled to again whenever the row count changes.
 	*/
 	#scrollTarget;
+	/** The scroll container (`part="table"`); `null` before the first render. */
+	#scroller() {
+		return this.renderRoot.querySelector("[part~=\"table\"]");
+	}
 	constructor() {
 		super();
 		this.density = "comfortable";
@@ -353,6 +394,9 @@ var ArgusTable = class ArgusTable extends LitElement {
 		this.selectionMode = "none";
 		this.selectionCheckboxes = false;
 		this.#columnsProp = [];
+		this.#columnGroupsProp = [];
+		this.#groups = [];
+		this.#groupsChanged = false;
 		this.#pluginsProp = [];
 		this.#dataProp = [];
 		this.#overscan = 6;
@@ -397,12 +441,14 @@ var ArgusTable = class ArgusTable extends LitElement {
 				this.#requestFilter(columnId, filter);
 			},
 			filterValues: (columnId, limit) => this.#table.model.filterValues(columnId, limit),
+			filteredIndexes: (except) => this.#table.model.indexesPassing(except),
 			cellOf: (event) => this.#cellTarget(event),
 			setSort: (columnId, direction) => {
 				this.#setSort(columnId, direction);
 			},
 			focusHeader: (columnId) => {
-				this.#moveTo(HEADER, columnId, this.#table.model);
+				const model = this.#table.model;
+				this.#moveTo(layoutOf(model).leafHeader, columnId, model);
 			},
 			announce: (message) => {
 				announce(this.ownerDocument, message);
@@ -421,12 +467,13 @@ var ArgusTable = class ArgusTable extends LitElement {
 		this.#columns = [];
 		this.#columnsChanged = false;
 		this.#warnedColumns = false;
+		this.#leafLevel = 0;
 		this.#lightConnected = true;
 		this.#data = new DataController(this);
 		this.#scrollToTop = false;
-		this.#virtual = new VirtualController(this, () => this.renderRoot.querySelector("[part~=\"table\"]"));
-		this.#pinScroll = new PinScrollController(this, () => this.renderRoot.querySelector("[part~=\"table\"]"));
-		this.#columnWindow = new ColumnWindowController(this, () => this.renderRoot.querySelector("[part~=\"table\"]"));
+		this.#virtual = new VirtualController(this, () => this.#scroller());
+		this.#pinScroll = new PinScrollController(this, () => this.#scroller());
+		this.#columnWindow = new ColumnWindowController(this, () => this.#scroller());
 		this.#rendered = [];
 		this.#rowPx = 40;
 		this.#rowsKey = "";
@@ -462,6 +509,15 @@ var ArgusTable = class ArgusTable extends LitElement {
 				if (event.button !== 0) return;
 				const handle = event.composedPath()[0];
 				if (!(handle instanceof HTMLElement)) return;
+				const group = this.#groupCellOf(handle.dataset.resizeGroup);
+				if (group) {
+					const starts = this.#groupWidths(group.columns);
+					const total = [...starts.values()].reduce((sum, w) => sum + w, 0);
+					startResizeDrag(handle, event, total, this.#direction(), (w) => {
+						this.#requestGroupResize(group.columns, starts, w);
+					});
+					return;
+				}
 				const id = handle.dataset.resizeCol;
 				const cell = handle.parentElement;
 				if (id !== void 0 && cell) {
@@ -475,15 +531,23 @@ var ArgusTable = class ArgusTable extends LitElement {
 			/** A double-click on a resize handle fits the column to its rendered content. */
 			dblclick: (event) => {
 				const handle = event.composedPath()[0];
-				const id = handle instanceof HTMLElement ? handle.dataset.resizeCol : void 0;
+				if (!(handle instanceof HTMLElement)) return;
+				const group = this.#groupCellOf(handle.dataset.resizeGroup);
+				if (group) {
+					this.autosizeColumns([...group.columns]);
+					return;
+				}
+				const id = handle.dataset.resizeCol;
 				if (id === void 0) return;
 				this.#requestResizes(measureColumns(this.renderRoot, [id]));
 			}
 		};
 		this.#onKeydown = (event) => {
-			const cell = gridCell(event.composedPath()[0] ?? event.target ?? this);
+			const origin = event.composedPath()[0] ?? event.target ?? this;
+			const group = groupCell(origin);
+			const cell = gridCell(origin) ?? group;
 			const id = cell?.dataset.col;
-			if (!cell || id === void 0) return;
+			if (!cell || id === void 0 && !group) return;
 			const scroller = event.currentTarget;
 			if (event.key === "Tab" && event.shiftKey) {
 				scroller.tabIndex = -1;
@@ -492,21 +556,22 @@ var ArgusTable = class ArgusTable extends LitElement {
 				}, { once: true });
 				return;
 			}
+			if (group || id === void 0) {
+				this.#groupKey(event, cell, scroller);
+				return;
+			}
 			const pluginTarget = id === "--argus-selection" ? void 0 : this.#cellTarget(event);
 			if (pluginTarget && this.#plugins.keydown(event, pluginTarget)) return;
 			const inHeader = cell.getAttribute("role") === "columnheader";
 			const { key } = event;
-			const arrow = key === "ArrowLeft" || key === "ArrowRight";
-			if (inHeader && arrow && event.altKey && event.shiftKey) {
-				event.preventDefault();
-				const towardEnd = key === "ArrowRight" === (this.#direction() === 1);
-				this.#moveByKey(id, towardEnd ? 1 : -1);
-				return;
-			}
-			if (inHeader && event.altKey && arrow) {
+			if (inHeader && (key === "ArrowLeft" || key === "ArrowRight") && event.altKey) {
 				event.preventDefault();
 				const towardEnd = key === "ArrowRight" === (this.#direction() === 1);
-				this.#requestResize(id, this.#currentWidth(id, cell) + (towardEnd ? RESIZE_STEP : -10));
+				if (event.shiftKey) this.#moveByKey({
+					kind: "column",
+					id
+				}, towardEnd ? 1 : -1);
+				else this.#requestResize(id, this.#currentWidth(id, cell) + (towardEnd ? RESIZE_STEP : -10));
 				return;
 			}
 			if (inHeader && (key === "Enter" || key === " ") && cell.dataset.sortCol !== void 0) {
@@ -519,7 +584,7 @@ var ArgusTable = class ArgusTable extends LitElement {
 			if (event.altKey || event.shiftKey || corner && key !== "Home" && key !== "End") return;
 			const model = this.#table.model;
 			const layout = layoutOf(model);
-			const from = inHeader ? HEADER : gridRowOf(cell.parentElement, layout);
+			const from = gridRowOfCell(cell, layout);
 			if (!from) return;
 			if (!inHeader && key === "Enter") {
 				event.preventDefault();
@@ -547,7 +612,7 @@ var ArgusTable = class ArgusTable extends LitElement {
 				case "Home":
 					col = 0;
 					if (corner) {
-						pos = 0;
+						pos = this.#headerLevelDown(model, 0, columns[0]?.id ?? id);
 						this.#virtual.scrollToEdge("start");
 					}
 					break;
@@ -558,11 +623,20 @@ var ArgusTable = class ArgusTable extends LitElement {
 				default: return;
 			}
 			event.preventDefault();
-			const row = layout.at(pos) ?? HEADER;
+			let row = layout.at(pos) ?? layout.leafHeader;
+			const target = columns[Math.min(Math.max(col, 0), columns.length - 1)];
+			if (!target) return;
+			if (row.section === "header" && row.index < layout.header - 1 && key === "ArrowUp") {
+				const level = this.#headerLevelUp(model, row.index, target.id);
+				if (level === void 0) return;
+				row = {
+					section: "header",
+					index: level
+				};
+			}
 			if (key.startsWith("Page") && from.section === "body" && row.section === "body") this.#virtual.scrollBy(this.#virtual.startOf(row.index) - this.#virtual.startOf(from.index));
 			if (corner && key === "End" && row.section === "bottom") this.#virtual.scrollToEdge("end");
-			const target = columns[Math.min(Math.max(col, 0), columns.length - 1)];
-			if (target) this.#moveTo(row, target.id, model);
+			this.#moveTo(row, target.id, model);
 		};
 		this.#onFocusin = (event) => {
 			const scroller = event.currentTarget;
@@ -575,10 +649,15 @@ var ArgusTable = class ArgusTable extends LitElement {
 				return;
 			}
 			for (const target of event.composedPath()) {
+				const group = groupCell(target);
+				if (group) {
+					this.#focusGroup(group);
+					return;
+				}
 				const cell = gridCell(target);
 				if (cell?.dataset.col !== void 0) {
 					const model = this.#table.model;
-					const row = cell.getAttribute("role") === "columnheader" ? HEADER : gridRowOf(cell.parentElement, layoutOf(model));
+					const row = gridRowOfCell(cell, layoutOf(model));
 					const { col } = cell.dataset;
 					const prev = this.#active;
 					if (row && (row.section !== prev?.section || row.index !== prev.index || col !== prev.col)) {
@@ -646,24 +725,23 @@ var ArgusTable = class ArgusTable extends LitElement {
 		super.connectedCallback();
 		if (!this.hasAttribute("role")) this.setAttribute("role", "grid");
 		if (this.hasUpdated) this.#observeProbe();
-		if (this.#lightPart && !this.#lightConnected) {
-			this.#lightConnected = true;
-			this.#lightPart.setConnected(true);
-			flushContent(this);
-		}
+		this.#setLightConnected(true);
 		this.#unwatchMaxHeight = watchMaxElementHeight(() => {
 			this.requestUpdate();
 		});
 	}
+	/** Connects or disconnects the cell content (framework content mounts and unmounts with it). */
+	#setLightConnected(connected) {
+		if (!this.#lightPart || this.#lightConnected === connected) return;
+		this.#lightConnected = connected;
+		this.#lightPart.setConnected(connected);
+		flushContent(this);
+	}
 	disconnectedCallback() {
 		super.disconnectedCallback();
 		this.#probeObserver?.disconnect();
 		this.#rowMeasure.stop();
-		if (this.#lightPart && this.#lightConnected) {
-			this.#lightConnected = false;
-			this.#lightPart.setConnected(false);
-			flushContent(this);
-		}
+		this.#setLightConnected(false);
 		this.#unwatchMaxHeight?.();
 		this.#unwatchMaxHeight = void 0;
 	}
@@ -680,6 +758,14 @@ var ArgusTable = class ArgusTable extends LitElement {
 		return this.columns;
 	}
 	/**
+	* `columnGroups` when it has any or `columns` is set (which turns off all
+	* children), otherwise the `<argus-column-group>` children.
+	*/
+	#effectiveGroups() {
+		if (this.columnGroups.length > 0 || this.columns.length > 0) return this.columnGroups;
+		return this.#children.groups;
+	}
+	/**
 	* The node the light-DOM content is rendered before. Lit's part then ends there,
 	* so children appended later (an `<argus-column>`) never land inside it. If the
 	* marker was removed (say by `innerHTML`), a new one starts a fresh part.
@@ -705,7 +791,7 @@ var ArgusTable = class ArgusTable extends LitElement {
 	/**
 	* Fits columns to their content: the header, the pinned rows and the body rows
 	* rendered now (rows out of view aren't measured). It resizes them like a drag
-	* would, so `argus-column-resize` fires for each column that changes, and with a
+	* would, so `argus-column-sizing-change` fires for each column that changes, and with a
 	* controlled `columnSizing` nothing changes until you set it. Without `ids`, fits
 	* every resizable column; columns with `resizable: false` keep their width.
 	* With `virtualizeColumns`, columns out of view render for the measurement.
@@ -745,13 +831,14 @@ var ArgusTable = class ArgusTable extends LitElement {
 	* The state users change, as one object of plain JSON for saving a user's
 	* layout: `sorting`, `columnSizing`, `columnOrder`, `columnPinning`,
 	* `columnVisibility`, `columnFilters`, `selection`, `quickFilter`, and `scroll`
-	* (the row at the top and the horizontal offset). Controlled properties are
+	* (the row at the top and the inline offset), with `version: 1`. Controlled properties are
 	* included with the values you set. The object is a copy: changing it changes
 	* nothing in the table.
 	*/
 	getState() {
-		const scroller = this.renderRoot.querySelector("[part~=\"table\"]");
+		const scroller = this.#scroller();
 		return structuredClone({
+			version: 1,
 			sorting: this.#sorting.value,
 			columnSizing: this.#sizing.value,
 			columnOrder: this.#order.value,
@@ -762,14 +849,14 @@ var ArgusTable = class ArgusTable extends LitElement {
 			quickFilter: this.#quickFilter,
 			scroll: {
 				row: this.#virtual.topRow,
-				left: Math.abs(scroller?.scrollLeft ?? 0)
+				inline: Math.abs(scroller?.scrollLeft ?? 0)
 			}
 		});
 	}
 	/**
 	* Restores state from `getState()`, for example a layout saved in
 	* `localStorage`. Only the keys given change; ids of columns that no longer
-	* exist are ignored. Properties you control are left alone (set them
+	* exist are ignored. State of another `version` is ignored as a whole. Properties you control are left alone (set them
 	* yourself), and the others stay uncontrolled. No change events fire.
 	* `quickFilter` is set like the property: a search box of yours shows it only
 	* if you read it back. `scroll` is applied after the rest, so with a
@@ -777,6 +864,7 @@ var ArgusTable = class ArgusTable extends LitElement {
 	* has re-rendered there.
 	*/
 	async setState(state) {
+		if ((state.version ?? 1) !== 1) return;
 		this.#restore("sorting", this.#sorting, state.sorting);
 		this.#restore("columnSizing", this.#sizing, state.columnSizing);
 		this.#restore("columnOrder", this.#order, state.columnOrder);
@@ -795,8 +883,8 @@ var ArgusTable = class ArgusTable extends LitElement {
 			row: scroll.row,
 			count
 		};
-		const scroller = this.renderRoot.querySelector("[part~=\"table\"]");
-		if (scroller) scroller.scrollLeft = scroll.left * this.#direction();
+		const scroller = this.#scroller();
+		if (scroller && scroll.inline >= 0) scroller.scrollLeft = scroll.inline * this.#direction();
 		await new Promise(requestAnimationFrame);
 		await this.#settled();
 	}
@@ -822,9 +910,13 @@ var ArgusTable = class ArgusTable extends LitElement {
 	}
 	willUpdate(changed) {
 		if (changed.has("plugins")) this.#plugins.set(this.plugins);
+		this.#plugins.willUpdate(new Set(changed.keys()));
 		const columns = this.#plugins.transform(this.#effectiveColumns());
 		this.#columnsChanged = columns !== this.#columns;
 		this.#columns = columns;
+		const groups = this.#plugins.transformGroups(this.#effectiveGroups());
+		this.#groupsChanged = groups !== this.#groups;
+		this.#groups = groups;
 		const filtersChanged = changed.has("columnFilters") || changed.has("quickFilter");
 		if (changed.has("dataSource") || changed.has("sorting") || changed.has("getRowId") || filtersChanged) {
 			this.#data.configure({
@@ -838,10 +930,11 @@ var ArgusTable = class ArgusTable extends LitElement {
 			this.#scrollTarget = void 0;
 		}
 		if (filtersChanged && this.hasUpdated) this.#announceRows = true;
-		if (this.#columnsChanged || changed.has("data") || changed.has("getRowId") || changed.has("sorting") || changed.has("columnSizing") || changed.has("columnOrder") || changed.has("columnPinning") || changed.has("columnVisibility") || changed.has("columnFilters") || changed.has("quickFilter") || changed.has("pinnedRows")) {
+		if (this.#columnsChanged || this.#groupsChanged || changed.has("data") || changed.has("getRowId") || changed.has("sorting") || changed.has("columnSizing") || changed.has("columnOrder") || changed.has("columnPinning") || changed.has("columnVisibility") || changed.has("columnFilters") || changed.has("quickFilter") || changed.has("pinnedRows")) {
 			if (this.#columnsChanged) this.#autoWidths.sync(columns.filter((c) => c.width === "auto").map((c) => c.id));
 			this.#table.update({
 				columns,
+				columnGroups: groups,
 				data: this.data,
 				getRowId: this.getRowId,
 				sorting: this.#sorting.value,
@@ -873,7 +966,7 @@ var ArgusTable = class ArgusTable extends LitElement {
 		this.#internals.ariaRowCount = unknownTotal ? "-1" : String(layout.total);
 		this.#internals.ariaColCount = String(model.columns.length);
 		this.#internals.ariaMultiSelectable = this.#mode() === "multi" ? "true" : null;
-		const extra = this.#rowPx + this.#pinnedPx("top", layout) + this.#pinnedPx("bottom", layout);
+		const extra = this.#headerAndPinnedPx(layout);
 		const auto = this.rowHeight === "auto";
 		if (!auto) this.#rowMeasure.stop();
 		else if (changed.size > 0 || this.#columnsChanged) this.#rowMeasure.invalidate();
@@ -899,20 +992,22 @@ var ArgusTable = class ArgusTable extends LitElement {
 		this.#window = this.#virtual.computeWindow();
 		const rendered = this.#columnWindow.compute(columns, this.virtualizeColumns, this.virtualizeColumns ? this.#keptColumns(model) : []);
 		this.#rendered = rendered;
-		const pinnedWidth = (side) => columns.reduce((sum, c) => c.pin === side ? sum + c.width : sum, 0);
-		const pinned = (side) => `${String(pinnedWidth(side))}px`;
+		const pinStart = pinnedWidth(columns, "start");
+		const pinEnd = pinnedWidth(columns, "end");
+		const cols = columns.map(track).join(" ");
 		const layout = layoutOf(model);
 		const style = {
-			"--_cols": columns.map(track).join(" "),
+			"--_cols": cols,
 			"--_width": `${String(model.totalWidth)}px`,
-			"--_pin-start": pinned("start"),
-			"--_pin-end": pinned("end"),
+			"--_pin-start": `${String(pinStart)}px`,
+			"--_pin-end": `${String(pinEnd)}px`,
+			"--_header-rows": String(layout.header),
 			"--_pin-top-rows": String(layout.top),
 			"--_pin-bottom-rows": String(layout.bottom)
 		};
 		const auto = this.rowHeight === "auto";
 		if (auto) {
-			const key = `${style["--_cols"] ?? ""}|${String(this.#rowPx)}`;
+			const key = `${cols}|${String(this.#rowPx)}`;
 			if (key !== this.#rowsKey) {
 				this.#rowsKey = key;
 				this.#rowMeasure.invalidate();
@@ -930,7 +1025,7 @@ var ArgusTable = class ArgusTable extends LitElement {
 			index: 0
 		});
 		if (typeof this.rowHeight === "number" && this.rowHeight > 0) style["--_row-height"] = `${String(this.rowHeight)}px`;
-		const contentPx = this.#rowPx + this.#pinnedPx("top", layout) + this.#pinnedPx("bottom", layout) + (model.rowCount === 0 ? 0 : this.#window.totalSize);
+		const contentPx = this.#headerAndPinnedPx(layout) + (model.rowCount === 0 ? 0 : this.#window.totalSize);
 		return html`<div
         part="table"
         role="presentation"
@@ -942,14 +1037,20 @@ var ArgusTable = class ArgusTable extends LitElement {
         @mousedown=${this.#onMousedown}
         @click=${this.#onClick}
       >
-        ${renderHeader(rendered, this.#headerHandlers, activeIn("header")?.col, this.#drag, this.#checkAllOf(model))}
+        ${renderHeader({
+			columns: rendered,
+			groups: model.headerGroups,
+			handlers: this.#headerHandlers,
+			active: activeIn("header"),
+			drag: this.#drag,
+			checkAll: this.#checkAllOf(model)
+		})}
         ${renderPinnedRows("top", layout.top, rendered, firstIndex("top"), activeIn("top"))}
         ${model.rowCount === 0 ? html`<div part="empty"><slot name="empty">No rows</slot></div>` : renderBody(this.#window.rows, rendered, this.#window.totalSize, activeIn("body"), firstIndex("body"), this.#loading(), this.#selectedAt(model), this.#selectionColumn ? this.#checkboxHandlers : void 0, auto)}
         ${renderPinnedRows("bottom", layout.bottom, rendered, firstIndex("bottom"), activeIn("bottom"))}
         <div class="probe" aria-hidden="true"></div>
       </div>
-      ${pinShadow("start", pinnedWidth("start"), contentPx)}
-      ${pinShadow("end", pinnedWidth("end"), contentPx)}`;
+      ${pinShadow("start", pinStart, contentPx)} ${pinShadow("end", pinEnd, contentPx)}`;
 	}
 	firstUpdated() {
 		this.#observeProbe();
@@ -957,7 +1058,7 @@ var ArgusTable = class ArgusTable extends LitElement {
 	}
 	updated(changed) {
 		const model = this.#table.model;
-		const part = renderLightDom(this, model, this.#window.rows, this.#rendered, this.#lightDomEnd());
+		const part = renderLightDom(this, model, this.#window.rows, this.#rendered, model.headerGroups, this.#lightDomEnd());
 		if (this.#lightPart && this.#lightPart !== part) this.#lightPart.setConnected(false);
 		this.#lightPart = part;
 		flushContent(this);
@@ -965,45 +1066,25 @@ var ArgusTable = class ArgusTable extends LitElement {
 		const resized = this.rowHeight === "auto" && this.#measureRows();
 		if (this.#scrollToTop) {
 			this.#scrollToTop = false;
-			const scroller = this.renderRoot.querySelector("[part~=\"table\"]");
+			const scroller = this.#scroller();
 			if (scroller) scroller.scrollTop = 0;
 		}
 		this.#chaseScrollTarget(model.rowCount);
-		if (this.#columnsChanged || changed.has("columnSizing") || changed.has("columnOrder") || changed.has("columnPinning") || changed.has("columnVisibility") || this.#autoWidthsChanged || this.#selectionColumnChanged) this.#pinScroll.measure();
+		if (this.#columnsChanged || this.#groupsChanged || changed.has("columnSizing") || changed.has("columnOrder") || changed.has("columnPinning") || changed.has("columnVisibility") || this.#autoWidthsChanged || this.#selectionColumnChanged) this.#pinScroll.measure();
 		if (this.#focusPending && !resized) {
 			this.#focusPending = false;
 			this.#focusActive();
 		}
 		if (changed.has("density") || changed.has("rowHeight")) this.#measureRowHeight();
-		if (this.#appliedResizes.size > 0) {
-			const details = [...this.#appliedResizes.values()];
-			this.#appliedResizes.clear();
-			for (const detail of details) fire(this, COLUMN_RESIZE, detail);
-		}
+		this.#fireApplied(this.#appliedResizes, COLUMN_SIZING_CHANGE);
 		if (this.#announceMove) {
 			this.#announceMoved(model, this.#announceMove);
 			this.#announceMove = void 0;
 		}
-		if (this.#appliedReorders.size > 0) {
-			const details = [...this.#appliedReorders.values()];
-			this.#appliedReorders.clear();
-			for (const detail of details) fire(this, COLUMN_REORDER, detail);
-		}
-		if (this.#appliedPins.size > 0) {
-			const details = [...this.#appliedPins.values()];
-			this.#appliedPins.clear();
-			for (const detail of details) fire(this, COLUMN_PIN, detail);
-		}
-		if (this.#appliedHides.size > 0) {
-			const details = [...this.#appliedHides.values()];
-			this.#appliedHides.clear();
-			for (const detail of details) fire(this, COLUMN_HIDE, detail);
-		}
-		if (this.#appliedFilters.size > 0) {
-			const details = [...this.#appliedFilters.values()];
-			this.#appliedFilters.clear();
-			for (const detail of details) fire(this, COLUMN_FILTER, detail);
-		}
+		this.#fireApplied(this.#appliedReorders, COLUMN_ORDER_CHANGE);
+		this.#fireApplied(this.#appliedPins, COLUMN_PINNING_CHANGE);
+		this.#fireApplied(this.#appliedHides, COLUMN_VISIBILITY_CHANGE);
+		this.#fireApplied(this.#appliedFilters, COLUMN_FILTERS_CHANGE);
 		if (this.#announceRows) {
 			this.#announceRows = false;
 			this.#announceRowCount(model);
@@ -1011,20 +1092,20 @@ var ArgusTable = class ArgusTable extends LitElement {
 		if (this.#appliedSort) {
 			const sorting = this.#appliedSort;
 			this.#appliedSort = void 0;
-			fire(this, SORT_CHANGE, { sorting });
+			fire(this, SORTING_CHANGE, { sorting });
 		}
 		if (this.#appliedSelection) {
 			const selection = this.#appliedSelection;
 			this.#appliedSelection = void 0;
-			fire(this, ROW_SELECT, { selection });
+			fire(this, SELECTION_CHANGE, { selection });
 		}
 		const { range } = this.#window;
 		const key = range ? `${String(range.start)}:${String(range.end)}` : "";
 		if (range && key !== this.#lastRange) {
 			this.#lastRange = key;
 			fire(this, RANGE_CHANGE, {
-				start: range.start,
-				end: range.end
+				first: range.start,
+				last: range.end
 			});
 		}
 		if (range) {
@@ -1043,12 +1124,19 @@ var ArgusTable = class ArgusTable extends LitElement {
 	#keptColumns(model) {
 		return [
 			this.#active?.col,
-			this.#drag?.columnId,
+			...this.#drag?.key.startsWith("c:") ? this.#drag.columns : [],
 			this.dataSource ? model.columns.find((c) => c.kind === "data")?.id : void 0,
 			...this.#autoWidths.pending(model.columns),
 			...this.#measureKeep
 		];
 	}
+	/** Fires the events of changes the table applied itself, once the update is done. */
+	#fireApplied(applied, name) {
+		if (applied.size === 0) return;
+		const details = [...applied.values()];
+		applied.clear();
+		for (const detail of details) fire(this, name, detail);
+	}
 	/**
 	* Measures the `width: 'auto'` columns once loaded body rows render, or right
 	* away when there are no rows (the header and pinned rows only). While a data
@@ -1113,6 +1201,129 @@ var ArgusTable = class ArgusTable extends LitElement {
 	*/
 	#onKeydown;
 	/**
+	* The header row to go to from header row `level` down, over a column: the first
+	* group row from `level` with a group over it, else the column headers.
+	*/
+	#headerLevelDown(model, level, columnId) {
+		const leaf = model.headerGroups.length;
+		for (let l = level; l < leaf; l++) if (model.headerCell(l, columnId)?.kind === "group") return l;
+		return leaf;
+	}
+	/** The first group row from `level` up with a group over a column, or `undefined`. */
+	#headerLevelUp(model, level, columnId) {
+		for (let l = Math.min(level, model.headerGroups.length - 1); l >= 0; l--) if (model.headerCell(l, columnId)?.kind === "group") return l;
+	}
+	/**
+	* Keys on a focused group header. Arrows move between group headers in its row
+	* (fillers are skipped) and to the headers above and below it; ArrowDown ends on
+	* the column headers. Home and End go to the row's first and last group,
+	* PageDown into the body, Ctrl+Home and Ctrl+End to the corners, and
+	* Alt+Shift+Arrow moves the group. Groups don't sort or resize.
+	*/
+	#groupKey(event, cell, scroller) {
+		const model = this.#table.model;
+		const layout = layoutOf(model);
+		const at = gridRowOf(cell.parentElement, layout);
+		const row = at?.section === "header" ? model.headerGroups[at.index] : void 0;
+		const here = row?.find((c) => c.key === cell.dataset.groupKey);
+		if (!at || !row || here?.groupId === void 0) return;
+		const level = at.index;
+		const active = this.#active;
+		const anchor = active?.section === "header" && active.index === level && here.columns.includes(active.col) ? active.col : here.columns[0];
+		if (anchor === void 0) return;
+		const { key } = event;
+		const arrow = key === "ArrowLeft" || key === "ArrowRight";
+		const towardEnd = key === "ArrowRight" === (this.#direction() === 1);
+		if (arrow && event.altKey) {
+			event.preventDefault();
+			if (event.shiftKey) this.#moveByKey({
+				kind: "group",
+				id: here.groupId,
+				pin: here.pin
+			}, towardEnd ? 1 : -1);
+			else if (here.resizable) {
+				const starts = this.#groupWidths(here.columns);
+				const total = [...starts.values()].reduce((sum, w) => sum + w, 0);
+				this.#requestGroupResize(here.columns, starts, total + (towardEnd ? RESIZE_STEP : -10));
+			}
+			return;
+		}
+		if (key === "Enter" || key === " ") {
+			event.preventDefault();
+			return;
+		}
+		if (this.#selectionKey(event, cell, anchor, true, scroller)) return;
+		const corner = event.ctrlKey || event.metaKey;
+		if (event.altKey || event.shiftKey || corner && key !== "Home" && key !== "End") return;
+		const groups = row.filter((c) => c.kind === "group");
+		const columns = model.columns;
+		let to;
+		switch (key) {
+			case "ArrowLeft":
+			case "ArrowRight": {
+				const col = groups[groups.indexOf(here) + (towardEnd ? 1 : -1)]?.columns[0];
+				if (col !== void 0) to = {
+					row: at,
+					col
+				};
+				break;
+			}
+			case "Home":
+			case "End":
+				if (corner) {
+					const first = key === "Home";
+					const col = (first ? columns[0] : columns.at(-1))?.id;
+					if (col === void 0) break;
+					if (first) this.#virtual.scrollToEdge("start");
+					else if (layout.bottom > 0) this.#virtual.scrollToEdge("end");
+					const pos = first ? this.#headerLevelDown(model, 0, col) : layout.total - 1;
+					to = {
+						row: layout.at(pos) ?? layout.leafHeader,
+						col
+					};
+				} else {
+					const col = (key === "Home" ? groups[0] : groups.at(-1))?.columns[0];
+					if (col !== void 0) to = {
+						row: at,
+						col
+					};
+				}
+				break;
+			case "ArrowDown":
+				to = {
+					row: {
+						section: "header",
+						index: this.#headerLevelDown(model, level + 1, anchor)
+					},
+					col: anchor
+				};
+				break;
+			case "ArrowUp": {
+				const up = this.#headerLevelUp(model, level - 1, anchor);
+				if (up !== void 0) to = {
+					row: {
+						section: "header",
+						index: up
+					},
+					col: anchor
+				};
+				break;
+			}
+			case "PageDown": {
+				const pos = this.#verticalStep(key, layout.position(at), layout, scroller);
+				to = {
+					row: layout.at(pos) ?? at,
+					col: anchor
+				};
+				break;
+			}
+			case "PageUp": break;
+			default: return;
+		}
+		event.preventDefault();
+		if (to) this.#moveTo(to.row, to.col, model);
+	}
+	/**
 	* The grid position ArrowUp/ArrowDown (one row) or PageUp/PageDown (a page of
 	* the body) moves to from `pos`. PageDown from above the body lands a page
 	* into it and stops at its last row; PageUp stays in the body.
@@ -1135,9 +1346,9 @@ var ArgusTable = class ArgusTable extends LitElement {
 	#pageRows(key, pos, layout, scroller) {
 		if (this.rowHeight !== "auto") {
 			const fit = Math.floor(scroller.clientHeight / this.#rowPx + .01);
-			return Math.max(1, fit - 1 - layout.top - layout.bottom);
+			return Math.max(1, fit - layout.header - layout.top - layout.bottom);
 		}
-		const view = scroller.clientHeight - this.#rowPx - this.#pinnedPx("top", layout) - this.#pinnedPx("bottom", layout);
+		const view = scroller.clientHeight - this.#headerAndPinnedPx(layout);
 		const bodyFirst = layout.position({
 			section: "body",
 			index: 0
@@ -1207,6 +1418,22 @@ var ArgusTable = class ArgusTable extends LitElement {
 	}
 	/** Focus that lands in a cell (a click, or content inside it) makes that cell active. */
 	#onFocusin;
+	/** Focus on a group header makes it active, on the column it was active on, else its first. */
+	#focusGroup(cell) {
+		const model = this.#table.model;
+		const row = gridRowOf(cell.parentElement, layoutOf(model));
+		const group = row && model.headerGroups[row.index]?.find((c) => c.key === cell.dataset.groupKey);
+		const first = group?.columns[0];
+		if (!row || !group || first === void 0) return;
+		const prev = this.#active;
+		if (prev?.section === "header" && prev.index === row.index && group.columns.includes(prev.col)) return;
+		this.#active = {
+			...row,
+			rowId: void 0,
+			col: first
+		};
+		this.requestUpdate();
+	}
 	/**
 	* `argus-cell-click`, then `argus-row-click`, for clicks in the body; then,
 	* with a `selectionMode`, the click selects its row.
@@ -1255,7 +1482,7 @@ var ArgusTable = class ArgusTable extends LitElement {
 	}
 	/**
 	* Whether all, some or none of the selectable rows are selected. With `data`
-	* it's worked out once per `selection`, `data` and `getRowId`, not on scroll;
+	* it's worked out once per selection and rows shown, not on scroll;
 	* with a `dataSource` every time, over the loaded rows, which eviction keeps few.
 	*/
 	#checkAllState(model) {
@@ -1277,11 +1504,13 @@ var ArgusTable = class ArgusTable extends LitElement {
 			this.#visibility.value
 		];
 		const cached = this.#checkAll;
-		if (cached?.key.length !== key.length || key.some((k, i) => k !== cached.key[i])) this.#checkAll = {
+		if (cached?.key.length === key.length && key.every((k, i) => k === cached.key[i])) return cached.state;
+		const state = count();
+		this.#checkAll = {
 			key,
-			state: count()
+			state
 		};
-		return this.#checkAll?.state ?? "none";
+		return state;
 	}
 	/**
 	* A Shift+press on a row in `multi` mode selects a range of rows, not the
@@ -1332,8 +1561,9 @@ var ArgusTable = class ArgusTable extends LitElement {
 	/** The anchor row and where it is now; `undefined` if it isn't in the rows (or not loaded). */
 	#anchorAt(model) {
 		const id = this.#anchor;
-		const index = id === void 0 ? void 0 : model.indexOf(id);
-		return id === void 0 || index === void 0 ? void 0 : {
+		if (id === void 0) return void 0;
+		const index = model.indexOf(id);
+		return index === void 0 ? void 0 : {
 			id,
 			index
 		};
@@ -1351,7 +1581,7 @@ var ArgusTable = class ArgusTable extends LitElement {
 		if (applied) {
 			this.#appliedSelection = value;
 			this.requestUpdate("selection", old);
-		} else fire(this, ROW_SELECT, { selection: value });
+		} else fire(this, SELECTION_CHANGE, { selection: value });
 	}
 	/**
 	* Fires `argus-cell-click` (when a cell is on the path), then `argus-row-click`,
@@ -1375,6 +1605,8 @@ var ArgusTable = class ArgusTable extends LitElement {
 				if (!row) return;
 				if (columnId !== void 0) fire(this, CELL_CLICK, {
 					row: row.original,
+					rowId: row.id,
+					index,
 					columnId,
 					value: model.valueAt(index, columnId)
 				});
@@ -1390,6 +1622,8 @@ var ArgusTable = class ArgusTable extends LitElement {
 			if (!row) return;
 			if (columnId !== void 0) fire(this, CELL_CLICK, {
 				row: row.original,
+				rowId: row.id,
+				index,
 				columnId,
 				value: model.pinnedValueAt(pinned, index, columnId),
 				pinned
@@ -1425,13 +1659,27 @@ var ArgusTable = class ArgusTable extends LitElement {
 		const active = this.#active;
 		if (!active) return;
 		const col = CSS.escape(active.col);
-		const index = layoutOf(this.#table.model).ariaRowIndex(active);
-		const cell = this.renderRoot.querySelector(`[role='row'][aria-rowindex="${String(index)}"] > [data-col="${col}"]`);
+		const model = this.#table.model;
+		const layout = layoutOf(model);
+		const index = layout.ariaRowIndex(active);
+		const row = `[role='row'][aria-rowindex="${String(index)}"]`;
+		if (active.section === "header" && active.index < layout.header - 1) {
+			const key = model.headerCell(active.index, active.col)?.key ?? "";
+			const group = this.renderRoot.querySelector(`${row} > [data-group-key="${CSS.escape(key)}"]`);
+			if (!group) return;
+			group.focus({ preventScroll: true });
+			const leaf = `[role='row'][aria-rowindex="${String(layout.header)}"] > [data-col="${col}"]`;
+			this.renderRoot.querySelector(leaf)?.scrollIntoView({
+				block: "nearest",
+				inline: "nearest"
+			});
+			return;
+		}
+		const cell = this.renderRoot.querySelector(`${row} > [data-col="${col}"]`);
 		if (!cell) return;
 		cell.focus({ preventScroll: true });
 		if (active.section === "body" && (this.#virtual.scaled || this.rowHeight === "auto")) {
-			const layout = layoutOf(this.#table.model);
-			const before = this.#rowPx + this.#pinnedPx("top", layout);
+			const before = layout.header * this.#rowPx + this.#pinnedPx("top", layout);
 			if (this.#virtual.reveal(active.index, before, this.#pinnedPx("bottom", layout))) {
 				this.#focusPending = true;
 				return;
@@ -1457,14 +1705,24 @@ var ArgusTable = class ArgusTable extends LitElement {
 			this.#active = void 0;
 			return;
 		}
+		const layout = layoutOf(model);
+		const leaf = layout.header - 1;
 		const prev = this.#active ?? {
-			...HEADER,
+			...layout.leafHeader,
 			rowId: void 0,
 			col: first.id
 		};
 		const col = columns.some((c) => c.id === prev.col) ? prev.col : this.#columnInPlaceOf(model, prev.col, first.id);
 		let { section, index, rowId } = prev;
 		let moved = col !== prev.col && this.#active !== void 0;
+		if (section === "header") {
+			if (!this.#active || index === this.#leafLevel) index = leaf;
+			else if (index >= leaf || model.headerCell(index, col)?.kind !== "group") {
+				index = leaf;
+				moved = true;
+			}
+		}
+		this.#leafLevel = leaf;
 		if (section === "body" && rowId !== void 0) {
 			const found = model.indexOf(rowId);
 			const unloaded = index < model.rowCount && model.rowAt(index) === void 0;
@@ -1483,7 +1741,7 @@ var ArgusTable = class ArgusTable extends LitElement {
 			rowId = index >= 0 ? model.pinnedRowAt(section, index)?.id : void 0;
 		}
 		if (index < 0) {
-			({section, index} = HEADER);
+			({section, index} = layout.leafHeader);
 			rowId = void 0;
 		}
 		if (moved && this.matches(":focus-within")) this.#focusPending = true;
@@ -1517,6 +1775,49 @@ var ArgusTable = class ArgusTable extends LitElement {
 		const view = this.#table.model.columns.find((c) => c.id === columnId);
 		return view && view.flex === void 0 ? view.width : cell.getBoundingClientRect().width;
 	}
+	/** The group header cell with a key, from the model. */
+	#groupCellOf(key) {
+		if (key === void 0) return void 0;
+		return this.#table.model.headerGroups.flat().find((c) => c.key === key);
+	}
+	/**
+	* The widths a group resize starts from, by column: the latest requested ones
+	* (key presses can come faster than renders), else the model's, else the
+	* rendered width of a flex column.
+	*/
+	#groupWidths(columnIds) {
+		const widths = /* @__PURE__ */ new Map();
+		for (const id of columnIds) {
+			const header = this.renderRoot.querySelector(`[part~='header-cell'][data-col="${CSS.escape(id)}"]`);
+			const view = this.#table.model.columns.find((c) => c.id === id);
+			const sized = this.#sizing.value[id];
+			widths.set(id, sized ?? (header ? this.#currentWidth(id, header) : view?.width ?? 0));
+		}
+		return widths;
+	}
+	/**
+	* Resizes a group to `total` px: the change is spread over its resizable columns
+	* in proportion to their widths, within their bounds (one `argus-column-sizing-change`
+	* per column that changes). The other columns keep their width.
+	*/
+	#requestGroupResize(columnIds, starts, total) {
+		const views = new Map(this.#table.model.columns.map((c) => [c.id, c]));
+		let fixed = 0;
+		const spread = [];
+		for (const id of columnIds) {
+			const view = views.get(id);
+			const width = starts.get(id) ?? view?.width ?? 0;
+			if (view?.resizable) spread.push({
+				id,
+				width,
+				minWidth: view.minWidth,
+				maxWidth: view.maxWidth
+			});
+			else fixed += width;
+		}
+		if (spread.length === 0) return;
+		this.#requestResizes(spreadWidth(spread, total - fixed));
+	}
 	#direction() {
 		return getComputedStyle(this).direction === "rtl" ? -1 : 1;
 	}
@@ -1526,8 +1827,8 @@ var ArgusTable = class ArgusTable extends LitElement {
 	}
 	/**
 	* Sets column widths (clamped by core) in one change, through the
-	* controlled/uncontrolled rules. One `argus-column-resize` per column that
-	* changes, each with the whole new sizing.
+	* controlled/uncontrolled rules. One `argus-column-sizing-change` per column
+	* that changes, each with the whole new sizing.
 	*/
 	#requestResizes(widths) {
 		const model = this.#table.model;
@@ -1543,15 +1844,15 @@ var ArgusTable = class ArgusTable extends LitElement {
 			...Object.fromEntries(targets)
 		});
 		const details = targets.map(([columnId, width]) => ({
+			columnSizing: value,
 			columnId,
-			width,
-			sizing: value
+			width
 		}));
 		if (applied) {
-			for (const detail of this.#appliedResizes.values()) detail.sizing = value;
+			for (const detail of this.#appliedResizes.values()) detail.columnSizing = value;
 			for (const detail of details) this.#appliedResizes.set(detail.columnId, detail);
 			this.requestUpdate("columnSizing", old);
-		} else for (const detail of details) fire(this, COLUMN_RESIZE, detail);
+		} else for (const detail of details) fire(this, COLUMN_SIZING_CHANGE, detail);
 	}
 	/**
 	* Pins or unpins a column through the controlled/uncontrolled rules. Starts
@@ -1563,17 +1864,17 @@ var ArgusTable = class ArgusTable extends LitElement {
 		if (!next) return;
 		const { value, applied } = this.#pinning.request(next);
 		if (applied) {
-			for (const detail of this.#appliedPins.values()) detail.pinning = value;
+			for (const detail of this.#appliedPins.values()) detail.columnPinning = value;
 			this.#appliedPins.set(columnId, {
+				columnPinning: value,
 				columnId,
-				pin,
-				pinning: value
+				pin
 			});
 			this.requestUpdate("columnPinning", old);
-		} else fire(this, COLUMN_PIN, {
+		} else fire(this, COLUMN_PINNING_CHANGE, {
+			columnPinning: value,
 			columnId,
-			pin,
-			pinning: value
+			pin
 		});
 	}
 	/** Hides or shows a column through the controlled/uncontrolled rules. */
@@ -1583,17 +1884,17 @@ var ArgusTable = class ArgusTable extends LitElement {
 		if (!next) return;
 		const { value, applied } = this.#visibility.request(next);
 		if (applied) {
-			for (const detail of this.#appliedHides.values()) detail.visibility = value;
+			for (const detail of this.#appliedHides.values()) detail.columnVisibility = value;
 			this.#appliedHides.set(columnId, {
+				columnVisibility: value,
 				columnId,
-				hidden,
-				visibility: value
+				visible: !hidden
 			});
 			this.requestUpdate("columnVisibility", old);
-		} else fire(this, COLUMN_HIDE, {
+		} else fire(this, COLUMN_VISIBILITY_CHANGE, {
+			columnVisibility: value,
 			columnId,
-			hidden,
-			visibility: value
+			visible: !hidden
 		});
 	}
 	/** Sets or clears a column's filter through the controlled/uncontrolled rules. */
@@ -1603,17 +1904,17 @@ var ArgusTable = class ArgusTable extends LitElement {
 		if (!next) return;
 		const { value, applied } = this.#filters.request(next);
 		if (applied) {
-			for (const detail of this.#appliedFilters.values()) detail.filters = value;
+			for (const detail of this.#appliedFilters.values()) detail.columnFilters = value;
 			this.#appliedFilters.set(columnId, {
+				columnFilters: value,
 				columnId,
-				filter,
-				filters: value
+				columnFilter: filter
 			});
 			this.requestUpdate("columnFilters", old);
-		} else fire(this, COLUMN_FILTER, {
+		} else fire(this, COLUMN_FILTERS_CHANGE, {
+			columnFilters: value,
 			columnId,
-			filter,
-			filters: value
+			columnFilter: filter
 		});
 	}
 	/**
@@ -1626,80 +1927,127 @@ var ArgusTable = class ArgusTable extends LitElement {
 		announce(this.ownerDocument, n === 1 ? "1 row" : `${String(n)} rows`);
 	}
 	/**
-	* Moves a column to position `to` among the shown data columns (within its pin group),
-	* through the controlled/uncontrolled rules. Starts from the latest requested
-	* order, so moves can come faster than renders. `false` if it can't move there.
+	* Moves a column or group to position `to` among its siblings (the columns and
+	* groups of its parent group on its pin side), through the controlled/uncontrolled
+	* rules. Starts from the latest requested order, so moves can come faster than
+	* renders. `false` if it can't move there.
 	*/
-	#requestReorder(columnId, to) {
+	#requestReorder(unit, to) {
 		const old = this.#order.value;
-		const next = this.#table.model.nextOrder(columnId, to, old);
-		if (!next) return false;
+		const model = this.#table.model;
+		const moving = model.siblingUnits(unit, old).find((s) => sameUnit(s.unit, unit));
+		const next = model.nextMove(unit, to, old);
+		const columnId = moving?.columns[0];
+		if (!next || columnId === void 0) return false;
+		const detail = (columnOrder) => unit.kind === "group" ? {
+			columnOrder,
+			columnId,
+			groupId: unit.id
+		} : {
+			columnOrder,
+			columnId
+		};
 		const { value, applied } = this.#order.request(next);
 		if (applied) {
-			for (const detail of this.#appliedReorders.values()) detail.order = value;
-			this.#appliedReorders.set(columnId, {
-				columnId,
-				order: value
-			});
+			for (const pending of this.#appliedReorders.values()) pending.columnOrder = value;
+			this.#appliedReorders.set(unitKey(unit), detail(value));
 			this.requestUpdate("columnOrder", old);
-		} else fire(this, COLUMN_REORDER, {
-			columnId,
-			order: value
-		});
+		} else fire(this, COLUMN_ORDER_CHANGE, detail(value));
 		return true;
 	}
-	/** Alt+Shift+Arrow on a header: one step toward the start (-1) or the end (1). */
-	#moveByKey(columnId, step) {
+	/** Alt+Shift+Arrow on a column or group header: one step toward the start (-1) or the end (1). */
+	#moveByKey(unit, step) {
 		const model = this.#table.model;
-		const shown = new Set(model.columns.map((c) => c.id));
-		const from = model.orderOf(this.#order.value).filter((id) => shown.has(id)).indexOf(columnId);
-		const view = model.columns.find((c) => c.id === columnId);
-		if (from < 0 || !view) return;
-		if (!this.#requestReorder(columnId, from + step)) return;
+		const from = model.siblingUnits(unit, this.#order.value).findIndex((s) => sameUnit(s.unit, unit));
+		const at = this.#colIndexOf(model, unit);
+		if (from < 0 || at === void 0) return;
+		if (!this.#requestReorder(unit, from + step)) return;
 		this.#focusPending = true;
 		this.#announceMove ??= {
-			id: columnId,
-			from: view.colIndex
+			unit,
+			from: at
 		};
 		this.requestUpdate();
 	}
-	/** Tells screen readers where a column moved from the keyboard went. */
-	#announceMoved(model, move) {
-		const view = model.columns.find((c) => c.id === move.id);
-		if (!view || view.colIndex === move.from) return;
-		const header = this.renderRoot.querySelector(`[role='columnheader'][data-col="${CSS.escape(move.id)}"] > slot`);
-		const name = header instanceof HTMLSlotElement ? header.assignedNodes({ flatten: true }).map((n) => n.textContent).join("").trim() : "";
-		announce(this.ownerDocument, `${name || move.id} moved to column ${String(view.colIndex)} of ${String(model.columns.length)}`);
+	/** `aria-colindex` of a column's header, or of a group's first column on its side. */
+	#colIndexOf(model, unit) {
+		if (unit.kind === "column") return model.columns.find((c) => c.id === unit.id)?.colIndex;
+		const key = unitKey(unit);
+		return model.headerGroups.flat().find((c) => c.key === key)?.colIndex;
 	}
-	/** A press on a reorderable header: becomes a drag once the pointer moves. */
+	/** Tells screen readers where a column or group moved from the keyboard went. */
+	#announceMoved(model, move) {
+		const { unit } = move;
+		const total = String(model.columns.length);
+		if (unit.kind === "column") {
+			const view = model.columns.find((c) => c.id === unit.id);
+			if (!view || view.colIndex === move.from) return;
+			const name = this.#slotText(`[role='columnheader'][data-col="${CSS.escape(unit.id)}"] > slot`);
+			announce(this.ownerDocument, `${name || unit.id} moved to column ${String(view.colIndex)} of ${total}`);
+			return;
+		}
+		const key = unitKey(unit);
+		const cell = model.headerGroups.flat().find((c) => c.key === key);
+		if (!cell || cell.colIndex === move.from) return;
+		const name = this.#slotText(`[data-group-key="${CSS.escape(key)}"] slot`);
+		const last = cell.colIndex + cell.span - 1;
+		const where = cell.span === 1 ? `column ${String(cell.colIndex)}` : `columns ${String(cell.colIndex)} to ${String(last)}`;
+		announce(this.ownerDocument, `${name || unit.id} moved to ${where} of ${total}`);
+	}
+	/** The text slotted into a header, read through the slot's assigned nodes. */
+	#slotText(selector) {
+		const slot = this.renderRoot.querySelector(selector);
+		return slot instanceof HTMLSlotElement ? slot.assignedNodes({ flatten: true }).map((n) => n.textContent).join("").trim() : "";
+	}
+	/** A press on a reorderable column or group header: becomes a drag once the pointer moves. */
 	#startReorder(down) {
 		const cell = down.composedPath().find((t) => t instanceof HTMLElement && t.getAttribute("role") === "columnheader");
-		const columnId = cell?.dataset.moveCol;
-		if (!cell || columnId === void 0 || !canStartReorder(down, cell)) return;
-		const scroller = this.renderRoot.querySelector("[part~=\"table\"]");
-		if (!scroller) return;
-		const pin = this.#table.model.columns.find((c) => c.id === columnId)?.pin;
+		if (!cell || !canStartReorder(down, cell)) return;
+		const model = this.#table.model;
+		let unit;
+		if (cell.dataset.moveCol !== void 0) unit = {
+			kind: "column",
+			id: cell.dataset.moveCol
+		};
+		else {
+			const key = cell.dataset.moveGroup;
+			const group = model.headerGroups.flat().find((c) => c.key === key);
+			if (group?.groupId === void 0) return;
+			unit = {
+				kind: "group",
+				id: group.groupId,
+				pin: group.pin
+			};
+		}
+		const scroller = this.#scroller();
+		const moving = model.siblingUnits(unit).find((s) => sameUnit(s.unit, unit));
+		if (!scroller || !moving) return;
+		const key = unitKey(unit);
+		const columns = new Set(moving.columns);
+		const pin = unit.kind === "group" ? unit.pin : model.columns.find((c) => c.id === unit.id)?.pin;
 		startReorderDrag(cell, down, {
 			scroller,
-			targetAt: (x) => dropTarget(this.#dropSlots(pin), columnId, x, this.#direction()),
+			targetAt: (x) => dropTarget(this.#dropSlots(unit), key, x, this.#direction()),
 			scrollArea: () => pin === void 0 ? this.#scrollArea(scroller) : void 0,
 			onStart: () => {
 				this.#drag = {
-					columnId,
+					key,
+					columns,
 					target: void 0
 				};
 				this.requestUpdate();
 			},
 			onTarget: (target) => {
 				this.#drag = {
-					columnId,
+					key,
+					columns,
 					target
 				};
 				this.requestUpdate();
 			},
 			onDrop: (target) => {
 				this.#drag = void 0;
-				if (target && this.#requestReorder(columnId, target.to)) {
+				if (target && this.#requestReorder(unit, target.to)) {
 					if (this.matches(":focus-within")) this.#focusPending = true;
 				}
 				this.requestUpdate();
@@ -1711,16 +2059,17 @@ var ArgusTable = class ArgusTable extends LitElement {
 		});
 	}
 	/**
-	* The rendered headers of one pin group, with their positions in the whole
-	* order (which leaves out the checkbox column).
+	* The rendered headers of what a column or group moves among (see
+	* `siblingUnits`), with their positions there. With `virtualizeColumns`, columns
+	* out of view have no header and no slot.
 	*/
-	#dropSlots(pin) {
+	#dropSlots(unit) {
 		const slots = [];
-		this.#table.model.columns.filter((c) => c.kind === "data").forEach((c, index) => {
-			if (c.pin !== pin) return;
-			const cell = this.renderRoot.querySelector(`[role='columnheader'][data-col="${CSS.escape(c.id)}"]`);
+		this.#table.model.siblingUnits(unit).forEach((sibling, index) => {
+			const id = unitKey(sibling.unit);
+			const cell = this.renderRoot.querySelector(sibling.unit.kind === "column" ? `[role='columnheader'][data-col="${CSS.escape(sibling.unit.id)}"]` : `[data-group-key="${CSS.escape(id)}"]`);
 			if (cell) slots.push({
-				id: c.id,
+				id,
 				index,
 				rect: cell.getBoundingClientRect()
 			});
@@ -1729,8 +2078,7 @@ var ArgusTable = class ArgusTable extends LitElement {
 	}
 	/** Where the scrolling columns show: the scroller's inside, less the pinned columns. */
 	#scrollArea(scroller) {
-		const columns = this.#table.model.columns;
-		const width = (side) => columns.reduce((sum, c) => c.pin === side ? sum + c.width : sum, 0);
+		const width = (side) => pinnedWidth(this.#table.model.columns, side);
 		const ltr = this.#direction() === 1;
 		const left = scroller.getBoundingClientRect().left + scroller.clientLeft;
 		return {
@@ -1750,8 +2098,8 @@ var ArgusTable = class ArgusTable extends LitElement {
 	#setSort(columnId, direction) {
 		const view = this.#table.model.columns.find((c) => c.id === columnId);
 		if (view?.kind !== "data" || !view.sortable) return;
-		if (direction === (view.sorted === false ? null : view.sorted)) return;
-		if (direction === null) this.#applySorting([]);
+		if (direction === (view.sorted === false ? void 0 : view.sorted)) return;
+		if (direction === void 0) this.#applySorting([]);
 		else this.#applySorting([{
 			id: columnId,
 			desc: direction === "desc"
@@ -1764,7 +2112,7 @@ var ArgusTable = class ArgusTable extends LitElement {
 		if (applied) {
 			this.#appliedSort = value;
 			this.requestUpdate("sorting", old);
-		} else fire(this, SORT_CHANGE, { sorting: value });
+		} else fire(this, SORTING_CHANGE, { sorting: value });
 	}
 	/**
 	* A data column as plugins see it. Header functions call this on every
@@ -1789,7 +2137,7 @@ var ArgusTable = class ArgusTable extends LitElement {
 			width: view.width,
 			sorted: view.sorted === false ? void 0 : view.sorted,
 			filter: view.filter,
-			filterValue: this.#filters.value[id]
+			columnFilter: this.#filters.value[id]
 		};
 	}
 	/** The header or cell an event happened in, for plugins. */
@@ -1799,12 +2147,12 @@ var ArgusTable = class ArgusTable extends LitElement {
 			const columnId = cell?.dataset.col;
 			if (!cell || columnId === void 0) continue;
 			const model = this.#table.model;
-			const row = cell.getAttribute("role") === "columnheader" ? HEADER : gridRowOf(cell.parentElement, layoutOf(model));
+			const row = gridRowOfCell(cell, layoutOf(model));
 			if (!row) return void 0;
 			return {
 				section: row.section,
 				columnId,
-				rowIndex: row.index,
+				rowIndex: row.section === "header" ? 0 : row.index,
 				rowId: this.#gridRowId(model, row)
 			};
 		}
@@ -1823,6 +2171,10 @@ var ArgusTable = class ArgusTable extends LitElement {
 		if (this.rowHeight !== "auto" || count === 0) return count * this.#rowPx;
 		return Math.max(this.#rowMeasure.pinned[side], count * this.#rowPx);
 	}
+	/** The header rows and the pinned rows: the rows in the scroller besides the body. */
+	#headerAndPinnedPx(layout) {
+		return layout.header * this.#rowPx + this.#pinnedPx("top", layout) + this.#pinnedPx("bottom", layout);
+	}
 	/**
 	* `rowHeight: 'auto'`: reads the heights of the rendered rows, after their
 	* content has rendered. Returns whether any changed (an update is requested).
@@ -1843,6 +2195,7 @@ var ArgusTable = class ArgusTable extends LitElement {
 	}
 };
 __decorate([property({ attribute: false })], ArgusTable.prototype, "columns", null);
+__decorate([property({ attribute: false })], ArgusTable.prototype, "columnGroups", null);
 __decorate([property({ attribute: false })], ArgusTable.prototype, "data", null);
 __decorate([property({ attribute: false })], ArgusTable.prototype, "dataSource", void 0);
 __decorate([property({ attribute: false })], ArgusTable.prototype, "pinnedRows", void 0);
@@ -1855,7 +2208,7 @@ __decorate([property({ reflect: true })], ArgusTable.prototype, "density", void
 __decorate([property({ type: Number })], ArgusTable.prototype, "overscan", null);
 __decorate([property({
 	attribute: "virtualize-columns",
-	type: Boolean
+	converter: switchConverter
 })], ArgusTable.prototype, "virtualizeColumns", void 0);
 __decorate([property({ attribute: false })], ArgusTable.prototype, "sorting", null);
 __decorate([property({ attribute: false })], ArgusTable.prototype, "columnSizing", null);
@@ -1867,7 +2220,7 @@ __decorate([property({ attribute: "quick-filter" })], ArgusTable.prototype, "qui
 __decorate([property({ attribute: "selection-mode" })], ArgusTable.prototype, "selectionMode", void 0);
 __decorate([property({
 	attribute: "selection-checkboxes",
-	type: Boolean
+	converter: switchConverter
 })], ArgusTable.prototype, "selectionCheckboxes", void 0);
 __decorate([property({ attribute: false })], ArgusTable.prototype, "selection", null);
 __decorate([property({ attribute: false })], ArgusTable.prototype, "contentRenderer", void 0);