argus-table 0.2.2 → 0.4.0

package/dist/argus-table.js

@@ -1,21 +1,32 @@
+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";
 import { ColumnChildrenController } from "./controllers/column-children.js";
+import { ColumnWindowController } from "./controllers/column-window.js";
 import { DataController } from "./controllers/data-controller.js";
 import { PinScrollController } from "./controllers/pin-scroll-controller.js";
+import { PluginController, sameItems } from "./controllers/plugins.js";
+import { RowMeasure } from "./controllers/row-measure.js";
 import { canStartReorder, dropTarget, startReorderDrag } from "./controllers/reorder-drag.js";
 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_REORDER, COLUMN_RESIZE, LOAD_ERROR, RANGE_CHANGE, ROW_CLICK, 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 { renderHeader } from "./render/header.js";
+import { content, flushContent } from "./render/content-directive.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";
@@ -34,24 +45,34 @@ function attachGridInternals(host) {
 }
 /**
 * The sortable column a header click came from, if any. Works for slotted content
-* too. Clicks on a resize handle never sort, so a click that ends a drag doesn't.
+* too. Clicks on a resize handle never sort, so a click that ends a drag doesn't,
+* and neither do clicks on interactive content in the header (a button, an input).
 */
 function sortColumnOf(event) {
 	for (const target of event.composedPath()) {
 		if (!(target instanceof HTMLElement)) continue;
 		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;
-var HEADER = {
-	section: "header",
-	index: 0
-};
-/** Where the rows sit in the grid: header, pinned top, body, pinned bottom. */
+/** `row-height`: px (`48` or `48px`) or `auto`; anything else is unset. */
+var rowHeightConverter = { fromAttribute(value) {
+	if (value === null) return void 0;
+	const text = value.trim().toLowerCase();
+	if (text === "auto") return "auto";
+	const px = Number(text.replace(/px$/, ""));
+	return text !== "" && px > 0 ? px : void 0;
+} };
+/** 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) {
@@ -59,18 +80,26 @@ 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
 * covers the pinned columns and casts `--argus-pinned-shadow` onto the rest;
 * PinScrollController sizes it to the visible area.
 */
-function pinShadow(side, width, rows, rowPx) {
+function pinShadow(side, width, contentPx) {
 	if (width === 0) return nothing;
 	return html`<div
     class="pin-shadow"
@@ -78,7 +107,7 @@ function pinShadow(side, width, rows, rowPx) {
     aria-hidden="true"
     style=${styleMap({
 		inlineSize: `${String(width)}px`,
-		"--_content-h": `${String((rows + 1) * rowPx)}px`
+		"--_content-h": `${String(contentPx)}px`
 	})}
   ></div>`;
 }
@@ -86,18 +115,308 @@ function pinShadow(side, width, rows, rowPx) {
 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 {
-	constructor(..._args) {
-		super(..._args);
+	static {
+		this.styles = baseStyles;
+	}
+	/**
+	* Column definitions. Property only: functions can't be attributes. While empty,
+	* the table reads its `<argus-column>` children instead. `null` or `undefined`
+	* means `[]`.
+	*/
+	get columns() {
+		return this.#columnsProp;
+	}
+	set columns(value) {
+		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 `[]`.
+	*/
+	get data() {
+		return this.#dataProp;
+	}
+	set data(value) {
+		this.#dataProp = value ?? [];
+	}
+	/** Rows rendered above and below the visible ones. `null` or `undefined` means the default, 6. */
+	get overscan() {
+		return this.#overscan;
+	}
+	set overscan(value) {
+		this.#overscan = value ?? 6;
+	}
+	/**
+	* 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-sorting-change` with the proposed order,
+	* and nothing changes until you set the property. Set `undefined` to hand it back.
+	*/
+	get sorting() {
+		return this.#sorting.value;
+	}
+	set sorting(value) {
+		this.#sorting.set(value);
+	}
+	/**
+	* 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-sizing-change` with the proposed widths. `undefined` hands it back.
+	*/
+	get columnSizing() {
+		return this.#sizing.value;
+	}
+	set columnSizing(value) {
+		this.#sizing.set(value);
+	}
+	/**
+	* The column order: column ids as the table shows them, e.g.
+	* `['id', 'total', 'customer']`. `[]` (the default) keeps the order of `columns`.
+	* 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-order-change`
+	* with the proposed order. `undefined` hands it back.
+	*/
+	get columnOrder() {
+		return this.#order.value;
+	}
+	set columnOrder(value) {
+		this.#order.set(value);
+	}
+	/**
+	* Pins by column id, over the columns' own `pin`: `'start'` or `'end'` pins a
+	* column, `false` unpins one whose definition pins it, e.g.
+	* `{ 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-pinning-change` with the proposed pins. `undefined` hands it back.
+	*/
+	get columnPinning() {
+		return this.#pinning.value;
+	}
+	set columnPinning(value) {
+		this.#pinning.set(value);
+	}
+	/**
+	* Visibility by column id, over the columns' own `hidden`: `false` hides a column,
+	* `true` shows one defined as `hidden`, e.g. `{ email: false }`. Columns it
+	* 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-visibility-change` with the proposed visibility. `undefined` hands it back.
+	*/
+	get columnVisibility() {
+		return this.#visibility.value;
+	}
+	set columnVisibility(value) {
+		this.#visibility.set(value);
+	}
+	/**
+	* Filters by column id, e.g. `{ city: { kind: 'set', values: ['Berlin'] } }` or
+	* `{ total: { kind: 'number', op: 'gt', value: 100 } }`. A row shows when it passes
+	* every filter and `quickFilter`. Filters on hidden columns still apply; unknown ids
+	* are ignored. A column's `filterFn` replaces the built-in matching. With a
+	* `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-filters-change` with the proposed filters. `undefined` hands it back.
+	*/
+	get columnFilters() {
+		return this.#filters.value;
+	}
+	set columnFilters(value) {
+		this.#filters.set(value);
+	}
+	/**
+	* Shows only rows that contain each word of this text in one of their shown
+	* columns, ignoring case, e.g. from a search box. Values are matched as text
+	* (dates as `2026-11-10`); objects aren't searched. With a `dataSource`, it goes
+	* to `getRows()` and the server filters. `''` (the default) shows every row.
+	*/
+	get quickFilter() {
+		return this.#quickFilter;
+	}
+	set quickFilter(value) {
+		this.#quickFilter = value ?? "";
+	}
+	/**
+	* 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-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.
+	*/
+	get selection() {
+		return this.#selection.value;
+	}
+	set selection(value) {
+		this.#selection.set(value);
+	}
+	/**
+	* Add-ons, such as `headerMenu()` from `@argus-table/header-menu`. Each one can
+	* change the column definitions, handle keys on a focused header or cell, and
+	* use the table through a small API. They run in array order. Replace the
+	* array to change them; an array with the same plugins in the same order
+	* changes nothing. `null` or `undefined` means `[]`.
+	*/
+	get plugins() {
+		return this.#pluginsProp;
+	}
+	set plugins(value) {
+		const next = value ?? [];
+		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;
+	#sorting;
+	#sizing;
+	#order;
+	#pinning;
+	#visibility;
+	#filters;
+	#quickFilter;
+	/** Filters the table applied itself, by column; their events fire once the update is done. */
+	#appliedFilters;
+	/** Announce the row count after the update: the filters changed. */
+	#announceRows;
+	/** Pins the table applied itself, by column; their events fire once the update is done. */
+	#appliedPins;
+	/** Hidden or shown columns the table applied itself; their events fire once the update is done. */
+	#appliedHides;
+	#selection;
+	/** `selection` as a set, for the rows rendered; rebuilt when `selection` changes. */
+	#selectedIds;
+	/** The row a Shift range starts from: the last row clicked or toggled without Shift. */
+	#anchor;
+	/** A selection the table applied itself; its event fires once the update is done. */
+	#appliedSelection;
+	/** Whether the checkbox column was last shown; a change re-measures the pinned columns. */
+	#selectionColumn;
+	#selectionColumnChanged;
+	/** The select-all checkbox's state, kept until the selection or the shown rows change. */
+	#checkAll;
+	/** 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: what moved and its old position. */
+	#announceMove;
+	/** Resizes the table applied itself, by column; their events fire once the update is done. */
+	#appliedResizes;
+	/** Columns `autosizeColumns()` renders out of view for its measurement. */
+	#measureKeep;
+	/** Measured widths of `width: 'auto'` columns. */
+	#autoWidths;
+	/** The auto widths last passed to the model; a change re-measures the pinned columns' offsets. */
+	#pushedAutoWidths;
+	#autoWidthsChanged;
+	/** A sort the table applied itself; its event fires once the update is done. */
+	#appliedSort;
+	#internals;
+	#table;
+	#children;
+	/** What plugins get: closures over the table's private state. */
+	#pluginHost;
+	#plugins;
+	#columnsById;
+	/** The columns last passed to the model: `columns`, or the `<argus-column>` children. */
+	#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. */
+	#lightPart;
+	#lightConnected;
+	#data;
+	/** Scroll back to the top after the update (a new sort order for a data source). */
+	#scrollToTop;
+	#virtual;
+	#pinScroll;
+	#columnWindow;
+	/** The columns the last render rendered (all of them, unless `virtualizeColumns`). */
+	#rendered;
+	#rowPx;
+	#probeObserver;
+	/** The column template and row height the rows were last read for. */
+	#rowsKey;
+	/** Rows of different heights: reads the rendered rows (`rowHeight: 'auto'` only). */
+	#rowMeasure;
+	#window;
+	#active;
+	/** Move focus to the active cell after the next update (keyboard navigation). */
+	#focusPending;
+	#lastRange;
+	#unwatchMaxHeight;
+	/**
+	* The row `setState()` still has to scroll to: a data source's rows that far
+	* 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";
+		this.virtualizeColumns = false;
+		this.selectionMode = "none";
+		this.selectionCheckboxes = false;
 		this.#columnsProp = [];
+		this.#columnGroupsProp = [];
+		this.#groups = [];
+		this.#groupsChanged = false;
+		this.#pluginsProp = [];
 		this.#dataProp = [];
 		this.#overscan = 6;
 		this.#sorting = controllable([]);
 		this.#sizing = controllable({});
 		this.#order = controllable([]);
+		this.#pinning = controllable({});
+		this.#visibility = controllable({});
+		this.#filters = controllable({});
+		this.#quickFilter = "";
+		this.#appliedFilters = /* @__PURE__ */ new Map();
+		this.#announceRows = false;
+		this.#appliedPins = /* @__PURE__ */ new Map();
+		this.#appliedHides = /* @__PURE__ */ new Map();
+		this.#selection = controllable([]);
+		this.#selectionColumn = false;
+		this.#selectionColumnChanged = false;
 		this.#appliedReorders = /* @__PURE__ */ new Map();
 		this.#appliedResizes = /* @__PURE__ */ new Map();
+		this.#measureKeep = [];
 		this.#autoWidths = new AutoWidths(() => {
 			this.requestUpdate();
 		});
@@ -105,14 +424,67 @@ var ArgusTable = class ArgusTable extends LitElement {
 		this.#internals = attachGridInternals(this);
 		this.#table = new TableController();
 		this.#children = new ColumnChildrenController(this);
+		this.#pluginHost = {
+			element: this,
+			column: (id) => this.#columnInfo(id),
+			columns: () => this.#table.model.allColumns.flatMap((c) => {
+				const info = this.#columnInfo(c.id);
+				return info ? [info] : [];
+			}),
+			setPin: (columnId, pin) => {
+				this.#requestPin(columnId, pin);
+			},
+			setHidden: (columnId, hidden) => {
+				this.#requestHide(columnId, hidden);
+			},
+			setFilter: (columnId, filter) => {
+				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) => {
+				const model = this.#table.model;
+				this.#moveTo(layoutOf(model).leafHeader, columnId, model);
+			},
+			announce: (message) => {
+				announce(this.ownerDocument, message);
+			},
+			invalidateColumns: () => {
+				this.#plugins.invalidate();
+				this.requestUpdate();
+			},
+			requestUpdate: () => {
+				this.requestUpdate();
+			},
+			row: (index) => this.#table.model.rowAt(index)?.original,
+			content: (value) => content(value)
+		};
+		this.#plugins = new PluginController(this, this.#pluginHost);
 		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.#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 = "";
+		this.#rowMeasure = new RowMeasure(this, {
+			bodyIndex: (row) => {
+				const at = gridRowOf(row, layoutOf(this.#table.model));
+				return at?.section === "body" && this.#data.stateAt(at.index) === "loaded" ? at.index : void 0;
+			},
+			sizeOf: (index) => this.#virtual.sizeOf(index),
+			minimum: () => this.#rowPx
+		});
 		this.#window = {
 			rows: [],
 			totalSize: 0,
@@ -120,6 +492,9 @@ var ArgusTable = class ArgusTable extends LitElement {
 		};
 		this.#focusPending = false;
 		this.#lastRange = "";
+		this.#dropScrollTarget = () => {
+			this.#scrollTarget = void 0;
+		};
 		this.#onRetry = (event) => {
 			const button = event.currentTarget;
 			if (button.matches(":focus")) button.parentElement?.focus({ preventScroll: true });
@@ -134,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) {
@@ -147,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;
@@ -164,19 +556,22 @@ var ArgusTable = class ArgusTable extends LitElement {
 				}, { once: true });
 				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);
+			if (group || id === void 0) {
+				this.#groupKey(event, cell, scroller);
 				return;
 			}
-			if (inHeader && event.altKey && arrow) {
+			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;
+			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) {
@@ -184,11 +579,12 @@ var ArgusTable = class ArgusTable extends LitElement {
 				this.#requestSort(id);
 				return;
 			}
+			if (this.#selectionKey(event, cell, id, inHeader, scroller)) return;
 			const corner = event.ctrlKey || event.metaKey;
 			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();
@@ -199,26 +595,13 @@ var ArgusTable = class ArgusTable extends LitElement {
 			const columns = model.columns;
 			let pos = layout.position(from);
 			const last = layout.total - 1;
-			const bodyFirst = layout.position({
-				section: "body",
-				index: 0
-			});
-			const bodyLast = bodyFirst + layout.body - 1;
-			const fit = Math.floor(scroller.clientHeight / this.#rowPx + .01);
-			const page = Math.max(1, fit - 1 - layout.top - layout.bottom);
 			let col = columns.findIndex((c) => c.id === id);
 			switch (key) {
 				case "PageDown":
-					if (layout.body > 0 && pos <= bodyLast) pos = Math.min(Math.max(pos, bodyFirst - 1) + page, bodyLast);
-					break;
 				case "PageUp":
-					if (layout.body > 0 && pos > bodyFirst) pos = Math.max(Math.min(pos, bodyLast + 1) - page, bodyFirst);
-					break;
 				case "ArrowDown":
-					pos = Math.min(pos + 1, last);
-					break;
 				case "ArrowUp":
-					pos = Math.max(pos - 1, 0);
+					pos = this.#verticalStep(key, pos, layout, scroller);
 					break;
 				case "ArrowRight":
 					col += this.#direction();
@@ -229,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;
@@ -240,11 +623,20 @@ var ArgusTable = class ArgusTable extends LitElement {
 				default: return;
 			}
 			event.preventDefault();
-			const row = layout.at(pos) ?? HEADER;
-			if (key.startsWith("Page") && from.section === "body" && row.section === "body") this.#virtual.scrollBy((row.index - from.index) * this.#rowPx);
-			if (corner && key === "End" && row.section === "bottom") this.#virtual.scrollToEdge("end");
+			let row = layout.at(pos) ?? layout.leafHeader;
 			const target = columns[Math.min(Math.max(col, 0), columns.length - 1)];
-			if (target) this.#moveTo(row, target.id, model);
+			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");
+			this.#moveTo(row, target.id, model);
 		};
 		this.#onFocusin = (event) => {
 			const scroller = event.currentTarget;
@@ -257,152 +649,99 @@ var ArgusTable = class ArgusTable extends LitElement {
 				return;
 			}
 			for (const target of event.composedPath()) {
-				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 { col } = cell.dataset;
-					const prev = this.#active;
-					if (row && (row.section !== prev?.section || row.index !== prev.index || col !== prev.col)) {
-						this.#active = {
-							...row,
-							rowId: this.#gridRowId(model, row),
-							col
-						};
-						this.requestUpdate();
-					}
+				const group = groupCell(target);
+				if (group) {
+					this.#focusGroup(group);
 					return;
 				}
-				if (target === event.currentTarget) return;
-			}
-		};
-		this.#onClick = (event) => {
-			this.#activate(event.composedPath());
-		};
-	}
-	static {
-		this.styles = baseStyles;
-	}
-	/**
-	* Column definitions. Property only: functions can't be attributes. While empty,
-	* the table reads its `<argus-column>` children instead. `null` or `undefined`
-	* means `[]`.
-	*/
-	get columns() {
-		return this.#columnsProp;
-	}
-	set columns(value) {
-		this.#columnsProp = value ?? [];
-	}
-	/**
-	* The rows to show. Replace the array to update; changes inside it aren't
-	* detected. `null` or `undefined` means `[]`.
-	*/
-	get data() {
-		return this.#dataProp;
-	}
-	set data(value) {
-		this.#dataProp = value ?? [];
-	}
-	/** Rows rendered above and below the visible ones. `null` or `undefined` means the default, 6. */
-	get overscan() {
-		return this.#overscan;
-	}
-	set overscan(value) {
-		this.#overscan = value ?? 6;
-	}
-	/**
-	* 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,
-	* and nothing changes until you set the property. Set `undefined` to hand it back.
-	*/
-	get sorting() {
-		return this.#sorting.value;
-	}
-	set sorting(value) {
-		this.#sorting.set(value);
-	}
-	/**
-	* 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.
-	*/
-	get columnSizing() {
-		return this.#sizing.value;
-	}
-	set columnSizing(value) {
-		this.#sizing.set(value);
-	}
-	/**
-	* The column order: column ids as the table shows them, e.g.
-	* `['id', 'total', 'customer']`. `[]` (the default) keeps the order of `columns`.
-	* 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`
-	* with the proposed order. `undefined` hands it back.
-	*/
-	get columnOrder() {
-		return this.#order.value;
-	}
-	set columnOrder(value) {
-		this.#order.set(value);
-	}
-	#columnsProp;
-	#dataProp;
-	#overscan;
-	#sorting;
-	#sizing;
-	#order;
-	/** Moves the table applied itself, by column; 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. */
-	#announceMove;
-	/** Resizes the table applied itself, by column; their events fire once the update is done. */
-	#appliedResizes;
-	/** Measured widths of `width: 'auto'` columns. */
-	#autoWidths;
-	/** The auto widths last passed to the model; a change re-measures the pinned columns' offsets. */
-	#pushedAutoWidths;
-	#autoWidthsChanged;
-	/** A sort the table applied itself; its event fires once the update is done. */
-	#appliedSort;
-	#internals;
-	#table;
-	#children;
-	/** The columns last passed to the model: `columns`, or the `<argus-column>` children. */
-	#columns;
-	#columnsChanged;
-	#warnedColumns;
-	/** End of the light-DOM part holding cell content, so later children stay outside it. */
-	#contentEnd;
-	#data;
-	/** Scroll back to the top after the update (a new sort order for a data source). */
-	#scrollToTop;
-	#virtual;
-	#pinScroll;
-	#rowPx;
-	#probeObserver;
-	#window;
-	#active;
-	/** Move focus to the active cell after the next update (keyboard navigation). */
-	#focusPending;
-	#lastRange;
-	#unwatchMaxHeight;
+				const cell = gridCell(target);
+				if (cell?.dataset.col !== void 0) {
+					const model = this.#table.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)) {
+						this.#active = {
+							...row,
+							rowId: this.#gridRowId(model, row),
+							col
+						};
+						this.requestUpdate();
+					}
+					return;
+				}
+				if (target === event.currentTarget) return;
+			}
+		};
+		this.#onClick = (event) => {
+			const path = event.composedPath();
+			this.#activate(path);
+			const target = this.#mode() === "none" ? void 0 : this.#selectableRowOf(path);
+			if (!target) return;
+			const inSelectionCell = path.some((t) => t instanceof HTMLElement && t.dataset.col === "--argus-selection");
+			this.#clickRow(target, event, inSelectionCell || event.ctrlKey || event.metaKey);
+		};
+		this.#checkboxHandlers = {
+			row: (event) => {
+				const index = Number(event.currentTarget.dataset.row);
+				const id = this.#table.model.rowAt(index)?.id;
+				if (id !== void 0) this.#clickRow({
+					id,
+					index
+				}, event, true);
+				this.requestUpdate();
+			},
+			all: () => {
+				this.#toggleAll();
+				this.requestUpdate();
+			},
+			press: (event) => {
+				event.preventDefault();
+				event.currentTarget.parentElement?.focus({ preventScroll: true });
+			}
+		};
+		this.#onMousedown = (event) => {
+			if (!event.shiftKey || event.button !== 0 || this.#mode() !== "multi") return;
+			const path = event.composedPath();
+			if (!this.#selectableRowOf(path)) return;
+			event.preventDefault();
+			for (const target of path) {
+				const cell = gridCell(target);
+				if (cell) {
+					cell.focus({ preventScroll: true });
+					return;
+				}
+			}
+		};
+		for (const type of [
+			"wheel",
+			"touchstart",
+			"pointerdown",
+			"keydown"
+		]) this.addEventListener(type, this.#dropScrollTarget, { passive: true });
+	}
+	#dropScrollTarget;
 	connectedCallback() {
 		super.connectedCallback();
 		if (!this.hasAttribute("role")) this.setAttribute("role", "grid");
 		if (this.hasUpdated) this.#observeProbe();
+		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();
+		this.#setLightConnected(false);
 		this.#unwatchMaxHeight?.();
 		this.#unwatchMaxHeight = void 0;
 	}
@@ -419,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.
@@ -444,53 +791,172 @@ 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.
 	* Resolves once the table has re-rendered.
 	*/
 	async autosizeColumns(ids) {
 		await this.updateComplete;
 		const targets = this.#table.model.columns.filter((c) => c.resizable && (ids === void 0 || ids.includes(c.id))).map((c) => c.id);
-		this.#requestResizes(measureColumns(this.renderRoot, targets));
+		if (this.virtualizeColumns) {
+			this.#measureKeep = targets;
+			this.requestUpdate();
+			await this.updateComplete;
+		}
+		const widths = measureColumns(this.renderRoot, targets);
+		if (this.#measureKeep.length > 0) {
+			this.#measureKeep = [];
+			this.requestUpdate();
+		}
+		this.#requestResizes(widths);
 		await this.updateComplete;
 	}
 	/** Scrolls so that the row at `index` (in the current row order) is at the top. */
 	async scrollToRow(index) {
 		await this.updateComplete;
 		this.#virtual.scrollToIndex(index);
+		await this.#settled();
+	}
+	/**
+	* Waits for the update, and with `rowHeight: 'auto'` for the ones measured
+	* rows request (a few at most: heights don't depend on positions).
+	*/
+	async #settled() {
+		let done = await this.updateComplete;
+		for (let i = 0; i < 8 && !done && this.rowHeight === "auto"; i++) done = await this.updateComplete;
+	}
+	/**
+	* 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 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.#scroller();
+		return structuredClone({
+			version: 1,
+			sorting: this.#sorting.value,
+			columnSizing: this.#sizing.value,
+			columnOrder: this.#order.value,
+			columnPinning: this.#pinning.value,
+			columnVisibility: this.#visibility.value,
+			columnFilters: this.#filters.value,
+			selection: this.#selection.value,
+			quickFilter: this.#quickFilter,
+			scroll: {
+				row: this.#virtual.topRow,
+				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. 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
+	* `dataSource` the restored rows load where it points. Resolves once the table
+	* 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);
+		this.#restore("columnPinning", this.#pinning, state.columnPinning);
+		this.#restore("columnVisibility", this.#visibility, state.columnVisibility);
+		this.#restore("columnFilters", this.#filters, state.columnFilters);
+		if (this.#restore("selection", this.#selection, state.selection)) this.#anchor = void 0;
+		if (state.quickFilter !== void 0) this.quickFilter = state.quickFilter;
+		this.#scrollTarget = void 0;
 		await this.updateComplete;
+		const { scroll } = state;
+		if (!scroll) return;
+		this.#virtual.scrollToIndex(scroll.row);
+		const count = this.#table.model.rowCount;
+		if (this.#data.rows?.totalKnown === false && scroll.row >= count) this.#scrollTarget = {
+			row: scroll.row,
+			count
+		};
+		const scroller = this.#scroller();
+		if (scroller && scroll.inline >= 0) scroller.scrollLeft = scroll.inline * this.#direction();
+		await new Promise(requestAnimationFrame);
+		await this.#settled();
+	}
+	/** Scrolls on toward the row `setState()` restored once more rows are counted. */
+	#chaseScrollTarget(count) {
+		const target = this.#scrollTarget;
+		if (!target || target.count === count) return;
+		target.count = count;
+		this.#virtual.scrollToIndex(target.row);
+		if (target.row < count || this.#data.rows?.totalKnown !== false) this.#scrollTarget = void 0;
+	}
+	/**
+	* Applies a restored value to uncontrolled state without an event, as a user
+	* change would without the event. Returns whether it changed.
+	*/
+	#restore(name, state, value) {
+		if (value === void 0 || state.controlled) return false;
+		if (JSON.stringify(value) === JSON.stringify(state.value)) return false;
+		const old = state.value;
+		state.request(structuredClone(value));
+		this.requestUpdate(name, old);
+		return true;
 	}
 	willUpdate(changed) {
-		const columns = this.#effectiveColumns();
+		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;
-		if (changed.has("dataSource") || changed.has("sorting") || changed.has("getRowId")) {
+		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({
 				source: this.dataSource,
 				sorting: this.#sorting.value,
+				filters: this.#filters.value,
+				quickFilter: this.#quickFilter,
 				getRowId: this.getRowId
 			});
-			if (this.dataSource && this.hasUpdated && changed.has("sorting")) this.#scrollToTop = !changed.has("dataSource");
+			if (this.dataSource && this.hasUpdated && (changed.has("sorting") || filtersChanged)) this.#scrollToTop = !changed.has("dataSource");
+			this.#scrollTarget = void 0;
 		}
-		if (this.#columnsChanged || changed.has("data") || changed.has("getRowId") || changed.has("sorting") || changed.has("columnSizing") || changed.has("columnOrder") || changed.has("pinnedRows")) {
+		if (filtersChanged && this.hasUpdated) this.#announceRows = true;
+		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,
 				columnSizing: this.#sizing.value,
 				columnOrder: this.#order.value,
+				columnPinning: this.#pinning.value,
+				columnVisibility: this.#visibility.value,
+				columnFilters: this.#filters.value,
+				quickFilter: this.#quickFilter,
 				pinnedRows: this.pinnedRows
 			});
 		}
 		const autoWidths = this.#autoWidths.widths;
 		this.#autoWidthsChanged = autoWidths !== this.#pushedAutoWidths;
 		this.#pushedAutoWidths = autoWidths;
+		const selectionColumn = this.selectionCheckboxes && this.#mode() !== "none";
+		this.#selectionColumnChanged = selectionColumn !== this.#selectionColumn;
+		this.#selectionColumn = selectionColumn;
 		this.#table.update({
 			remote: this.#data.rows,
-			autoWidths
+			autoWidths,
+			selectionColumn
 		});
 		const model = this.#table.model;
 		this.#reconcileActive(model);
@@ -499,11 +965,19 @@ var ArgusTable = class ArgusTable extends LitElement {
 		const layout = layoutOf(model);
 		this.#internals.ariaRowCount = unknownTotal ? "-1" : String(layout.total);
 		this.#internals.ariaColCount = String(model.columns.length);
-		const extra = (1 + layout.top + layout.bottom) * this.#rowPx;
+		this.#internals.ariaMultiSelectable = this.#mode() === "multi" ? "true" : null;
+		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();
 		this.#virtual.configure({
 			count: model.rowCount,
 			rowHeight: this.#rowPx,
-			cap: bodyCap(model.rowCount * this.#rowPx, extra),
+			cap: (logical) => bodyCap(logical, extra),
+			auto: auto ? {
+				order: model.rowOrder,
+				indexOf: (id) => model.indexOf(id)
+			} : void 0,
 			overscan: Math.max(0, this.overscan),
 			rowIdAt: (index) => this.#rowId(model, index),
 			keep: active?.section !== "body" || active.rowId === void 0 ? void 0 : {
@@ -516,17 +990,31 @@ var ArgusTable = class ArgusTable extends LitElement {
 		const model = this.#table.model;
 		const columns = model.columns;
 		this.#window = this.#virtual.computeWindow();
-		const pinnedWidth = (side) => columns.reduce((sum, c) => c.pin === side ? sum + c.width : sum, 0);
-		const pinned = (side) => `${String(pinnedWidth(side))}px`;
+		const rendered = this.#columnWindow.compute(columns, this.virtualizeColumns, this.virtualizeColumns ? this.#keptColumns(model) : []);
+		this.#rendered = rendered;
+		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 = `${cols}|${String(this.#rowPx)}`;
+			if (key !== this.#rowsKey) {
+				this.#rowsKey = key;
+				this.#rowMeasure.invalidate();
+			}
+			style["--_pin-top-h"] = `${String(this.#pinnedPx("top", layout))}px`;
+			style["--_pin-bottom-h"] = `${String(this.#pinnedPx("bottom", layout))}px`;
+		}
 		const active = this.#active;
 		const activeIn = (section) => active?.section === section ? {
 			index: active.index,
@@ -536,24 +1024,33 @@ var ArgusTable = class ArgusTable extends LitElement {
 			section,
 			index: 0
 		});
-		if (this.rowHeight !== void 0 && this.rowHeight > 0) style["--_row-height"] = `${String(this.rowHeight)}px`;
+		if (typeof this.rowHeight === "number" && this.rowHeight > 0) style["--_row-height"] = `${String(this.rowHeight)}px`;
+		const contentPx = this.#headerAndPinnedPx(layout) + (model.rowCount === 0 ? 0 : this.#window.totalSize);
 		return html`<div
         part="table"
         role="presentation"
         style=${styleMap(style)}
         ?data-dragging=${this.#drag !== void 0}
+        ?data-auto-rows=${auto}
         @keydown=${this.#onKeydown}
         @focusin=${this.#onFocusin}
+        @mousedown=${this.#onMousedown}
         @click=${this.#onClick}
       >
-        ${renderHeader(columns, this.#headerHandlers, activeIn("header")?.col, this.#drag)}
-        ${renderPinnedRows("top", layout.top, columns, firstIndex("top"), activeIn("top"))}
-        ${model.rowCount === 0 ? html`<div part="empty"><slot name="empty">No rows</slot></div>` : renderBody(this.#window.rows, columns, this.#window.totalSize, activeIn("body"), firstIndex("body"), this.#loading())}
-        ${renderPinnedRows("bottom", layout.bottom, columns, firstIndex("bottom"), activeIn("bottom"))}
+        ${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"), layout.total - 1, this.#rowPx)}
-      ${pinShadow("end", pinnedWidth("end"), layout.total - 1, this.#rowPx)}`;
+      ${pinShadow("start", pinStart, contentPx)} ${pinShadow("end", pinEnd, contentPx)}`;
 	}
 	firstUpdated() {
 		this.#observeProbe();
@@ -561,45 +1058,54 @@ var ArgusTable = class ArgusTable extends LitElement {
 	}
 	updated(changed) {
 		const model = this.#table.model;
-		renderLightDom(this, model, this.#window.rows, 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);
 		this.#measureAutoWidths(model);
+		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;
 		}
-		if (this.#columnsChanged || changed.has("columnSizing") || changed.has("columnOrder") || this.#autoWidthsChanged) this.#pinScroll.measure();
-		if (this.#focusPending) {
+		this.#chaseScrollTarget(model.rowCount);
+		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);
+		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);
 		}
 		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, 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) {
@@ -609,6 +1115,29 @@ var ArgusTable = class ArgusTable extends LitElement {
 		for (const detail of this.#data.takeErrors()) fire(this, LOAD_ERROR, detail);
 	}
 	/**
+	* Columns to render wherever they are, with `virtualizeColumns`: the active
+	* cell's (its tab stop and focus survive scrolling sideways, and keyboard
+	* moves land on a rendered cell), one being dragged, auto widths still to
+	* measure, the targets of `autosizeColumns()`, and with a `dataSource` the
+	* first data column, which holds the Retry buttons.
+	*/
+	#keptColumns(model) {
+		return [
+			this.#active?.col,
+			...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
 	* source's first rows load, they keep the default width. A changed width
@@ -671,14 +1200,393 @@ var ArgusTable = class ArgusTable extends LitElement {
 	* cell (an input, a button) are left to that content.
 	*/
 	#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.
+	*/
+	#verticalStep(key, pos, layout, scroller) {
+		const bodyFirst = layout.position({
+			section: "body",
+			index: 0
+		});
+		const bodyLast = bodyFirst + layout.body - 1;
+		const page = this.#pageRows(key, pos, layout, scroller);
+		switch (key) {
+			case "PageDown": return layout.body > 0 && pos <= bodyLast ? Math.min(Math.max(pos, bodyFirst - 1) + page, bodyLast) : pos;
+			case "PageUp": return layout.body > 0 && pos > bodyFirst ? Math.max(Math.min(pos, bodyLast + 1) - page, bodyFirst) : pos;
+			case "ArrowDown": return Math.min(pos + 1, layout.total - 1);
+			case "ArrowUp": return Math.max(pos - 1, 0);
+		}
+	}
+	/** How many rows PageUp/PageDown move from grid position `pos`. */
+	#pageRows(key, pos, layout, scroller) {
+		if (this.rowHeight !== "auto") {
+			const fit = Math.floor(scroller.clientHeight / this.#rowPx + .01);
+			return Math.max(1, fit - layout.header - layout.top - layout.bottom);
+		}
+		const view = scroller.clientHeight - this.#headerAndPinnedPx(layout);
+		const bodyFirst = layout.position({
+			section: "body",
+			index: 0
+		});
+		const from = Math.min(Math.max(pos - bodyFirst, 0), Math.max(layout.body - 1, 0));
+		return this.#virtual.pageRows(from, key === "PageDown", view);
+	}
+	/**
+	* Selection keys, with a `selectionMode`: Space (or Shift+Space) toggles the
+	* focused body row; in `multi` mode, Shift+ArrowUp/ArrowDown and
+	* Shift+PageUp/PageDown move focus through the body and select from the
+	* anchor to it, and Ctrl/Cmd+A selects every row. `true` if it took the key.
+	*/
+	#selectionKey(event, cell, col, inHeader, scroller) {
+		const mode = this.#mode();
+		if (mode === "none" || event.altKey) return false;
+		const { key } = event;
+		const command = event.ctrlKey || event.metaKey;
+		const model = this.#table.model;
+		if (command && !event.shiftKey && key.toLowerCase() === "a") {
+			if (mode !== "multi") return false;
+			event.preventDefault();
+			this.#selectAll();
+			return true;
+		}
+		if (command) return false;
+		if (inHeader) {
+			if (key !== " " || col !== "--argus-selection" || mode !== "multi") return false;
+			event.preventDefault();
+			this.#toggleAll();
+			return true;
+		}
+		const layout = layoutOf(model);
+		const from = gridRowOf(cell.parentElement, layout);
+		if (from?.section !== "body") return false;
+		if (key === " ") {
+			event.preventDefault();
+			const id = model.rowAt(from.index)?.id;
+			if (id !== void 0) this.#requestSelection(toggleRow(this.#selection.value, mode, id));
+			return true;
+		}
+		if (!event.shiftKey || mode !== "multi" || key !== "ArrowDown" && key !== "ArrowUp" && key !== "PageDown" && key !== "PageUp") return false;
+		event.preventDefault();
+		const bodyFirst = layout.position({
+			section: "body",
+			index: 0
+		});
+		const pos = this.#verticalStep(key, layout.position(from), layout, scroller);
+		const to = layout.at(Math.min(Math.max(pos, bodyFirst), bodyFirst + layout.body - 1));
+		if (to?.section !== "body" || to.index === from.index) return true;
+		if (key.startsWith("Page")) this.#virtual.scrollBy(this.#virtual.startOf(to.index) - this.#virtual.startOf(from.index));
+		const fromId = model.rowAt(from.index)?.id;
+		const anchor = this.#anchorAt(model) ?? (fromId === void 0 ? void 0 : {
+			id: fromId,
+			index: from.index
+		});
+		if (anchor) {
+			const idAt = (index) => model.rowAt(index)?.id;
+			const selection = selectRange([], anchor.index, to.index, idAt, false);
+			this.#requestSelection({
+				selection,
+				anchor: anchor.id
+			});
+		}
+		this.#moveTo(to, col, model);
+		return true;
+	}
 	/** Focus that lands in a cell (a click, or content inside it) makes that cell active. */
 	#onFocusin;
-	/** `argus-cell-click`, then `argus-row-click`, for clicks in the body. */
+	/** 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.
+	*/
 	#onClick;
+	/** Selects for a click on a row, through `clickSelection`. */
+	#clickRow(target, event, toggle) {
+		const model = this.#table.model;
+		this.#requestSelection(clickSelection(this.#selection.value, this.#mode(), target, this.#anchorAt(model), {
+			toggle,
+			range: event.shiftKey
+		}, (index) => model.rowAt(index)?.id));
+	}
+	/**
+	* The checkboxes' handlers. The table owns their state: a click asks for a new
+	* selection, and the render that always follows sets every box back to the
+	* selection (`live()`), so a change a controlled host turns down unticks it
+	* again. Not `preventDefault()`: for a real click the browser runs that render
+	* inside the dispatch, then undoes the toggle after it, over the render. A
+	* press leaves focus on the cell, so the grid's keys keep working.
+	*/
+	#checkboxHandlers;
+	/** Selects every selectable row, keeping the others (with a `dataSource`: the loaded ones). */
+	#selectAll() {
+		const ids = this.#table.model.selectableIds();
+		this.#requestSelection({
+			selection: selectAll(this.#selection.value, ids),
+			anchor: this.#anchor
+		});
+	}
+	/** The select-all checkbox: clears the selection when every row is selected, else selects all. */
+	#toggleAll() {
+		if (this.#checkAllState(this.#table.model) === "all") this.#requestSelection({
+			selection: [],
+			anchor: this.#anchor
+		});
+		else this.#selectAll();
+	}
+	/** The select-all checkbox, in the checkbox column of a `multi` table. */
+	#checkAllOf(model) {
+		if (!this.#selectionColumn || this.#mode() !== "multi") return void 0;
+		return {
+			state: this.#checkAllState(model),
+			handlers: this.#checkboxHandlers
+		};
+	}
+	/**
+	* Whether all, some or none of the selectable rows are selected. With `data`
+	* 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) {
+		const count = () => {
+			const ids = model.selectableIds();
+			const selected = this.#selectedSet();
+			const n = ids.reduce((sum, id) => selected.has(id) ? sum + 1 : sum, 0);
+			if (n === 0) return "none";
+			return n === ids.length ? "all" : "some";
+		};
+		if (this.#data.rows) return count();
+		const key = [
+			this.#selection.value,
+			this.data,
+			this.getRowId,
+			this.#columns,
+			this.#filters.value,
+			this.#quickFilter,
+			this.#visibility.value
+		];
+		const cached = 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
+		};
+		return state;
+	}
+	/**
+	* A Shift+press on a row in `multi` mode selects a range of rows, not the
+	* page's text from the last click: no text selection, and the cell still
+	* takes focus.
+	*/
+	#onMousedown;
+	/** `selectionMode`, with anything unknown read as `none`. */
+	#mode() {
+		const mode = this.selectionMode;
+		return mode === "single" || mode === "multi" ? mode : "none";
+	}
+	/** Whether each rendered body row is selected; `undefined` without a `selectionMode`. */
+	#selectedAt(model) {
+		if (this.#mode() === "none") return void 0;
+		const ids = this.#selectedSet();
+		return (index) => {
+			const id = model.rowAt(index)?.id;
+			return id === void 0 ? void 0 : ids.has(id);
+		};
+	}
+	/** `selection` as a set, rebuilt only when `selection` changes. */
+	#selectedSet() {
+		const selection = this.#selection.value;
+		if (this.#selectedIds?.of !== selection) this.#selectedIds = {
+			of: selection,
+			ids: new Set(selection)
+		};
+		return this.#selectedIds.ids;
+	}
+	/**
+	* The loaded body row a pointer event is on, as a selection target. None for
+	* the header, pinned rows, rows still loading, and presses on interactive
+	* content in a cell (a button, a link, an input).
+	*/
+	#selectableRowOf(path) {
+		const row = path.find((t) => t instanceof HTMLElement && t.getAttribute("role") === "row");
+		if (!row || fromInteractive(path, row)) return void 0;
+		const model = this.#table.model;
+		const at = gridRowOf(row, layoutOf(model));
+		if (at?.section !== "body") return void 0;
+		const id = model.rowAt(at.index)?.id;
+		return id === void 0 ? void 0 : {
+			id,
+			index: at.index
+		};
+	}
+	/** 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;
+		if (id === void 0) return void 0;
+		const index = model.indexOf(id);
+		return index === void 0 ? void 0 : {
+			id,
+			index
+		};
+	}
+	/**
+	* Changes the selection through the controlled/uncontrolled rules, and moves
+	* the anchor. A step that leaves the same rows selected fires nothing.
+	*/
+	#requestSelection(step) {
+		if (!step) return;
+		this.#anchor = step.anchor;
+		const old = this.#selection.value;
+		if (sameSelection(step.selection, old)) return;
+		const { value, applied } = this.#selection.request(step.selection);
+		if (applied) {
+			this.#appliedSelection = value;
+			this.requestUpdate("selection", old);
+		} else fire(this, SELECTION_CHANGE, { selection: value });
+	}
 	/**
 	* Fires `argus-cell-click` (when a cell is on the path), then `argus-row-click`,
 	* for the body or pinned row on an event path. Clicks and Enter on a cell use
-	* it. Rows that haven't loaded and the header fire nothing.
+	* it. Rows that haven't loaded, the header and the checkbox column fire nothing.
 	*/
 	#activate(path) {
 		let columnId;
@@ -686,6 +1594,7 @@ var ArgusTable = class ArgusTable extends LitElement {
 			if (!(target instanceof HTMLElement)) continue;
 			const role = target.getAttribute("role");
 			if (role === "gridcell") columnId = target.dataset.col;
+			if (columnId === "--argus-selection") return;
 			if (role !== "row") continue;
 			const model = this.#table.model;
 			const at = gridRowOf(target, layoutOf(model));
@@ -696,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)
 				});
@@ -711,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
@@ -746,14 +1659,28 @@ 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) {
-			const layout = layoutOf(this.#table.model);
-			const before = (1 + layout.top) * this.#rowPx;
-			if (this.#virtual.reveal(active.index, before, layout.bottom * this.#rowPx)) {
+		if (active.section === "body" && (this.#virtual.scaled || this.rowHeight === "auto")) {
+			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;
 			}
@@ -778,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 : 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 = false;
+		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;
@@ -804,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;
@@ -816,6 +1753,18 @@ var ArgusTable = class ArgusTable extends LitElement {
 		};
 	}
 	/**
+	* The shown column that takes a hidden column's place: the next one in the
+	* column order, else the one before it. `fallback` for a column that is gone
+	* altogether.
+	*/
+	#columnInPlaceOf(model, id, fallback) {
+		const all = model.allColumns;
+		const at = all.findIndex((c) => c.id === id);
+		if (at < 0) return fallback;
+		const shown = (c) => !c.hidden;
+		return (all.slice(at + 1).find(shown) ?? all.slice(0, at).findLast(shown))?.id ?? fallback;
+	}
+	/**
 	* The width a resize starts from: the latest requested width (key presses can
 	* come faster than renders), else the model's fixed width, else the rendered
 	* width of a flex column.
@@ -826,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;
 	}
@@ -835,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;
@@ -852,90 +1844,210 @@ 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);
 	}
 	/**
-	* Moves a column to position `to` in the whole order (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.
+	* Pins or unpins a column through the controlled/uncontrolled rules. Starts
+	* from the latest requested pins, so requests can come faster than renders.
 	*/
-	#requestReorder(columnId, to) {
-		const old = this.#order.value;
-		const next = this.#table.model.nextOrder(columnId, to, old);
-		if (!next) return false;
-		const { value, applied } = this.#order.request(next);
+	#requestPin(columnId, pin) {
+		const old = this.#pinning.value;
+		const next = this.#table.model.nextPinning(columnId, pin, old);
+		if (!next) return;
+		const { value, applied } = this.#pinning.request(next);
 		if (applied) {
-			for (const detail of this.#appliedReorders.values()) detail.order = value;
-			this.#appliedReorders.set(columnId, {
+			for (const detail of this.#appliedPins.values()) detail.columnPinning = value;
+			this.#appliedPins.set(columnId, {
+				columnPinning: value,
 				columnId,
-				order: value
+				pin
 			});
-			this.requestUpdate("columnOrder", old);
-		} else fire(this, COLUMN_REORDER, {
+			this.requestUpdate("columnPinning", old);
+		} else fire(this, COLUMN_PINNING_CHANGE, {
+			columnPinning: value,
+			columnId,
+			pin
+		});
+	}
+	/** Hides or shows a column through the controlled/uncontrolled rules. */
+	#requestHide(columnId, hidden) {
+		const old = this.#visibility.value;
+		const next = this.#table.model.nextVisibility(columnId, hidden, old);
+		if (!next) return;
+		const { value, applied } = this.#visibility.request(next);
+		if (applied) {
+			for (const detail of this.#appliedHides.values()) detail.columnVisibility = value;
+			this.#appliedHides.set(columnId, {
+				columnVisibility: value,
+				columnId,
+				visible: !hidden
+			});
+			this.requestUpdate("columnVisibility", old);
+		} else fire(this, COLUMN_VISIBILITY_CHANGE, {
+			columnVisibility: value,
 			columnId,
-			order: value
+			visible: !hidden
 		});
+	}
+	/** Sets or clears a column's filter through the controlled/uncontrolled rules. */
+	#requestFilter(columnId, filter) {
+		const old = this.#filters.value;
+		const next = this.#table.model.nextFilters(columnId, filter, old);
+		if (!next) return;
+		const { value, applied } = this.#filters.request(next);
+		if (applied) {
+			for (const detail of this.#appliedFilters.values()) detail.columnFilters = value;
+			this.#appliedFilters.set(columnId, {
+				columnFilters: value,
+				columnId,
+				columnFilter: filter
+			});
+			this.requestUpdate("columnFilters", old);
+		} else fire(this, COLUMN_FILTERS_CHANGE, {
+			columnFilters: value,
+			columnId,
+			columnFilter: filter
+		});
+	}
+	/**
+	* Says how many rows the filters leave ("42 rows"). With a `dataSource` the count
+	* isn't known until the first page answers, so nothing is said.
+	*/
+	#announceRowCount(model) {
+		if (this.#data.rows) return;
+		const n = model.rowCount;
+		announce(this.ownerDocument, n === 1 ? "1 row" : `${String(n)} rows`);
+	}
+	/**
+	* 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(unit, to) {
+		const old = this.#order.value;
+		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 pending of this.#appliedReorders.values()) pending.columnOrder = value;
+			this.#appliedReorders.set(unitKey(unit), detail(value));
+			this.requestUpdate("columnOrder", old);
+		} 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 from = model.orderOf(this.#order.value).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. */
+	/** `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;
+	}
+	/** Tells screen readers where a column or group 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)}`);
+		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}`);
 	}
-	/** A press on a reorderable header: becomes a drag once the pointer moves. */
+	/** 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();
@@ -946,14 +2058,18 @@ var ArgusTable = class ArgusTable extends LitElement {
 			}
 		});
 	}
-	/** The rendered headers of one pin group, with their positions in the whole order. */
-	#dropSlots(pin) {
+	/**
+	* 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(unit) {
 		const slots = [];
-		this.#table.model.columns.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()
 			});
@@ -962,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 {
@@ -974,13 +2089,73 @@ var ArgusTable = class ArgusTable extends LitElement {
 	/** asc → desc → unsorted, through the controlled/uncontrolled rules. */
 	#requestSort(columnId) {
 		const next = this.#table.model.nextSorting(columnId);
-		if (!next) return;
+		if (next) this.#applySorting(next);
+	}
+	/**
+	* A plugin's sort: by a column in a direction, or (`null`) cleared if it is by
+	* that column. Only sortable columns, and only a change.
+	*/
+	#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 ? void 0 : view.sorted)) return;
+		if (direction === void 0) this.#applySorting([]);
+		else this.#applySorting([{
+			id: columnId,
+			desc: direction === "desc"
+		}]);
+	}
+	/** A new sort order, through the controlled/uncontrolled rules. */
+	#applySorting(next) {
 		const old = this.#sorting.value;
 		const { value, applied } = this.#sorting.request(next);
 		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
+	* render, so the views are indexed by id once per new column list.
+	*/
+	#columnInfo(id) {
+		const columns = this.#table.model.allColumns;
+		if (this.#columnsById?.of !== columns) this.#columnsById = {
+			of: columns,
+			byId: new Map(columns.map((c) => [c.id, c]))
+		};
+		const view = this.#columnsById.byId.get(id);
+		if (view?.kind !== "data") return void 0;
+		return {
+			id,
+			sortable: view.sortable,
+			resizable: view.resizable,
+			pinnable: view.pinnable,
+			hideable: view.hideable,
+			pin: view.pin,
+			hidden: view.hidden,
+			width: view.width,
+			sorted: view.sorted === false ? void 0 : view.sorted,
+			filter: view.filter,
+			columnFilter: this.#filters.value[id]
+		};
+	}
+	/** The header or cell an event happened in, for plugins. */
+	#cellTarget(event) {
+		for (const target of event.composedPath()) {
+			const cell = gridCell(target);
+			const columnId = cell?.dataset.col;
+			if (!cell || columnId === void 0) continue;
+			const model = this.#table.model;
+			const row = gridRowOfCell(cell, layoutOf(model));
+			if (!row) return void 0;
+			return {
+				section: row.section,
+				columnId,
+				rowIndex: row.section === "header" ? 0 : row.index,
+				rowId: this.#gridRowId(model, row)
+			};
+		}
 	}
 	#observeProbe() {
 		const probe = this.renderRoot.querySelector(".probe");
@@ -990,6 +2165,26 @@ var ArgusTable = class ArgusTable extends LitElement {
 		});
 		this.#probeObserver.observe(probe);
 	}
+	/** The height of the rows pinned to one side: one row each, or measured with `rowHeight: 'auto'`. */
+	#pinnedPx(side, layout) {
+		const count = side === "top" ? layout.top : layout.bottom;
+		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).
+	*/
+	#measureRows() {
+		const { rows, pinnedChanged } = this.#rowMeasure.read(this.renderRoot);
+		const resized = this.#virtual.measureRows(rows);
+		if (pinnedChanged) this.requestUpdate();
+		return resized || pinnedChanged;
+	}
 	/** Reads the resolved row height, so themes and density change the virtualizer too. */
 	#measureRowHeight() {
 		const px = this.renderRoot.querySelector(".probe")?.getBoundingClientRect().height ?? 0;
@@ -1000,19 +2195,36 @@ 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);
 __decorate([property({ attribute: false })], ArgusTable.prototype, "getRowId", void 0);
 __decorate([property({
 	attribute: "row-height",
-	type: Number
+	converter: rowHeightConverter
 })], ArgusTable.prototype, "rowHeight", void 0);
 __decorate([property({ reflect: true })], ArgusTable.prototype, "density", void 0);
 __decorate([property({ type: Number })], ArgusTable.prototype, "overscan", null);
+__decorate([property({
+	attribute: "virtualize-columns",
+	converter: switchConverter
+})], ArgusTable.prototype, "virtualizeColumns", void 0);
 __decorate([property({ attribute: false })], ArgusTable.prototype, "sorting", null);
 __decorate([property({ attribute: false })], ArgusTable.prototype, "columnSizing", null);
 __decorate([property({ attribute: false })], ArgusTable.prototype, "columnOrder", null);
+__decorate([property({ attribute: false })], ArgusTable.prototype, "columnPinning", null);
+__decorate([property({ attribute: false })], ArgusTable.prototype, "columnVisibility", null);
+__decorate([property({ attribute: false })], ArgusTable.prototype, "columnFilters", null);
+__decorate([property({ attribute: "quick-filter" })], ArgusTable.prototype, "quickFilter", null);
+__decorate([property({ attribute: "selection-mode" })], ArgusTable.prototype, "selectionMode", void 0);
+__decorate([property({
+	attribute: "selection-checkboxes",
+	converter: switchConverter
+})], ArgusTable.prototype, "selectionCheckboxes", void 0);
+__decorate([property({ attribute: false })], ArgusTable.prototype, "selection", null);
+__decorate([property({ attribute: false })], ArgusTable.prototype, "contentRenderer", void 0);
+__decorate([property({ attribute: false })], ArgusTable.prototype, "plugins", null);
 ArgusTable = __decorate([customElement("argus-table")], ArgusTable);
 export { ArgusTable };