argus-table 0.2.1 → 0.3.0

package/dist/argus-table.js

@@ -1,18 +1,25 @@
+import { clickSelection, sameSelection, selectAll, selectRange, toggleRow } from "./core/src/state/selection.js";
 import { controllable } from "./core/src/state/controllable.js";
 import { RowLayout } from "./core/src/grid/row-layout.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_FILTER, COLUMN_HIDE, COLUMN_PIN, COLUMN_REORDER, COLUMN_RESIZE, LOAD_ERROR, RANGE_CHANGE, ROW_CLICK, ROW_SELECT, SORT_CHANGE, fire } from "./events.js";
+import { fromInteractive } from "./interactive.js";
 import { bodyCap, watchMaxElementHeight } from "./max-height.js";
 import { renderBody } from "./render/body.js";
 import { renderLightDom } from "./render/cells.js";
+import { content, flushContent } from "./render/content-directive.js";
 import { renderHeader } from "./render/header.js";
 import { renderPinnedRows } from "./render/pinned-rows.js";
 import { baseStyles } from "./styles/base.js";
@@ -34,17 +41,27 @@ 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;
 	}
 }
 var RESIZE_STEP = 10;
+/** `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;
+} };
 var HEADER = {
 	section: "header",
 	index: 0
@@ -70,7 +87,7 @@ function gridRowOf(row, layout) {
 * 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 +95,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>`;
 }
@@ -87,17 +104,275 @@ function track(column) {
 	return column.flex === void 0 ? `${String(column.width)}px` : `minmax(${String(column.minWidth)}px, ${String(column.flex)}fr)`;
 }
 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 ?? [];
+	}
+	/**
+	* 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);
+	}
+	/**
+	* 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-pin` 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-hide` 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-filter` 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-row-select` 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;
+	#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 `selection`, `data` or `getRowId` change. */
+	#checkAll;
+	/** 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;
+	/** 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;
+	/** 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;
+	constructor() {
+		super();
 		this.density = "comfortable";
+		this.virtualizeColumns = false;
+		this.selectionMode = "none";
+		this.selectionCheckboxes = false;
 		this.#columnsProp = [];
+		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 +380,64 @@ 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),
+			cellOf: (event) => this.#cellTarget(event),
+			setSort: (columnId, direction) => {
+				this.#setSort(columnId, direction);
+			},
+			focusHeader: (columnId) => {
+				this.#moveTo(HEADER, columnId, this.#table.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.#lightConnected = true;
 		this.#data = new DataController(this);
 		this.#scrollToTop = false;
 		this.#virtual = new VirtualController(this, () => this.renderRoot.querySelector("[part~=\"table\"]"));
 		this.#pinScroll = new PinScrollController(this, () => this.renderRoot.querySelector("[part~=\"table\"]"));
+		this.#columnWindow = new ColumnWindowController(this, () => this.renderRoot.querySelector("[part~=\"table\"]"));
+		this.#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 +445,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 });
@@ -164,6 +492,8 @@ var ArgusTable = class ArgusTable extends LitElement {
 				}, { once: true });
 				return;
 			}
+			const pluginTarget = id === "--argus-selection" ? void 0 : this.#cellTarget(event);
+			if (pluginTarget && this.#plugins.keydown(event, pluginTarget)) return;
 			const inHeader = cell.getAttribute("role") === "columnheader";
 			const { key } = event;
 			const arrow = key === "ArrowLeft" || key === "ArrowRight";
@@ -184,6 +514,7 @@ 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;
@@ -199,26 +530,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();
@@ -230,7 +548,7 @@ var ArgusTable = class ArgusTable extends LitElement {
 					col = 0;
 					if (corner) {
 						pos = 0;
-						scroller.scrollTop = 0;
+						this.#virtual.scrollToEdge("start");
 					}
 					break;
 				case "End":
@@ -241,8 +559,8 @@ var ArgusTable = class ArgusTable extends LitElement {
 			}
 			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") scroller.scrollTop = scroller.scrollHeight;
+			if (key.startsWith("Page") && from.section === "body" && row.section === "body") this.#virtual.scrollBy(this.#virtual.startOf(row.index) - this.#virtual.startOf(from.index));
+			if (corner && key === "End" && row.section === "bottom") this.#virtual.scrollToEdge("end");
 			const target = columns[Math.min(Math.max(col, 0), columns.length - 1)];
 			if (target) this.#moveTo(row, target.id, model);
 		};
@@ -277,125 +595,62 @@ var ArgusTable = class ArgusTable extends LitElement {
 			}
 		};
 		this.#onClick = (event) => {
-			this.#activate(event.composedPath());
+			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 });
 	}
-	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;
+	#dropScrollTarget;
 	connectedCallback() {
 		super.connectedCallback();
 		if (!this.hasAttribute("role")) this.setAttribute("role", "grid");
 		if (this.hasUpdated) this.#observeProbe();
+		if (this.#lightPart && !this.#lightConnected) {
+			this.#lightConnected = true;
+			this.#lightPart.setConnected(true);
+			flushContent(this);
+		}
 		this.#unwatchMaxHeight = watchMaxElementHeight(() => {
 			this.requestUpdate();
 		});
@@ -403,6 +658,12 @@ var ArgusTable = class ArgusTable extends LitElement {
 	disconnectedCallback() {
 		super.disconnectedCallback();
 		this.#probeObserver?.disconnect();
+		this.#rowMeasure.stop();
+		if (this.#lightPart && this.#lightConnected) {
+			this.#lightConnected = false;
+			this.#lightPart.setConnected(false);
+			flushContent(this);
+		}
 		this.#unwatchMaxHeight?.();
 		this.#unwatchMaxHeight = void 0;
 	}
@@ -447,33 +708,137 @@ var ArgusTable = class ArgusTable extends LitElement {
 	* would, so `argus-column-resize` 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 horizontal offset). Controlled properties are
+	* included with the values you set. The object is a copy: changing it changes
+	* nothing in the table.
+	*/
+	getState() {
+		const scroller = this.renderRoot.querySelector("[part~=\"table\"]");
+		return structuredClone({
+			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,
+				left: Math.abs(scroller?.scrollLeft ?? 0)
+			}
+		});
+	}
+	/**
+	* Restores state from `getState()`, for example a layout saved in
+	* `localStorage`. Only the keys given change; ids of columns that no longer
+	* exist are ignored. Properties you control are left alone (set them
+	* 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) {
+		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.renderRoot.querySelector("[part~=\"table\"]");
+		if (scroller) scroller.scrollLeft = scroll.left * 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);
+		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 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 || 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,
@@ -482,15 +847,23 @@ var ArgusTable = class ArgusTable extends LitElement {
 				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 +872,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.#rowPx + this.#pinnedPx("top", layout) + this.#pinnedPx("bottom", 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,6 +897,8 @@ var ArgusTable = class ArgusTable extends LitElement {
 		const model = this.#table.model;
 		const columns = model.columns;
 		this.#window = this.#virtual.computeWindow();
+		const rendered = this.#columnWindow.compute(columns, this.virtualizeColumns, this.virtualizeColumns ? this.#keptColumns(model) : []);
+		this.#rendered = rendered;
 		const pinnedWidth = (side) => columns.reduce((sum, c) => c.pin === side ? sum + c.width : sum, 0);
 		const pinned = (side) => `${String(pinnedWidth(side))}px`;
 		const layout = layoutOf(model);
@@ -527,6 +910,16 @@ var ArgusTable = class ArgusTable extends LitElement {
 			"--_pin-top-rows": String(layout.top),
 			"--_pin-bottom-rows": String(layout.bottom)
 		};
+		const auto = this.rowHeight === "auto";
+		if (auto) {
+			const key = `${style["--_cols"] ?? ""}|${String(this.#rowPx)}`;
+			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 +929,27 @@ 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.#rowPx + this.#pinnedPx("top", layout) + this.#pinnedPx("bottom", 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(rendered, this.#headerHandlers, activeIn("header")?.col, this.#drag, 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", pinnedWidth("start"), contentPx)}
+      ${pinShadow("end", pinnedWidth("end"), contentPx)}`;
 	}
 	firstUpdated() {
 		this.#observeProbe();
@@ -561,15 +957,20 @@ 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, 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\"]");
 			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 || 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();
 		}
@@ -588,11 +989,35 @@ var ArgusTable = class ArgusTable extends LitElement {
 			this.#appliedReorders.clear();
 			for (const detail of details) fire(this, COLUMN_REORDER, detail);
 		}
+		if (this.#appliedPins.size > 0) {
+			const details = [...this.#appliedPins.values()];
+			this.#appliedPins.clear();
+			for (const detail of details) fire(this, COLUMN_PIN, detail);
+		}
+		if (this.#appliedHides.size > 0) {
+			const details = [...this.#appliedHides.values()];
+			this.#appliedHides.clear();
+			for (const detail of details) fire(this, COLUMN_HIDE, detail);
+		}
+		if (this.#appliedFilters.size > 0) {
+			const details = [...this.#appliedFilters.values()];
+			this.#appliedFilters.clear();
+			for (const detail of details) fire(this, COLUMN_FILTER, detail);
+		}
+		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 });
 		}
+		if (this.#appliedSelection) {
+			const selection = this.#appliedSelection;
+			this.#appliedSelection = void 0;
+			fire(this, ROW_SELECT, { selection });
+		}
 		const { range } = this.#window;
 		const key = range ? `${String(range.start)}:${String(range.end)}` : "";
 		if (range && key !== this.#lastRange) {
@@ -609,6 +1034,22 @@ 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?.columnId,
+			this.dataSource ? model.columns.find((c) => c.kind === "data")?.id : void 0,
+			...this.#autoWidths.pending(model.columns),
+			...this.#measureKeep
+		];
+	}
+	/**
 	* 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 +1112,251 @@ var ArgusTable = class ArgusTable extends LitElement {
 	* cell (an input, a button) are left to that content.
 	*/
 	#onKeydown;
+	/**
+	* 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 - 1 - layout.top - layout.bottom);
+		}
+		const view = scroller.clientHeight - this.#rowPx - this.#pinnedPx("top", layout) - this.#pinnedPx("bottom", 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. */
+	/**
+	* `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`, `data` and `getRowId`, 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.some((k, i) => k !== cached.key[i])) this.#checkAll = {
+			key,
+			state: count()
+		};
+		return this.#checkAll?.state ?? "none";
+	}
+	/**
+	* 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;
+		const index = id === void 0 ? void 0 : model.indexOf(id);
+		return id === void 0 || 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, ROW_SELECT, { 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 +1364,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));
@@ -750,10 +1429,10 @@ var ArgusTable = class ArgusTable extends LitElement {
 		const cell = this.renderRoot.querySelector(`[role='row'][aria-rowindex="${String(index)}"] > [data-col="${col}"]`);
 		if (!cell) return;
 		cell.focus({ preventScroll: true });
-		if (active.section === "body" && this.#virtual.scaled) {
+		if (active.section === "body" && (this.#virtual.scaled || this.rowHeight === "auto")) {
 			const layout = layoutOf(this.#table.model);
-			const before = (1 + layout.top) * this.#rowPx;
-			if (this.#virtual.reveal(active.index, before, layout.bottom * this.#rowPx)) {
+			const before = this.#rowPx + this.#pinnedPx("top", layout);
+			if (this.#virtual.reveal(active.index, before, this.#pinnedPx("bottom", layout))) {
 				this.#focusPending = true;
 				return;
 			}
@@ -783,9 +1462,9 @@ var ArgusTable = class ArgusTable extends LitElement {
 			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 === "body" && rowId !== void 0) {
 			const found = model.indexOf(rowId);
 			const unloaded = index < model.rowCount && model.rowAt(index) === void 0;
@@ -816,6 +1495,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.
@@ -863,7 +1554,79 @@ var ArgusTable = class ArgusTable extends LitElement {
 		} else for (const detail of details) fire(this, COLUMN_RESIZE, detail);
 	}
 	/**
-	* Moves a column to position `to` in the whole order (within its pin group),
+	* Pins or unpins a column through the controlled/uncontrolled rules. Starts
+	* from the latest requested pins, so requests can come faster than renders.
+	*/
+	#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.#appliedPins.values()) detail.pinning = value;
+			this.#appliedPins.set(columnId, {
+				columnId,
+				pin,
+				pinning: value
+			});
+			this.requestUpdate("columnPinning", old);
+		} else fire(this, COLUMN_PIN, {
+			columnId,
+			pin,
+			pinning: value
+		});
+	}
+	/** 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.visibility = value;
+			this.#appliedHides.set(columnId, {
+				columnId,
+				hidden,
+				visibility: value
+			});
+			this.requestUpdate("columnVisibility", old);
+		} else fire(this, COLUMN_HIDE, {
+			columnId,
+			hidden,
+			visibility: value
+		});
+	}
+	/** 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.filters = value;
+			this.#appliedFilters.set(columnId, {
+				columnId,
+				filter,
+				filters: value
+			});
+			this.requestUpdate("columnFilters", old);
+		} else fire(this, COLUMN_FILTER, {
+			columnId,
+			filter,
+			filters: value
+		});
+	}
+	/**
+	* 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 to position `to` among the shown data columns (within its pin group),
 	* through the controlled/uncontrolled rules. Starts from the latest requested
 	* order, so moves can come faster than renders. `false` if it can't move there.
 	*/
@@ -888,7 +1651,8 @@ var ArgusTable = class ArgusTable extends LitElement {
 	/** Alt+Shift+Arrow on a header: one step toward the start (-1) or the end (1). */
 	#moveByKey(columnId, step) {
 		const model = this.#table.model;
-		const from = model.orderOf(this.#order.value).indexOf(columnId);
+		const shown = new Set(model.columns.map((c) => c.id));
+		const from = model.orderOf(this.#order.value).filter((id) => shown.has(id)).indexOf(columnId);
 		const view = model.columns.find((c) => c.id === columnId);
 		if (from < 0 || !view) return;
 		if (!this.#requestReorder(columnId, from + step)) return;
@@ -946,10 +1710,13 @@ var ArgusTable = class ArgusTable extends LitElement {
 			}
 		});
 	}
-	/** The rendered headers of one pin group, with their positions in the whole order. */
+	/**
+	* The rendered headers of one pin group, with their positions in the whole
+	* order (which leaves out the checkbox column).
+	*/
 	#dropSlots(pin) {
 		const slots = [];
-		this.#table.model.columns.forEach((c, index) => {
+		this.#table.model.columns.filter((c) => c.kind === "data").forEach((c, index) => {
 			if (c.pin !== pin) return;
 			const cell = this.renderRoot.querySelector(`[role='columnheader'][data-col="${CSS.escape(c.id)}"]`);
 			if (cell) slots.push({
@@ -974,7 +1741,24 @@ 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 ? null : view.sorted)) return;
+		if (direction === null) 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) {
@@ -982,6 +1766,49 @@ var ArgusTable = class ArgusTable extends LitElement {
 			this.requestUpdate("sorting", old);
 		} else fire(this, SORT_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,
+			filterValue: 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 = cell.getAttribute("role") === "columnheader" ? HEADER : gridRowOf(cell.parentElement, layoutOf(model));
+			if (!row) return void 0;
+			return {
+				section: row.section,
+				columnId,
+				rowIndex: row.index,
+				rowId: this.#gridRowId(model, row)
+			};
+		}
+	}
 	#observeProbe() {
 		const probe = this.renderRoot.querySelector(".probe");
 		if (!probe) return;
@@ -990,6 +1817,22 @@ 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);
+	}
+	/**
+	* `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;
@@ -1006,13 +1849,29 @@ __decorate([property({ attribute: false })], ArgusTable.prototype, "pinnedRows",
 __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",
+	type: Boolean
+})], 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",
+	type: Boolean
+})], 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 };