@ixfx/components 0.5.19 → 0.6.0

package/dist/data-grid.js

@@ -0,0 +1,1225 @@
+import { t as TickledController } from "./tickled-controller-DkAU-0qL.js";
+import { n as tickledStyles, t as tickledItemStyles } from "./tickled-styles-BrAHEj1q.js";
+import { t as themeFallbacks } from "./fallbacks-DEE1nCTt.js";
+import { n as safeCustomElement, t as __decorate } from "./decorate-VRK8rslU.js";
+import { t as createDragGhost } from "./drag-ghost-DtSDvjri.js";
+import { LitElement, css, html, nothing } from "lit";
+import { property, query, state } from "lit/decorators.js";
+import { repeat } from "lit/directives/repeat.js";
+//#region src/data-grid/data-grid.ts
+let DataGridElement = class DataGridElement extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.columns = [];
+		this.rows = [];
+		this.selectionMode = `single`;
+		this.interactionMode = `standard`;
+		this.sortState = null;
+		this.rowHeight = 28;
+		this.getRowKey = (r, i) => r.key ?? r.id ?? String(i);
+		this.editable = false;
+		this.editability = `user`;
+		this.groupBy = null;
+		this.allowGrouping = false;
+		this.crossGroupSelection = false;
+		this._columnFormatters = /* @__PURE__ */ new Map();
+		this._selectedKeys = /* @__PURE__ */ new Set();
+		this._scrollTop = 0;
+		this._scrollLeft = 0;
+		this._viewportH = 300;
+		this._viewportW = 600;
+		this._collapsedGroups = /* @__PURE__ */ new Set();
+		this._editing = null;
+		this._editingRow = null;
+		this._lastClick = null;
+		this._lastClickedCell = null;
+		this._editValue = ``;
+		this._tickled = new TickledController(this, {
+			getItems: () => this._flatKeys.map((k) => ({
+				id: k,
+				enabled: true
+			})),
+			onStateChange: () => this.requestUpdate()
+		});
+		this._sortedRows = [];
+		this._flat = [];
+		this._flatKeys = [];
+		this._visibleColumns = [];
+		this._colOffsets = [];
+		this._colWidthSum = 0;
+		this._raf = 0;
+		this._drag = null;
+		this._onFocusOut = (e) => {
+			if (this._suppressBlurCommit) return;
+			if (this.editability === `immediate`) return;
+			if (!this._editing && !this._editingRow) return;
+			const next = e.relatedTarget;
+			if (next && this.contains(next)) return;
+			this._editing = null;
+			this._editingRow = null;
+			this.requestUpdate();
+		};
+		this._onScroll = (e) => {
+			const el = e.target;
+			cancelAnimationFrame(this._raf);
+			this._raf = requestAnimationFrame(() => {
+				this._scrollTop = el.scrollTop;
+				this._scrollLeft = el.scrollLeft;
+				if (this._headerScrollEl) this._headerScrollEl.scrollLeft = el.scrollLeft;
+				this.requestUpdate();
+			});
+		};
+		this._onKeyDown = (e) => {
+			if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === `a`) {
+				if (this.selectionMode === `multiple` || this.interactionMode === `checked` || this.interactionMode === `sticky` || this.interactionMode === `vscode` || this.interactionMode === `standard`) {
+					e.preventDefault();
+					const prev = new Set(this._selectedKeys);
+					if (this.groupBy && !this.crossGroupSelection && this._anchorKey) {
+						const g = this._getGroupKey(this._getRowForKey(this._anchorKey) ?? { key: this._anchorKey });
+						this._selectedKeys = new Set(this._flat.filter((f) => f.type === `row` && this._getGroupKey(f.row) === g).map((f) => f.key));
+					} else this._selectedKeys = new Set(this._flat.filter((f) => f.type === `row`).map((f) => f.key));
+					this.dispatchEvent(new CustomEvent(`datagrid-select`, {
+						detail: {
+							selectedKeys: new Set(this._selectedKeys),
+							previous: prev
+						},
+						bubbles: true,
+						composed: true
+					}));
+				}
+				return;
+			}
+			if (this._editing && (e.key === `ArrowDown` || e.key === `ArrowUp`)) {
+				if ((this.shadowRoot?.activeElement)?.tagName === `SELECT`) return;
+				e.preventDefault();
+				const cur = this._editing;
+				const dir = e.key === `ArrowDown` ? 1 : -1;
+				const colKey = cur.colKey;
+				this._suppressBlurCommit = true;
+				this._commitEdit();
+				const rowKeys = this._flat.filter((f) => f.type === `row`).map((f) => f.key);
+				const idx = rowKeys.indexOf(cur.rowKey);
+				let nextIdx = idx + dir;
+				while (nextIdx >= 0 && nextIdx < rowKeys.length) {
+					const nk = rowKeys[nextIdx];
+					const row = this._sortedRows.find((r, i) => this.getRowKey(r, i) === nk);
+					const col = this._visibleColumns.find((c) => c.key === colKey);
+					if (row && col && this._isEditable(row, col)) {
+						this._startEdit(nk, colKey);
+						this._tickled.handleKeyboardNavigation(nextIdx > idx ? `next` : `previous`);
+						this._scrollRowIntoView(nk);
+						break;
+					}
+					nextIdx += dir;
+				}
+				if (nextIdx < 0 || nextIdx >= rowKeys.length) {
+					this._tickled.handleKeyboardNavigation(dir > 0 ? `next` : `previous`);
+					if (this._tickled.tickledId) this._scrollRowIntoView(this._tickled.tickledId);
+				}
+				requestAnimationFrame(() => {
+					this._suppressBlurCommit = false;
+				});
+				return;
+			}
+			if (e.key === `ArrowDown` || e.key === `ArrowUp` || e.key === `Home` || e.key === `End`) {
+				e.preventDefault();
+				this._tickled.setInputMode(`keyboard`);
+			}
+			switch (e.key) {
+				case `ArrowDown`:
+					this._tickled.handleKeyboardNavigation(`next`);
+					if (this._tickled.tickledId) this._scrollRowIntoView(this._tickled.tickledId);
+					if (this.interactionMode === `implicit` && this._tickled.tickledId) this._replaceSelection(this._tickled.tickledId);
+					if (e.shiftKey && (this.interactionMode === `standard` || this.interactionMode === `vscode`) && this._tickled.tickledId) this._rangeSelectTo(this._tickled.tickledId);
+					break;
+				case `ArrowUp`:
+					this._tickled.handleKeyboardNavigation(`previous`);
+					if (this._tickled.tickledId) this._scrollRowIntoView(this._tickled.tickledId);
+					if (this.interactionMode === `implicit` && this._tickled.tickledId) this._replaceSelection(this._tickled.tickledId);
+					if (e.shiftKey && (this.interactionMode === `standard` || this.interactionMode === `vscode`) && this._tickled.tickledId) this._rangeSelectTo(this._tickled.tickledId);
+					break;
+				case `Home`:
+					this._tickled.handleKeyboardNavigation(`first`);
+					if (this._tickled.tickledId) this._scrollRowIntoView(this._tickled.tickledId);
+					break;
+				case `End`:
+					this._tickled.handleKeyboardNavigation(`last`);
+					if (this._tickled.tickledId) this._scrollRowIntoView(this._tickled.tickledId);
+					break;
+				case `Enter`: {
+					const key = this._tickled.tickledId;
+					if (!key) break;
+					e.preventDefault();
+					if (!this._editing && this.editability === `user`) {
+						const idx = this._sortedRows.findIndex((r, i) => this.getRowKey(r, i) === key);
+						if (idx >= 0) {
+							const row = this._sortedRows[idx];
+							if (this._lastClickedCell?.rowKey === key) {
+								const col = this._visibleColumns.find((c) => c.key === this._lastClickedCell.colKey);
+								if (col && this._isEditable(row, col)) {
+									this._startEdit(key, col.key);
+									break;
+								}
+							}
+							const firstEditable = this._visibleColumns.find((c) => this._isEditable(row, c));
+							if (firstEditable) {
+								this._startEdit(key, firstEditable.key);
+								break;
+							}
+						}
+					}
+					if (!this._editing) {
+						const idx = this._sortedRows.findIndex((r, i) => this.getRowKey(r, i) === key);
+						if (this.interactionMode !== `manual` && this.interactionMode !== `checked`) this._replaceSelection(key);
+						this.dispatchEvent(new CustomEvent(`datagrid-cell-click`, {
+							detail: {
+								rowKey: key,
+								colKey: ``,
+								rowIndex: idx,
+								colIndex: -1
+							},
+							bubbles: true,
+							composed: true
+						}));
+					}
+					break;
+				}
+				case ` `: {
+					if (this._editing) {
+						if (this.columns.find((c) => c.key === this._editing.colKey)?.editor === `boolean`) {
+							e.preventDefault();
+							const isImmediate = this.editability === `immediate`;
+							const rowKey = this._editing.rowKey;
+							const colKey = this._editing.colKey;
+							const active = this.shadowRoot?.activeElement;
+							let next;
+							if (active?.type === `checkbox`) {
+								next = !active.checked;
+								active.checked = next;
+							} else {
+								const row = this._sortedRows.find((r, i) => this.getRowKey(r, i) === rowKey);
+								next = !(this._editValue !== `` ? Boolean(this._editValue) : Boolean(row?.[colKey]));
+							}
+							if (isImmediate) this._commitImmediate(rowKey, colKey, next);
+							else {
+								this._editValue = next;
+								this._commitEdit();
+							}
+						}
+						break;
+					}
+					const key = this._tickled.tickledId;
+					if (!key) break;
+					e.preventDefault();
+					if (this.interactionMode === `checked` || this.interactionMode === `sticky` || this.interactionMode === `standard` || this.interactionMode === `vscode` || this.interactionMode === `manual`) this._toggleSelection(key);
+					else this._replaceSelection(key);
+					break;
+				}
+				case `Escape`: if (this._editing || this._editingRow) {
+					e.preventDefault();
+					this._editing = null;
+					this._editingRow = null;
+					this.requestUpdate();
+				} else if (this._selectedKeys.size) {
+					e.preventDefault();
+					const prev = new Set(this._selectedKeys);
+					this._selectedKeys = /* @__PURE__ */ new Set();
+					this.dispatchEvent(new CustomEvent(`datagrid-select`, {
+						detail: {
+							selectedKeys: /* @__PURE__ */ new Set(),
+							previous: prev
+						},
+						bubbles: true,
+						composed: true
+					}));
+				}
+			}
+		};
+		this._suppressBlurCommit = false;
+	}
+	static {
+		this.styles = [
+			themeFallbacks,
+			tickledStyles,
+			tickledItemStyles,
+			css`
+    :host {
+      --data-grid-row-height: 28px;
+      --data-grid-header-height: 32px;
+      --data-grid-bg: var(--surface-3);
+      --data-grid-header-bg: var(--surface-2);
+      --data-grid-border: var(--border);
+      --data-grid-header-text: var(--surface-3-text);
+      display: block;
+      overflow: hidden;
+      border: var(--data-grid-border);
+      border-radius: var(--radius-m);
+      background: var(--data-grid-bg);
+      color: var(--surface-3-text);
+      font-family: var(--font-family);
+      font-size: var(--text-m);
+    }
+    :host(:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
+    .grid { display: flex; flex-direction: column; height: 100%; min-height: 200px; position: relative; }
+    .header-bar {
+      display: flex; align-items: stretch; height: var(--data-grid-header-height);
+      background: var(--data-grid-header-bg); border-bottom: var(--data-grid-border);
+      overflow: visible; flex-shrink: 0; position: relative;
+    }
+    .header-scroll {
+      display: flex; flex: 1; overflow: hidden;
+    }
+    .header-cell {
+      display: flex; align-items: center; gap: var(--space-xs);
+      padding: 0 var(--space-s); border-right: var(--border-subtle);
+      flex-shrink: 0; user-select: none; cursor: pointer; position: relative;
+      background: var(--data-grid-header-bg);
+      box-sizing: border-box;
+    }
+    .header-cell[data-tickled] { background: var(--surface-5); }
+    .header-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+    .sort-icon { font-size: 10px; opacity: 0.7; }
+    .resize-handle { position: absolute; right: 0; top: 0; bottom: 0; width: 8px; cursor: col-resize; z-index: 1; }
+    .reorder-handle { cursor: grab; opacity: 0.5; padding: 0 2px; }
+    .flyout-trigger { flex-shrink: 0; width: 36px; display: flex; align-items: center; justify-content: center; cursor: pointer; border-left: var(--border-subtle); background: var(--data-grid-header-bg); }
+    .viewport { flex: 1; overflow: auto; position: relative; }
+    .spacer { position: relative; }
+    .row.item {
+      position: absolute; left: 0; right: 0; display: flex; align-items: stretch;
+      gap: 0;
+      height: var(--data-grid-row-height);
+      border: none;
+      box-shadow: inset 0 0 0 1px var(--item-border-color, transparent);
+      background: var(--item-bg);
+      border-radius: var(--item-border-radius);
+      padding: 0;
+      box-sizing: border-box;
+    }
+    .row.item.tickled { background: var(--item-bg-tickled); border: var(--item-border-tickled); color: var(--item-text-tickled); }
+    .row.item.selected { background: var(--item-bg-selected); border: var(--item-border-selected); color: var(--item-text-selected); }
+    .row.item.selected.tickled { background: var(--item-bg-selected-tickled); }
+    .cell {
+      flex-shrink: 0; display: flex; align-items: center; padding: 0 var(--space-s);
+      overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-right: var(--border-subtle);
+      box-sizing: border-box;
+      font-variant-numeric: tabular-nums;
+    }
+    .cell.editable-text { cursor: text; }
+    .cell input, .cell select { width: 100%; font: inherit; }
+    .checkbox-col { width: 28px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
+    ixfx-menu-trigger { flex-shrink: 0; border-left: var(--border-subtle); background: var(--data-grid-header-bg); display: flex; align-items: center; --ixfx-button-padding: var(--space-s) var(--space-m); min-width: 44px; min-height: var(--data-grid-header-height); justify-content: center; }
+    .header-cell[drag-source] { opacity: 0.4; }
+    .drop-caret {
+      position: absolute; top: 0; bottom: 0; width: 2px;
+      background: var(--accent); border-radius: 1px; pointer-events: none; z-index: 2;
+    }
+    .group-row {
+      position: absolute; left: 0; right: 0; display: flex; align-items: center; gap: var(--space-s);
+      height: var(--data-grid-row-height); background: transparent; color: var(--surface-3-text);
+      border-bottom: 1px solid var(--border); font-weight: 600; padding: 0 var(--space-s);
+      cursor: pointer; user-select: none;
+    }
+    .group-row .caret { transition: transform 0.15s; display: inline-flex; }
+    .group-row.collapsed .caret { transform: rotate(-90deg); }
+    .group-row .divider { flex: 1; height: 1px; background: var(--border); margin-left: var(--space-s); }
+    .group-row .count { opacity: 0.6; font-weight: 400; font-size: 0.9em; }
+
+  `
+		];
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		if (!this.hasAttribute(`tabindex`)) this.tabIndex = 0;
+		this.addEventListener(`keydown`, this._onKeyDown);
+		this.addEventListener(`focusout`, this._onFocusOut);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.removeEventListener(`keydown`, this._onKeyDown);
+		this.removeEventListener(`focusout`, this._onFocusOut);
+		cancelAnimationFrame(this._raf);
+	}
+	firstUpdated() {
+		new ResizeObserver(() => {
+			if (!this._viewportEl) return;
+			this._viewportH = this._viewportEl.clientHeight;
+			this._viewportW = this._viewportEl.clientWidth;
+			this.requestUpdate();
+		}).observe(this._viewportEl);
+		this._viewportH = this._viewportEl.clientHeight;
+		this._viewportW = this._viewportEl.clientWidth;
+	}
+	updated(changed) {
+		super.updated(changed);
+		if (changed.has(`_editing`) || changed.has(`_editingRow`)) requestAnimationFrame(() => {
+			let sel = null;
+			if (this._editing) sel = `.row[data-key="${this._editing.rowKey}"] .cell[data-col="${this._editing.colKey}"] input, .row[data-key="${this._editing.rowKey}"] .cell[data-col="${this._editing.colKey}"] select`;
+			else if (this._editingRow) sel = `.row[data-key="${this._editingRow}"] .cell input, .row[data-key="${this._editingRow}"] .cell select`;
+			if (!sel) return;
+			const el = this.renderRoot.querySelector(sel);
+			el?.focus();
+			if (el instanceof HTMLInputElement && el.type === `text`) el.select();
+		});
+	}
+	willUpdate(changed) {
+		super.willUpdate(changed);
+		this.setAttribute(`data-input-mode`, this._tickled.inputMode);
+		if (changed.has(`rows`) || changed.has(`sortState`) || changed.has(`columns`) || changed.has(`groupBy`) || changed.has(`groupLabel`)) this._sortedRows = this._applySort([...this.rows]);
+		this._rebuildFlat();
+		this._visibleColumns = this.columns.filter((c) => c.visible !== false);
+		let off = 0;
+		this._colOffsets = this._visibleColumns.map((c) => {
+			const o = off;
+			off += c.width ?? 150;
+			return o;
+		});
+		this._colWidthSum = off;
+		if (this.interactionMode === `checked`) this._colWidthSum += 28;
+	}
+	_getGroupKey(row) {
+		if (!this.groupBy) return null;
+		if (typeof this.groupBy === `string`) return String(row[this.groupBy] ?? ``);
+		return String(this.groupBy(row));
+	}
+	_rebuildFlat() {
+		if (!this.groupBy) {
+			this._flat = this._sortedRows.map((r, i) => ({
+				type: `row`,
+				key: this.getRowKey(r, i),
+				row: r,
+				idx: i
+			}));
+			this._flatKeys = this._flat.map((f) => f.key);
+			return;
+		}
+		const groups = /* @__PURE__ */ new Map();
+		for (const r of this._sortedRows) {
+			const k = this._getGroupKey(r) ?? ``;
+			const arr = groups.get(k);
+			if (arr) arr.push(r);
+			else groups.set(k, [r]);
+		}
+		const flat = [];
+		const keys = [];
+		for (const [gKey, rows] of groups) {
+			const label = this.groupLabel ? this.groupLabel(gKey, rows) : gKey;
+			const gId = `__group__${gKey}`;
+			flat.push({
+				type: `group`,
+				key: gId,
+				label,
+				count: rows.length
+			});
+			keys.push(gId);
+			if (this._collapsedGroups.has(gKey)) continue;
+			for (const r of rows) {
+				const idx = this._sortedRows.indexOf(r);
+				const rk = this.getRowKey(r, idx);
+				flat.push({
+					type: `row`,
+					key: rk,
+					row: r,
+					idx
+				});
+				keys.push(rk);
+			}
+		}
+		this._flat = flat;
+		this._flatKeys = keys;
+	}
+	_toggleGroup(gKey) {
+		const next = new Set(this._collapsedGroups);
+		if (next.has(gKey)) next.delete(gKey);
+		else next.add(gKey);
+		this._collapsedGroups = next;
+	}
+	_applySort(rows) {
+		if (!this.sortState) return rows;
+		const col = this.columns.find((c) => c.key === this.sortState.key);
+		if (!col) return rows;
+		const dir = this.sortState.direction === `asc` ? 1 : -1;
+		if (col.sortFn) return rows.sort((a, b) => dir * col.sortFn(a, b));
+		return rows.sort((a, b) => {
+			const av = a[col.key];
+			const bv = b[col.key];
+			if (av === bv) return 0;
+			if (typeof av === `number` && typeof bv === `number`) return dir * (av - bv);
+			return dir * String(av).localeCompare(String(bv));
+		});
+	}
+	_onHeaderClick(col) {
+		if (col.sortable === false) return;
+		const prev = this.sortState;
+		let next = null;
+		if (!prev || prev.key !== col.key) next = {
+			key: col.key,
+			direction: `asc`
+		};
+		else if (prev.direction === `asc`) next = {
+			key: col.key,
+			direction: `desc`
+		};
+		else next = null;
+		this.sortState = next;
+		this.dispatchEvent(new CustomEvent(`datagrid-sort`, {
+			detail: {
+				sort: next,
+				previous: prev
+			},
+			bubbles: true,
+			composed: true
+		}));
+	}
+	_onRowClick(rowKey, col, e) {
+		if (col && col.selectable === false) return;
+		if (this.selectionMode === `none` && this.interactionMode !== `checked` && this.interactionMode !== `sticky`) return;
+		if (this.interactionMode === `manual`) return;
+		if (this.interactionMode === `implicit`) {
+			this._replaceSelection(rowKey);
+			return;
+		}
+		if (this.interactionMode === `checked`) return;
+		if (this.interactionMode === `sticky`) {
+			this._toggleSelection(rowKey);
+			return;
+		}
+		if (e.ctrlKey || e.metaKey) {
+			if (this.selectionMode === `multiple` || this.interactionMode === `vscode`) this._toggleSelection(rowKey);
+		} else if (e.shiftKey && (this.selectionMode === `multiple` || this.interactionMode === `vscode`)) this._rangeSelectTo(rowKey);
+		else this._replaceSelection(rowKey);
+	}
+	_onCheckboxClick(rowKey, e) {
+		e.stopPropagation();
+		this._onRowClick(rowKey, null, e);
+	}
+	_onVisibilityToggle(col, checked) {
+		col.visible = checked;
+		this.columns = [...this.columns];
+		this.dispatchEvent(new CustomEvent(`datagrid-column-visibility`, {
+			detail: {
+				key: col.key,
+				visible: checked
+			},
+			bubbles: true,
+			composed: true
+		}));
+	}
+	_beginHeaderDrag(e, col, idx) {
+		e.stopPropagation();
+		const anchor = e.currentTarget.closest(`.header-cell`) ?? e.currentTarget;
+		this._drag = {
+			pointerId: e.pointerId,
+			from: idx,
+			startX: e.clientX,
+			startY: e.clientY,
+			active: false,
+			ghost: null,
+			gap: void 0,
+			sourceCol: col
+		};
+		const onMove = (ev) => {
+			if (!this._drag || ev.pointerId !== this._drag.pointerId) return;
+			const dx = ev.clientX - this._drag.startX;
+			const dy = ev.clientY - this._drag.startY;
+			if (!this._drag.active) {
+				if (Math.hypot(dx, dy) < 5) return;
+				this._drag.active = true;
+				const content = document.createElement(`span`);
+				content.textContent = col.label;
+				try {
+					this._drag.ghost = createDragGhost({
+						anchor,
+						content
+					});
+					this._drag.ghost.move(ev.clientX, ev.clientY);
+				} catch {}
+				try {
+					this._headerScrollEl?.setPointerCapture(ev.pointerId);
+				} catch {}
+			}
+			this._drag.ghost?.move(ev.clientX, ev.clientY);
+			const x = ev.clientX - (this._headerScrollEl?.getBoundingClientRect().left ?? 0) + (this._headerScrollEl?.scrollLeft ?? 0);
+			let gap = this._drag.from;
+			let bestDist = Infinity;
+			for (let i = 0; i < this._visibleColumns.length; i++) {
+				if (i === this._drag.from) continue;
+				const rectLeft = this._colOffsets[i];
+				const rectRight = rectLeft + (this._visibleColumns[i].width ?? 150);
+				const mid = (rectLeft + rectRight) / 2;
+				const gapPos = x < mid ? rectLeft : rectRight;
+				const gapIdx = x < mid ? i : i + 1;
+				const d = Math.abs(x - gapPos);
+				if (d < bestDist) {
+					bestDist = d;
+					gap = gapIdx > this._drag.from ? gapIdx - 1 : gapIdx;
+				}
+			}
+			if (this._visibleColumns.length > 0) {
+				const lastOff = this._colOffsets[this._colOffsets.length - 1] + (this._visibleColumns[this._visibleColumns.length - 1].width ?? 150);
+				const d = Math.abs(x - lastOff);
+				if (d < bestDist) {
+					bestDist = d;
+					gap = this._visibleColumns.length - 1;
+					if (this._drag.from === this._visibleColumns.length - 1) gap = this._drag.from;
+					else if (gap >= this._drag.from) gap = this._visibleColumns.length - 1;
+				}
+			}
+			const siblings = this._visibleColumns.length - 1;
+			let normalizedGap = gap;
+			if (normalizedGap < 0) normalizedGap = 0;
+			if (normalizedGap > siblings) normalizedGap = siblings;
+			this._drag.gap = normalizedGap;
+			this.requestUpdate();
+		};
+		const onUp = (ev) => {
+			if (!this._drag || ev.pointerId !== this._drag.pointerId) return;
+			const active = this._drag.active;
+			const from = this._drag.from;
+			const gap = this._drag.gap;
+			this._drag.ghost?.destroy();
+			try {
+				this._headerScrollEl?.releasePointerCapture(ev.pointerId);
+			} catch {}
+			window.removeEventListener(`pointermove`, onMove);
+			window.removeEventListener(`pointerup`, onUp);
+			window.removeEventListener(`pointercancel`, onUp);
+			this._drag = null;
+			this.requestUpdate();
+			if (active && gap !== void 0 && gap !== from) this._onReorderDrag(from, gap);
+		};
+		window.addEventListener(`pointermove`, onMove);
+		window.addEventListener(`pointerup`, onUp);
+		window.addEventListener(`pointercancel`, onUp);
+	}
+	_onReorderDrag(fromIdx, toIdx) {
+		if (fromIdx === toIdx) return;
+		const cols = [...this.columns];
+		const vis = cols.filter((c) => c.visible !== false);
+		const hidden = cols.filter((c) => c.visible === false);
+		const [moved] = vis.splice(fromIdx, 1);
+		vis.splice(toIdx, 0, moved);
+		this.columns = [...vis, ...hidden];
+		this.dispatchEvent(new CustomEvent(`datagrid-column-reorder`, {
+			detail: {
+				from: fromIdx,
+				to: toIdx,
+				columns: [...this.columns]
+			},
+			bubbles: true,
+			composed: true
+		}));
+	}
+	_scrollRowIntoView(key) {
+		const idx = this._flat.findIndex((f) => f.key === key);
+		if (idx < 0 || !this._viewportEl) return;
+		const top = idx * this.rowHeight;
+		const bottom = top + this.rowHeight;
+		const vt = this._viewportEl.scrollTop;
+		const vb = vt + this._viewportEl.clientHeight;
+		if (top < vt) this._viewportEl.scrollTop = top;
+		else if (bottom > vb) this._viewportEl.scrollTop = bottom - this._viewportEl.clientHeight;
+	}
+	_getRowForKey(key) {
+		return this._flat.find((f) => f.key === key)?.row;
+	}
+	_replaceSelection(key) {
+		if (this.selectionMode === `none`) return;
+		const prev = new Set(this._selectedKeys);
+		if (this.groupBy && !this.crossGroupSelection) {
+			const g = this._getGroupKey(this._getRowForKey(key) ?? { key });
+			[...prev].filter((k) => this._getGroupKey(this._getRowForKey(k) ?? { key: k }) === g);
+			this._selectedKeys = /* @__PURE__ */ new Set([key]);
+		} else this._selectedKeys = /* @__PURE__ */ new Set([key]);
+		this._anchorKey = key;
+		this.dispatchEvent(new CustomEvent(`datagrid-select`, {
+			detail: {
+				selectedKeys: new Set(this._selectedKeys),
+				previous: prev
+			},
+			bubbles: true,
+			composed: true
+		}));
+	}
+	_toggleSelection(key) {
+		const prev = new Set(this._selectedKeys);
+		const next = new Set(this._selectedKeys);
+		if (next.has(key)) next.delete(key);
+		else {
+			if (this.groupBy && !this.crossGroupSelection) {
+				const g = this._getGroupKey(this._getRowForKey(key) ?? { key });
+				for (const k of [...next]) if (this._getGroupKey(this._getRowForKey(k) ?? { key: k }) !== g) next.delete(k);
+			}
+			if (this.selectionMode !== `multiple` && this.interactionMode !== `checked` && this.interactionMode !== `sticky`) next.clear();
+			next.add(key);
+		}
+		this._selectedKeys = next;
+		this._anchorKey = key;
+		this.dispatchEvent(new CustomEvent(`datagrid-select`, {
+			detail: {
+				selectedKeys: new Set(this._selectedKeys),
+				previous: prev
+			},
+			bubbles: true,
+			composed: true
+		}));
+	}
+	_rangeSelectTo(key) {
+		if (!this._anchorKey) {
+			this._replaceSelection(key);
+			return;
+		}
+		const keys = this._flat.filter((f) => f.type === `row`).map((f) => f.key);
+		const a = keys.indexOf(this._anchorKey);
+		const b = keys.indexOf(key);
+		if (a < 0 || b < 0) {
+			this._replaceSelection(key);
+			return;
+		}
+		if (this.groupBy && !this.crossGroupSelection) {
+			const anchorGroup = this._getGroupKey(this._getRowForKey(this._anchorKey) ?? { key: this._anchorKey });
+			if (anchorGroup !== this._getGroupKey(this._getRowForKey(key) ?? { key })) {
+				this._replaceSelection(key);
+				return;
+			}
+			const groupKeys = keys.filter((k) => this._getGroupKey(this._getRowForKey(k) ?? { key: k }) === anchorGroup);
+			const ga = groupKeys.indexOf(this._anchorKey);
+			const gb = groupKeys.indexOf(key);
+			if (ga < 0 || gb < 0) {
+				this._replaceSelection(key);
+				return;
+			}
+			const lo = Math.min(ga, gb);
+			const hi = Math.max(ga, gb);
+			const prev = new Set(this._selectedKeys);
+			this._selectedKeys = new Set(groupKeys.slice(lo, hi + 1));
+			this.dispatchEvent(new CustomEvent(`datagrid-select`, {
+				detail: {
+					selectedKeys: new Set(this._selectedKeys),
+					previous: prev
+				},
+				bubbles: true,
+				composed: true
+			}));
+			return;
+		}
+		const lo = Math.min(a, b);
+		const hi = Math.max(a, b);
+		const prev = new Set(this._selectedKeys);
+		this._selectedKeys = new Set(keys.slice(lo, hi + 1));
+		this.dispatchEvent(new CustomEvent(`datagrid-select`, {
+			detail: {
+				selectedKeys: new Set(this._selectedKeys),
+				previous: prev
+			},
+			bubbles: true,
+			composed: true
+		}));
+	}
+	_isEditable(row, col) {
+		if (this.editability === `disabled`) return false;
+		if (typeof this.editable === `function`) return this.editable(row, col);
+		if (this.editable === true) return col.editable !== false;
+		return !!col.editable;
+	}
+	_isTextEditor(col) {
+		const e = col.editor;
+		return !e || e === `text` || e === `number`;
+	}
+	_isCellEditing(rowKey, colKey) {
+		if (this.editability === `immediate` && this._isEditable(this._sortedRows.find((r, i) => this.getRowKey(r, i) === rowKey) ?? {}, this.columns.find((c) => c.key === colKey))) return true;
+		if (this._editingRow === rowKey) return this._isEditable(this._sortedRows.find((r, i) => this.getRowKey(r, i) === rowKey) ?? {}, this.columns.find((c) => c.key === colKey));
+		return this._editing?.rowKey === rowKey && this._editing?.colKey === colKey;
+	}
+	_startEdit(rowKey, colKey) {
+		if (this.editability === `disabled`) return;
+		const row = this._sortedRows.find((r, i) => this.getRowKey(r, i) === rowKey);
+		if (!row) return;
+		const col = this.columns.find((c) => c.key === colKey);
+		if (!col || !this._isEditable(row, col)) return;
+		this._editing = {
+			rowKey,
+			colKey
+		};
+		this._editingRow = null;
+		this._editValue = row[colKey];
+	}
+	/** Programmatic: put a single cell in edit mode. Works in manual/user/immediate (no-op if disabled or not editable). */
+	startEdit(rowKey, colKey) {
+		this._startEdit(rowKey, colKey);
+	}
+	/** Programmatic: put all editable cells of a row in edit mode. */
+	startRowEdit(rowKey) {
+		if (this.editability === `disabled`) return;
+		if (!this._sortedRows.find((r, i) => this.getRowKey(r, i) === rowKey)) return;
+		this._editing = null;
+		this._editingRow = rowKey;
+		this.requestUpdate();
+	}
+	stopEdit() {
+		this._editing = null;
+		this._editingRow = null;
+	}
+	setColumnFormatter(columnKey, formatter, options) {
+		if (!formatter) {
+			this._columnFormatters.delete(columnKey);
+			this.requestUpdate();
+			return;
+		}
+		if (typeof formatter === `string`) {
+			const digits = options?.digits ?? (formatter === `integer` ? 0 : 2);
+			if (formatter === `fixed`) this._columnFormatters.set(columnKey, (v) => typeof v === `number` && Number.isFinite(v) ? v.toFixed(digits) : String(v ?? ``));
+			else if (formatter === `percentage`) this._columnFormatters.set(columnKey, (v) => typeof v === `number` && Number.isFinite(v) ? `${v.toFixed(digits)}%` : String(v ?? ``));
+			else if (formatter === `integer`) this._columnFormatters.set(columnKey, (v) => typeof v === `number` && Number.isFinite(v) ? Math.round(v).toString() : String(v ?? ``));
+		} else this._columnFormatters.set(columnKey, formatter);
+		this.requestUpdate();
+	}
+	_formatValue(value, col, row) {
+		const perCol = this._columnFormatters.get(col.key);
+		if (perCol) return perCol(value);
+		if (col.formatter) return col.formatter(value, row, col);
+		if (this.globalFormatter) return this.globalFormatter(value, col.key, row);
+		return value;
+	}
+	_handleCellSecondClick(rowKey, col) {
+		if (this.editability !== `user`) return;
+		const now = Date.now();
+		if (this._lastClick && this._lastClick.key === rowKey && this._lastClick.col === col.key && now - this._lastClick.time < 700 && now - this._lastClick.time > 150) {
+			this._startEdit(rowKey, col.key);
+			this._lastClick = null;
+		} else this._lastClick = {
+			key: rowKey,
+			col: col.key,
+			time: now
+		};
+	}
+	_commitEdit(fromImmediate = false) {
+		if (!this._editing && !fromImmediate) return;
+		const target = this._editing;
+		if (!target) return;
+		const { rowKey, colKey } = target;
+		const row = this._sortedRows.find((r, i) => this.getRowKey(r, i) === rowKey);
+		if (!row) {
+			this._editing = null;
+			return;
+		}
+		const oldValue = row[colKey];
+		const newValue = this._editValue;
+		const col = this.columns.find((c) => c.key === colKey);
+		if (col?.editor && typeof col.editor === `function`) {} else {
+			row[colKey] = newValue;
+			this.rows = [...this.rows];
+		}
+		this._editing = null;
+		this.dispatchEvent(new CustomEvent(`datagrid-cell-edit`, {
+			detail: {
+				rowKey,
+				colKey,
+				oldValue,
+				newValue
+			},
+			bubbles: true,
+			composed: true
+		}));
+	}
+	_tabToNext(rowKey, curColKey, dir) {
+		const row = this._sortedRows.find((r, i) => this.getRowKey(r, i) === rowKey);
+		if (!row) return;
+		const cols = this._visibleColumns;
+		let next = cols.findIndex((c) => c.key === curColKey) + dir;
+		while (next >= 0 && next < cols.length) {
+			if (this._isEditable(row, cols[next])) {
+				if (this._editing) this._commitEdit();
+				this._suppressBlurCommit = true;
+				this._startEdit(rowKey, cols[next].key);
+				requestAnimationFrame(() => {
+					this._suppressBlurCommit = false;
+				});
+				return;
+			}
+			next += dir;
+		}
+		if (this._editing) this._commitEdit();
+		this._editing = null;
+		this.requestUpdate();
+	}
+	_commitImmediate(rowKey, colKey, value) {
+		const row = this._sortedRows.find((r, i) => this.getRowKey(r, i) === rowKey);
+		if (!row) return;
+		const oldValue = row[colKey];
+		if (oldValue === value) return;
+		row[colKey] = value;
+		this.rows = [...this.rows];
+		this.dispatchEvent(new CustomEvent(`datagrid-cell-edit`, {
+			detail: {
+				rowKey,
+				colKey,
+				oldValue,
+				newValue: value
+			},
+			bubbles: true,
+			composed: true
+		}));
+	}
+	_autoSizeColumn(col) {
+		const cs = getComputedStyle(this);
+		const font = `${cs.fontSize} ${cs.fontFamily}`;
+		const ctx = document.createElement(`canvas`).getContext(`2d`);
+		const cellPad = 32;
+		const headerExtra = 40;
+		const measure = (text) => {
+			if (!ctx) return text.length * 8;
+			ctx.font = font;
+			return Math.ceil(ctx.measureText(text).width);
+		};
+		let maxW = measure(col.label) + headerExtra;
+		for (const r of this.rows) {
+			const v = r[col.key];
+			if (v === null || v === void 0 || v === ``) continue;
+			const w = measure(String(v)) + cellPad;
+			if (w > maxW) maxW = w;
+		}
+		const min = col.minWidth ?? 40;
+		const max = col.maxWidth ?? 600;
+		const w = Math.max(min, Math.min(max, maxW));
+		col.width = w;
+		this.requestUpdate();
+		this.dispatchEvent(new CustomEvent(`datagrid-column-resize`, {
+			detail: {
+				key: col.key,
+				width: w
+			},
+			bubbles: true,
+			composed: true
+		}));
+	}
+	_onResizePointerDown(e, col) {
+		e.preventDefault();
+		e.stopPropagation();
+		const startX = e.clientX;
+		const startW = col.width ?? 150;
+		const onMove = (ev) => {
+			col.width = Math.max(col.minWidth ?? 40, Math.min(col.maxWidth ?? 600, startW + ev.clientX - startX));
+			this.requestUpdate();
+		};
+		const onUp = (ev) => {
+			window.removeEventListener(`pointermove`, onMove);
+			window.removeEventListener(`pointerup`, onUp);
+			const w = Math.max(col.minWidth ?? 40, Math.min(col.maxWidth ?? 600, startW + ev.clientX - startX));
+			this.dispatchEvent(new CustomEvent(`datagrid-column-resize`, {
+				detail: {
+					key: col.key,
+					width: w
+				},
+				bubbles: true,
+				composed: true
+			}));
+		};
+		window.addEventListener(`pointermove`, onMove);
+		window.addEventListener(`pointerup`, onUp);
+	}
+	getVisibleRange() {
+		const rh = this.rowHeight;
+		return {
+			startRow: Math.max(0, Math.floor(this._scrollTop / rh) - 2),
+			endRow: Math.min(this._flat.length, Math.ceil((this._scrollTop + this._viewportH) / rh) + 2),
+			startCol: this._findFirstVisibleCol(this._scrollLeft),
+			endCol: this._findLastVisibleCol(this._scrollLeft + this._viewportW)
+		};
+	}
+	_findFirstVisibleCol(scrollLeft) {
+		let lo = 0;
+		let hi = this._colOffsets.length - 1;
+		let ans = 0;
+		while (lo <= hi) {
+			const mid = lo + hi >> 1;
+			if (this._colOffsets[mid] <= scrollLeft) {
+				ans = mid;
+				lo = mid + 1;
+			} else hi = mid - 1;
+		}
+		return ans;
+	}
+	_findLastVisibleCol(right) {
+		for (let i = 0; i < this._colOffsets.length; i++) if (this._colOffsets[i] > right) return i;
+		return this._colOffsets.length;
+	}
+	render() {
+		const rh = this.rowHeight;
+		const startRow = Math.max(0, Math.floor(this._scrollTop / rh) - 2);
+		const endRow = Math.min(this._flat.length, Math.ceil((this._scrollTop + this._viewportH) / rh) + 2);
+		const visibleFlat = this._flat.slice(startRow, endRow);
+		const showCheckbox = this.interactionMode === `checked`;
+		return html`
+      <div class="grid" style="height:400px">
+        <div class="header-bar">
+          <div class="header-scroll">
+            ${showCheckbox ? html`<div class="header-cell checkbox-col"></div>` : nothing}
+            ${repeat(this._visibleColumns, (c) => c.key, (col, idx) => html`
+              <div class="header-cell" style="width:${col.width ?? 150}px" ?drag-source=${this._drag?.active && this._drag.sourceCol.key === col.key}
+                @click=${() => this._onHeaderClick(col)}
+                @pointerenter=${() => this._tickled.handlePointerEnter(col.key)}>
+                ${col.reorderable !== false ? html`<span class="reorder-handle" draggable="false"
+                  @pointerdown=${(e) => this._beginHeaderDrag(e, col, idx)}
+                >⠿</span>` : nothing}
+                <span class="header-label">${col.label}</span>
+                ${this.sortState?.key === col.key ? html`<span class="sort-icon">${this.sortState.direction === `asc` ? `▲` : `▼`}</span>` : nothing}
+                ${col.resizable !== false ? html`<span class="resize-handle" @pointerdown=${(e) => this._onResizePointerDown(e, col)} @click=${(e) => e.stopPropagation()} @dblclick=${(e) => {
+			e.preventDefault();
+			e.stopPropagation();
+			this._autoSizeColumn(col);
+		}}></span>` : nothing}
+              </div>
+            `)}
+            ${this._drag?.active && this._drag.gap !== void 0 ? html`<div class="drop-caret" style="left:${(() => {
+			const gap = this._drag.gap;
+			if (gap < this._colOffsets.length) return this._colOffsets[gap];
+			const last = this._colOffsets.length - 1;
+			return last >= 0 ? this._colOffsets[last] + (this._visibleColumns[last].width ?? 150) : 0;
+		})()}px"></div>` : nothing}
+          </div>
+          <ixfx-menu-trigger label="⚙" placement="bottom-end" @menu-command=${(e) => {
+			const cmd = e.detail.command;
+			const checked = e.detail.checked;
+			const value = e.detail.value;
+			if (cmd?.startsWith(`col:`)) {
+				const key = cmd.slice(4);
+				const col = this.columns.find((c) => c.key === key);
+				if (col) this._onVisibilityToggle(col, !!checked);
+				e.stopPropagation();
+				return;
+			}
+			if (cmd === `groupBy`) {
+				const v = value ?? ``;
+				this.groupBy = v || null;
+				this._collapsedGroups = /* @__PURE__ */ new Set();
+				this.dispatchEvent(new CustomEvent(`datagrid-group-change`, {
+					detail: { groupBy: this.groupBy },
+					bubbles: true,
+					composed: true
+				}));
+				e.stopPropagation();
+			}
+		}}>
+            <ixfx-menu-container slot="menu">
+              <ixfx-menu-header label="Columns"></ixfx-menu-header>
+              ${repeat(this.columns, (c) => c.key, (col) => html`
+                <ixfx-menu-check-item command="col:${col.key}" label=${col.label} ?checked=${col.visible !== false}></ixfx-menu-check-item>
+              `)}
+              ${this.allowGrouping ? html`
+                <ixfx-menu-separator></ixfx-menu-separator>
+                <ixfx-menu-header label="Group by"></ixfx-menu-header>
+                <ixfx-menu-radio-group name="groupBy" value=${typeof this.groupBy === `string` ? this.groupBy : ``}>
+                  <ixfx-menu-radio-item value="" label="None"></ixfx-menu-radio-item>
+                  ${this.columns.filter((c) => c.groupable !== false && (!this.groupableColumns || this.groupableColumns.includes(c.key))).map((col) => html`
+                    <ixfx-menu-radio-item value=${col.key} label=${col.label}></ixfx-menu-radio-item>
+                  `)}
+                </ixfx-menu-radio-group>
+              ` : nothing}
+            </ixfx-menu-container>
+          </ixfx-menu-trigger>
+        </div>
+        <div class="viewport" @scroll=${this._onScroll}>
+          <div class="spacer" style="height:${this._flat.length * rh}px; width:${this._colWidthSum}px">
+            ${repeat(visibleFlat, (f) => f.key, (entry, i) => {
+			const absIdx = startRow + i;
+			if (entry.type === `group`) {
+				const gKey = entry.key.replace(/^__group__/, ``);
+				const collapsed = this._collapsedGroups.has(gKey);
+				return html`<div class="group-row ${collapsed ? `collapsed` : ``}" style="top:${absIdx * rh}px; height:${rh}px" @click=${() => this._toggleGroup(gKey)}><span class="caret">▼</span><span>${entry.label}</span><span class="count">(${entry.count})</span><span class="divider"></span></div>`;
+			}
+			const row = entry.row;
+			const absIdx2 = entry.idx;
+			const rowKey = entry.key;
+			const selected = this._selectedKeys.has(rowKey);
+			const tickled = this._tickled.isTickled(rowKey);
+			return html`
+                <div class="row item ${selected ? `selected` : ``} ${tickled ? `tickled` : ``}" style="top:${absIdx * rh}px; height:${rh}px"
+                  data-key=${rowKey}
+                  @click=${(e) => {
+				this._onRowClick(rowKey, null, e);
+				this.dispatchEvent(new CustomEvent(`datagrid-cell-click`, {
+					detail: {
+						rowKey,
+						colKey: ``,
+						rowIndex: absIdx2,
+						colIndex: -1
+					},
+					bubbles: true,
+					composed: true
+				}));
+			}}
+                  @pointerenter=${() => this._tickled.handlePointerEnter(rowKey)}
+                  @pointerleave=${() => this._tickled.clearTickled()}
+                  @dblclick=${() => {
+				if (this._visibleColumns[0] && this._isEditable(row, this._visibleColumns[0])) this._startEdit(rowKey, this._visibleColumns[0].key);
+			}}>
+                  ${showCheckbox ? html`<div class="checkbox-col"><input type="checkbox" .checked=${selected} @click=${(e) => this._onCheckboxClick(rowKey, e)} /></div>` : nothing}
+                  ${repeat(this._visibleColumns, (c) => c.key, (col) => {
+				const val = row[col.key];
+				if (this._isCellEditing(rowKey, col.key)) {
+					const immediate = this.editability === `immediate` || this._editingRow === rowKey;
+					const curVal = immediate ? val : this._editValue ?? val;
+					if (col.editor === `boolean` || col.editor === `boolean`) return html`<div class="cell" data-col=${col.key} style="width:${col.width ?? 150}px;justify-content:center;align-items:center"><input type="checkbox" .checked=${Boolean(curVal)} @change=${(e) => {
+						const v = e.target.checked;
+						if (immediate) this._commitImmediate(rowKey, col.key, v);
+						else {
+							this._editValue = v;
+							this._commitEdit();
+						}
+					}} /></div>`;
+					if (col.editor === `select`) {
+						const opts = col.editorOptions ?? [];
+						return html`<div class="cell" data-col=${col.key} style="width:${col.width ?? 150}px"><select @change=${(e) => {
+							const v = e.target.value;
+							if (immediate) this._commitImmediate(rowKey, col.key, v);
+							else {
+								this._editValue = v;
+								this._commitEdit();
+							}
+						}} @keydown=${(e) => {
+							if (e.key === `Tab`) {
+								e.preventDefault();
+								e.stopPropagation();
+								this._tabToNext(rowKey, col.key, e.shiftKey ? -1 : 1);
+							}
+							if (e.key === `Escape`) {
+								this._editing = null;
+								this._editingRow = null;
+							}
+						}} @blur=${() => {
+							if (this._suppressBlurCommit) return;
+							if (!immediate) this._commitEdit();
+						}}><option value=""></option>${opts.map((o) => {
+							const v = typeof o === `string` ? o : o.value;
+							const l = typeof o === `string` ? o : o.label;
+							return html`<option value=${v} ?selected=${String(curVal) === v}>${l}</option>`;
+						})}</select></div>`;
+					}
+					if (typeof col.editor === `function`) {
+						const factory = col.editor;
+						const ctx = {
+							row,
+							column: col,
+							rowIndex: absIdx2,
+							colIndex: 0,
+							value: curVal,
+							commit: (v) => {
+								if (immediate) this._commitImmediate(rowKey, col.key, v);
+								else {
+									this._editValue = v;
+									this._commitEdit();
+								}
+							},
+							cancel: () => {
+								this._editing = null;
+								this._editingRow = null;
+							}
+						};
+						return html`<div class="cell" data-col=${col.key} style="width:${col.width ?? 150}px">${factory(ctx)}</div>`;
+					}
+					return html`<div class="cell" data-col=${col.key} style="width:${col.width ?? 150}px"><input .value=${String(curVal ?? ``)} @input=${(e) => this._editValue = e.target.value} @keydown=${(e) => {
+						if (e.key === `Enter`) this._commitEdit();
+						if (e.key === `Escape`) {
+							this._editing = null;
+							this._editingRow = null;
+						}
+						if (e.key === `Tab`) {
+							e.preventDefault();
+							e.stopPropagation();
+							this._tabToNext(rowKey, col.key, e.shiftKey ? -1 : 1);
+						}
+					}} @blur=${() => {
+						if (this._suppressBlurCommit) return;
+						if (!immediate) this._commitEdit();
+					}} autofocus /></div>`;
+				}
+				const displayVal = this._formatValue(val, col, row);
+				const rendered = col.renderer ? col.renderer(row, col, absIdx2) : displayVal;
+				const cellContent = col.renderer ? rendered : displayVal;
+				const textEditable = this._isEditable(row, col) && this._isTextEditor(col);
+				return html`<div class="cell ${textEditable ? `editable-text` : ``}" data-col=${col.key} style="width:${col.width ?? 150}px; justify-content:${col.align === `right` ? `flex-end` : col.align === `center` ? `center` : `flex-start`}"
+                      @click=${(e) => {
+					this._lastClickedCell = {
+						rowKey,
+						colKey: col.key
+					};
+					if (col.selectable !== false) {
+						e.stopPropagation();
+						this._onRowClick(rowKey, col, e);
+						this._handleCellSecondClick(rowKey, col);
+					}
+					this.dispatchEvent(new CustomEvent(`datagrid-cell-click`, {
+						detail: {
+							rowKey,
+							colKey: col.key,
+							rowIndex: absIdx2,
+							colIndex: this.columns.indexOf(col)
+						},
+						bubbles: true,
+						composed: true
+					}));
+				}}
+                    >${cellContent}</div>`;
+			})}
+                </div>
+              `;
+		})}
+          </div>
+        </div>
+      </div>
+    `;
+	}
+};
+__decorate([property({ type: Array })], DataGridElement.prototype, "columns", void 0);
+__decorate([property({ type: Array })], DataGridElement.prototype, "rows", void 0);
+__decorate([property({
+	type: String,
+	attribute: `selection-mode`
+})], DataGridElement.prototype, "selectionMode", void 0);
+__decorate([property({
+	type: String,
+	attribute: `interaction-mode`
+})], DataGridElement.prototype, "interactionMode", void 0);
+__decorate([property({ attribute: false })], DataGridElement.prototype, "sortState", void 0);
+__decorate([property({
+	type: Number,
+	attribute: `row-height`
+})], DataGridElement.prototype, "rowHeight", void 0);
+__decorate([property({ attribute: false })], DataGridElement.prototype, "getRowKey", void 0);
+__decorate([property({ attribute: false })], DataGridElement.prototype, "checkboxRenderer", void 0);
+__decorate([property({ attribute: false })], DataGridElement.prototype, "editable", void 0);
+__decorate([property({
+	type: String,
+	reflect: true
+})], DataGridElement.prototype, "editability", void 0);
+__decorate([property({ attribute: false })], DataGridElement.prototype, "groupBy", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: `allow-grouping`
+})], DataGridElement.prototype, "allowGrouping", void 0);
+__decorate([property({ attribute: false })], DataGridElement.prototype, "groupLabel", void 0);
+__decorate([property({ attribute: false })], DataGridElement.prototype, "groupableColumns", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: `cross-group-selection`,
+	reflect: true
+})], DataGridElement.prototype, "crossGroupSelection", void 0);
+__decorate([property({ attribute: false })], DataGridElement.prototype, "globalFormatter", void 0);
+__decorate([state()], DataGridElement.prototype, "_selectedKeys", void 0);
+__decorate([state()], DataGridElement.prototype, "_scrollTop", void 0);
+__decorate([state()], DataGridElement.prototype, "_scrollLeft", void 0);
+__decorate([state()], DataGridElement.prototype, "_viewportH", void 0);
+__decorate([state()], DataGridElement.prototype, "_viewportW", void 0);
+__decorate([state()], DataGridElement.prototype, "_collapsedGroups", void 0);
+__decorate([state()], DataGridElement.prototype, "_editing", void 0);
+__decorate([state()], DataGridElement.prototype, "_editingRow", void 0);
+__decorate([state()], DataGridElement.prototype, "_lastClick", void 0);
+__decorate([state()], DataGridElement.prototype, "_lastClickedCell", void 0);
+__decorate([state()], DataGridElement.prototype, "_editValue", void 0);
+__decorate([query(`.viewport`)], DataGridElement.prototype, "_viewportEl", void 0);
+__decorate([query(`.header-scroll`)], DataGridElement.prototype, "_headerScrollEl", void 0);
+DataGridElement = __decorate([safeCustomElement(`ixfx-data-grid`)], DataGridElement);
+//#endregion
+export { DataGridElement };
+
+//# sourceMappingURL=data-grid.js.map