argus-table 0.0.1 → 0.2.0

package/dist/argus-table.js

@@ -1,14 +1,23 @@
 import { controllable } from "./core/src/state/controllable.js";
+import { RowLayout } from "./core/src/grid/row-layout.js";
+import { announce } from "./announce.js";
+import { AutoWidths, measureColumns } from "./controllers/auto-width.js";
+import { ColumnChildrenController } from "./controllers/column-children.js";
+import { DataController } from "./controllers/data-controller.js";
+import { PinScrollController } from "./controllers/pin-scroll-controller.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_RESIZE, RANGE_CHANGE, ROW_CLICK, SORT_CHANGE, fire } from "./events.js";
+import { CELL_CLICK, COLUMN_REORDER, COLUMN_RESIZE, LOAD_ERROR, RANGE_CHANGE, ROW_CLICK, SORT_CHANGE, fire } from "./events.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 { renderPinnedRows } from "./render/pinned-rows.js";
 import { baseStyles } from "./styles/base.js";
 import __decorate from "./_virtual/_@oxc-project_runtime@0.156.0/helpers/esm/decorate.js";
-import { LitElement, html } from "lit";
+import { LitElement, html, nothing } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import { styleMap } from "lit/directives/style-map.js";
 // src/argus-table.ts
@@ -36,15 +45,42 @@ function sortColumnOf(event) {
 	}
 }
 var RESIZE_STEP = 10;
+var HEADER = {
+	section: "header",
+	index: 0
+};
+/** Where the rows sit in the grid: header, pinned top, body, pinned bottom. */
+function layoutOf(model) {
+	return new RowLayout(model.pinnedCount("top"), model.rowCount, model.pinnedCount("bottom"));
+}
 /** The grid cell or column header an element is, if any. */
 function gridCell(target) {
 	if (!(target instanceof HTMLElement) || target.dataset.col === void 0) return void 0;
 	const role = target.getAttribute("role");
 	return role === "gridcell" || role === "columnheader" ? target : void 0;
 }
-/** Row index of a rendered row element (`aria-rowindex` minus the header); `-1` for the header. */
-function rowIndexOf(row) {
-	return Number(row?.getAttribute("aria-rowindex") ?? 1) - 2;
+/** 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 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) {
+	if (width === 0) return nothing;
+	return html`<div
+    class="pin-shadow"
+    data-side=${side}
+    aria-hidden="true"
+    style=${styleMap({
+		inlineSize: `${String(width)}px`,
+		"--_content-h": `${String((rows + 1) * rowPx)}px`
+	})}
+  ></div>`;
 }
 /** CSS grid track for a column: fixed px, or a flex share with the min width as floor. */
 function track(column) {
@@ -53,15 +89,29 @@ function track(column) {
 var ArgusTable = class ArgusTable extends LitElement {
 	constructor(..._args) {
 		super(..._args);
-		this.columns = [];
-		this.data = [];
 		this.density = "comfortable";
-		this.overscan = 6;
+		this.#columnsProp = [];
+		this.#dataProp = [];
+		this.#overscan = 6;
 		this.#sorting = controllable([]);
 		this.#sizing = controllable({});
+		this.#order = controllable([]);
+		this.#appliedReorders = /* @__PURE__ */ new Map();
+		this.#appliedResizes = /* @__PURE__ */ new Map();
+		this.#autoWidths = new AutoWidths(() => {
+			this.requestUpdate();
+		});
+		this.#autoWidthsChanged = false;
 		this.#internals = attachGridInternals(this);
 		this.#table = new TableController();
+		this.#children = new ColumnChildrenController(this);
+		this.#columns = [];
+		this.#columnsChanged = false;
+		this.#warnedColumns = false;
+		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.#rowPx = 40;
 		this.#window = {
 			rows: [],
@@ -70,6 +120,11 @@ var ArgusTable = class ArgusTable extends LitElement {
 		};
 		this.#focusPending = false;
 		this.#lastRange = "";
+		this.#onRetry = (event) => {
+			const button = event.currentTarget;
+			if (button.matches(":focus")) button.parentElement?.focus({ preventScroll: true });
+			this.#data.retry(Number(button.dataset.row));
+		};
 		this.#headerHandlers = {
 			click: (event) => {
 				const id = sortColumnOf(event);
@@ -81,18 +136,28 @@ var ArgusTable = class ArgusTable extends LitElement {
 				if (!(handle instanceof HTMLElement)) return;
 				const id = handle.dataset.resizeCol;
 				const cell = handle.parentElement;
-				if (id === void 0 || !cell) return;
-				startResizeDrag(handle, event, cell.getBoundingClientRect().width, this.#direction(), (w) => {
-					this.#requestResize(id, w);
-				});
+				if (id !== void 0 && cell) {
+					startResizeDrag(handle, event, cell.getBoundingClientRect().width, this.#direction(), (w) => {
+						this.#requestResize(id, w);
+					});
+					return;
+				}
+				this.#startReorder(event);
+			},
+			/** 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 (id === void 0) return;
+				this.#requestResizes(measureColumns(this.renderRoot, [id]));
 			}
 		};
 		this.#onKeydown = (event) => {
 			const cell = gridCell(event.composedPath()[0] ?? event.target ?? this);
 			const id = cell?.dataset.col;
 			if (!cell || id === void 0) return;
+			const scroller = event.currentTarget;
 			if (event.key === "Tab" && event.shiftKey) {
-				const scroller = event.currentTarget;
 				scroller.tabIndex = -1;
 				cell.addEventListener("focusout", () => {
 					scroller.removeAttribute("tabindex");
@@ -101,7 +166,14 @@ var ArgusTable = class ArgusTable extends LitElement {
 			}
 			const inHeader = cell.getAttribute("role") === "columnheader";
 			const { key } = event;
-			if (inHeader && event.altKey && (key === "ArrowLeft" || key === "ArrowRight")) {
+			const arrow = key === "ArrowLeft" || key === "ArrowRight";
+			if (inHeader && arrow && event.altKey && event.shiftKey) {
+				event.preventDefault();
+				const towardEnd = key === "ArrowRight" === (this.#direction() === 1);
+				this.#moveByKey(id, towardEnd ? 1 : -1);
+				return;
+			}
+			if (inHeader && event.altKey && arrow) {
 				event.preventDefault();
 				const towardEnd = key === "ArrowRight" === (this.#direction() === 1);
 				this.#requestResize(id, this.#currentWidth(id, cell) + (towardEnd ? RESIZE_STEP : -10));
@@ -112,22 +184,41 @@ var ArgusTable = class ArgusTable extends LitElement {
 				this.#requestSort(id);
 				return;
 			}
-			if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) 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);
+			if (!from) return;
 			if (!inHeader && key === "Enter") {
 				event.preventDefault();
-				this.#activate(event.composedPath());
+				if (from.section === "body" && this.#data.stateAt(from.index) === "error") this.#data.retry(from.index);
+				else this.#activate(event.composedPath());
 				return;
 			}
-			const model = this.#table.model;
 			const columns = model.columns;
-			let row = inHeader ? -1 : rowIndexOf(cell.parentElement);
+			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":
-					row = Math.min(row + 1, model.rowCount - 1);
+					pos = Math.min(pos + 1, last);
 					break;
 				case "ArrowUp":
-					row = Math.max(row - 1, -1);
+					pos = Math.max(pos - 1, 0);
 					break;
 				case "ArrowRight":
 					col += this.#direction();
@@ -137,13 +228,21 @@ var ArgusTable = class ArgusTable extends LitElement {
 					break;
 				case "Home":
 					col = 0;
+					if (corner) {
+						pos = 0;
+						scroller.scrollTop = 0;
+					}
 					break;
 				case "End":
 					col = columns.length - 1;
+					if (corner) pos = last;
 					break;
 				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") scroller.scrollTop = scroller.scrollHeight;
 			const target = columns[Math.min(Math.max(col, 0), columns.length - 1)];
 			if (target) this.#moveTo(row, target.id, model);
 		};
@@ -160,12 +259,14 @@ var ArgusTable = class ArgusTable extends LitElement {
 			for (const target of event.composedPath()) {
 				const cell = gridCell(target);
 				if (cell?.dataset.col !== void 0) {
-					const index = cell.getAttribute("role") === "columnheader" ? -1 : rowIndexOf(cell.parentElement);
+					const model = this.#table.model;
+					const row = cell.getAttribute("role") === "columnheader" ? HEADER : gridRowOf(cell.parentElement, layoutOf(model));
 					const { col } = cell.dataset;
-					if (index !== this.#active?.index || col !== this.#active.col) {
+					const prev = this.#active;
+					if (row && (row.section !== prev?.section || row.index !== prev.index || col !== prev.col)) {
 						this.#active = {
-							index,
-							rowId: this.#table.model.rowAt(index)?.id,
+							...row,
+							rowId: this.#gridRowId(model, row),
 							col
 						};
 						this.requestUpdate();
@@ -183,6 +284,34 @@ var ArgusTable = class ArgusTable extends LitElement {
 		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,
@@ -205,15 +334,56 @@ var ArgusTable = class ArgusTable extends LitElement {
 	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;
-	/** A resize the table applied itself; its event fires once the update is done. */
-	#appliedResize;
+	#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;
@@ -221,14 +391,69 @@ var ArgusTable = class ArgusTable extends LitElement {
 	/** Move focus to the active cell after the next update (keyboard navigation). */
 	#focusPending;
 	#lastRange;
+	#unwatchMaxHeight;
 	connectedCallback() {
 		super.connectedCallback();
 		if (!this.hasAttribute("role")) this.setAttribute("role", "grid");
 		if (this.hasUpdated) this.#observeProbe();
+		this.#unwatchMaxHeight = watchMaxElementHeight(() => {
+			this.requestUpdate();
+		});
 	}
 	disconnectedCallback() {
 		super.disconnectedCallback();
 		this.#probeObserver?.disconnect();
+		this.#unwatchMaxHeight?.();
+		this.#unwatchMaxHeight = void 0;
+	}
+	/**
+	* `columns` when it has any, otherwise the `<argus-column>` children. Keeps its
+	* identity while neither changes, so the model is only rebuilt on a change.
+	*/
+	#effectiveColumns() {
+		if (this.columns.length === 0) return this.#children.defs;
+		if (!this.#warnedColumns && this.#children.present) {
+			this.#warnedColumns = true;
+			console.warn("argus-table: the columns property is set, so <argus-column> children are ignored.");
+		}
+		return this.columns;
+	}
+	/**
+	* 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.
+	*/
+	#lightDomEnd() {
+		if (this.#contentEnd?.parentNode !== this) {
+			this.#contentEnd = document.createComment("");
+			this.append(this.#contentEnd);
+		}
+		return this.#contentEnd;
+	}
+	/**
+	* With a `dataSource`, drops every loaded page and loads the rows in view
+	* again, keeping the scroll position. With `data`, re-renders the cells (after
+	* changing row objects in place). Resolves once the table has re-rendered;
+	* reloaded rows arrive as their pages load.
+	*/
+	async refresh() {
+		this.#data.refresh();
+		this.requestUpdate();
+		await this.updateComplete;
+	}
+	/**
+	* 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
+	* controlled `columnSizing` nothing changes until you set it. Without `ids`, fits
+	* every resizable column; columns with `resizable: false` keep their width.
+	* 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));
+		await this.updateComplete;
 	}
 	/** Scrolls so that the row at `index` (in the current row order) is at the top. */
 	async scrollToRow(index) {
@@ -237,24 +462,51 @@ var ArgusTable = class ArgusTable extends LitElement {
 		await this.updateComplete;
 	}
 	willUpdate(changed) {
-		if (changed.has("columns") || changed.has("data") || changed.has("getRowId") || changed.has("sorting") || changed.has("columnSizing")) this.#table.update({
-			columns: this.columns,
-			data: this.data,
-			getRowId: this.getRowId,
-			sorting: this.#sorting.value,
-			columnSizing: this.#sizing.value
+		const columns = this.#effectiveColumns();
+		this.#columnsChanged = columns !== this.#columns;
+		this.#columns = columns;
+		if (changed.has("dataSource") || changed.has("sorting") || changed.has("getRowId")) {
+			this.#data.configure({
+				source: this.dataSource,
+				sorting: this.#sorting.value,
+				getRowId: this.getRowId
+			});
+			if (this.dataSource && this.hasUpdated && changed.has("sorting")) this.#scrollToTop = !changed.has("dataSource");
+		}
+		if (this.#columnsChanged || changed.has("data") || changed.has("getRowId") || changed.has("sorting") || changed.has("columnSizing") || changed.has("columnOrder") || changed.has("pinnedRows")) {
+			if (this.#columnsChanged) this.#autoWidths.sync(columns.filter((c) => c.width === "auto").map((c) => c.id));
+			this.#table.update({
+				columns,
+				data: this.data,
+				getRowId: this.getRowId,
+				sorting: this.#sorting.value,
+				columnSizing: this.#sizing.value,
+				columnOrder: this.#order.value,
+				pinnedRows: this.pinnedRows
+			});
+		}
+		const autoWidths = this.#autoWidths.widths;
+		this.#autoWidthsChanged = autoWidths !== this.#pushedAutoWidths;
+		this.#pushedAutoWidths = autoWidths;
+		this.#table.update({
+			remote: this.#data.rows,
+			autoWidths
 		});
 		const model = this.#table.model;
 		this.#reconcileActive(model);
 		const active = this.#active;
-		this.#internals.ariaRowCount = String(model.rowCount + 1);
+		const unknownTotal = this.#data.rows?.totalKnown === false;
+		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.#virtual.configure({
 			count: model.rowCount,
 			rowHeight: this.#rowPx,
+			cap: bodyCap(model.rowCount * this.#rowPx, extra),
 			overscan: Math.max(0, this.overscan),
-			rowIdAt: (index) => model.rowAt(index)?.id ?? String(index),
-			keep: active?.rowId === void 0 ? void 0 : {
+			rowIdAt: (index) => this.#rowId(model, index),
+			keep: active?.section !== "body" || active.rowId === void 0 ? void 0 : {
 				id: active.rowId,
 				index: active.index
 			}
@@ -264,47 +516,77 @@ var ArgusTable = class ArgusTable extends LitElement {
 		const model = this.#table.model;
 		const columns = model.columns;
 		this.#window = this.#virtual.computeWindow();
-		const pinned = (side) => `${String(columns.reduce((sum, c) => c.pin === side ? sum + c.width : sum, 0))}px`;
+		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);
 		const style = {
 			"--_cols": columns.map(track).join(" "),
 			"--_width": `${String(model.totalWidth)}px`,
 			"--_pin-start": pinned("start"),
-			"--_pin-end": pinned("end")
+			"--_pin-end": pinned("end"),
+			"--_pin-top-rows": String(layout.top),
+			"--_pin-bottom-rows": String(layout.bottom)
 		};
 		const active = this.#active;
-		const bodyActive = active && active.index >= 0 ? {
+		const activeIn = (section) => active?.section === section ? {
 			index: active.index,
 			col: active.col
 		} : void 0;
+		const firstIndex = (section) => layout.ariaRowIndex({
+			section,
+			index: 0
+		});
 		if (this.rowHeight !== void 0 && this.rowHeight > 0) style["--_row-height"] = `${String(this.rowHeight)}px`;
 		return html`<div
-      part="table"
-      role="presentation"
-      style=${styleMap(style)}
-      @keydown=${this.#onKeydown}
-      @focusin=${this.#onFocusin}
-      @click=${this.#onClick}
-    >
-      ${renderHeader(columns, this.#headerHandlers, active?.index === -1 ? active.col : void 0)}
-      ${model.rowCount === 0 ? html`<div part="empty"><slot name="empty">No rows</slot></div>` : renderBody(this.#window.rows, columns, this.#window.totalSize, bodyActive)}
-      <div class="probe" aria-hidden="true"></div>
-    </div>`;
+        part="table"
+        role="presentation"
+        style=${styleMap(style)}
+        ?data-dragging=${this.#drag !== void 0}
+        @keydown=${this.#onKeydown}
+        @focusin=${this.#onFocusin}
+        @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"))}
+        <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)}`;
 	}
 	firstUpdated() {
 		this.#observeProbe();
 		this.#measureRowHeight();
 	}
 	updated(changed) {
-		renderLightDom(this, this.#table.model, this.#window.rows);
+		const model = this.#table.model;
+		renderLightDom(this, model, this.#window.rows, this.#lightDomEnd());
+		this.#measureAutoWidths(model);
+		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.#focusPending = false;
 			this.#focusActive();
 		}
 		if (changed.has("density") || changed.has("rowHeight")) this.#measureRowHeight();
-		if (this.#appliedResize) {
-			const detail = this.#appliedResize;
-			this.#appliedResize = void 0;
-			fire(this, COLUMN_RESIZE, detail);
+		if (this.#appliedResizes.size > 0) {
+			const details = [...this.#appliedResizes.values()];
+			this.#appliedResizes.clear();
+			for (const detail of details) fire(this, COLUMN_RESIZE, detail);
+		}
+		if (this.#announceMove) {
+			this.#announceMoved(model, this.#announceMove);
+			this.#announceMove = void 0;
+		}
+		if (this.#appliedReorders.size > 0) {
+			const details = [...this.#appliedReorders.values()];
+			this.#appliedReorders.clear();
+			for (const detail of details) fire(this, COLUMN_REORDER, detail);
 		}
 		if (this.#appliedSort) {
 			const sorting = this.#appliedSort;
@@ -320,11 +602,73 @@ var ArgusTable = class ArgusTable extends LitElement {
 				end: range.end
 			});
 		}
+		if (range) {
+			const over = Math.max(0, this.overscan);
+			this.#data.request(Math.max(0, range.start - over), range.end + 1 + over);
+		}
+		for (const detail of this.#data.takeErrors()) fire(this, LOAD_ERROR, 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
+	* renders once more.
+	*/
+	#measureAutoWidths(model) {
+		const loaded = this.#window.rows.some((r) => model.rowAt(r.index) !== void 0);
+		if (!loaded && model.rowCount > 0) return;
+		if (this.#autoWidths.measure(this.renderRoot, model.columns, loaded)) this.requestUpdate();
+	}
+	/**
+	* Loading state for the body while a data source is set: the state of each
+	* row, and a Retry button on the first visible row of each failed page.
+	*/
+	#loading() {
+		const cache = this.#data.rows;
+		if (!cache) return void 0;
+		const top = this.#window.range?.start ?? 0;
+		const firstByPage = /* @__PURE__ */ new Map();
+		for (const { index } of this.#window.rows) {
+			if (index < top || cache.stateAt(index) !== "error") continue;
+			const page = cache.pageOf(index);
+			const first = firstByPage.get(page);
+			if (first === void 0 || index < first) firstByPage.set(page, index);
+		}
+		const retry = /* @__PURE__ */ new Map();
+		for (const [page, index] of firstByPage) {
+			const start = page * cache.pageSize;
+			const end = Math.min(start + cache.pageSize, cache.rowCount);
+			retry.set(index, `Retry loading rows ${String(start + 1)} to ${String(end)}`);
+		}
+		return {
+			stateAt: (index) => cache.stateAt(index),
+			retry,
+			onRetry: this.#onRetry
+		};
+	}
+	#onRetry;
+	/**
+	* A row's id. A data source row that hasn't loaded gets a stand-in: the
+	* active cell's row id if it sits there (so its DOM and focus stay put), else
+	* the index, which is also its real id when there is no `getRowId`.
+	*/
+	#rowId(model, index) {
+		const id = model.rowAt(index)?.id;
+		if (id !== void 0) return id;
+		const active = this.#active;
+		if (active?.index === index && active.rowId !== void 0) return active.rowId;
+		return this.#placeholderId(index);
+	}
+	/** The id of an unloaded row: its index, or a reserved string if `getRowId` makes the ids. */
+	#placeholderId(index) {
+		return this.getRowId ? `\u0000${String(index)}` : String(index);
 	}
 	#headerHandlers;
 	/**
-	* Keys on a focused cell or header. Keys from content inside a cell (an input,
-	* a button) are left to that content.
+	* Keys on a focused cell or header: arrows by cell, Home/End along the row,
+	* PageUp/PageDown by a page of rows (the view scrolls with it), Ctrl+Home/End
+	* (or Cmd) to the first header and the last cell. Keys from content inside a
+	* cell (an input, a button) are left to that content.
 	*/
 	#onKeydown;
 	/** Focus that lands in a cell (a click, or content inside it) makes that cell active. */
@@ -333,7 +677,8 @@ var ArgusTable = class ArgusTable extends LitElement {
 	#onClick;
 	/**
 	* Fires `argus-cell-click` (when a cell is on the path), then `argus-row-click`,
-	* for the body row on an event path. Clicks and Enter on a body cell use it.
+	* 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.
 	*/
 	#activate(path) {
 		let columnId;
@@ -343,27 +688,55 @@ var ArgusTable = class ArgusTable extends LitElement {
 			if (role === "gridcell") columnId = target.dataset.col;
 			if (role !== "row") continue;
 			const model = this.#table.model;
-			const index = rowIndexOf(target);
-			const row = index >= 0 ? model.rowAt(index) : void 0;
+			const at = gridRowOf(target, layoutOf(model));
+			if (!at || at.section === "header") return;
+			const { index } = at;
+			if (at.section === "body") {
+				const row = model.rowAt(index);
+				if (!row) return;
+				if (columnId !== void 0) fire(this, CELL_CLICK, {
+					row: row.original,
+					columnId,
+					value: model.valueAt(index, columnId)
+				});
+				fire(this, ROW_CLICK, {
+					row: row.original,
+					rowId: row.id,
+					index
+				});
+				return;
+			}
+			const pinned = at.section;
+			const row = model.pinnedRowAt(pinned, index);
 			if (!row) return;
 			if (columnId !== void 0) fire(this, CELL_CLICK, {
 				row: row.original,
 				columnId,
-				value: model.valueAt(index, columnId)
+				value: model.pinnedValueAt(pinned, index, columnId),
+				pinned
 			});
 			fire(this, ROW_CLICK, {
 				row: row.original,
 				rowId: row.id,
-				index
+				index,
+				pinned
 			});
 			return;
 		}
 	}
+	/** The id of a grid row: a body or pinned row's id; none for the header. */
+	#gridRowId(model, row) {
+		switch (row.section) {
+			case "header": return;
+			case "body": return this.#rowId(model, row.index);
+			default: return model.pinnedRowAt(row.section, row.index)?.id;
+		}
+	}
 	/** Makes a cell active and focuses it after the update. The keep-rendered rule renders its row. */
-	#moveTo(index, col, model) {
+	#moveTo(row, col, model) {
 		this.#active = {
-			index,
-			rowId: index >= 0 ? model.rowAt(index)?.id : void 0,
+			...row,
+			rowId: this.#gridRowId(model, row),
 			col
 		};
 		this.#focusPending = true;
@@ -373,20 +746,30 @@ var ArgusTable = class ArgusTable extends LitElement {
 		const active = this.#active;
 		if (!active) return;
 		const col = CSS.escape(active.col);
-		const selector = active.index === -1 ? `[part~='header-row'] > [data-col="${col}"]` : `[part~='body'] > [aria-rowindex="${String(active.index + 2)}"] > [data-col="${col}"]`;
-		const cell = this.renderRoot.querySelector(selector);
+		const index = layoutOf(this.#table.model).ariaRowIndex(active);
+		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) {
+			const layout = layoutOf(this.#table.model);
+			const before = (1 + layout.top) * this.#rowPx;
+			if (this.#virtual.reveal(active.index, before, layout.bottom * this.#rowPx)) {
+				this.#focusPending = true;
+				return;
+			}
+		}
 		cell.scrollIntoView({
 			block: "nearest",
 			inline: "nearest"
 		});
-		cell.focus({ preventScroll: true });
 	}
 	/**
-	* Keeps the active cell valid after columns or rows change: on the same row id
-	* when it still exists (it may have moved), else at the same index, clamped.
-	* Defaults to the first header. If its row went away while the grid had focus,
-	* focus follows to the replacement.
+	* Keeps the active cell valid after columns or rows change. In the body: on the
+	* same row id when it still exists (it may have moved), else at the same
+	* index, clamped. A data source row that isn't loaded (yet, or any more) keeps
+	* its id. A pinned row stays at its index, clamped to its list. A row whose
+	* section has no rows left gives way to the header, the default. If its row
+	* went away while the grid had focus, focus follows to the replacement.
 	*/
 	#reconcileActive(model) {
 		const columns = model.columns;
@@ -396,21 +779,37 @@ var ArgusTable = class ArgusTable extends LitElement {
 			return;
 		}
 		const prev = this.#active ?? {
-			index: -1,
+			...HEADER,
 			rowId: void 0,
 			col: first.id
 		};
 		const col = columns.some((c) => c.id === prev.col) ? prev.col : first.id;
-		let { index, rowId } = prev;
-		if (rowId !== void 0) {
+		let { section, index, rowId } = prev;
+		let moved = false;
+		if (section === "body" && rowId !== void 0) {
 			const found = model.indexOf(rowId);
-			if (found === void 0) {
+			const unloaded = index < model.rowCount && model.rowAt(index) === void 0;
+			if (found !== void 0) index = found;
+			else if (!unloaded) {
 				index = Math.min(index, model.rowCount - 1);
-				rowId = model.rowAt(index)?.id;
-				if (this.matches(":focus-within")) this.#focusPending = true;
-			} else index = found;
+				rowId = index >= 0 ? model.rowAt(index)?.id ?? this.#placeholderId(index) : void 0;
+				moved = true;
+			}
+		} else if (section === "top" || section === "bottom") {
+			const count = model.pinnedCount(section);
+			if (index >= count) {
+				index = count - 1;
+				moved = true;
+			}
+			rowId = index >= 0 ? model.pinnedRowAt(section, index)?.id : void 0;
 		}
-		if (index !== prev.index || rowId !== prev.rowId || col !== prev.col || !this.#active) this.#active = {
+		if (index < 0) {
+			({section, index} = HEADER);
+			rowId = void 0;
+		}
+		if (moved && this.matches(":focus-within")) this.#focusPending = true;
+		if (section !== prev.section || index !== prev.index || rowId !== prev.rowId || col !== prev.col || !this.#active) this.#active = {
+			section,
 			index,
 			rowId,
 			col
@@ -432,20 +831,145 @@ var ArgusTable = class ArgusTable extends LitElement {
 	}
 	/** Sets one column's width (clamped by core), through the controlled/uncontrolled rules. */
 	#requestResize(columnId, width) {
-		const next = this.#table.model.nextSizing(columnId, width);
-		const target = next?.[columnId];
-		if (!next || target === void 0 || target === this.#sizing.value[columnId]) return;
+		this.#requestResizes(/* @__PURE__ */ new Map([[columnId, width]]));
+	}
+	/**
+	* 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.
+	*/
+	#requestResizes(widths) {
+		const model = this.#table.model;
 		const old = this.#sizing.value;
-		const { value, applied } = this.#sizing.request(next);
-		const detail = {
+		const targets = [];
+		for (const [columnId, width] of widths) {
+			const target = model.nextSizing(columnId, width)?.[columnId];
+			if (target !== void 0 && target !== old[columnId]) targets.push([columnId, target]);
+		}
+		if (targets.length === 0) return;
+		const { value, applied } = this.#sizing.request({
+			...old,
+			...Object.fromEntries(targets)
+		});
+		const details = targets.map(([columnId, width]) => ({
 			columnId,
-			width: target,
+			width,
 			sizing: value
-		};
+		}));
 		if (applied) {
-			this.#appliedResize = detail;
+			for (const detail of this.#appliedResizes.values()) detail.sizing = value;
+			for (const detail of details) this.#appliedResizes.set(detail.columnId, detail);
 			this.requestUpdate("columnSizing", old);
-		} else fire(this, COLUMN_RESIZE, detail);
+		} 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),
+	* through the controlled/uncontrolled rules. Starts from the latest requested
+	* order, so moves can come faster than renders. `false` if it can't move there.
+	*/
+	#requestReorder(columnId, to) {
+		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);
+		if (applied) {
+			for (const detail of this.#appliedReorders.values()) detail.order = value;
+			this.#appliedReorders.set(columnId, {
+				columnId,
+				order: value
+			});
+			this.requestUpdate("columnOrder", old);
+		} else fire(this, COLUMN_REORDER, {
+			columnId,
+			order: value
+		});
+		return true;
+	}
+	/** 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 view = model.columns.find((c) => c.id === columnId);
+		if (from < 0 || !view) return;
+		if (!this.#requestReorder(columnId, from + step)) return;
+		this.#focusPending = true;
+		this.#announceMove ??= {
+			id: columnId,
+			from: view.colIndex
+		};
+		this.requestUpdate();
+	}
+	/** Tells screen readers where a column moved from the keyboard went. */
+	#announceMoved(model, move) {
+		const view = model.columns.find((c) => c.id === move.id);
+		if (!view || view.colIndex === move.from) return;
+		const header = this.renderRoot.querySelector(`[role='columnheader'][data-col="${CSS.escape(move.id)}"] > slot`);
+		const name = header instanceof HTMLSlotElement ? header.assignedNodes({ flatten: true }).map((n) => n.textContent).join("").trim() : "";
+		announce(this.ownerDocument, `${name || move.id} moved to column ${String(view.colIndex)} of ${String(model.columns.length)}`);
+	}
+	/** A press on a reorderable 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;
+		startReorderDrag(cell, down, {
+			scroller,
+			targetAt: (x) => dropTarget(this.#dropSlots(pin), columnId, x, this.#direction()),
+			scrollArea: () => pin === void 0 ? this.#scrollArea(scroller) : void 0,
+			onStart: () => {
+				this.#drag = {
+					columnId,
+					target: void 0
+				};
+				this.requestUpdate();
+			},
+			onTarget: (target) => {
+				this.#drag = {
+					columnId,
+					target
+				};
+				this.requestUpdate();
+			},
+			onDrop: (target) => {
+				this.#drag = void 0;
+				if (target && this.#requestReorder(columnId, target.to)) {
+					if (this.matches(":focus-within")) this.#focusPending = true;
+				}
+				this.requestUpdate();
+			},
+			onCancel: () => {
+				this.#drag = void 0;
+				this.requestUpdate();
+			}
+		});
+	}
+	/** The rendered headers of one pin group, with their positions in the whole order. */
+	#dropSlots(pin) {
+		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)}"]`);
+			if (cell) slots.push({
+				id: c.id,
+				index,
+				rect: cell.getBoundingClientRect()
+			});
+		});
+		return slots;
+	}
+	/** 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 ltr = this.#direction() === 1;
+		const left = scroller.getBoundingClientRect().left + scroller.clientLeft;
+		return {
+			left: left + width(ltr ? "start" : "end"),
+			right: left + scroller.clientWidth - width(ltr ? "end" : "start")
+		};
 	}
 	/** asc → desc → unsorted, through the controlled/uncontrolled rules. */
 	#requestSort(columnId) {
@@ -475,17 +999,20 @@ var ArgusTable = class ArgusTable extends LitElement {
 		}
 	}
 };
-__decorate([property({ attribute: false })], ArgusTable.prototype, "columns", void 0);
-__decorate([property({ attribute: false })], ArgusTable.prototype, "data", void 0);
+__decorate([property({ attribute: false })], ArgusTable.prototype, "columns", 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
 })], ArgusTable.prototype, "rowHeight", void 0);
 __decorate([property({ reflect: true })], ArgusTable.prototype, "density", void 0);
-__decorate([property({ type: Number })], ArgusTable.prototype, "overscan", void 0);
+__decorate([property({ type: Number })], ArgusTable.prototype, "overscan", null);
 __decorate([property({ attribute: false })], ArgusTable.prototype, "sorting", null);
 __decorate([property({ attribute: false })], ArgusTable.prototype, "columnSizing", null);
+__decorate([property({ attribute: false })], ArgusTable.prototype, "columnOrder", null);
 ArgusTable = __decorate([customElement("argus-table")], ArgusTable);
 export { ArgusTable };