@lilydesignsystem/angular-data-grid 0.9.0 → 0.11.0

package/fesm2022/lilydesignsystem-angular-data-grid.mjs

@@ -1,7 +1,7 @@
 import * as i0 from "@angular/core";
 import { ChangeDetectionStrategy, Component, Directive, ElementRef, Injector, afterNextRender, computed, effect, inject, input, model, output, signal, untracked, viewChild } from "@angular/core";
 import { NgTemplateOutlet } from "@angular/common";
-import { DataTable, DataTableBody, DataTableFoot, DataTableHead, DataTableRow, DataTableTD, DataTableTH } from "@lilydesignsystem/angular-headless";
+import { DataTable, DataTableBody, DataTableFoot, DataTableHead, DataTableRow, DataTableTD, DataTableTH, PaginationNav, SearchInput } from "@lilydesignsystem/angular-headless";
 function isExportFormula(value) {
 	return !!value && typeof value === "object" && !(value instanceof Date) && typeof value.formula === "string" && "result" in value;
 }
@@ -213,6 +213,251 @@ function downloadBlob(blob, filename) {
 	link.remove();
 	setTimeout(() => URL.revokeObjectURL(url), 1e3);
 }
+function toClipboardText(table) {
+	return toTsv(table, { bom: false });
+}
+async function copyToClipboard(text) {
+	try {
+		if (typeof navigator !== "undefined" && navigator.clipboard?.writeText) {
+			await navigator.clipboard.writeText(text);
+			return true;
+		}
+	} catch {}
+	try {
+		if (typeof document === "undefined") return false;
+		const area = document.createElement("textarea");
+		area.value = text;
+		area.setAttribute("readonly", "");
+		area.setAttribute("aria-hidden", "true");
+		area.style.position = "fixed";
+		area.style.opacity = "0";
+		document.body.appendChild(area);
+		area.select();
+		const ok = typeof document.execCommand === "function" && document.execCommand("copy");
+		area.remove();
+		return !!ok;
+	} catch {
+		return false;
+	}
+}
+function foldText(text) {
+	return text.normalize("NFD").replace(/\p{M}+/gu, "").toLowerCase();
+}
+function searchTerms(query) {
+	return foldText(query).split(/\s+/).filter(Boolean);
+}
+function matchesSearch(text, query) {
+	const terms = searchTerms(query);
+	if (terms.length === 0) return true;
+	const folded = foldText(text);
+	return terms.every((term) => folded.includes(term));
+}
+function highlightSegments(text, query) {
+	const terms = searchTerms(query);
+	if (terms.length === 0 || text === "") return [{
+		text,
+		match: false
+	}];
+	const chars = Array.from(text);
+	const folded = chars.map((c) => foldText(c));
+	if (folded.some((f) => f.length !== 1)) return [{
+		text,
+		match: false
+	}];
+	const flat = folded.join("");
+	const marked = new Array(chars.length).fill(false);
+	for (const term of terms) for (let at = flat.indexOf(term); at !== -1; at = flat.indexOf(term, at + 1)) for (let i = at; i < at + term.length; i++) marked[i] = true;
+	const out = [];
+	chars.forEach((c, i) => {
+		const last = out[out.length - 1];
+		if (last && last.match === marked[i]) last.text += c;
+		else out.push({
+			text: c,
+			match: marked[i]
+		});
+	});
+	return out;
+}
+function isRtl(element) {
+	if (!element) return false;
+	const attr = element.closest("[dir]")?.getAttribute("dir")?.toLowerCase();
+	if (attr === "rtl") return true;
+	if (attr === "ltr") return false;
+	if (typeof getComputedStyle === "function") return getComputedStyle(element).direction === "rtl";
+	return false;
+}
+function logicalKey(key, rtl) {
+	if (!rtl) return key;
+	if (key === "ArrowLeft") return "ArrowRight";
+	if (key === "ArrowRight") return "ArrowLeft";
+	return key;
+}
+const clamp = (value, low, high) => Math.min(Math.max(value, low), high);
+function gridMove(event, at, nav) {
+	const key = logicalKey(event.key, nav.rtl ?? false);
+	const corner = !!(event.ctrlKey || event.metaKey);
+	let row = at.row;
+	let col = at.col;
+	switch (key) {
+		case "ArrowRight":
+			col += 1;
+			break;
+		case "ArrowLeft":
+			col -= 1;
+			break;
+		case "ArrowDown":
+			row += 1;
+			break;
+		case "ArrowUp":
+			row -= 1;
+			break;
+		case "PageDown":
+			row += nav.pageStep;
+			break;
+		case "PageUp":
+			row -= nav.pageStep;
+			break;
+		case "Home":
+			if (corner) [row, col] = [nav.firstRow, 0];
+			else if (nav.homeEnd === "column") row = nav.firstRow;
+			else col = 0;
+			break;
+		case "End":
+			if (corner) [row, col] = [nav.lastRow, nav.lastCol];
+			else if (nav.homeEnd === "column") row = nav.lastRow;
+			else col = nav.lastCol;
+			break;
+		default: return null;
+	}
+	return {
+		row: clamp(row, nav.firstRow, nav.lastRow),
+		col: clamp(col, 0, nav.lastCol)
+	};
+}
+const CONTROL_LABELS = {
+	selection: [
+		"selectAll",
+		"selectionColumn",
+		"selectRow"
+	],
+	pagination: [
+		"previousPage",
+		"nextPage",
+		"pageStatus"
+	],
+	hidableColumns: ["columnVisibility", "columnVisibilityOption"],
+	resizableColumns: ["resizeHandle"],
+	editing: ["editCell", "cellEditor"],
+	search: ["search"],
+	exporting: ["export"]
+};
+const ANNOUNCEMENT_LABELS = {
+	sorting: ["sortAnnouncement"],
+	search: ["filterAnnouncement"],
+	selection: ["selectionAnnouncement"],
+	pagination: ["pageAnnouncement"],
+	editing: [
+		"editAnnouncement",
+		"editCancelAnnouncement",
+		"editError",
+		"undoAnnouncement",
+		"redoAnnouncement"
+	],
+	exporting: [
+		"exportAnnouncement",
+		"copyAnnouncement",
+		"copyFailed"
+	]
+};
+function requiredLabels(features) {
+	const out = [];
+	const add = (table, kind) => {
+		for (const feature of Object.keys(table)) {
+			if (!features[feature]) continue;
+			for (const key of table[feature]) if (!out.some((o) => o.key === key)) out.push({
+				key,
+				kind
+			});
+		}
+	};
+	add(CONTROL_LABELS, "control");
+	add(ANNOUNCEMENT_LABELS, "announcement");
+	return out;
+}
+function missingLabels(features, labels) {
+	return requiredLabels(features).filter(({ key }) => {
+		const value = labels?.[key];
+		return value === void 0 || value === null || value === "";
+	});
+}
+const EMPTY_HISTORY = {
+	undo: [],
+	redo: []
+};
+const HISTORY_LIMIT = 100;
+function recordEdit(history, record, limit = 100) {
+	const undo = [...history.undo, record];
+	return {
+		undo: undo.length > limit ? undo.slice(undo.length - limit) : undo,
+		redo: []
+	};
+}
+function undoEdit(history) {
+	const record = history.undo[history.undo.length - 1];
+	if (!record) return {
+		history,
+		record: void 0
+	};
+	return {
+		history: {
+			undo: history.undo.slice(0, -1),
+			redo: [...history.redo, record]
+		},
+		record
+	};
+}
+function redoEdit(history) {
+	const record = history.redo[history.redo.length - 1];
+	if (!record) return {
+		history,
+		record: void 0
+	};
+	return {
+		history: {
+			undo: [...history.undo, record],
+			redo: history.redo.slice(0, -1)
+		},
+		record
+	};
+}
+function historyKey(event) {
+	if (event.altKey || !(event.ctrlKey || event.metaKey)) return null;
+	const key = event.key.toLowerCase();
+	if (key === "z") return event.shiftKey ? "redo" : "undo";
+	if (key === "y" && !event.shiftKey) return "redo";
+	return null;
+}
+const TYPEAHEAD_RESET_MS = 700;
+function isTypeaheadKey(event) {
+	return event.key.length === 1 && event.key !== " " && !event.ctrlKey && !event.altKey && !event.metaKey;
+}
+function nextTypeaheadState(previous, key, now, resetMs = 700) {
+	return {
+		prefix: (previous.prefix !== "" && now - previous.at <= resetMs ? previous.prefix : "") + key,
+		at: now
+	};
+}
+function findTypeaheadMatch(labels, from, prefix) {
+	const folded = foldText(prefix);
+	if (folded === "" || labels.length === 0) return -1;
+	const needle = folded.length > 1 && [...folded].every((c) => c === folded[0]) ? folded[0] : folded;
+	const startOffset = needle.length > 1 ? 0 : 1;
+	for (let step = 0; step < labels.length; step++) {
+		const index = (from + startOffset + step + labels.length) % labels.length;
+		if (foldText(labels[index]).startsWith(needle)) return index;
+	}
+	return -1;
+}
 const SAFE_SCHEME = /^(https?:|mailto:|tel:)/i;
 const RELATIVE = /^(\/(?!\/)|\.\.?\/|#|\?)/;
 function safeHref(href) {
@@ -607,6 +852,7 @@ function resolveColumn(column, gridLocale, rows = []) {
 	}
 	return resolved;
 }
+const isMissing = (value) => value === null || value === void 0 || value === "";
 const WIDGET_SELECTOR = "a[href], button, input, select, textarea, summary, [contenteditable=\"true\"]";
 const MIN_COLUMN_WIDTH = 40;
 const RESIZE_STEP = 16;
@@ -705,12 +951,25 @@ var DataGrid = class DataGrid {
 		}
 		return ctx;
 	}
+	isMovable(column) {
+		return column.movable ?? this.movableColumns();
+	}
+	footerAggregate(columnId, kind) {
+		const column = this.resolvedColumns().find((c) => c.id === columnId);
+		if (!column) return void 0;
+		return aggregateValues(kind, this.sortedEntries().map((e) => defaultAccessor(column, e.row)));
+	}
 	constructor() {
 		this.label = input.required(...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
 		this.caption = input(void 0, ...ngDevMode ? [{ debugName: "caption" }] : /* istanbul ignore next */ []);
 		this.columns = input.required(...ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []);
 		this.rows = input.required(...ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []);
 		this.locale = input(void 0, ...ngDevMode ? [{ debugName: "locale" }] : /* istanbul ignore next */ []);
+		this.emptyValue = input(void 0, ...ngDevMode ? [{ debugName: "emptyValue" }] : /* istanbul ignore next */ []);
+		this.warnMissingLabels = input(true, ...ngDevMode ? [{ debugName: "warnMissingLabels" }] : /* istanbul ignore next */ []);
+		this.nulls = input("last", ...ngDevMode ? [{ debugName: "nulls" }] : /* istanbul ignore next */ []);
+		this.movableColumns = input(false, ...ngDevMode ? [{ debugName: "movableColumns" }] : /* istanbul ignore next */ []);
+		this.rowFilter = input(void 0, ...ngDevMode ? [{ debugName: "rowFilter" }] : /* istanbul ignore next */ []);
 		this.rowId = input((_row, index) => String(index), ...ngDevMode ? [{ debugName: "rowId" }] : /* istanbul ignore next */ []);
 		this.selectionMode = input("none", ...ngDevMode ? [{ debugName: "selectionMode" }] : /* istanbul ignore next */ []);
 		this.pageSize = input(void 0, ...ngDevMode ? [{ debugName: "pageSize" }] : /* istanbul ignore next */ []);
@@ -728,10 +987,13 @@ var DataGrid = class DataGrid {
 		this.exportScope = input("view", ...ngDevMode ? [{ debugName: "exportScope" }] : /* istanbul ignore next */ []);
 		this.exportFormulas = input(false, ...ngDevMode ? [{ debugName: "exportFormulas" }] : /* istanbul ignore next */ []);
 		this.exportHandler = input(void 0, ...ngDevMode ? [{ debugName: "exportHandler" }] : /* istanbul ignore next */ []);
+		this.copyHandler = input(void 0, ...ngDevMode ? [{ debugName: "copyHandler" }] : /* istanbul ignore next */ []);
 		this.virtualize = input(void 0, ...ngDevMode ? [{ debugName: "virtualize" }] : /* istanbul ignore next */ []);
 		this.className = input("", ...ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []);
 		this.selected = model([], ...ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []);
 		this.filter = model("", ...ngDevMode ? [{ debugName: "filter" }] : /* istanbul ignore next */ []);
+		this.filterField = model("", ...ngDevMode ? [{ debugName: "filterField" }] : /* istanbul ignore next */ []);
+		this.thenBy = model([], ...ngDevMode ? [{ debugName: "thenBy" }] : /* istanbul ignore next */ []);
 		this.sort = model({
 			columnId: "",
 			direction: "none"
@@ -743,6 +1005,7 @@ var DataGrid = class DataGrid {
 		this.fileRemove = output();
 		this.rowActivate = output();
 		this.exportFile = output();
+		this.copy = output();
 		this.gridId = nextDataGridId();
 		this.minColumnWidth = MIN_COLUMN_WIDTH;
 		this.rootRef = viewChild.required("rootEl", ...ngDevMode ? [{ debugName: "rootRef" }] : /* istanbul ignore next */ []);
@@ -787,36 +1050,50 @@ var DataGrid = class DataGrid {
 			this.resolvedColumns();
 			return /* @__PURE__ */ new WeakMap();
 		}, ...ngDevMode ? [{ debugName: "cellCache" }] : /* istanbul ignore next */ []);
-		this.searchIndex = computed(() => {
-			const filterable = this.resolvedColumns().filter((c) => c.filterable !== false);
-			return this.entries().map((entry) => filterable.map((column) => (column.filterText ? column.filterText(this.cellFor(column, entry.row).value, entry.row) : this.cellFor(column, entry.row).formatted).toLowerCase()));
-		}, ...ngDevMode ? [{ debugName: "searchIndex" }] : /* istanbul ignore next */ []);
+		this.isMissing = isMissing;
+		this.filterableColumns = computed(() => this.resolvedColumns().filter((c) => c.filterable !== false), ...ngDevMode ? [{ debugName: "filterableColumns" }] : /* istanbul ignore next */ []);
+		this.searchIndex = computed(() => this.entries().map((entry) => this.filterableColumns().map((column) => foldText(column.filterText ? column.filterText(this.cellFor(column, entry.row).value, entry.row) : this.cellFor(column, entry.row).formatted))), ...ngDevMode ? [{ debugName: "searchIndex" }] : /* istanbul ignore next */ []);
 		this.filteredEntries = computed(() => {
-			const text = this.filter().trim().toLowerCase();
-			if (!text) return this.entries();
-			const index = this.searchIndex();
-			return this.entries().filter((_entry, i) => index[i].some((value) => value.includes(text)));
+			const terms = searchTerms(this.filter());
+			const rowFilter = this.rowFilter();
+			if (terms.length === 0 && !rowFilter) return this.entries();
+			const index = terms.length > 0 ? this.searchIndex() : null;
+			const field = this.filterField();
+			const only = field ? this.filterableColumns().findIndex((c) => c.id === field) : -1;
+			const rowText = (i) => only >= 0 ? index[i][only] : index[i].join(" ");
+			return this.entries().filter((entry, i) => (!rowFilter || rowFilter(entry.row)) && (!index || terms.every((term) => rowText(i).includes(term))));
 		}, ...ngDevMode ? [{ debugName: "filteredEntries" }] : /* istanbul ignore next */ []);
+		this.sortKeys = computed(() => [this.sort(), ...this.thenBy()].map((k) => ({
+			column: this.resolvedColumns().find((c) => c.id === k.columnId),
+			dir: k.direction === "ascending" ? 1 : k.direction === "descending" ? -1 : 0
+		})).filter((k) => !!k.column && k.dir !== 0), ...ngDevMode ? [{ debugName: "sortKeys" }] : /* istanbul ignore next */ []);
 		this.sortedEntries = computed(() => {
-			const sort = this.sort();
+			const keys = this.sortKeys();
 			const filtered = this.filteredEntries();
-			if (sort.direction === "none" || !sort.columnId) return filtered;
-			const column = this.resolvedColumns().find((c) => c.id === sort.columnId);
-			if (!column) return filtered;
-			const dir = sort.direction === "ascending" ? 1 : -1;
-			const compare = column.compare;
+			if (keys.length === 0) return filtered;
+			const nulls = this.nulls();
+			const collators = keys.map((k) => {
+				const tag = k.column.locale ?? this.locale();
+				return tag ? new Intl.Collator(tag, { numeric: true }) : null;
+			});
 			const keyed = filtered.map((entry) => ({
 				entry,
-				key: this.cellFor(column, entry.row).value
+				keys: keys.map((k) => this.cellFor(k.column, entry.row).value)
 			}));
 			keyed.sort((a, b) => {
-				const av = a.key;
-				const bv = b.key;
-				if (av === bv) return 0;
-				if (av === null || av === void 0) return 1;
-				if (bv === null || bv === void 0) return -1;
-				if (compare) return compare(av, bv) * dir;
-				return av > bv ? dir : -dir;
+				for (let i = 0; i < keys.length; i++) {
+					const { column, dir } = keys[i];
+					const av = a.keys[i];
+					const bv = b.keys[i];
+					if (av === bv) continue;
+					const aMissing = av === null || av === void 0;
+					const bMissing = bv === null || bv === void 0;
+					if (aMissing || bMissing) return aMissing === bMissing ? 0 : (aMissing ? 1 : -1) * (nulls === "first" ? -1 : 1);
+					const collator = collators[i];
+					const result = column.compare ? column.compare(av, bv) * dir : collator && typeof av === "string" && typeof bv === "string" ? collator.compare(av, bv) * dir : av > bv ? dir : -dir;
+					if (result !== 0) return result;
+				}
+				return 0;
 			});
 			return keyed.map((k) => k.entry);
 		}, ...ngDevMode ? [{ debugName: "sortedEntries" }] : /* istanbul ignore next */ []);
@@ -883,14 +1160,21 @@ var DataGrid = class DataGrid {
 		this.someSelected = computed(() => !this.allSelected() && this.sortedEntries().some((e) => this.selectedSet().has(e.id)), ...ngDevMode ? [{ debugName: "someSelected" }] : /* istanbul ignore next */ []);
 		this.footerContext = computed(() => ({
 			columns: this.visibleColumns(),
-			rows: this.pageEntries().map((e) => e.row)
+			rows: this.pageEntries().map((e) => e.row),
+			allRows: this.sortedEntries().map((e) => e.row),
+			aggregate: (columnId, kind) => this.footerAggregate(columnId, kind)
 		}), ...ngDevMode ? [{ debugName: "footerContext" }] : /* istanbul ignore next */ []);
 		this.exportColumns = computed(() => this.visibleColumns().filter((c) => c.exportable !== false), ...ngDevMode ? [{ debugName: "exportColumns" }] : /* istanbul ignore next */ []);
 		this.exportEntries = computed(() => this.exportScope() === "selected" ? this.sortedEntries().filter((e) => this.selectedSet().has(e.id)) : this.sortedEntries(), ...ngDevMode ? [{ debugName: "exportEntries" }] : /* istanbul ignore next */ []);
 		this.hasExportButtons = computed(() => {
 			const l = this.labels();
-			return !!(l.exportCsv || l.exportTsv || l.exportExcel);
+			return !!(l.exportCsv || l.exportTsv || l.exportExcel || l.copy);
 		}, ...ngDevMode ? [{ debugName: "hasExportButtons" }] : /* istanbul ignore next */ []);
+		this.history = EMPTY_HISTORY;
+		this.typeahead = {
+			prefix: "",
+			at: 0
+		};
 		effect(() => {
 			const root = this.rootRef().nativeElement;
 			const grid = this.isGrid();
@@ -910,6 +1194,30 @@ var DataGrid = class DataGrid {
 				else table.removeAttribute("aria-busy");
 			}, { injector: this.injector });
 		});
+		const reportedLabels = /* @__PURE__ */ new Set();
+		effect(() => {
+			const labels = this.labels();
+			const columns = this.resolvedColumns();
+			const features = {
+				selection: this.selectionMode() !== "none",
+				pagination: !!this.pageSize(),
+				hidableColumns: columns.some((c) => c.hidable),
+				resizableColumns: columns.some((c) => c.resizable),
+				editing: columns.some((c) => c.editable),
+				sorting: columns.some((c) => c.sortable),
+				search: !!labels.search,
+				exporting: !!(labels.exportCsv || labels.exportTsv || labels.exportExcel || labels.copy)
+			};
+			const warn = this.warnMissingLabels();
+			const env = globalThis.process?.env;
+			if (!warn || env?.["NODE_ENV"] === "production") return;
+			const fresh = missingLabels(features, labels).filter((m) => !reportedLabels.has(m.key));
+			if (fresh.length === 0) return;
+			for (const m of fresh) reportedLabels.add(m.key);
+			const controls = fresh.filter((m) => m.kind === "control").map((m) => m.key);
+			const announcements = fresh.filter((m) => m.kind === "announcement").map((m) => m.key);
+			console.warn(`[data-grid] "${this.label()}": labels left out — ` + [controls.length ? `controls with no name: ${controls.join(", ")}` : "", announcements.length ? `silent announcements: ${announcements.join(", ")}` : ""].filter(Boolean).join("; "));
+		});
 		effect(() => {
 			this.pageEntries();
 			this.visibleColumns();
@@ -930,7 +1238,8 @@ var DataGrid = class DataGrid {
 			const snapshot = {
 				columnWidths: this.columnWidths(),
 				hiddenColumnIds: [...this.hiddenColumnIds()],
-				sort: this.sort()
+				sort: this.sort(),
+				columnOrder: this.columnOrder()
 			};
 			if (!key || typeof localStorage === "undefined") return;
 			try {
@@ -943,11 +1252,33 @@ var DataGrid = class DataGrid {
 	}
 	ariaSortFor(column) {
 		if (!column.sortable) return null;
-		return this.sort().columnId === column.id ? this.sort().direction : "none";
+		if (this.sort().columnId === column.id) return this.sort().direction;
+		return this.thenBy().find((k) => k.columnId === column.id)?.direction ?? "none";
+	}
+	sortOrderFor(column) {
+		const keys = this.sortKeys();
+		if (keys.length < 2) return null;
+		const at = keys.findIndex((k) => k.column.id === column.id);
+		return at === -1 ? null : at + 1;
 	}
-	toggleSort(column) {
+	toggleSort(column, additive = false) {
 		if (!column.sortable) return;
 		const current = this.sort();
+		if (additive && current.direction !== "none" && current.columnId && current.columnId !== column.id) {
+			const thenBy = this.thenBy();
+			const existing = thenBy.find((k) => k.columnId === column.id);
+			const nextThen = !existing ? [...thenBy, {
+				columnId: column.id,
+				direction: "ascending"
+			}] : existing.direction === "ascending" ? thenBy.map((k) => k.columnId === column.id ? {
+				columnId: column.id,
+				direction: "descending"
+			} : k) : thenBy.filter((k) => k.columnId !== column.id);
+			this.thenBy.set(nextThen);
+			this.announce(this.labels().sortAnnouncement?.(column.header, nextThen.find((k) => k.columnId === column.id)?.direction ?? "none"));
+			return;
+		}
+		if (this.thenBy().length > 0) this.thenBy.set([]);
 		const next = current.columnId !== column.id ? {
 			columnId: column.id,
 			direction: "ascending"
@@ -964,8 +1295,20 @@ var DataGrid = class DataGrid {
 		this.sort.set(next);
 		this.announce(this.labels().sortAnnouncement?.(column.header, next.direction));
 	}
-	onFilterInput(event) {
-		this.filter.set(event.target.value);
+	setFilter(value) {
+		this.filter.set(value);
+		this.page.set(1);
+		this.announce(this.labels().filterAnnouncement?.(this.filteredEntries().length, this.rows().length));
+	}
+	onFilterKeydown(event) {
+		const e = event;
+		if (e.key === "Escape" && this.filter() !== "") {
+			e.preventDefault();
+			this.setFilter("");
+		}
+	}
+	onFilterFieldChange(event) {
+		this.filterField.set(event.target.value);
 		this.page.set(1);
 		this.announce(this.labels().filterAnnouncement?.(this.filteredEntries().length, this.rows().length));
 	}
@@ -1008,6 +1351,12 @@ var DataGrid = class DataGrid {
 		const width = this.widthFor(column);
 		if (width) parts.push(`width:${width}px`);
 		if (column.align) parts.push(`text-align:${column.align}`);
+		if (column.pinned) {
+			const visible = this.visibleColumns();
+			const i = visible.findIndex((c) => c.id === column.id);
+			const widths = (column.pinned === "start" ? visible.slice(0, i) : visible.slice(i + 1)).filter((c) => c.pinned === column.pinned).map((c) => this.widthFor(c));
+			if (widths.every((w) => w !== void 0)) parts.push(`--data-grid-pinned-offset:${widths.reduce((a, w) => a + (w ?? 0), 0)}px`);
+		}
 		return parts.length > 0 ? parts.join(";") : null;
 	}
 	setWidth(column, width) {
@@ -1125,29 +1474,44 @@ var DataGrid = class DataGrid {
 	hasUtcColumn(c) {
 		return c.type === "time-zone" && !!c.exportUtc && !!c.referenceDate && !!this.labels().exportUtcHeader;
 	}
-	runExport(format) {
+	buildExportTable(format) {
 		const live = (c) => format === "xlsx" && this.exportFormulas() && c.type === "formula" && !!c.source;
 		const headers = [];
 		for (const c of this.exportColumns()) {
 			headers.push(c.header);
 			if (this.hasUtcColumn(c)) headers.push(this.labels().exportUtcHeader(c.header));
 		}
-		const rows = this.exportEntries().map((entry) => {
-			const cells = [];
-			for (const c of this.exportColumns()) {
-				const expression = live(c) ? c.source(entry.row) : void 0;
-				cells.push(typeof expression === "string" && expression !== "" && !c.errorOf?.(entry.row) ? {
-					formula: expression,
-					result: this.exportCell(c, entry.row)
-				} : this.exportCell(c, entry.row));
-				if (this.hasUtcColumn(c)) cells.push(zonedUtcTime(this.cellFor(c, entry.row).value, c.referenceDate));
-			}
-			return cells;
-		});
-		const table = {
+		return {
 			headers,
-			rows
+			rows: this.exportEntries().map((entry) => {
+				const cells = [];
+				for (const c of this.exportColumns()) {
+					const expression = live(c) ? c.source(entry.row) : void 0;
+					cells.push(typeof expression === "string" && expression !== "" && !c.errorOf?.(entry.row) ? {
+						formula: expression,
+						result: this.exportCell(c, entry.row)
+					} : this.exportCell(c, entry.row));
+					if (this.hasUtcColumn(c)) cells.push(zonedUtcTime(this.cellFor(c, entry.row).value, c.referenceDate));
+				}
+				return cells;
+			})
 		};
+	}
+	async runCopy() {
+		const table = this.buildExportTable("tsv");
+		const text = toClipboardText(table);
+		const copied = {
+			text,
+			rowCount: table.rows.length
+		};
+		this.copy.emit(copied);
+		if (this.copyHandler()?.(copied) === false) return;
+		const ok = await copyToClipboard(text);
+		this.announce(ok ? this.labels().copyAnnouncement?.(table.rows.length) : this.labels().copyFailed);
+	}
+	runExport(format) {
+		const table = this.buildExportTable(format);
+		const rows = table.rows;
 		const name = this.exportFilename();
 		const filename = exportFilename(name, format);
 		const blob = exportBlob(table, format, { sheetName: name });
@@ -1235,6 +1599,26 @@ var DataGrid = class DataGrid {
 		if (column.editor === "date" || column.editor === "time" || column.editor === "select") return draft === "" ? null : draft;
 		return draft;
 	}
+	stepHistory(direction) {
+		const step = direction === "undo" ? undoEdit(this.history) : redoEdit(this.history);
+		if (!step.record) return;
+		this.history = step.history;
+		const { ownerId, fieldId, value, previous } = step.record;
+		const entry = this.entries().find((e) => e.id === ownerId);
+		const column = this.resolvedColumns().find((c) => c.id === fieldId);
+		if (!entry || !column) return;
+		const restored = direction === "undo" ? previous : value;
+		const replaced = direction === "undo" ? value : previous;
+		this.cellEdit.emit({
+			rowId: entry.id,
+			row: entry.row,
+			columnId: column.id,
+			value: restored,
+			previous: replaced
+		});
+		const text = column.format ? column.format(restored, entry.row) : String(restored ?? "");
+		this.announce((direction === "undo" ? this.labels().undoAnnouncement : this.labels().redoAnnouncement)?.(column.header, text));
+	}
 	isStructurallyEqual(a, b) {
 		return typeof a === "object" && typeof b === "object" && a !== null && b !== null && JSON.stringify(a) === JSON.stringify(b);
 	}
@@ -1255,6 +1639,12 @@ var DataGrid = class DataGrid {
 		const previous = column.type === "formula" && column.source ? column.source(entry.row) : defaultAccessor(column, entry.row);
 		this.editingState.set(null);
 		if (value !== previous && !this.isStructurallyEqual(value, previous)) {
+			this.history = recordEdit(this.history, {
+				ownerId: entry.id,
+				fieldId: column.id,
+				value,
+				previous
+			});
 			this.cellEdit.emit({
 				rowId: entry.id,
 				row: entry.row,
@@ -1423,51 +1813,51 @@ var DataGrid = class DataGrid {
 		const activeRow = this.activeRow();
 		const activeCol = this.activeCol();
 		const colOffset = this.colOffset();
-		if (e.altKey && activeRow === -1 && (e.key === "ArrowRight" || e.key === "ArrowLeft")) {
+		const key = logicalKey(e.key, isRtl(cell));
+		if (e.altKey && activeRow === -1 && (key === "ArrowRight" || key === "ArrowLeft")) {
 			const column = this.visibleColumns()[activeCol - colOffset];
-			if (column?.movable) {
+			if (column && this.isMovable(column)) {
 				e.preventDefault();
-				const delta = e.key === "ArrowRight" ? 1 : -1;
+				const delta = key === "ArrowRight" ? 1 : -1;
 				if (this.moveColumn(column.id, activeCol - colOffset + delta)) this.moveFocus(-1, activeCol + delta);
 				return;
 			}
 		}
-		const size = this.pageSize();
-		switch (e.key) {
-			case "ArrowRight":
-				e.preventDefault();
-				this.moveFocus(activeRow, activeCol + 1);
-				break;
-			case "ArrowLeft":
-				e.preventDefault();
-				this.moveFocus(activeRow, activeCol - 1);
-				break;
-			case "ArrowDown":
-				e.preventDefault();
-				this.moveFocus(activeRow + 1, activeCol);
-				break;
-			case "ArrowUp":
-				e.preventDefault();
-				this.moveFocus(activeRow - 1, activeCol);
-				break;
-			case "Home":
-				e.preventDefault();
-				if (e.ctrlKey || e.metaKey) this.moveFocus(-1, 0);
-				else this.moveFocus(activeRow, 0);
-				break;
-			case "End":
-				e.preventDefault();
-				if (e.ctrlKey || e.metaKey) this.moveFocus(this.pageEntries().length - 1, this.lastCol());
-				else this.moveFocus(activeRow, this.lastCol());
-				break;
-			case "PageDown":
-				e.preventDefault();
-				this.moveFocus(activeRow + (size ?? 10), activeCol);
-				break;
-			case "PageUp":
-				e.preventDefault();
-				this.moveFocus(activeRow - (size ?? 10), activeCol);
-				break;
+		const historyAction = target === cell && this.resolvedColumns().some((c) => c.editable) ? historyKey(e) : null;
+		if (historyAction) {
+			e.preventDefault();
+			this.stepHistory(historyAction);
+			return;
+		}
+		if (isTypeaheadKey(e) && target === cell && activeRow >= 0) {
+			const column = this.visibleColumns()[activeCol - colOffset];
+			if (column) {
+				const state = nextTypeaheadState(this.typeahead, e.key, Date.now(), 700);
+				const hit = findTypeaheadMatch(this.pageEntries().map((entry) => this.cellFor(column, entry.row).formatted), activeRow, state.prefix);
+				if (hit !== -1) {
+					this.typeahead = state;
+					e.preventDefault();
+					this.moveFocus(hit, activeCol);
+					return;
+				}
+			}
+		}
+		const move = gridMove(e, {
+			row: activeRow,
+			col: activeCol
+		}, {
+			firstRow: -1,
+			lastRow: this.pageEntries().length - 1,
+			lastCol: this.lastCol(),
+			pageStep: this.pageSize() ?? 10,
+			rtl: isRtl(cell)
+		});
+		if (move) {
+			e.preventDefault();
+			this.moveFocus(move.row, move.col);
+			return;
+		}
+		switch (key) {
 			case "F2": {
 				const entry = this.pageEntries()[Number(cell.dataset["row"])];
 				const column = this.visibleColumns()[Number(cell.dataset["col"]) - colOffset];
@@ -1510,6 +1900,7 @@ var DataGrid = class DataGrid {
 				if (saved.columnWidths) this.columnWidths.set(saved.columnWidths);
 				if (saved.hiddenColumnIds) this.hiddenColumnIds.set(new Set(saved.hiddenColumnIds));
 				if (saved.sort) this.sort.set(saved.sort);
+				if (Array.isArray(saved.columnOrder)) this.columnOrder.set(saved.columnOrder);
 			}
 		} catch {}
 	}
@@ -1604,6 +1995,41 @@ var DataGrid = class DataGrid {
 					isRequired: false,
 					transformFunction: null
 				},
+				emptyValue: {
+					classPropertyName: "emptyValue",
+					publicName: "emptyValue",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				warnMissingLabels: {
+					classPropertyName: "warnMissingLabels",
+					publicName: "warnMissingLabels",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				nulls: {
+					classPropertyName: "nulls",
+					publicName: "nulls",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				movableColumns: {
+					classPropertyName: "movableColumns",
+					publicName: "movableColumns",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				rowFilter: {
+					classPropertyName: "rowFilter",
+					publicName: "rowFilter",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
 				rowId: {
 					classPropertyName: "rowId",
 					publicName: "rowId",
@@ -1723,6 +2149,13 @@ var DataGrid = class DataGrid {
 					isRequired: false,
 					transformFunction: null
 				},
+				copyHandler: {
+					classPropertyName: "copyHandler",
+					publicName: "copyHandler",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
 				virtualize: {
 					classPropertyName: "virtualize",
 					publicName: "virtualize",
@@ -1751,6 +2184,20 @@ var DataGrid = class DataGrid {
 					isRequired: false,
 					transformFunction: null
 				},
+				filterField: {
+					classPropertyName: "filterField",
+					publicName: "filterField",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				thenBy: {
+					classPropertyName: "thenBy",
+					publicName: "thenBy",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
 				sort: {
 					classPropertyName: "sort",
 					publicName: "sort",
@@ -1776,6 +2223,8 @@ var DataGrid = class DataGrid {
 			outputs: {
 				selected: "selectedChange",
 				filter: "filterChange",
+				filterField: "filterFieldChange",
+				thenBy: "thenByChange",
 				sort: "sortChange",
 				columnOrder: "columnOrderChange",
 				page: "pageChange",
@@ -1783,7 +2232,8 @@ var DataGrid = class DataGrid {
 				filesSelected: "filesSelected",
 				fileRemove: "fileRemove",
 				rowActivate: "rowActivate",
-				exportFile: "exportFile"
+				exportFile: "exportFile",
+				copy: "copy"
 			},
 			viewQueries: [{
 				propertyName: "rootRef",
@@ -1803,11 +2253,22 @@ var DataGrid = class DataGrid {
     <div #rootEl class="data-grid {{ className() }}">
       @if (labels().search || hidableColumns().length > 0 || hasExportButtons()) {
         <div class="data-grid-toolbar">
+          @if (labels().search && labels().searchField && labels().searchAllFields) {
+            <select class="data-grid-search-field" [attr.aria-label]="labels().searchField" [value]="filterField()" (change)="onFilterFieldChange($event)">
+              <option value="">{{ labels().searchAllFields }}</option>
+              @for (c of filterableColumns(); track c.id) {
+                <option [value]="c.id">{{ c.header }}</option>
+              }
+            </select>
+          }
           @if (labels().search; as searchLabel) {
-            <input class="data-grid-search" type="search" [attr.aria-label]="searchLabel" [value]="filter()" (input)="onFilterInput($event)" />
+            <lily-search-input className="data-grid-search" [label]="searchLabel" [value]="filter()" (valueChange)="setFilter($event)" (keydown)="onFilterKeydown($event)" />
           }
           @if (hasExportButtons()) {
             <div class="data-grid-export" role="group" [attr.aria-label]="labels().export ?? null">
+              @if (labels().copy; as copy) {
+                <button type="button" class="data-grid-export-button" data-grid-export-format="copy" [disabled]="exportEntries().length === 0" (click)="runCopy()">{{ copy }}</button>
+              }
               @if (labels().exportCsv; as csv) {
                 <button type="button" class="data-grid-export-button" data-grid-export-format="csv" [disabled]="exportEntries().length === 0" (click)="runExport('csv')">{{ csv }}</button>
               }
@@ -1851,16 +2312,26 @@ var DataGrid = class DataGrid {
       }
 
       @if (pageSize()) {
-        <div class="data-grid-pagination">
-          <button type="button" class="data-grid-page-previous" [disabled]="clampedPage() <= 1" (click)="goToPage(clampedPage() - 1)">{{ labels().previousPage }}</button>
-          <span class="data-grid-page-status">{{ labels().pageStatus?.(clampedPage(), pageCount(), sortedEntries().length) }}</span>
-          <button type="button" class="data-grid-page-next" [disabled]="clampedPage() >= pageCount()" (click)="goToPage(clampedPage() + 1)">{{ labels().nextPage }}</button>
-        </div>
+        @if (labels().pagination; as pagination) {
+          <lily-pagination-nav className="data-grid-pagination" [label]="pagination">
+            <ng-container *ngTemplateOutlet="pager" />
+          </lily-pagination-nav>
+        } @else {
+          <div class="data-grid-pagination">
+            <ng-container *ngTemplateOutlet="pager" />
+          </div>
+        }
       }
 
       <p class="data-grid-status" aria-live="polite">{{ statusMessage() }}</p>
     </div>
 
+    <ng-template #pager>
+      <button type="button" class="data-grid-page-previous" [disabled]="clampedPage() <= 1" (click)="goToPage(clampedPage() - 1)">{{ labels().previousPage }}</button>
+      <span class="data-grid-page-status">{{ labels().pageStatus?.(clampedPage(), pageCount(), sortedEntries().length) }}</span>
+      <button type="button" class="data-grid-page-next" [disabled]="clampedPage() >= pageCount()" (click)="goToPage(clampedPage() + 1)">{{ labels().nextPage }}</button>
+    </ng-template>
+
     <ng-template #tableTemplate>
       <lily-data-table
         [label]="label()"
@@ -1908,15 +2379,16 @@ var DataGrid = class DataGrid {
                 [attr.data-pinned]="column.pinned ?? null"
                 [attr.tabindex]="isGrid() ? (activeRow() === -1 && activeCol() === colOffset() + i ? 0 : -1) : null"
                 [attr.aria-sort]="ariaSortFor(column)"
+                [attr.data-sort-order]="sortOrderFor(column)"
                 [attr.aria-describedby]="column.type === 'rollup' && labels().rollupDescription ? gridId + '-' + column.id + '-description' : null"
                 [attr.style]="cellStyle(column)"
-                [attr.draggable]="column.movable ? 'true' : null"
+                [attr.draggable]="isMovable(column) ? 'true' : null"
                 (dragstart)="onHeaderDragStart(column, $event)"
                 (dragover)="onHeaderDragOver($event)"
                 (drop)="onHeaderDrop(column.id, $event)"
               >
                 @if (column.sortable) {
-                  <button type="button" class="data-grid-sort-button" data-grid-own [attr.tabindex]="isGrid() ? -1 : null" (click)="toggleSort(column)">
+                  <button type="button" class="data-grid-sort-button" data-grid-own [attr.tabindex]="isGrid() ? -1 : null" (click)="toggleSort(column, $any($event).shiftKey)">
                     @if (column.headerCell; as headerTemplate) {
                       <ng-container *ngTemplateOutlet="headerTemplate; context: { $implicit: column }" />
                     } @else {<ng-container>{{ column.header }}</ng-container>}
@@ -1993,6 +2465,7 @@ var DataGrid = class DataGrid {
                       [attr.data-cell-type]="column.type ?? null"
                       [attr.data-pinned]="column.pinned ?? null"
                       [attr.data-error]="column.errorOf?.(entry.row) !== undefined ? '' : null"
+                      [attr.data-empty]="isMissing(ctx.value) ? '' : null"
                       [attr.tabindex]="isGrid() ? (activeRow() === item.index && activeCol() === colOffset() + colIndex ? 0 : -1) : null"
                       [attr.style]="cellStyle(column)"
                       [lilyDataGridAttrs]="column.cellAttrs?.(ctx)"
@@ -2013,6 +2486,7 @@ var DataGrid = class DataGrid {
                       [attr.data-readonly]="column.type === 'rollup' ? '' : null"
                       [attr.aria-readonly]="column.type === 'rollup' ? 'true' : null"
                       [attr.data-error]="column.errorOf?.(entry.row) !== undefined ? '' : null"
+                      [attr.data-empty]="isMissing(ctx.value) ? '' : null"
                       [attr.data-editing]="isEditingCell(entry, column) ? '' : null"
                       [attr.tabindex]="isGrid() ? (activeRow() === item.index && activeCol() === colOffset() + colIndex ? 0 : -1) : null"
                       [attr.style]="cellStyle(column)"
@@ -2136,6 +2610,8 @@ var DataGrid = class DataGrid {
       } @else {
         @if (column.cell; as cellTemplate) {
           <ng-container *ngTemplateOutlet="cellTemplate; context: { $implicit: ctx }" />
+        } @else if (isMissing(ctx.value) && (column.emptyValue ?? emptyValue())) {
+          <ng-container>{{ column.emptyValue ?? emptyValue() }}</ng-container>
         } @else if (column.type === 'person') {
           @let people = peopleIn(ctx.value);
           @if (people.length > 0) {
@@ -2280,6 +2756,25 @@ var DataGrid = class DataGrid {
 					type: DataTableTH,
 					selector: "th[lily-data-table-th]",
 					inputs: ["scope", "className"]
+				},
+				{
+					kind: "component",
+					type: PaginationNav,
+					selector: "lily-pagination-nav",
+					inputs: ["label", "className"]
+				},
+				{
+					kind: "component",
+					type: SearchInput,
+					selector: "lily-search-input",
+					inputs: [
+						"label",
+						"className",
+						"value",
+						"required",
+						"disabled"
+					],
+					outputs: ["valueChange"]
 				}
 			],
 			changeDetection: i0.ChangeDetectionStrategy.OnPush
@@ -2305,18 +2800,31 @@ i0.ɵɵngDeclareClassMetadata({
 				DataTableHead,
 				DataTableRow,
 				DataTableTD,
-				DataTableTH
+				DataTableTH,
+				PaginationNav,
+				SearchInput
 			],
 			changeDetection: ChangeDetectionStrategy.OnPush,
 			template: `
     <div #rootEl class="data-grid {{ className() }}">
       @if (labels().search || hidableColumns().length > 0 || hasExportButtons()) {
         <div class="data-grid-toolbar">
+          @if (labels().search && labels().searchField && labels().searchAllFields) {
+            <select class="data-grid-search-field" [attr.aria-label]="labels().searchField" [value]="filterField()" (change)="onFilterFieldChange($event)">
+              <option value="">{{ labels().searchAllFields }}</option>
+              @for (c of filterableColumns(); track c.id) {
+                <option [value]="c.id">{{ c.header }}</option>
+              }
+            </select>
+          }
           @if (labels().search; as searchLabel) {
-            <input class="data-grid-search" type="search" [attr.aria-label]="searchLabel" [value]="filter()" (input)="onFilterInput($event)" />
+            <lily-search-input className="data-grid-search" [label]="searchLabel" [value]="filter()" (valueChange)="setFilter($event)" (keydown)="onFilterKeydown($event)" />
           }
           @if (hasExportButtons()) {
             <div class="data-grid-export" role="group" [attr.aria-label]="labels().export ?? null">
+              @if (labels().copy; as copy) {
+                <button type="button" class="data-grid-export-button" data-grid-export-format="copy" [disabled]="exportEntries().length === 0" (click)="runCopy()">{{ copy }}</button>
+              }
               @if (labels().exportCsv; as csv) {
                 <button type="button" class="data-grid-export-button" data-grid-export-format="csv" [disabled]="exportEntries().length === 0" (click)="runExport('csv')">{{ csv }}</button>
               }
@@ -2360,16 +2868,26 @@ i0.ɵɵngDeclareClassMetadata({
       }
 
       @if (pageSize()) {
-        <div class="data-grid-pagination">
-          <button type="button" class="data-grid-page-previous" [disabled]="clampedPage() <= 1" (click)="goToPage(clampedPage() - 1)">{{ labels().previousPage }}</button>
-          <span class="data-grid-page-status">{{ labels().pageStatus?.(clampedPage(), pageCount(), sortedEntries().length) }}</span>
-          <button type="button" class="data-grid-page-next" [disabled]="clampedPage() >= pageCount()" (click)="goToPage(clampedPage() + 1)">{{ labels().nextPage }}</button>
-        </div>
+        @if (labels().pagination; as pagination) {
+          <lily-pagination-nav className="data-grid-pagination" [label]="pagination">
+            <ng-container *ngTemplateOutlet="pager" />
+          </lily-pagination-nav>
+        } @else {
+          <div class="data-grid-pagination">
+            <ng-container *ngTemplateOutlet="pager" />
+          </div>
+        }
       }
 
       <p class="data-grid-status" aria-live="polite">{{ statusMessage() }}</p>
     </div>
 
+    <ng-template #pager>
+      <button type="button" class="data-grid-page-previous" [disabled]="clampedPage() <= 1" (click)="goToPage(clampedPage() - 1)">{{ labels().previousPage }}</button>
+      <span class="data-grid-page-status">{{ labels().pageStatus?.(clampedPage(), pageCount(), sortedEntries().length) }}</span>
+      <button type="button" class="data-grid-page-next" [disabled]="clampedPage() >= pageCount()" (click)="goToPage(clampedPage() + 1)">{{ labels().nextPage }}</button>
+    </ng-template>
+
     <ng-template #tableTemplate>
       <lily-data-table
         [label]="label()"
@@ -2417,15 +2935,16 @@ i0.ɵɵngDeclareClassMetadata({
                 [attr.data-pinned]="column.pinned ?? null"
                 [attr.tabindex]="isGrid() ? (activeRow() === -1 && activeCol() === colOffset() + i ? 0 : -1) : null"
                 [attr.aria-sort]="ariaSortFor(column)"
+                [attr.data-sort-order]="sortOrderFor(column)"
                 [attr.aria-describedby]="column.type === 'rollup' && labels().rollupDescription ? gridId + '-' + column.id + '-description' : null"
                 [attr.style]="cellStyle(column)"
-                [attr.draggable]="column.movable ? 'true' : null"
+                [attr.draggable]="isMovable(column) ? 'true' : null"
                 (dragstart)="onHeaderDragStart(column, $event)"
                 (dragover)="onHeaderDragOver($event)"
                 (drop)="onHeaderDrop(column.id, $event)"
               >
                 @if (column.sortable) {
-                  <button type="button" class="data-grid-sort-button" data-grid-own [attr.tabindex]="isGrid() ? -1 : null" (click)="toggleSort(column)">
+                  <button type="button" class="data-grid-sort-button" data-grid-own [attr.tabindex]="isGrid() ? -1 : null" (click)="toggleSort(column, $any($event).shiftKey)">
                     @if (column.headerCell; as headerTemplate) {
                       <ng-container *ngTemplateOutlet="headerTemplate; context: { $implicit: column }" />
                     } @else {<ng-container>{{ column.header }}</ng-container>}
@@ -2502,6 +3021,7 @@ i0.ɵɵngDeclareClassMetadata({
                       [attr.data-cell-type]="column.type ?? null"
                       [attr.data-pinned]="column.pinned ?? null"
                       [attr.data-error]="column.errorOf?.(entry.row) !== undefined ? '' : null"
+                      [attr.data-empty]="isMissing(ctx.value) ? '' : null"
                       [attr.tabindex]="isGrid() ? (activeRow() === item.index && activeCol() === colOffset() + colIndex ? 0 : -1) : null"
                       [attr.style]="cellStyle(column)"
                       [lilyDataGridAttrs]="column.cellAttrs?.(ctx)"
@@ -2522,6 +3042,7 @@ i0.ɵɵngDeclareClassMetadata({
                       [attr.data-readonly]="column.type === 'rollup' ? '' : null"
                       [attr.aria-readonly]="column.type === 'rollup' ? 'true' : null"
                       [attr.data-error]="column.errorOf?.(entry.row) !== undefined ? '' : null"
+                      [attr.data-empty]="isMissing(ctx.value) ? '' : null"
                       [attr.data-editing]="isEditingCell(entry, column) ? '' : null"
                       [attr.tabindex]="isGrid() ? (activeRow() === item.index && activeCol() === colOffset() + colIndex ? 0 : -1) : null"
                       [attr.style]="cellStyle(column)"
@@ -2645,6 +3166,8 @@ i0.ɵɵngDeclareClassMetadata({
       } @else {
         @if (column.cell; as cellTemplate) {
           <ng-container *ngTemplateOutlet="cellTemplate; context: { $implicit: ctx }" />
+        } @else if (isMissing(ctx.value) && (column.emptyValue ?? emptyValue())) {
+          <ng-container>{{ column.emptyValue ?? emptyValue() }}</ng-container>
         } @else if (column.type === 'person') {
           @let people = peopleIn(ctx.value);
           @if (people.length > 0) {
@@ -2774,6 +3297,46 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		emptyValue: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "emptyValue",
+				required: false
+			}]
+		}],
+		warnMissingLabels: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "warnMissingLabels",
+				required: false
+			}]
+		}],
+		nulls: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "nulls",
+				required: false
+			}]
+		}],
+		movableColumns: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "movableColumns",
+				required: false
+			}]
+		}],
+		rowFilter: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "rowFilter",
+				required: false
+			}]
+		}],
 		rowId: [{
 			type: i0.Input,
 			args: [{
@@ -2910,6 +3473,14 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		copyHandler: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "copyHandler",
+				required: false
+			}]
+		}],
 		virtualize: [{
 			type: i0.Input,
 			args: [{
@@ -2948,6 +3519,28 @@ i0.ɵɵngDeclareClassMetadata({
 			type: i0.Output,
 			args: ["filterChange"]
 		}],
+		filterField: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "filterField",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["filterFieldChange"]
+		}],
+		thenBy: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "thenBy",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["thenByChange"]
+		}],
 		sort: [{
 			type: i0.Input,
 			args: [{
@@ -3001,6 +3594,10 @@ i0.ɵɵngDeclareClassMetadata({
 			type: i0.Output,
 			args: ["exportFile"]
 		}],
+		copy: [{
+			type: i0.Output,
+			args: ["copy"]
+		}],
 		rootRef: [{
 			type: i0.ViewChild,
 			args: ["rootEl", { isSignal: true }]
@@ -3011,6 +3608,6 @@ i0.ɵɵngDeclareClassMetadata({
 		}]
 	}
 });
-export { DataGrid, DataGridAttrs, MIME_TYPES, aggregateValues, cellText, civilDateToDate, columnName, crc32, downloadBlob, exportBlob, exportFilename, filesOf, isCivilDate, isCivilTime, isExportFormula, isInvalidForType, isValidTimeZone, isZonedTime, linkLabel, linkParts, nextDataGridId, peopleOf, personName, resolveColumn, safeHref, toCsv, toDelimited, toTsv, toXlsx, zipStore, zonedMinutes, zonedUtcTime };
+export { ANNOUNCEMENT_LABELS, CONTROL_LABELS, DataGrid, DataGridAttrs, EMPTY_HISTORY, HISTORY_LIMIT, MIME_TYPES, TYPEAHEAD_RESET_MS, aggregateValues, cellText, civilDateToDate, columnName, copyToClipboard, crc32, downloadBlob, exportBlob, exportFilename, filesOf, findTypeaheadMatch, foldText, highlightSegments, historyKey, isCivilDate, isCivilTime, isExportFormula, isInvalidForType, isTypeaheadKey, isValidTimeZone, isZonedTime, linkLabel, linkParts, matchesSearch, missingLabels, nextDataGridId, nextTypeaheadState, peopleOf, personName, recordEdit, redoEdit, requiredLabels, resolveColumn, safeHref, searchTerms, toClipboardText, toCsv, toDelimited, toTsv, toXlsx, undoEdit, zipStore, zonedMinutes, zonedUtcTime };
 
 //# sourceMappingURL=lilydesignsystem-angular-data-grid.mjs.map