@iyulab/flex-table 0.12.0 → 0.13.0

package/dist/{flex-table-DJvbRtBl.js → flex-table-zJST_6sy.js}

@@ -236,6 +236,36 @@ var s = t`
     appearance: auto;
   }
 
+  .ft-autocomplete-dropdown {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    z-index: 100;
+    min-width: 100%;
+    max-height: 180px;
+    overflow-y: auto;
+    background: var(--ft-editor-bg, #fff);
+    border: 1px solid var(--ft-active-color);
+    border-top: none;
+    box-shadow: 0 4px 8px rgba(0,0,0,0.12);
+  }
+
+  .ft-autocomplete-item {
+    padding: 4px 8px;
+    cursor: pointer;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    font-size: var(--ft-font-size, 14px);
+    color: var(--ft-text-color);
+  }
+
+  .ft-autocomplete-item:hover,
+  .ft-autocomplete-item.ft-autocomplete-active {
+    background: var(--ft-selection-bg);
+    color: var(--ft-active-color);
+  }
+
   .ft-cell.ft-type-number {
     text-align: right;
     font-variant-numeric: tabular-nums;
@@ -439,6 +469,56 @@ var s = t`
     box-sizing: border-box;
   }
 
+  /* Header context menu */
+  .ft-header-menu {
+    background: var(--ft-editor-bg, #fff);
+    border: 1px solid var(--ft-border-color);
+    box-shadow: 0 2px 8px rgba(0,0,0,0.16);
+    min-width: 160px;
+    border-radius: 4px;
+    overflow: hidden;
+  }
+
+  .ft-header-menu-item {
+    padding: 6px 12px;
+    cursor: pointer;
+    font-size: var(--ft-font-size, 14px);
+    color: var(--ft-text-color);
+    white-space: nowrap;
+  }
+
+  .ft-header-menu-item:hover {
+    background: var(--ft-selection-bg);
+    color: var(--ft-active-color);
+  }
+
+  /* Hidden column indicator in header */
+  .ft-hidden-col-indicator {
+    position: absolute;
+    left: 0;
+    top: 0;
+    height: 100%;
+    width: 16px;
+    background: var(--ft-selection-bg);
+    border-right: 2px solid var(--ft-active-color);
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 10px;
+    color: var(--ft-active-color);
+    padding: 0;
+    border-top: none;
+    border-bottom: none;
+    border-left: none;
+    flex-shrink: 0;
+  }
+
+  .ft-hidden-col-indicator:hover {
+    background: var(--ft-active-color);
+    color: white;
+  }
+
   /* Find / Replace panel */
   .ft-find-panel {
     position: sticky;
@@ -524,30 +604,60 @@ var s = t`
   }
 `;
 //#endregion
+//#region src/renderers/format.ts
+function c(e, t) {
+	return e == null ? "" : typeof t == "function" ? t(e) : l(t) ? d(e, t) : u(e, t);
+}
+function l(e) {
+	return /[yMdHhms]/.test(e);
+}
+function u(e, t) {
+	let n = typeof e == "number" ? e : Number(e);
+	if (isNaN(n)) return String(e);
+	let r = t.endsWith("%"), i = t.match(/^([^#0.,%]+)/), a = i ? i[1] : "", o = t.replace(/^[^#0.,%]+/, "").replace(/%$/, ""), s = o.match(/\.([0#]+)$/), c = s ? s[1].length : 0, l = {
+		minimumFractionDigits: c,
+		maximumFractionDigits: c,
+		useGrouping: o.includes(",")
+	}, u;
+	return r ? u = new Intl.NumberFormat(void 0, {
+		...l,
+		style: "percent"
+	}).format(n) : (u = new Intl.NumberFormat(void 0, l).format(n), a && (u = a + u)), u + "";
+}
+function d(e, t) {
+	let n;
+	if (e instanceof Date) n = e;
+	else if (typeof e == "string" || typeof e == "number") n = new Date(e);
+	else return String(e);
+	if (isNaN(n.getTime())) return String(e);
+	let r = String(n.getFullYear()), i = r.slice(-2), a = String(n.getMonth() + 1).padStart(2, "0"), o = String(n.getDate()).padStart(2, "0"), s = String(n.getHours()).padStart(2, "0"), c = String(n.getHours() % 12 || 12).padStart(2, "0"), l = String(n.getMinutes()).padStart(2, "0"), u = String(n.getSeconds()).padStart(2, "0");
+	return t.replace("yyyy", r).replace("yy", i).replace("MM", a).replace("dd", o).replace("HH", s).replace("hh", c).replace("mm", l).replace("ss", u);
+}
+//#endregion
 //#region src/renderers/cell-renderer.ts
-function c(e, t, n) {
-	return n.renderer ? n.renderer(e, t, n) : l(e, n);
+function f(e, t, n) {
+	return n.renderer ? n.renderer(e, t, n) : n.format ? typeof n.format == "function" ? n.format(e, t, n) : c(e, n.format) : p(e, n);
 }
-function l(e, t) {
+function p(e, t) {
 	if (e == null) return "";
 	switch (t.type) {
-		case "number": return d(e);
+		case "number": return h(e);
 		case "boolean": return n`<span class="ft-bool">${e ? "✔" : ""}</span>`;
-		case "date": return f(e);
-		case "datetime": return p(e);
-		case "select": return u(e, t);
+		case "date": return g(e);
+		case "datetime": return _(e);
+		case "select": return m(e, t);
 		default: return String(e);
 	}
 }
-function u(e, t) {
+function m(e, t) {
 	if (!t.options || t.options.length === 0 || typeof t.options[0] == "string") return e == null ? "" : String(e);
 	let n = t.options.find((t) => t.value === e);
 	return n ? n.label : e == null ? "" : String(e);
 }
-function d(e) {
+function h(e) {
 	return typeof e == "number" ? Number.isInteger(e) ? e.toLocaleString() : e.toLocaleString(void 0, { minimumFractionDigits: 1 }) : String(e);
 }
-function f(e) {
+function g(e) {
 	if (e instanceof Date) return e.toLocaleDateString();
 	if (typeof e == "string") {
 		let t = new Date(e);
@@ -555,7 +665,7 @@ function f(e) {
 	}
 	return String(e);
 }
-function p(e) {
+function _(e) {
 	if (e instanceof Date) return e.toLocaleString();
 	if (typeof e == "string") {
 		let t = new Date(e);
@@ -565,7 +675,7 @@ function p(e) {
 }
 //#endregion
 //#region src/core/selection.ts
-function m(e) {
+function v(e) {
 	return {
 		startRow: Math.min(e.startRow, e.endRow),
 		startCol: Math.min(e.startCol, e.endCol),
@@ -573,7 +683,7 @@ function m(e) {
 		endCol: Math.max(e.startCol, e.endCol)
 	};
 }
-var h = class {
+var y = class {
 	constructor() {
 		this.activeCell = null, this.rangeAnchor = null, this.range = null, this.extraRanges = [], this._rowCount = 0, this._colCount = 0;
 	}
@@ -600,7 +710,7 @@ var h = class {
 		return e < 0 || e >= this._rowCount || t < 0 || t >= this._colCount ? this.activeCell : (!this.rangeAnchor && this.activeCell && (this.rangeAnchor = { ...this.activeCell }), this.activeCell = {
 			row: e,
 			col: t
-		}, this.rangeAnchor && (this.range = m({
+		}, this.rangeAnchor && (this.range = v({
 			startRow: this.rangeAnchor.row,
 			startCol: this.rangeAnchor.col,
 			endRow: e,
@@ -671,7 +781,7 @@ var h = class {
 	shiftMoveRight() {
 		return this.activeCell ? this.setActiveWithRange(this.activeCell.row, this.activeCell.col + 1) : null;
 	}
-}, g = class {
+}, b = class {
 	constructor() {
 		this.current = null;
 	}
@@ -692,7 +802,7 @@ var h = class {
 		let e = this.current;
 		return this.current = null, e;
 	}
-}, _ = class {
+}, x = class {
 	constructor() {
 		this._selected = /* @__PURE__ */ new Set(), this._mode = "multi", this._rowCount = 0;
 	}
@@ -745,7 +855,7 @@ var h = class {
 };
 //#endregion
 //#region src/core/sorting.ts
-function v(e, t, n) {
+function S(e, t, n) {
 	let r = Array.from({ length: e.length }, (e, t) => t);
 	if (t.length === 0) return r;
 	let i = /* @__PURE__ */ new Map();
@@ -756,13 +866,13 @@ function v(e, t, n) {
 			if (c && l) continue;
 			if (c) return 1;
 			if (l) return -1;
-			let u = y(t, s, i.get(a) ?? "text");
+			let u = C(t, s, i.get(a) ?? "text");
 			if (u !== 0) return o === "asc" ? u : -u;
 		}
 		return n - r;
 	}), r;
 }
-function y(e, t, n) {
+function C(e, t, n) {
 	switch (n) {
 		case "number": {
 			let n = Number(e), r = Number(t);
@@ -777,7 +887,7 @@ function y(e, t, n) {
 		default: return String(e).localeCompare(String(t));
 	}
 }
-function b(e, t, n) {
+function w(e, t, n) {
 	let r = e.find((e) => e.key === t);
 	return n ? r ? r.direction === "asc" ? e.map((e) => e.key === t ? {
 		...e,
@@ -795,7 +905,7 @@ function b(e, t, n) {
 }
 //#endregion
 //#region src/core/filtering.ts
-function x(e, t, n) {
+function T(e, t, n) {
 	if (t.length === 0) return Array.from({ length: e.length }, (e, t) => t);
 	let r = [];
 	for (let i = 0; i < e.length; i++) {
@@ -814,9 +924,9 @@ function x(e, t, n) {
 }
 //#endregion
 //#region src/core/undo.ts
-var S = 100, C = class {
+var E = 100, D = class {
 	constructor() {
-		this._undoStack = [], this._redoStack = [], this._maxSize = S;
+		this._undoStack = [], this._redoStack = [], this._maxSize = E;
 	}
 	get maxSize() {
 		return this._maxSize;
@@ -853,7 +963,7 @@ var S = 100, C = class {
 };
 //#endregion
 //#region src/clipboard/clipboard.ts
-function w(e, t, n) {
+function O(e, t, n) {
 	let r = [];
 	for (let i = n.startRow; i <= n.endRow; i++) {
 		let a = e[i], o = [];
@@ -865,7 +975,7 @@ function w(e, t, n) {
 	}
 	return r.join("\n");
 }
-function T(e) {
+function k(e) {
 	let t = e.replace(/\r\n/g, "\n").replace(/\r/g, "\n"), n = [], r = [], i = 0, a = t.length;
 	for (; i <= a;) {
 		if (i === a) {
@@ -894,7 +1004,7 @@ function T(e) {
 	}
 	return n;
 }
-function E(e, t) {
+function A(e, t) {
 	if (e === "") return null;
 	switch (t.type) {
 		case "number": {
@@ -907,23 +1017,23 @@ function E(e, t) {
 }
 //#endregion
 //#region src/export/export.ts
-function D(e, t, n) {
+function j(e, t, n) {
 	switch (n) {
-		case "csv": return k(e, t, ",");
-		case "tsv": return k(e, t, "	");
-		case "json": return j(e, t);
+		case "csv": return N(e, t, ",");
+		case "tsv": return N(e, t, "	");
+		case "json": return F(e, t);
 	}
 }
-function O(e, t) {
+function M(e, t) {
 	return e == null ? "" : (t.type === "date" || t.type === "datetime") && e instanceof Date ? e.toISOString() : String(e);
 }
-function k(e, t, n) {
-	return [t.map((e) => A(e.header, n)).join(n), ...e.map((e) => t.map((t) => A(O(e[t.key], t), n)).join(n))].join("\n");
+function N(e, t, n) {
+	return [t.map((e) => P(e.header, n)).join(n), ...e.map((e) => t.map((t) => P(M(e[t.key], t), n)).join(n))].join("\n");
 }
-function A(e, t) {
+function P(e, t) {
 	return e.includes(t) || e.includes("\"") || e.includes("\n") || e.includes("\r") ? "\"" + e.replace(/"/g, "\"\"") + "\"" : e;
 }
-function j(e, t) {
+function F(e, t) {
 	let n = e.map((e) => {
 		let n = {};
 		for (let r of t) {
@@ -934,28 +1044,28 @@ function j(e, t) {
 	});
 	return JSON.stringify(n, null, 2);
 }
-function M(e, t, n) {
+function I(e, t, n) {
 	let r = new Blob([e], { type: n }), i = URL.createObjectURL(r), a = document.createElement("a");
 	a.href = i, a.download = t, a.style.display = "none", document.body.appendChild(a), a.click(), document.body.removeChild(a), setTimeout(() => URL.revokeObjectURL(i), 100);
 }
-var N = {
+var L = {
 	csv: "text/csv;charset=utf-8",
 	tsv: "text/tab-separated-values;charset=utf-8",
 	json: "application/json;charset=utf-8"
-}, P = {
+}, R = {
 	csv: ".csv",
 	tsv: ".tsv",
 	json: ".json"
 };
-function F(e) {
-	return N[e];
+function z(e) {
+	return L[e];
 }
-function I(e) {
-	return P[e];
+function B(e) {
+	return R[e];
 }
 //#endregion
 //#region \0@oxc-project+runtime@0.130.0/helpers/decorate.js
-function L(e, t, n, r) {
+function V(e, t, n, r) {
 	var i = arguments.length, a = i < 3 ? t : r === null ? r = Object.getOwnPropertyDescriptor(t, n) : r, o;
 	if (typeof Reflect == "object" && typeof Reflect.decorate == "function") a = Reflect.decorate(e, t, n, r);
 	else for (var s = e.length - 1; s >= 0; s--) (o = e[s]) && (a = (i < 3 ? o(a) : i > 3 ? o(t, n, a) : o(t, n)) || a);
@@ -963,9 +1073,9 @@ function L(e, t, n, r) {
 }
 //#endregion
 //#region src/flex-table.ts
-var R = 120, z = 40, B = 32, V = 5, H = class extends e {
+var H = 120, U = 40, W = 32, G = 5, K = class extends e {
 	constructor(...e) {
-		super(...e), this.columns = [], this.data = [], this.rowHeight = B, this.showRowNumbers = !1, this.theme = void 0, this.maxRows = 0, this.editable = !0, this.showFilters = !1, this.selectable = !1, this.dataMode = "client", this.footerData = null, this._scrollTop = 0, this._scrollLeft = 0, this._viewportHeight = 0, this._viewportWidth = 0, this._colLeftOffsets = [], this._totalRowWidth = 0, this._activeCell = null, this._editingCell = null, this._sortCriteria = [], this._selection = new h(), this._editing = new g(), this._rowSelection = new _(), this._undo = new C(), this._filters = [], this._filteredIndices = [], this._sortedIndices = [], this._openFilterKey = null, this._rowSelectionVersion = 0, this._viewDirty = !0, this._isDragging = !1, this._wasDrag = !1, this._resizing = null, this._resizeCleanup = null, this._colDrag = null, this._colDragIndicatorLeft = null, this._fillDrag = null, this._rowDrag = null, this._rowDragIndicatorY = null, this._findState = null, this._columnWidths = /* @__PURE__ */ new Map(), this._hostResizeObserver = null, this._invalidCells = /* @__PURE__ */ new Map(), this._textFilterState = /* @__PURE__ */ new Map(), this._numberFilterState = /* @__PURE__ */ new Map(), this._dateFilterState = /* @__PURE__ */ new Map();
+		super(...e), this.columns = [], this.data = [], this.rowHeight = W, this.showRowNumbers = !1, this.theme = void 0, this.maxRows = 0, this.editable = !0, this.showFilters = !1, this.selectable = !1, this.dataMode = "client", this.footerData = null, this._scrollTop = 0, this._scrollLeft = 0, this._viewportHeight = 0, this._viewportWidth = 0, this._colLeftOffsets = [], this._totalRowWidth = 0, this._activeCell = null, this._editingCell = null, this._sortCriteria = [], this._selection = new y(), this._editing = new b(), this._rowSelection = new x(), this._undo = new D(), this._filters = [], this._filteredIndices = [], this._sortedIndices = [], this._openFilterKey = null, this._rowSelectionVersion = 0, this._autocompleteState = null, this._headerMenu = null, this._viewDirty = !0, this._isDragging = !1, this._wasDrag = !1, this._resizing = null, this._resizeCleanup = null, this._colDrag = null, this._colDragIndicatorLeft = null, this._fillDrag = null, this._rowDrag = null, this._rowDragIndicatorY = null, this._findState = null, this._columnWidths = /* @__PURE__ */ new Map(), this._hostResizeObserver = null, this._invalidCells = /* @__PURE__ */ new Map(), this._textFilterState = /* @__PURE__ */ new Map(), this._numberFilterState = /* @__PURE__ */ new Map(), this._dateFilterState = /* @__PURE__ */ new Map();
 	}
 	static {
 		this.styles = s;
@@ -1149,6 +1259,29 @@ var R = 120, z = 40, B = 32, V = 5, H = class extends e {
 			composed: !0
 		})), this._dispatchUndoStateEvent();
 	}
+	hideColumn(e) {
+		this._setColumnHidden(e, !0);
+	}
+	showColumn(e) {
+		this._setColumnHidden(e, !1);
+	}
+	_setColumnHidden(e, t) {
+		let n = this.columns.findIndex((t) => t.key === e);
+		n !== -1 && (this.columns = this.columns.map((e, r) => r === n ? {
+			...e,
+			hidden: t
+		} : e), this.dispatchEvent(new CustomEvent("column-visibility-change", {
+			detail: {
+				key: e,
+				hidden: t
+			},
+			bubbles: !0,
+			composed: !0
+		})));
+	}
+	getHiddenColumns() {
+		return this.columns.filter((e) => e.hidden);
+	}
 	addRow(e, t) {
 		if (this.maxRows > 0 && this.data.length >= this.maxRows) return null;
 		let n = e ?? this._createEmptyRow(), r = t ?? this.data.length;
@@ -1251,12 +1384,12 @@ var R = 120, z = 40, B = 32, V = 5, H = class extends e {
 			if (!t) return "";
 			let n = this.visibleColumns.slice(t.startCol, t.endCol + 1), r = [];
 			for (let e = t.startRow; e <= t.endRow; e++) r.push(this.data[this._toDataIndex(e)]);
-			return D(r, n, e);
+			return j(r, n, e);
 		}
-		return D(this._sortedIndices.map((e) => this.data[e]), this.visibleColumns, e);
+		return j(this._sortedIndices.map((e) => this.data[e]), this.visibleColumns, e);
 	}
 	exportToFile(e, t) {
-		M(this.exportToString(e), t ?? `export${I(e)}`, F(e));
+		I(this.exportToString(e), t ?? `export${B(e)}`, z(e));
 	}
 	_getSelectedDataRows() {
 		let e = this._selection.getEffectiveRange();
@@ -1269,8 +1402,8 @@ var R = 120, z = 40, B = 32, V = 5, H = class extends e {
 		return this._columnWidths.get(e);
 	}
 	_getColWidth(e) {
-		let t = this._columnWidths.get(e.key) ?? e.width ?? R;
-		return Math.max(t, e.minWidth ?? z);
+		let t = this._columnWidths.get(e.key) ?? e.width ?? H;
+		return Math.max(t, e.minWidth ?? U);
 	}
 	get headerHeight() {
 		return this.rowHeight + 8;
@@ -1282,10 +1415,10 @@ var R = 120, z = 40, B = 32, V = 5, H = class extends e {
 		return this._visibleRowCount * this.rowHeight;
 	}
 	get visibleRange() {
-		let e = Math.max(0, this._scrollTop - this.headerHeight), t = Math.max(0, Math.floor(e / this.rowHeight) - V), n = Math.ceil(this._viewportHeight / this.rowHeight);
+		let e = Math.max(0, this._scrollTop - this.headerHeight), t = Math.max(0, Math.floor(e / this.rowHeight) - G), n = Math.ceil(this._viewportHeight / this.rowHeight);
 		return {
 			start: t,
-			end: Math.min(this._visibleRowCount, Math.floor(e / this.rowHeight) + n + V)
+			end: Math.min(this._visibleRowCount, Math.floor(e / this.rowHeight) + n + G)
 		};
 	}
 	connectedCallback() {
@@ -1318,13 +1451,13 @@ var R = 120, z = 40, B = 32, V = 5, H = class extends e {
 			i = r;
 			break;
 		}
-		i = Math.max(0, i - V);
+		i = Math.max(0, i - G);
 		let a = e.length;
 		for (let e = i; e < t.length; e++) if (t[e] > r) {
 			a = e;
 			break;
 		}
-		return a = Math.min(e.length, a + V), {
+		return a = Math.min(e.length, a + G), {
 			start: i,
 			end: a
 		};
@@ -1340,7 +1473,7 @@ var R = 120, z = 40, B = 32, V = 5, H = class extends e {
 			this._filteredIndices = Array.from({ length: this.data.length }, (e, t) => t), this._sortedIndices = this._filteredIndices;
 			return;
 		}
-		if (this._filteredIndices = x(this.data, this._filters, (e, t, n) => {
+		if (this._filteredIndices = T(this.data, this._filters, (e, t, n) => {
 			this.dispatchEvent(new CustomEvent("filter-error", {
 				detail: {
 					error: e,
@@ -1353,7 +1486,7 @@ var R = 120, z = 40, B = 32, V = 5, H = class extends e {
 		}), this._filters.length === 0 && this._sortCriteria.length === 0) this._sortedIndices = Array.from({ length: this.data.length }, (e, t) => t);
 		else if (this._sortCriteria.length === 0) this._sortedIndices = [...this._filteredIndices];
 		else {
-			let e = v(this._filteredIndices.map((e) => this.data[e]), this._sortCriteria, this.visibleColumns);
+			let e = S(this._filteredIndices.map((e) => this.data[e]), this._sortCriteria, this.visibleColumns);
 			this._sortedIndices = e.map((e) => this._filteredIndices[e]);
 		}
 	}
@@ -1373,7 +1506,7 @@ var R = 120, z = 40, B = 32, V = 5, H = class extends e {
 		this._scrollTop = this.scrollTop, this._scrollLeft = this.scrollLeft;
 	}
 	_onDocumentClick() {
-		this._openFilterKey &&= null;
+		this._openFilterKey &&= null, this._headerMenu &&= null;
 	}
 	_onContextMenu(e) {
 		let t = e.composedPath().find((e) => e instanceof HTMLElement && e.classList.contains("ft-cell"));
@@ -1467,14 +1600,30 @@ var R = 120, z = 40, B = 32, V = 5, H = class extends e {
 		}
 		let t = this.shadowRoot?.querySelector(".ft-editor");
 		if (t) {
-			let n = E(t.value, e);
+			let n = A(t.value, e);
 			this._applyEdit(n);
 		} else this._cancelEdit();
 	}
 	_applyEdit(e) {
+		this._autocompleteState = null;
 		let t = this._editing.commit();
 		if (this._editingCell = null, !t) return;
 		let { row: n, col: r } = t.position, i = this._toDataIndex(n), a = this.visibleColumns[r], o = t.originalValue;
+		if (a.autocomplete === "strict" && e != null && e !== "" && !this._getAutocompleteCandidates(a, "").includes(String(e))) {
+			let t = "Value must be from the existing list";
+			this._markCellInvalid(n, r, t), this.dispatchEvent(new CustomEvent("validation-error", {
+				detail: {
+					row: i,
+					col: r,
+					key: a.key,
+					value: e,
+					error: t
+				},
+				bubbles: !0,
+				composed: !0
+			}));
+			return;
+		}
 		if (a.validator) {
 			let t = a.validator(e, this.data[i], a);
 			if (t) {
@@ -1513,6 +1662,7 @@ var R = 120, z = 40, B = 32, V = 5, H = class extends e {
 		})), this._dispatchUndoStateEvent();
 	}
 	_cancelEdit() {
+		this._autocompleteState = null;
 		let e = this._editing.cancel();
 		this._editingCell = null, e && this.dispatchEvent(new CustomEvent("cell-edit-cancel", {
 			detail: {
@@ -1524,8 +1674,56 @@ var R = 120, z = 40, B = 32, V = 5, H = class extends e {
 		}));
 	}
 	_onEditorKeyDown(e) {
+		if (this._autocompleteState && this._autocompleteState.candidates.length > 0) {
+			if (e.key === "ArrowDown") {
+				e.preventDefault(), e.stopPropagation();
+				let t = this._autocompleteState.candidates.length;
+				this._autocompleteState = {
+					...this._autocompleteState,
+					activeIndex: Math.min(this._autocompleteState.activeIndex + 1, t - 1)
+				};
+				return;
+			}
+			if (e.key === "ArrowUp") {
+				e.preventDefault(), e.stopPropagation(), this._autocompleteState = {
+					...this._autocompleteState,
+					activeIndex: Math.max(this._autocompleteState.activeIndex - 1, -1)
+				};
+				return;
+			}
+			if (e.key === "Enter" && this._autocompleteState.activeIndex >= 0) {
+				e.preventDefault(), e.stopPropagation();
+				let t = this._autocompleteState.candidates[this._autocompleteState.activeIndex];
+				this._selectAutocompleteCandidate(t);
+				return;
+			}
+			if (e.key === "Escape") {
+				e.preventDefault(), e.stopPropagation(), this._autocompleteState = null;
+				return;
+			}
+		}
 		e.key === "Enter" ? (e.preventDefault(), e.stopPropagation(), this._commitEdit(), this._selection.moveDown(), this._syncActiveCell()) : e.key === "Tab" ? (e.preventDefault(), e.stopPropagation(), this._commitEdit(), e.shiftKey ? this._selection.movePrev() : this._selection.moveNext(), this._syncActiveCell()) : e.key === "Escape" && (e.preventDefault(), e.stopPropagation(), this._cancelEdit());
 	}
+	_getAutocompleteCandidates(e, t) {
+		let n = t.toLowerCase(), r = /* @__PURE__ */ new Set(), i = [];
+		for (let a of this.data) {
+			let o = a[e.key];
+			if (o == null) continue;
+			let s = String(o);
+			if (!r.has(s) && (t === "" || s.toLowerCase().includes(n)) && (r.add(s), i.push(s), i.length >= 20)) break;
+		}
+		return i;
+	}
+	_onAutocompleteInput(e, t) {
+		let n = e.target.value, r = this._getAutocompleteCandidates(t, n).filter((e) => e !== n);
+		this._autocompleteState = r.length > 0 ? {
+			candidates: r,
+			activeIndex: -1
+		} : null;
+	}
+	_selectAutocompleteCandidate(e) {
+		this._autocompleteState = null, this._applyEdit(e), this._selection.moveDown(), this._syncActiveCell();
+	}
 	_syncActiveCell() {
 		this._activeCell = this._selection.activeCell ? { ...this._selection.activeCell } : null, this._scrollToActiveCell(), this._dispatchSelectionEvent();
 	}
@@ -1595,7 +1793,7 @@ var R = 120, z = 40, B = 32, V = 5, H = class extends e {
 		e.preventDefault();
 		let n = t[this._activeCell.col];
 		if (!n) return !0;
-		let r = this._columnWidths.get(n.key) ?? n.width ?? R, i = e.key === "ArrowRight" ? 20 : -20, a = n.minWidth ?? z, o = Math.max(a, r + i);
+		let r = this._columnWidths.get(n.key) ?? n.width ?? H, i = e.key === "ArrowRight" ? 20 : -20, a = n.minWidth ?? U, o = Math.max(a, r + i);
 		return this._columnWidths.set(n.key, o), this.requestUpdate(), this.dispatchEvent(new CustomEvent("column-resize", {
 			detail: {
 				key: n.key,
@@ -1624,7 +1822,7 @@ var R = 120, z = 40, B = 32, V = 5, H = class extends e {
 	async _handleCopy(e) {
 		let t = this._selection.getEffectiveRange();
 		if (!t) return;
-		let n = this.visibleColumns, r = w(this._sortedIndices.map((e) => this.data[e]), n, t);
+		let n = this.visibleColumns, r = O(this._sortedIndices.map((e) => this.data[e]), n, t);
 		try {
 			await navigator.clipboard.writeText(r);
 		} catch (e) {
@@ -1650,7 +1848,7 @@ var R = 120, z = 40, B = 32, V = 5, H = class extends e {
 		if (!this._activeCell) return;
 		let e = await this._readClipboardText();
 		if (e == null) return;
-		let t = T(e);
+		let t = k(e);
 		if (t.length === 0) return;
 		let n = this._expandRowsForPaste(this._activeCell.row, t.length), r = this._applyPasteData(this._activeCell, t);
 		if (r.length > 0 || n.length > 0) {
@@ -1708,7 +1906,7 @@ var R = 120, z = 40, B = 32, V = 5, H = class extends e {
 			for (let a = 0; a < t[i].length; a++) {
 				let s = e.col + a;
 				if (s >= n.length) break;
-				let c = n[s], l = this.data[o][c.key], u = E(t[i][a], c);
+				let c = n[s], l = this.data[o][c.key], u = A(t[i][a], c);
 				this.data[o][c.key] = u, r.push({
 					row: o,
 					col: s,
@@ -1773,7 +1971,7 @@ var R = 120, z = 40, B = 32, V = 5, H = class extends e {
 			for (let r = e.startCol + 1; r <= e.endCol; r++) {
 				let e = t[r];
 				if (!e || !this._isCellEditable(e)) continue;
-				let a = E(o == null ? "" : String(o), e);
+				let a = A(o == null ? "" : String(o), e);
 				n.push({
 					row: i,
 					key: e.key,
@@ -1864,7 +2062,7 @@ var R = 120, z = 40, B = 32, V = 5, H = class extends e {
 			this._selectColumn(n);
 			return;
 		}
-		t.sortable !== !1 && (this._sortCriteria = b(this._sortCriteria, t.key, e.shiftKey), this.dataMode !== "server" && this._recomputeView(), this.requestUpdate(), this.dispatchEvent(new CustomEvent("sort-change", {
+		t.sortable !== !1 && (this._sortCriteria = w(this._sortCriteria, t.key, e.shiftKey), this.dataMode !== "server" && this._recomputeView(), this.requestUpdate(), this.dispatchEvent(new CustomEvent("sort-change", {
 			detail: { criteria: [...this._sortCriteria] },
 			bubbles: !0,
 			composed: !0
@@ -1906,15 +2104,25 @@ var R = 120, z = 40, B = 32, V = 5, H = class extends e {
 			c || l ? "ft-pinned" : ""
 		].filter(Boolean).join(" "), d = i ? a ? a.direction === "asc" ? "ascending" : "descending" : "none" : void 0, f = this._getColWidth(e), p = this.headerHeight, m = this._colLeftOffsets[t] ?? 0, h;
 		h = c ? `position: absolute; top: 0; left: ${this._scrollLeft + this._getPinnedLeft(t)}px; width: ${f}px; height: ${p}px; z-index: 4;` : l ? `position: absolute; top: 0; right: ${-this._scrollLeft + this._getPinnedRight(t)}px; width: ${f}px; height: ${p}px; z-index: 4;` : `left: ${m}px; width: ${f}px; height: ${p}px;`;
-		let g = this._colDrag?.active && this._colDrag.colIndex === t;
+		let g = this._colDrag?.active && this._colDrag.colIndex === t, _ = [...u.split(" "), g ? "ft-col-dragging" : ""].filter(Boolean).join(" "), v = this.columns, y = v.findIndex((t) => t.key === e.key), b = [];
+		if (y > 0) for (let e = y - 1; e >= 0 && v[e].hidden; e--) b.push(v[e]);
+		let x = b.length > 0;
 		return n`
-      <div class=${[...u.split(" "), g ? "ft-col-dragging" : ""].filter(Boolean).join(" ")}
+      <div class=${_}
         role="columnheader"
         data-col-index=${t}
         style=${h}
         aria-sort=${d ?? r}
+        @contextmenu=${(t) => this._onHeaderContextMenu(t, e)}
         @mousedown=${(n) => this._onHeaderMouseDown(n, e, t)}
         @click=${i ? (t) => this._onHeaderClick(t, e) : void 0}>
+        ${x ? n`
+          <button class="ft-hidden-col-indicator"
+            title="Show hidden column(s)"
+            @click=${(t) => {
+			t.stopPropagation(), this._showHiddenBefore(e);
+		}}>&#x276F;</button>
+        ` : ""}
         <span>${e.header}</span>
         ${a ? n`<span class="ft-sort-indicator">${a.direction === "asc" ? "▲" : "▼"}</span>` : ""}
         ${o >= 0 ? n`<span class="ft-sort-order">${o + 1}</span>` : ""}
@@ -1935,6 +2143,56 @@ var R = 120, z = 40, B = 32, V = 5, H = class extends e {
       </div>
       ${this._openFilterKey === e.key ? this._renderFilterDropdown(e) : ""}
     `;
+	}
+	_onHeaderContextMenu(e, t) {
+		e.preventDefault();
+		let n = this.columns, r = n.findIndex((e) => e.key === t.key), i = [];
+		for (let e = r - 1; e >= 0 && n[e].hidden; e--) i.push(n[e]);
+		for (let e = r + 1; e < n.length && n[e].hidden; e++) i.push(n[e]);
+		this._headerMenu = {
+			key: t.key,
+			x: e.clientX,
+			y: e.clientY,
+			hiddenNeighbors: i
+		}, this.dispatchEvent(new CustomEvent("header-context-menu", {
+			detail: {
+				key: t.key,
+				header: t.header,
+				x: e.clientX,
+				y: e.clientY
+			},
+			bubbles: !0,
+			composed: !0
+		})), requestAnimationFrame(() => {
+			document.addEventListener("click", this._onDocumentClick, { once: !0 });
+		});
+	}
+	_showHiddenBefore(e) {
+		let t = this.columns, n = t.findIndex((t) => t.key === e.key);
+		for (let e = n - 1; e >= 0 && t[e].hidden; e--) this._setColumnHidden(t[e].key, !1);
+	}
+	_renderHeaderContextMenu() {
+		if (!this._headerMenu) return r;
+		let { key: e, x: t, y: i, hiddenNeighbors: a } = this._headerMenu;
+		return this.columns.find((t) => t.key === e) ? n`
+      <div class="ft-header-menu" style="position: fixed; left: ${t}px; top: ${i}px; z-index: 200;"
+        @mousedown=${(e) => e.stopPropagation()}>
+        <div class="ft-header-menu-item"
+          @click=${() => {
+			this._setColumnHidden(e, !0), this._headerMenu = null;
+		}}>
+          Hide column
+        </div>
+        ${a.map((e) => n`
+          <div class="ft-header-menu-item"
+            @click=${() => {
+			this._setColumnHidden(e.key, !1), this._headerMenu = null;
+		}}>
+            Show: ${e.header}
+          </div>
+        `)}
+      </div>
+    ` : r;
 	}
 	_adjustFilterDropdown() {
 		if (!this._openFilterKey) return;
@@ -2076,7 +2334,7 @@ var R = 120, z = 40, B = 32, V = 5, H = class extends e {
 		if (!n) return;
 		let r = this.shadowRoot?.querySelectorAll(`.ft-cell[data-col-index="${t}"]`), i = 0, a = this.shadowRoot?.querySelector(`.ft-header-cell[data-col-index="${t}"]`);
 		if (a && (i = Math.max(i, a.scrollWidth)), r) for (let e of r) i = Math.max(i, e.scrollWidth);
-		let o = n.minWidth ?? z, s = Math.max(o, i + 8);
+		let o = n.minWidth ?? U, s = Math.max(o, i + 8);
 		this._columnWidths.set(n.key, s), this.requestUpdate(), this.dispatchEvent(new CustomEvent("column-resize", {
 			detail: {
 				key: n.key,
@@ -2089,7 +2347,7 @@ var R = 120, z = 40, B = 32, V = 5, H = class extends e {
 	}
 	_onResizeStart(e, t) {
 		e.preventDefault(), e.stopPropagation();
-		let n = this.visibleColumns[t], r = this._columnWidths.get(n.key) ?? n.width ?? R;
+		let n = this.visibleColumns[t], r = this._columnWidths.get(n.key) ?? n.width ?? H;
 		this._resizing = {
 			colIndex: t,
 			startX: e.clientX,
@@ -2097,13 +2355,13 @@ var R = 120, z = 40, B = 32, V = 5, H = class extends e {
 		};
 		let i = (e) => {
 			if (!this._resizing) return;
-			let t = e.clientX - this._resizing.startX, r = n.minWidth ?? z, i = Math.max(r, this._resizing.startWidth + t);
+			let t = e.clientX - this._resizing.startX, r = n.minWidth ?? U, i = Math.max(r, this._resizing.startWidth + t);
 			this._columnWidths.set(n.key, i), this.requestUpdate();
 		}, a = () => {
 			document.removeEventListener("mousemove", i), document.removeEventListener("mouseup", o), this._resizeCleanup = null;
 		}, o = () => {
 			if (a(), this._resizing) {
-				let e = this._columnWidths.get(n.key) ?? R;
+				let e = this._columnWidths.get(n.key) ?? H;
 				this.dispatchEvent(new CustomEvent("column-resize", {
 					detail: {
 						key: n.key,
@@ -2553,6 +2811,7 @@ var R = 120, z = 40, B = 32, V = 5, H = class extends e {
       ${this.footerData ? this._renderFooter(i, a, o) : ""}
       ${_}
       ${g}
+      ${this._renderHeaderContextMenu()}
     `;
 	}
 	_onSelectAllChange(e) {
@@ -2616,11 +2875,17 @@ var R = 120, z = 40, B = 32, V = 5, H = class extends e {
     `;
 	}
 	_renderCell(e, t, i, a) {
-		let o = this._activeCell?.row === i && this._activeCell?.col === a, s = this._editingCell?.row === i && this._editingCell?.col === a, l = this._selection.isInRange(i, a), u = t.pinned === "left", d = t.pinned === "right", f = u || d, p = this._getColWidth(t), m = this.rowHeight, h = this._colLeftOffsets[a] ?? 0, g;
-		g = u ? `position: absolute; top: 0; left: ${this._scrollLeft + this._getPinnedLeft(a)}px; width: ${p}px; height: ${m}px; z-index: 2;` : d ? `position: absolute; top: 0; right: ${-this._scrollLeft + this._getPinnedRight(a)}px; width: ${p}px; height: ${m}px; z-index: 2;` : `left: ${h}px; width: ${p}px; height: ${m}px;`;
+		let o = this._activeCell?.row === i && this._activeCell?.col === a, s = this._editingCell?.row === i && this._editingCell?.col === a, c = this._selection.isInRange(i, a), l = t.pinned === "left", u = t.pinned === "right", d = l || u, p = this._getColWidth(t), m = this.rowHeight, h = this._colLeftOffsets[a] ?? 0, g;
+		g = l ? `position: absolute; top: 0; left: ${this._scrollLeft + this._getPinnedLeft(a)}px; width: ${p}px; height: ${m}px; z-index: 2;` : u ? `position: absolute; top: 0; right: ${-this._scrollLeft + this._getPinnedRight(a)}px; width: ${p}px; height: ${m}px; z-index: 2;` : `left: ${h}px; width: ${p}px; height: ${m}px;`;
 		let _ = !this._isCellEditable(t);
+		if (t.conditionalRules && t.conditionalRules.length > 0) {
+			let n = e[t.key], r = {};
+			for (let i of t.conditionalRules) i.when(n, e, t) && (i.style.background && (r.background = i.style.background), i.style.color && (r.color = i.style.color), i.style.fontWeight && (r["font-weight"] = i.style.fontWeight), i.style.fontStyle && (r["font-style"] = i.style.fontStyle));
+			let i = Object.entries(r).map(([e, t]) => `${e}: ${t}`).join("; ");
+			i && (g += " " + i + ";");
+		}
 		if (s) return n`
-        <div class="ft-cell ft-editing ft-active ${f ? "ft-pinned" : ""}" role="gridcell"
+        <div class="ft-cell ft-editing ft-active ${d ? "ft-pinned" : ""}" role="gridcell"
           data-col-index=${a}
           aria-selected="true"
           aria-readonly=${_ ? "true" : r}
@@ -2628,14 +2893,14 @@ var R = 120, z = 40, B = 32, V = 5, H = class extends e {
           ${this._renderEditor(e, t)}
         </div>
       `;
-		let v = o || l, y = this._isCellInvalid(i, a), b = (this._findState?.results ?? []).findIndex((e) => e.row === i && e.col === a), x = b >= 0, S = x && b === this._findState.currentIndex;
+		let v = o || c, y = this._isCellInvalid(i, a), b = (this._findState?.results ?? []).findIndex((e) => e.row === i && e.col === a), x = b >= 0, S = x && b === this._findState.currentIndex;
 		return n`
       <div class=${[
 			"ft-cell",
 			`ft-type-${t.type ?? "text"}`,
 			o ? "ft-active" : "",
-			l ? "ft-selected" : "",
-			f ? "ft-pinned" : "",
+			c ? "ft-selected" : "",
+			d ? "ft-pinned" : "",
 			y ? "ft-invalid" : "",
 			S ? "ft-find-current" : x ? "ft-find-match" : ""
 		].filter(Boolean).join(" ")}
@@ -2650,45 +2915,67 @@ var R = 120, z = 40, B = 32, V = 5, H = class extends e {
         @mouseenter=${() => this._onCellMouseEnter(i, a)}
         @click=${(e) => this._onCellClickEvent(e, i, a)}
         @dblclick=${() => this._onCellDblClick(i, a)}>
-        ${c(e[t.key], e, t)}
+        ${f(e[t.key], e, t)}
       </div>
     `;
 	}
 	_renderEditor(e, t) {
 		if (t.editor) return t.editor(e[t.key], e, t);
-		let r = e[t.key], i = r == null ? "" : String(r);
+		let i = e[t.key], a = i == null ? "" : String(i);
 		if (t.type === "number") return n`
         <input class="ft-editor ft-editor-number" type="number"
-          .value=${i}
+          .value=${a}
           @keydown=${this._onEditorKeyDown}
           @blur=${() => this._commitEdit()}>
       `;
 		if (t.type === "date") return n`
         <input class="ft-editor" type="date"
-          .value=${this._toDateInputValue(r)}
+          .value=${this._toDateInputValue(i)}
           @keydown=${this._onEditorKeyDown}
           @blur=${() => this._commitEdit()}>
       `;
 		if (t.type === "datetime") return n`
         <input class="ft-editor" type="datetime-local"
-          .value=${this._toDateTimeInputValue(r)}
+          .value=${this._toDateTimeInputValue(i)}
           @keydown=${this._onEditorKeyDown}
           @blur=${() => this._commitEdit()}>
       `;
 		if (t.type === "select" && t.options && t.options.length > 0) {
-			let e = t.options, i = typeof e[0] == "string";
+			let e = t.options, r = typeof e[0] == "string";
 			return n`
         <select class="ft-editor"
           @keydown=${this._onEditorKeyDown}
           @blur=${() => this._commitEdit()}
           @change=${() => this._commitEdit()}>
-          ${i ? e.map((e) => n`<option value=${e} ?selected=${e === r}>${e}</option>`) : e.map((e) => n`<option value=${String(e.value)} ?selected=${e.value === r}>${e.label}</option>`)}
+          ${r ? e.map((e) => n`<option value=${e} ?selected=${e === i}>${e}</option>`) : e.map((e) => n`<option value=${String(e.value)} ?selected=${e.value === i}>${e.label}</option>`)}
         </select>
+      `;
+		}
+		if (t.autocomplete) {
+			let e = this._autocompleteState?.candidates ?? [], i = this._autocompleteState?.activeIndex ?? -1;
+			return n`
+        <input class="ft-editor" type="text"
+          .value=${a}
+          @input=${(e) => this._onAutocompleteInput(e, t)}
+          @keydown=${this._onEditorKeyDown}
+          @blur=${() => this._commitEdit()}>
+        ${e.length > 0 ? n`
+          <div class="ft-autocomplete-dropdown">
+            ${e.map((e, t) => n`
+              <div class="ft-autocomplete-item ${t === i ? "ft-autocomplete-active" : ""}"
+                @mousedown=${(t) => {
+				t.preventDefault(), this._selectAutocompleteCandidate(e);
+			}}>
+                ${e}
+              </div>
+            `)}
+          </div>
+        ` : r}
       `;
 		}
 		return n`
       <input class="ft-editor" type="text"
-        .value=${i}
+        .value=${a}
         @keydown=${this._onEditorKeyDown}
         @blur=${() => this._commitEdit()}>
     `;
@@ -2704,36 +2991,36 @@ var R = 120, z = 40, B = 32, V = 5, H = class extends e {
 		return isNaN(t.getTime()) ? "" : `${t.getFullYear()}-${String(t.getMonth() + 1).padStart(2, "0")}-${String(t.getDate()).padStart(2, "0")}T${String(t.getHours()).padStart(2, "0")}:${String(t.getMinutes()).padStart(2, "0")}`;
 	}
 };
-L([a({ type: Array })], H.prototype, "columns", void 0), L([a({
+V([a({ type: Array })], K.prototype, "columns", void 0), V([a({
 	type: Array,
 	hasChanged: () => !0
-})], H.prototype, "data", void 0), L([a({
+})], K.prototype, "data", void 0), V([a({
 	type: Number,
 	attribute: "row-height"
-})], H.prototype, "rowHeight", void 0), L([a({
+})], K.prototype, "rowHeight", void 0), V([a({
 	type: Boolean,
 	attribute: "show-row-numbers"
-})], H.prototype, "showRowNumbers", void 0), L([a({
+})], K.prototype, "showRowNumbers", void 0), V([a({
 	type: String,
 	reflect: !0
-})], H.prototype, "theme", void 0), L([a({
+})], K.prototype, "theme", void 0), V([a({
 	type: Number,
 	attribute: "max-rows"
-})], H.prototype, "maxRows", void 0), L([a({ type: Boolean })], H.prototype, "editable", void 0), L([a({
+})], K.prototype, "maxRows", void 0), V([a({ type: Boolean })], K.prototype, "editable", void 0), V([a({
 	type: Boolean,
 	attribute: "show-filters"
-})], H.prototype, "showFilters", void 0), L([a({ type: Boolean })], H.prototype, "selectable", void 0), L([a({
+})], K.prototype, "showFilters", void 0), V([a({ type: Boolean })], K.prototype, "selectable", void 0), V([a({
 	type: String,
 	attribute: "selection-mode"
-})], H.prototype, "selectionMode", null), L([a({
+})], K.prototype, "selectionMode", null), V([a({
 	type: String,
 	attribute: "data-mode"
-})], H.prototype, "dataMode", void 0), L([a({
+})], K.prototype, "dataMode", void 0), V([a({
 	type: Object,
 	attribute: "footer-data"
-})], H.prototype, "footerData", void 0), L([a({
+})], K.prototype, "footerData", void 0), V([a({
 	type: Number,
 	attribute: "max-undo-size"
-})], H.prototype, "maxUndoSize", null), L([o()], H.prototype, "_scrollTop", void 0), L([o()], H.prototype, "_scrollLeft", void 0), L([o()], H.prototype, "_viewportHeight", void 0), L([o()], H.prototype, "_viewportWidth", void 0), L([o()], H.prototype, "_activeCell", void 0), L([o()], H.prototype, "_editingCell", void 0), L([o()], H.prototype, "_sortCriteria", void 0), L([o()], H.prototype, "_openFilterKey", void 0), L([o()], H.prototype, "_rowSelectionVersion", void 0), H = L([i("flex-table")], H);
+})], K.prototype, "maxUndoSize", null), V([o()], K.prototype, "_scrollTop", void 0), V([o()], K.prototype, "_scrollLeft", void 0), V([o()], K.prototype, "_viewportHeight", void 0), V([o()], K.prototype, "_viewportWidth", void 0), V([o()], K.prototype, "_activeCell", void 0), V([o()], K.prototype, "_editingCell", void 0), V([o()], K.prototype, "_sortCriteria", void 0), V([o()], K.prototype, "_openFilterKey", void 0), V([o()], K.prototype, "_rowSelectionVersion", void 0), V([o()], K.prototype, "_autocompleteState", void 0), V([o()], K.prototype, "_headerMenu", void 0), K = V([i("flex-table")], K);
 //#endregion
-export { c as a, _ as i, D as n, C as r, H as t };
+export { f as a, x as i, j as n, D as r, K as t };

package/dist/flex-table.d.ts

@@ -44,6 +44,8 @@ export declare class FlexTable extends LitElement {
     private _sortedIndices;
     private _openFilterKey;
     private _rowSelectionVersion;
+    private _autocompleteState;
+    private _headerMenu;
     private _viewDirty;
     private _isDragging;
     private _wasDrag;
@@ -117,6 +119,13 @@ export declare class FlexTable extends LitElement {
      * @param newIndex Target index in the columns array.
      */
     moveColumn(key: string, newIndex: number): void;
+    /** Hide a column by its key. Fires `column-visibility-change` event. */
+    hideColumn(key: string): void;
+    /** Show a previously hidden column by its key. Fires `column-visibility-change` event. */
+    showColumn(key: string): void;
+    private _setColumnHidden;
+    /** Returns all columns marked as hidden. */
+    getHiddenColumns(): ColumnDefinition[];
     /**
      * Add a row at the specified index (default: end).
      * Returns the new row.
@@ -187,6 +196,9 @@ export declare class FlexTable extends LitElement {
     private _applyEdit;
     private _cancelEdit;
     private _onEditorKeyDown;
+    private _getAutocompleteCandidates;
+    private _onAutocompleteInput;
+    private _selectAutocompleteCandidate;
     private _syncActiveCell;
     private _onKeyDown;
     private _handleCtrlKey;
@@ -213,6 +225,9 @@ export declare class FlexTable extends LitElement {
     /** Calculate cumulative right offset for a right-pinned column */
     private _getPinnedRight;
     private _renderHeaderCell;
+    private _onHeaderContextMenu;
+    private _showHiddenBefore;
+    private _renderHeaderContextMenu;
     private _adjustFilterDropdown;
     private _onFilterBtnClick;
     private _renderFilterDropdown;

package/dist/flex-table.js

@@ -1,2 +1,2 @@
-import { a as e, i as t, n, r, t as i } from "./flex-table-DJvbRtBl.js";
+import { a as e, i as t, n, r, t as i } from "./flex-table-zJST_6sy.js";
 export { i as FlexTable, t as RowSelectionState, r as UndoStack, n as exportData, e as renderCell };

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 export { FlexTable } from './flex-table.js';
-export type { ColumnDefinition, ColumnType, DataRow, CellRenderer, CellEditor, CellValidator, SelectionMode, DataMode } from './models/types.js';
+export type { ColumnDefinition, ColumnType, DataRow, CellRenderer, CellEditor, CellValidator, SelectionMode, DataMode, CellStyle, ConditionalRule } from './models/types.js';
 export type { CellPosition, CellRange } from './core/selection.js';
 export type { SortCriteria, SortDirection } from './core/sorting.js';
 export type { ColumnFilter, FilterPredicate, FilterErrorCallback } from './core/filtering.js';

package/dist/models/types.d.ts

@@ -65,6 +65,33 @@ export interface ColumnDefinition {
     validator?: CellValidator;
     /** Allowed values for select columns (strings or label/value pairs) */
     options?: string[] | SelectOption[];
+    /**
+     * Autocomplete for text editing.
+     * - true: show suggestions from existing column values
+     * - 'strict': same as true, but rejects values not in the list
+     */
+    autocomplete?: boolean | 'strict';
+    /**
+     * Display format for cell values. Applied during rendering; raw value is preserved.
+     * - String: number format pattern (e.g. '#,##0.00', '0.00%', '$#,##0') or date pattern (e.g. 'yyyy-MM-dd')
+     * - Function: custom formatter receiving (value, row, col)
+     */
+    format?: string | ((value: unknown, row: DataRow, col: ColumnDefinition) => string);
+    /** Per-column conditional formatting rules applied during cell rendering */
+    conditionalRules?: ConditionalRule[];
+}
+/** Style applied to a cell by a conditional formatting rule */
+export interface CellStyle {
+    background?: string;
+    color?: string;
+    fontWeight?: 'bold' | 'normal';
+    fontStyle?: 'italic' | 'normal';
+}
+/** A single conditional formatting rule */
+export interface ConditionalRule {
+    /** Returns true when this rule's style should be applied */
+    when: (value: unknown, row: DataRow, col: ColumnDefinition) => boolean;
+    style: CellStyle;
 }
 /**
  * A single data row — schema-agnostic key-value map.

package/dist/react.js

@@ -1,4 +1,4 @@
-import { t as e } from "./flex-table-DJvbRtBl.js";
+import { t as e } from "./flex-table-zJST_6sy.js";
 import t from "react";
 import { createComponent as n } from "@lit/react";
 //#region src/react.ts

package/dist/renderers/format.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Cell value formatting: number and date patterns.
+ * Patterns follow Excel-like conventions.
+ */
+/**
+ * Apply a format string or function to a cell value.
+ * Returns empty string for null/undefined.
+ */
+export declare function applyFormat(value: unknown, format: string | ((value: unknown) => string)): string;
+/**
+ * Parse an Excel-style number format string and apply it.
+ * Supported patterns: '#,##0', '#,##0.00', '0.00%', '$#,##0.00', '#,##0.00%'
+ */
+export declare function formatNumberValue(value: unknown, fmt: string): string;
+/**
+ * Format a Date or ISO string value using a pattern.
+ * Tokens: yyyy, yy, MM, dd, HH, hh, mm, ss
+ */
+export declare function formatDateValue(value: unknown, fmt: string): string;

package/dist/renderers/format.test.d.ts

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iyulab/flex-table",
-  "version": "0.12.0",
+  "version": "0.13.0",
   "description": "A minimalist, input-centric data grid web component",
   "type": "module",
   "main": "./dist/flex-table.js",