@design.estate/dees-catalog 3.64.0 → 3.66.0

package/dist_bundle/bundle.js

@@ -163118,36 +163118,66 @@ var demoFunc29 = /* @__PURE__ */ __name(() => b2`
     <div class="demo-container">
       <div class="demo-section">
         <h2 class="demo-title">Basic Table with Actions</h2>
-        <p class="demo-description">A standard table with row actions, editable fields, and context menu support. Double-click on descriptions to edit. Grid lines are enabled by default.</p>
+        <p class="demo-description">A standard table with row actions, editable cells, and context menu support. Double-click any cell to edit. Tab moves to the next editable cell, Enter to the row below, Esc cancels.</p>
         <dees-table
           heading1="Current Account Statement"
           heading2="Bunq - Payment Account 2 - April 2021"
-          .editableFields="${["description"]}"
+          .columns=${[
+  { key: "date", header: "Date", sortable: true, editable: true, editor: "date" },
+  { key: "amount", header: "Amount", editable: true, editor: "text" },
+  {
+    key: "category",
+    header: "Category",
+    editable: true,
+    editor: "dropdown",
+    editorOptions: {
+      options: [
+        { option: "Office Supplies", key: "office" },
+        { option: "Hardware", key: "hardware" },
+        { option: "Software", key: "software" },
+        { option: "Travel", key: "travel" }
+      ]
+    }
+  },
+  { key: "description", header: "Description", editable: true },
+  { key: "reconciled", header: "OK", editable: true, editor: "checkbox" }
+]}
+          @cellEdit=${(e11) => console.log("cellEdit", e11.detail)}
           .data=${[
   {
     date: "2021-04-01",
     amount: "2464.65 \u20AC",
-    description: "Printing Paper (Office Supplies) - STAPLES BREMEN"
+    category: "office",
+    description: "Printing Paper - STAPLES BREMEN",
+    reconciled: true
   },
   {
     date: "2021-04-02",
     amount: "165.65 \u20AC",
-    description: "Logitech Mouse (Hardware) - logi.com OnlineShop"
+    category: "hardware",
+    description: "Logitech Mouse - logi.com OnlineShop",
+    reconciled: false
   },
   {
     date: "2021-04-03",
     amount: "2999,00 \u20AC",
-    description: "Macbook Pro 16inch (Hardware) - Apple.de OnlineShop"
+    category: "hardware",
+    description: "Macbook Pro 16inch - Apple.de OnlineShop",
+    reconciled: false
   },
   {
     date: "2021-04-01",
     amount: "2464.65 \u20AC",
-    description: "Office-Supplies - STAPLES BREMEN"
+    category: "office",
+    description: "Office-Supplies - STAPLES BREMEN",
+    reconciled: true
   },
   {
     date: "2021-04-01",
     amount: "2464.65 \u20AC",
-    description: "Office-Supplies - STAPLES BREMEN"
+    category: "office",
+    description: "Office-Supplies - STAPLES BREMEN",
+    reconciled: true
   }
 ]}
           dataName="transactions"
@@ -163578,13 +163608,13 @@ var demoFunc29 = /* @__PURE__ */ __name(() => b2`
         <h2 class="demo-title">Column Filters + Sticky Header (New)</h2>
         <p class="demo-description">Per-column quick filters and sticky header with internal scroll. Try filtering the Name column. Uses --table-max-height var.</p>
         <style>
-          dees-table[sticky-header] { --table-max-height: 220px; }
+          dees-table[fixed-height] { --table-max-height: 220px; }
         </style>
         <dees-table
           heading1="Employees"
           heading2="Quick filter per column + sticky header"
           .showColumnFilters=${true}
-          .stickyHeader=${true}
+          .fixedHeight=${true}
           .columns=${[
   { key: "name", header: "Name", sortable: true },
   { key: "email", header: "Email", sortable: true },
@@ -163750,8 +163780,9 @@ var demoFunc29 = /* @__PURE__ */ __name(() => b2`
         </style>
         <dees-table
           id="scrollSmallHeight"
-          .stickyHeader=${true}
-          heading1="People Directory (Scrollable)"
+          .fixedHeight=${true}
+          .virtualized=${true}
+          heading1="People Directory (Scrollable, Virtualized)"
           heading2="Forced scrolling with many items"
           .columns=${[
   { key: "id", header: "ID", sortable: true },
@@ -164172,32 +164203,32 @@ var tableStyles = [
         min-height: 24px;
         line-height: 24px;
       }
-      td input {
-        position: absolute;
-        top: 4px;
-        bottom: 4px;
-        left: 20px;
-        right: 20px;
-        width: calc(100% - 40px);
-        height: calc(100% - 8px);
-        padding: 0 12px;
-        outline: none;
-        border: 1px solid var(--dees-color-border-default);
-        border-radius: 6px;
-        background: ${cssManager.bdTheme("hsl(0 0% 100%)", "hsl(0 0% 9%)")};
-        color: var(--dees-color-text-primary);
-        font-family: inherit;
-        font-size: inherit;
-        font-weight: inherit;
-        transition: all 0.15s ease;
-        box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+
+      /* Editable cell affordances */
+      td.editable {
+        cursor: text;
       }
-      
-      td input:focus {
-        border-color: ${cssManager.bdTheme("hsl(222.2 47.4% 51.2%)", "hsl(217.2 91.2% 59.8%)")};
-        outline: 2px solid transparent;
-        outline-offset: 2px;
-        box-shadow: 0 0 0 2px ${cssManager.bdTheme("hsl(222.2 47.4% 51.2% / 0.2)", "hsl(217.2 91.2% 59.8% / 0.2)")};
+      td.focused {
+        outline: 2px solid ${cssManager.bdTheme(
+    "hsl(222.2 47.4% 51.2% / 0.6)",
+    "hsl(217.2 91.2% 59.8% / 0.6)"
+  )};
+        outline-offset: -2px;
+      }
+      td.editingCell {
+        padding: 0;
+      }
+      td.editingCell .innerCellContainer {
+        padding: 0;
+        line-height: normal;
+      }
+      td.editingCell dees-input-text,
+      td.editingCell dees-input-checkbox,
+      td.editingCell dees-input-dropdown,
+      td.editingCell dees-input-datepicker,
+      td.editingCell dees-input-tags {
+        display: block;
+        width: 100%;
       }
 
       /* filter row */
@@ -164550,7 +164581,7 @@ __name(compileLucenePredicate, "compileLucenePredicate");
 init_dist_ts30();
 init_dist_ts29();
 init_theme();
-var _selectedIds_dec, _selectionMode_dec, _searchMode_dec, _fixedHeight_dec, _showSelectionCheckbox_dec, _showColumnFilters_dec, _columnFilters_dec, _filterText_dec, _sortBy_dec, _showGrid_dec, _showHorizontalLines_dec, _showVerticalLines_dec, _editableFields_dec, _selectedDataRow_dec, _reverseDisplayFunction_dec, _displayFunction_dec, _augmentFromDisplayFunction_dec, _rowKey_dec, _columns_dec, _dataActions_dec, _searchable_dec, _dataName_dec, _required_dec3, _disabled_dec3, _label_dec3, _key_dec2, _data_dec, _heading2_dec, _heading1_dec, _a42, _DeesTable_decorators, _init39, _heading1, _heading22, _data, _key2, _label3, _disabled3, _required3, _dataName, _searchable, _dataActions, _columns, _rowKey, _augmentFromDisplayFunction, _displayFunction, _reverseDisplayFunction, _selectedDataRow, _editableFields, _showVerticalLines, _showHorizontalLines, _showGrid, _sortBy, _filterText, _columnFilters, _showColumnFilters, _showSelectionCheckbox, _fixedHeight, _searchMode, _selectionMode, _selectedIds;
+var ___virtualRange_dec, ___floatingActive_dec, ___editingCell_dec, ___focusedCell_dec, _selectedIds_dec, _selectionMode_dec, _searchMode_dec, _fixedHeight_dec, _virtualOverscan_dec, _virtualized_dec, _showSelectionCheckbox_dec, _showColumnFilters_dec, _columnFilters_dec, _filterText_dec, _sortBy_dec, _showGrid_dec, _showHorizontalLines_dec, _showVerticalLines_dec, _selectedDataRow_dec, _reverseDisplayFunction_dec, _displayFunction_dec, _augmentFromDisplayFunction_dec, _rowKey_dec, _columns_dec, _dataActions_dec, _searchable_dec, _dataName_dec, _required_dec3, _disabled_dec3, _label_dec3, _key_dec2, _data_dec, _heading2_dec, _heading1_dec, _a42, _DeesTable_decorators, _init39, _heading1, _heading22, _data, _key2, _label3, _disabled3, _required3, _dataName, _searchable, _dataActions, _columns, _rowKey, _augmentFromDisplayFunction, _displayFunction, _reverseDisplayFunction, _selectedDataRow, _showVerticalLines, _showHorizontalLines, _showGrid, _sortBy, _filterText, _columnFilters, _showColumnFilters, _showSelectionCheckbox, _virtualized, _virtualOverscan, _fixedHeight, _searchMode, _selectionMode, _selectedIds, ___focusedCell, ___editingCell, ___floatingActive, ___virtualRange;
 function ordinalLabel(n12) {
   const s10 = ["th", "st", "nd", "rd"];
   const v5 = n12 % 100;
@@ -164585,8 +164616,6 @@ var _DeesTable = class _DeesTable extends (_a42 = DeesElement, _heading1_dec = [
   attribute: false
 })], _selectedDataRow_dec = [n5({
   type: Object
-})], _editableFields_dec = [n5({
-  type: Array
 })], _showVerticalLines_dec = [n5({
   type: Boolean,
   reflect: true,
@@ -164599,7 +164628,7 @@ var _DeesTable = class _DeesTable extends (_a42 = DeesElement, _heading1_dec = [
   type: Boolean,
   reflect: true,
   attribute: "show-grid"
-})], _sortBy_dec = [n5({ attribute: false })], _filterText_dec = [n5({ type: String })], _columnFilters_dec = [n5({ attribute: false })], _showColumnFilters_dec = [n5({ type: Boolean, attribute: "show-column-filters" })], _showSelectionCheckbox_dec = [n5({ type: Boolean, reflect: true, attribute: "show-selection-checkbox" })], _fixedHeight_dec = [n5({ type: Boolean, reflect: true, attribute: "fixed-height" })], _searchMode_dec = [n5({ type: String })], _selectionMode_dec = [n5({ type: String })], _selectedIds_dec = [n5({ attribute: false })], _a42) {
+})], _sortBy_dec = [n5({ attribute: false })], _filterText_dec = [n5({ type: String })], _columnFilters_dec = [n5({ attribute: false })], _showColumnFilters_dec = [n5({ type: Boolean, attribute: "show-column-filters" })], _showSelectionCheckbox_dec = [n5({ type: Boolean, reflect: true, attribute: "show-selection-checkbox" })], _virtualized_dec = [n5({ type: Boolean, reflect: true, attribute: "virtualized" })], _virtualOverscan_dec = [n5({ type: Number, attribute: "virtual-overscan" })], _fixedHeight_dec = [n5({ type: Boolean, reflect: true, attribute: "fixed-height" })], _searchMode_dec = [n5({ type: String })], _selectionMode_dec = [n5({ type: String })], _selectedIds_dec = [n5({ attribute: false })], ___focusedCell_dec = [r5()], ___editingCell_dec = [r5()], ___floatingActive_dec = [r5()], ___virtualRange_dec = [r5()], _a42) {
   constructor() {
     super();
     __privateAdd(this, _heading1, __runInitializers(_init39, 8, this, "heading 1")), __runInitializers(_init39, 11, this);
@@ -164619,24 +164648,25 @@ var _DeesTable = class _DeesTable extends (_a42 = DeesElement, _heading1_dec = [
     __privateAdd(this, _displayFunction, __runInitializers(_init39, 60, this, /* @__PURE__ */ __name((itemArg) => itemArg, "displayFunction"))), __runInitializers(_init39, 63, this);
     __privateAdd(this, _reverseDisplayFunction, __runInitializers(_init39, 64, this, /* @__PURE__ */ __name((itemArg) => itemArg, "reverseDisplayFunction"))), __runInitializers(_init39, 67, this);
     __privateAdd(this, _selectedDataRow, __runInitializers(_init39, 68, this)), __runInitializers(_init39, 71, this);
-    __privateAdd(this, _editableFields, __runInitializers(_init39, 72, this, [])), __runInitializers(_init39, 75, this);
-    __privateAdd(this, _showVerticalLines, __runInitializers(_init39, 76, this, false)), __runInitializers(_init39, 79, this);
-    __privateAdd(this, _showHorizontalLines, __runInitializers(_init39, 80, this, false)), __runInitializers(_init39, 83, this);
-    __privateAdd(this, _showGrid, __runInitializers(_init39, 84, this, true)), __runInitializers(_init39, 87, this);
+    __privateAdd(this, _showVerticalLines, __runInitializers(_init39, 72, this, false)), __runInitializers(_init39, 75, this);
+    __privateAdd(this, _showHorizontalLines, __runInitializers(_init39, 76, this, false)), __runInitializers(_init39, 79, this);
+    __privateAdd(this, _showGrid, __runInitializers(_init39, 80, this, true)), __runInitializers(_init39, 83, this);
     __publicField(this, "files", []);
     __publicField(this, "fileWeakMap", /* @__PURE__ */ new WeakMap());
     __publicField(this, "dataChangeSubject", new domtools_pluginexports_exports.smartrx.rxjs.Subject());
-    __privateAdd(this, _sortBy, __runInitializers(_init39, 88, this, [])), __runInitializers(_init39, 91, this);
-    __privateAdd(this, _filterText, __runInitializers(_init39, 92, this, "")), __runInitializers(_init39, 95, this);
-    __privateAdd(this, _columnFilters, __runInitializers(_init39, 96, this, {})), __runInitializers(_init39, 99, this);
-    __privateAdd(this, _showColumnFilters, __runInitializers(_init39, 100, this, false)), __runInitializers(_init39, 103, this);
-    __privateAdd(this, _showSelectionCheckbox, __runInitializers(_init39, 104, this, false)), __runInitializers(_init39, 107, this);
-    __privateAdd(this, _fixedHeight, __runInitializers(_init39, 108, this, false)), __runInitializers(_init39, 111, this);
-    __privateAdd(this, _searchMode, __runInitializers(_init39, 112, this, "table")), __runInitializers(_init39, 115, this);
+    __privateAdd(this, _sortBy, __runInitializers(_init39, 84, this, [])), __runInitializers(_init39, 87, this);
+    __privateAdd(this, _filterText, __runInitializers(_init39, 88, this, "")), __runInitializers(_init39, 91, this);
+    __privateAdd(this, _columnFilters, __runInitializers(_init39, 92, this, {})), __runInitializers(_init39, 95, this);
+    __privateAdd(this, _showColumnFilters, __runInitializers(_init39, 96, this, false)), __runInitializers(_init39, 99, this);
+    __privateAdd(this, _showSelectionCheckbox, __runInitializers(_init39, 100, this, false)), __runInitializers(_init39, 103, this);
+    __privateAdd(this, _virtualized, __runInitializers(_init39, 104, this, false)), __runInitializers(_init39, 107, this);
+    __privateAdd(this, _virtualOverscan, __runInitializers(_init39, 108, this, 8)), __runInitializers(_init39, 111, this);
+    __privateAdd(this, _fixedHeight, __runInitializers(_init39, 112, this, false)), __runInitializers(_init39, 115, this);
+    __privateAdd(this, _searchMode, __runInitializers(_init39, 116, this, "table")), __runInitializers(_init39, 119, this);
     __publicField(this, "__searchTextSub");
     __publicField(this, "__searchModeSub");
-    __privateAdd(this, _selectionMode, __runInitializers(_init39, 116, this, "none")), __runInitializers(_init39, 119, this);
-    __privateAdd(this, _selectedIds, __runInitializers(_init39, 120, this, /* @__PURE__ */ new Set())), __runInitializers(_init39, 123, this);
+    __privateAdd(this, _selectionMode, __runInitializers(_init39, 120, this, "none")), __runInitializers(_init39, 123, this);
+    __privateAdd(this, _selectedIds, __runInitializers(_init39, 124, this, /* @__PURE__ */ new Set())), __runInitializers(_init39, 127, this);
     __publicField(this, "_rowIdMap", /* @__PURE__ */ new WeakMap());
     __publicField(this, "_rowIdCounter", 0);
     /**
@@ -164645,6 +164675,23 @@ var _DeesTable = class _DeesTable extends (_a42 = DeesElement, _heading1_dec = [
      * can compute a contiguous range from this anchor.
      */
     __publicField(this, "__selectionAnchorId");
+    __privateAdd(this, ___focusedCell, __runInitializers(_init39, 128, this)), __runInitializers(_init39, 131, this);
+    __privateAdd(this, ___editingCell, __runInitializers(_init39, 132, this)), __runInitializers(_init39, 135, this);
+    __privateAdd(this, ___floatingActive, __runInitializers(_init39, 136, this, false)), __runInitializers(_init39, 139, this);
+    // ─── Render memoization ──────────────────────────────────────────────
+    // These caches let render() short-circuit when the relevant inputs
+    // (by reference) haven't changed. They are NOT @state — mutating them
+    // must never trigger a re-render.
+    __publicField(this, "__memoEffectiveCols");
+    __publicField(this, "__memoViewData");
+    /** Tracks the (data, columns) pair that `determineColumnWidths()` last sized for. */
+    __publicField(this, "__columnsSizedFor");
+    // ─── Virtualization state ────────────────────────────────────────────
+    /** Estimated row height (px). Measured once from the first rendered row. */
+    __publicField(this, "__rowHeight", 36);
+    /** True once we've measured `__rowHeight` from a real DOM row. */
+    __publicField(this, "__rowHeightMeasured", false);
+    __privateAdd(this, ___virtualRange, __runInitializers(_init39, 140, this, { start: 0, end: 0 })), __runInitializers(_init39, 143, this);
     /**
      * Ctrl/Cmd+C copies the currently selected rows as a JSON array. Falls
      * back to copying the focused-row (`selectedDataRow`) if no multi
@@ -164652,30 +164699,182 @@ var _DeesTable = class _DeesTable extends (_a42 = DeesElement, _heading1_dec = [
      * receive the copy.
      */
     __publicField(this, "__handleHostKeydown", /* @__PURE__ */ __name((eventArg) => {
-      const isCopy = (eventArg.metaKey || eventArg.ctrlKey) && (eventArg.key === "c" || eventArg.key === "C");
-      if (!isCopy) return;
       const path2 = eventArg.composedPath?.() || [];
+      let inEditor = false;
       for (const t9 of path2) {
         const tag = t9?.tagName;
-        if (tag === "INPUT" || tag === "TEXTAREA") return;
-        if (t9?.isContentEditable) return;
+        if (tag === "INPUT" || tag === "TEXTAREA" || t9?.isContentEditable) {
+          inEditor = true;
+          break;
+        }
       }
-      const rows = [];
-      if (this.selectedIds.size > 0) {
-        for (const r11 of this.data) if (this.selectedIds.has(this.getRowId(r11))) rows.push(r11);
-      } else if (this.selectedDataRow) {
-        rows.push(this.selectedDataRow);
+      const isCopy = (eventArg.metaKey || eventArg.ctrlKey) && (eventArg.key === "c" || eventArg.key === "C");
+      if (isCopy) {
+        if (inEditor) return;
+        const rows = [];
+        if (this.selectedIds.size > 0) {
+          for (const r11 of this.data) if (this.selectedIds.has(this.getRowId(r11))) rows.push(r11);
+        } else if (this.selectedDataRow) {
+          rows.push(this.selectedDataRow);
+        }
+        if (rows.length === 0) return;
+        eventArg.preventDefault();
+        this.__writeRowsAsJson(rows);
+        return;
+      }
+      if (inEditor || this.__editingCell) return;
+      switch (eventArg.key) {
+        case "ArrowLeft":
+          eventArg.preventDefault();
+          this.moveFocusedCell(-1, 0, false);
+          return;
+        case "ArrowRight":
+          eventArg.preventDefault();
+          this.moveFocusedCell(1, 0, false);
+          return;
+        case "ArrowUp":
+          eventArg.preventDefault();
+          this.moveFocusedCell(0, -1, false);
+          return;
+        case "ArrowDown":
+          eventArg.preventDefault();
+          this.moveFocusedCell(0, 1, false);
+          return;
+        case "Enter":
+        case "F2": {
+          if (!this.__focusedCell) return;
+          const view = this._lastViewData ?? [];
+          const item = view.find((r11) => this.getRowId(r11) === this.__focusedCell.rowId);
+          if (!item) return;
+          const allCols = Array.isArray(this.columns) && this.columns.length > 0 ? computeEffectiveColumns(
+            this.columns,
+            this.augmentFromDisplayFunction,
+            this.displayFunction,
+            this.data
+          ) : computeColumnsFromDisplayFunction(this.displayFunction, this.data);
+          const col = allCols.find((c11) => String(c11.key) === this.__focusedCell.colKey);
+          if (!col || !this.__isColumnEditable(col)) return;
+          eventArg.preventDefault();
+          this.startEditing(item, col);
+          return;
+        }
+        case "Escape":
+          if (this.__focusedCell) {
+            this.__focusedCell = void 0;
+            this.requestUpdate();
+          }
+          return;
+        default:
+          return;
       }
-      if (rows.length === 0) return;
-      eventArg.preventDefault();
-      this.__writeRowsAsJson(rows);
     }, "__handleHostKeydown"));
     // ─── Floating header (page-sticky) lifecycle ─────────────────────────
     __publicField(this, "__floatingResizeObserver");
     __publicField(this, "__floatingScrollHandler");
-    __publicField(this, "__floatingActive", false);
+    // __floatingActive is declared as a @state field above so its toggle
+    // triggers re-rendering of the floating-header clone subtree.
     __publicField(this, "__scrollAncestors", []);
     __publicField(this, "__debounceTimer");
+    __publicField(this, "__onTbodyClick", /* @__PURE__ */ __name((eventArg) => {
+      if (this.__isInEditor(eventArg) || this.__isInActionsCol(eventArg)) return;
+      const cell2 = this.__resolveCell(eventArg);
+      if (!cell2) return;
+      const view = this._lastViewData ?? [];
+      if (cell2.col.editable || cell2.col.editor) {
+        this.__focusedCell = {
+          rowId: this.getRowId(cell2.item),
+          colKey: String(cell2.col.key)
+        };
+      }
+      this.handleRowClick(eventArg, cell2.item, cell2.rowIdx, view);
+    }, "__onTbodyClick"));
+    __publicField(this, "__onTbodyDblclick", /* @__PURE__ */ __name((eventArg) => {
+      if (this.__isInEditor(eventArg) || this.__isInActionsCol(eventArg)) return;
+      const cell2 = this.__resolveCell(eventArg);
+      if (!cell2) return;
+      const isEditable = !!(cell2.col.editable || cell2.col.editor);
+      if (isEditable) {
+        eventArg.stopPropagation();
+        this.startEditing(cell2.item, cell2.col);
+        return;
+      }
+      const dblAction = this.dataActions.find((a5) => a5.type?.includes("doubleClick"));
+      if (dblAction) dblAction.actionFunc({ item: cell2.item, table: this });
+    }, "__onTbodyDblclick"));
+    __publicField(this, "__onTbodyMousedown", /* @__PURE__ */ __name((eventArg) => {
+      if (eventArg.shiftKey && this.selectionMode !== "single") eventArg.preventDefault();
+    }, "__onTbodyMousedown"));
+    __publicField(this, "__onTbodyContextmenu", /* @__PURE__ */ __name((eventArg) => {
+      if (this.__isInActionsCol(eventArg)) return;
+      const row = this.__resolveRow(eventArg);
+      if (!row) return;
+      const item = row.item;
+      if (!this.isRowSelected(item)) {
+        this.selectedDataRow = item;
+        this.selectedIds.clear();
+        this.selectedIds.add(this.getRowId(item));
+        this.__selectionAnchorId = this.getRowId(item);
+        this.emitSelectionChange();
+        this.requestUpdate();
+      }
+      const userItems = this.getActionsForType("contextmenu").map(
+        (action) => ({
+          name: action.name,
+          iconName: action.iconName,
+          action: /* @__PURE__ */ __name(async () => {
+            await action.actionFunc({ item, table: this });
+            return null;
+          }, "action")
+        })
+      );
+      const defaultItems = [
+        {
+          name: this.selectedIds.size > 1 ? `Copy ${this.selectedIds.size} rows as JSON` : "Copy row as JSON",
+          iconName: "lucide:Copy",
+          action: /* @__PURE__ */ __name(async () => {
+            this.copySelectionAsJson(item);
+            return null;
+          }, "action")
+        }
+      ];
+      DeesContextmenu.openContextMenuWithOptions(eventArg, [...userItems, ...defaultItems]);
+    }, "__onTbodyContextmenu"));
+    __publicField(this, "__onTbodyDragenter", /* @__PURE__ */ __name((eventArg) => {
+      eventArg.preventDefault();
+      eventArg.stopPropagation();
+      const row = this.__resolveRow(eventArg);
+      if (!row) return;
+      const tr3 = (eventArg.composedPath?.() || []).find(
+        (t9) => t9?.tagName === "TR"
+      );
+      if (tr3) setTimeout(() => tr3.classList.add("hasAttachment"), 0);
+    }, "__onTbodyDragenter"));
+    __publicField(this, "__onTbodyDragleave", /* @__PURE__ */ __name((eventArg) => {
+      eventArg.preventDefault();
+      eventArg.stopPropagation();
+      const tr3 = (eventArg.composedPath?.() || []).find(
+        (t9) => t9?.tagName === "TR"
+      );
+      if (tr3) tr3.classList.remove("hasAttachment");
+    }, "__onTbodyDragleave"));
+    __publicField(this, "__onTbodyDragover", /* @__PURE__ */ __name((eventArg) => {
+      eventArg.preventDefault();
+    }, "__onTbodyDragover"));
+    __publicField(this, "__onTbodyDrop", /* @__PURE__ */ __name(async (eventArg) => {
+      eventArg.preventDefault();
+      const row = this.__resolveRow(eventArg);
+      if (!row) return;
+      const item = row.item;
+      const newFiles = [];
+      for (const file of Array.from(eventArg.dataTransfer.files)) {
+        this.files.push(file);
+        newFiles.push(file);
+        this.requestUpdate();
+      }
+      const existing = this.fileWeakMap.get(item);
+      if (!existing) this.fileWeakMap.set(item, newFiles);
+      else existing.push(...newFiles);
+    }, "__onTbodyDrop"));
     if (!this.hasAttribute("tabindex")) this.setAttribute("tabindex", "0");
     this.addEventListener("keydown", this.__handleHostKeydown);
   }
@@ -164708,24 +164907,83 @@ var _DeesTable = class _DeesTable extends (_a42 = DeesElement, _heading1_dec = [
     } catch {
     }
   }
-  render() {
+  /**
+   * Returns the effective column schema, memoized by reference of the inputs
+   * that affect it. Avoids re-running `computeEffectiveColumnsFn` /
+   * `computeColumnsFromDisplayFunctionFn` on every Lit update.
+   */
+  __getEffectiveColumns() {
     const usingColumns = Array.isArray(this.columns) && this.columns.length > 0;
-    const effectiveColumns = usingColumns ? computeEffectiveColumns(this.columns, this.augmentFromDisplayFunction, this.displayFunction, this.data) : computeColumnsFromDisplayFunction(this.displayFunction, this.data);
-    const lucenePred = compileLucenePredicate(
-      this.filterText,
-      this.searchMode === "data" ? "data" : "table",
-      effectiveColumns
-    );
-    const viewData = getViewData(
+    const cache = this.__memoEffectiveCols;
+    if (cache && cache.columns === this.columns && cache.augment === this.augmentFromDisplayFunction && cache.displayFunction === this.displayFunction && cache.data === this.data) {
+      return cache.out;
+    }
+    const out = usingColumns ? computeEffectiveColumns(
+      this.columns,
+      this.augmentFromDisplayFunction,
+      this.displayFunction,
+      this.data
+    ) : computeColumnsFromDisplayFunction(this.displayFunction, this.data);
+    this.__memoEffectiveCols = {
+      columns: this.columns,
+      augment: this.augmentFromDisplayFunction,
+      displayFunction: this.displayFunction,
+      data: this.data,
+      out
+    };
+    return out;
+  }
+  /**
+   * Returns the sorted/filtered view of the data, memoized by reference of
+   * everything that affects it. Avoids re-running the lucene compiler and
+   * the sort/filter pipeline on every render.
+   */
+  __getViewData(effectiveColumns) {
+    const searchMode = this.searchMode === "data" ? "data" : "table";
+    const cache = this.__memoViewData;
+    if (cache && cache.data === this.data && cache.sortBy === this.sortBy && cache.filterText === this.filterText && cache.columnFilters === this.columnFilters && cache.searchMode === searchMode && cache.effectiveColumns === effectiveColumns) {
+      return cache.out;
+    }
+    const lucenePred = compileLucenePredicate(this.filterText, searchMode, effectiveColumns);
+    const out = getViewData(
       this.data,
       effectiveColumns,
       this.sortBy,
       this.filterText,
       this.columnFilters,
-      this.searchMode === "data" ? "data" : "table",
+      searchMode,
       lucenePred || void 0
     );
+    this.__memoViewData = {
+      data: this.data,
+      sortBy: this.sortBy,
+      filterText: this.filterText,
+      columnFilters: this.columnFilters,
+      searchMode,
+      effectiveColumns,
+      out
+    };
+    return out;
+  }
+  render() {
+    const effectiveColumns = this.__getEffectiveColumns();
+    const viewData = this.__getViewData(effectiveColumns);
     this._lastViewData = viewData;
+    const useVirtual = this.virtualized && viewData.length > 0;
+    let renderRows = viewData;
+    let renderStart = 0;
+    let topSpacerHeight = 0;
+    let bottomSpacerHeight = 0;
+    if (useVirtual) {
+      const range2 = this.__virtualRange;
+      const start = Math.max(0, range2.start);
+      const end3 = Math.min(viewData.length, range2.end || 0);
+      const initialEnd = end3 > 0 ? end3 : Math.min(viewData.length, this.virtualOverscan * 2 + 16);
+      renderStart = start;
+      renderRows = viewData.slice(start, initialEnd);
+      topSpacerHeight = start * this.__rowHeight;
+      bottomSpacerHeight = Math.max(0, viewData.length - initialEnd) * this.__rowHeight;
+    }
     return b2`
       <dees-tile>
         <div slot="header" class="header">
@@ -164793,88 +165051,23 @@ var _DeesTable = class _DeesTable extends (_a42 = DeesElement, _heading1_dec = [
                 <thead>
                   ${this.renderHeaderRows(effectiveColumns)}
                 </thead>
-                <tbody>
-                  ${viewData.map((itemArg, rowIndex) => {
-      const getTr = /* @__PURE__ */ __name((elementArg) => {
-        if (elementArg.tagName === "TR") {
-          return elementArg;
-        } else {
-          return getTr(elementArg.parentElement);
-        }
-      }, "getTr");
+                <tbody
+                  @click=${this.__onTbodyClick}
+                  @dblclick=${this.__onTbodyDblclick}
+                  @mousedown=${this.__onTbodyMousedown}
+                  @contextmenu=${this.__onTbodyContextmenu}
+                  @dragenter=${this.__onTbodyDragenter}
+                  @dragleave=${this.__onTbodyDragleave}
+                  @dragover=${this.__onTbodyDragover}
+                  @drop=${this.__onTbodyDrop}
+                >
+                  ${useVirtual && topSpacerHeight > 0 ? b2`<tr aria-hidden="true" style="height:${topSpacerHeight}px"><td></td></tr>` : b2``}
+                  ${renderRows.map((itemArg, sliceIdx) => {
+      const rowIndex = renderStart + sliceIdx;
+      const rowId = this.getRowId(itemArg);
       return b2`
                       <tr
-                        @click=${(e11) => this.handleRowClick(e11, itemArg, rowIndex, viewData)}
-                        @mousedown=${(e11) => {
-        if (e11.shiftKey && this.selectionMode !== "single") e11.preventDefault();
-      }}
-                        @dragenter=${async (eventArg) => {
-        eventArg.preventDefault();
-        eventArg.stopPropagation();
-        const realTarget = getTr(eventArg.target);
-        setTimeout(() => {
-          realTarget.classList.add("hasAttachment");
-        }, 0);
-      }}
-                        @dragleave=${async (eventArg) => {
-        eventArg.preventDefault();
-        eventArg.stopPropagation();
-        const realTarget = getTr(eventArg.target);
-        realTarget.classList.remove("hasAttachment");
-      }}
-                        @dragover=${async (eventArg) => {
-        eventArg.preventDefault();
-      }}
-                        @drop=${async (eventArg) => {
-        eventArg.preventDefault();
-        const newFiles = [];
-        for (const file of Array.from(eventArg.dataTransfer.files)) {
-          this.files.push(file);
-          newFiles.push(file);
-          this.requestUpdate();
-        }
-        const result = this.fileWeakMap.get(itemArg);
-        if (!result) {
-          this.fileWeakMap.set(itemArg, newFiles);
-        } else {
-          result.push(...newFiles);
-        }
-      }}
-                        @contextmenu=${async (eventArg) => {
-        if (!this.isRowSelected(itemArg)) {
-          this.selectedDataRow = itemArg;
-          this.selectedIds.clear();
-          this.selectedIds.add(this.getRowId(itemArg));
-          this.__selectionAnchorId = this.getRowId(itemArg);
-          this.emitSelectionChange();
-          this.requestUpdate();
-        }
-        const userItems = this.getActionsForType("contextmenu").map((action) => ({
-          name: action.name,
-          iconName: action.iconName,
-          action: /* @__PURE__ */ __name(async () => {
-            await action.actionFunc({
-              item: itemArg,
-              table: this
-            });
-            return null;
-          }, "action")
-        }));
-        const defaultItems = [
-          {
-            name: this.selectedIds.size > 1 ? `Copy ${this.selectedIds.size} rows as JSON` : "Copy row as JSON",
-            iconName: "lucide:Copy",
-            action: /* @__PURE__ */ __name(async () => {
-              this.copySelectionAsJson(itemArg);
-              return null;
-            }, "action")
-          }
-        ];
-        DeesContextmenu.openContextMenuWithOptions(eventArg, [
-          ...userItems,
-          ...defaultItems
-        ]);
-      }}
+                        data-row-idx=${rowIndex}
                         class="${itemArg === this.selectedDataRow || this.isRowSelected(itemArg) ? "selected" : ""}"
                       >
                         ${this.showSelectionCheckbox ? b2`<td style="width:42px; text-align:center;">
@@ -164890,20 +165083,22 @@ var _DeesTable = class _DeesTable extends (_a42 = DeesElement, _heading1_dec = [
         const value2 = getCellValue(itemArg, col, this.displayFunction);
         const content3 = col.renderer ? col.renderer(value2, itemArg, { rowIndex, colIndex, column: col }) : value2;
         const editKey = String(col.key);
+        const isEditable = !!(col.editable || col.editor);
+        const isFocused = this.__focusedCell?.rowId === rowId && this.__focusedCell?.colKey === editKey;
+        const isEditing = this.__editingCell?.rowId === rowId && this.__editingCell?.colKey === editKey;
+        const cellClasses = [
+          isEditable ? "editable" : "",
+          isFocused && !isEditing ? "focused" : "",
+          isEditing ? "editingCell" : ""
+        ].filter(Boolean).join(" ");
         return b2`
                               <td
-                                @dblclick=${(e11) => {
-          const dblAction = this.dataActions.find(
-            (actionArg) => actionArg.type?.includes("doubleClick")
-          );
-          if (this.editableFields.includes(editKey)) {
-            this.handleCellEditing(e11, itemArg, editKey);
-          } else if (dblAction) {
-            dblAction.actionFunc({ item: itemArg, table: this });
-          }
-        }}
+                                class=${cellClasses}
+                                data-col-key=${editKey}
                               >
-                                <div class="innerCellContainer">${content3}</div>
+                                <div class="innerCellContainer">
+                                  ${isEditing ? this.renderCellEditor(itemArg, col) : content3}
+                                </div>
                               </td>
                             `;
       })}
@@ -164932,15 +165127,16 @@ var _DeesTable = class _DeesTable extends (_a42 = DeesElement, _heading1_dec = [
       })()}
                       </tr>`;
     })}
+                  ${useVirtual && bottomSpacerHeight > 0 ? b2`<tr aria-hidden="true" style="height:${bottomSpacerHeight}px"><td></td></tr>` : b2``}
                 </tbody>
               </table>
               </div>
               <div class="floatingHeader" aria-hidden="true">
-                <table>
-                  <thead>
-                    ${this.renderHeaderRows(effectiveColumns)}
-                  </thead>
-                </table>
+                ${this.__floatingActive ? b2`<table>
+                      <thead>
+                        ${this.renderHeaderRows(effectiveColumns)}
+                      </thead>
+                    </table>` : b2``}
               </div>
             ` : b2` <div class="noDataSet">No data set!</div> `}
         <div slot="footer" class="footer">
@@ -165100,24 +165296,33 @@ var _DeesTable = class _DeesTable extends (_a42 = DeesElement, _heading1_dec = [
   }
   setupFloatingHeader() {
     this.teardownFloatingHeader();
-    if (this.fixedHeight) return;
+    if (this.fixedHeight && !this.virtualized) return;
     const realTable = this.__realTableEl;
     if (!realTable) return;
     this.__scrollAncestors = this.__collectScrollAncestors();
     const tableScrollEl = this.shadowRoot?.querySelector(".tableScroll");
     if (tableScrollEl) {
-      this.__scrollAncestors.unshift({ target: tableScrollEl, scrollsY: false, scrollsX: true });
+      this.__scrollAncestors.unshift({
+        target: tableScrollEl,
+        scrollsY: this.fixedHeight,
+        scrollsX: true
+      });
     }
     this.__floatingResizeObserver = new ResizeObserver(() => {
-      this.__syncFloatingHeader();
+      if (!this.fixedHeight) this.__syncFloatingHeader();
+      if (this.virtualized) this.__computeVirtualRange();
     });
     this.__floatingResizeObserver.observe(realTable);
-    this.__floatingScrollHandler = () => this.__syncFloatingHeader();
+    this.__floatingScrollHandler = () => {
+      if (!this.fixedHeight) this.__syncFloatingHeader();
+      if (this.virtualized) this.__computeVirtualRange();
+    };
     for (const a5 of this.__scrollAncestors) {
       a5.target.addEventListener("scroll", this.__floatingScrollHandler, { passive: true });
     }
     window.addEventListener("resize", this.__floatingScrollHandler, { passive: true });
-    this.__syncFloatingHeader();
+    if (!this.fixedHeight) this.__syncFloatingHeader();
+    if (this.virtualized) this.__computeVirtualRange();
   }
   teardownFloatingHeader() {
     this.__floatingResizeObserver?.disconnect();
@@ -165134,24 +165339,106 @@ var _DeesTable = class _DeesTable extends (_a42 = DeesElement, _heading1_dec = [
     const fh = this.__floatingHeaderEl;
     if (fh) fh.classList.remove("active");
   }
+  // ─── Virtualization ─────────────────────────────────────────────────
+  /**
+   * Computes the visible row range based on the table's position in its
+   * nearest vertical scroll ancestor (or the viewport). Updates
+   * `__virtualRange` if it changed; that triggers a Lit re-render.
+   */
+  __computeVirtualRange() {
+    if (!this.virtualized) return;
+    const view = this._lastViewData ?? [];
+    const total = view.length;
+    if (total === 0) {
+      if (this.__virtualRange.start !== 0 || this.__virtualRange.end !== 0) {
+        this.__virtualRange = { start: 0, end: 0 };
+      }
+      return;
+    }
+    const realTable = this.__realTableEl;
+    if (!realTable) return;
+    const tableRect = realTable.getBoundingClientRect();
+    let viewportTop = 0;
+    let viewportBottom = window.innerHeight;
+    for (const a5 of this.__scrollAncestors) {
+      if (a5.target === window || !a5.scrollsY) continue;
+      const r11 = a5.target.getBoundingClientRect();
+      const cs = getComputedStyle(a5.target);
+      const bt = parseFloat(cs.borderTopWidth) || 0;
+      const bb = parseFloat(cs.borderBottomWidth) || 0;
+      viewportTop = Math.max(viewportTop, r11.top + bt);
+      viewportBottom = Math.min(viewportBottom, r11.bottom - bb);
+    }
+    const rowH = Math.max(1, this.__rowHeight);
+    const headerHeight = realTable.tHead?.getBoundingClientRect().height ?? 0;
+    const bodyTop = tableRect.top + headerHeight;
+    const offsetIntoBody = Math.max(0, viewportTop - bodyTop);
+    const visiblePx = Math.max(0, viewportBottom - Math.max(viewportTop, bodyTop));
+    const startRaw = Math.floor(offsetIntoBody / rowH);
+    const visibleCount = Math.ceil(visiblePx / rowH) + 1;
+    const start = Math.max(0, startRaw - this.virtualOverscan);
+    const end3 = Math.min(total, startRaw + visibleCount + this.virtualOverscan);
+    if (start !== this.__virtualRange.start || end3 !== this.__virtualRange.end) {
+      this.__virtualRange = { start, end: end3 };
+    }
+  }
+  /**
+   * Measures the height of the first rendered body row and stores it for
+   * subsequent virtualization math. Idempotent — only measures once per
+   * `data`/`columns` pair (cleared in `updated()` when those change).
+   */
+  __measureRowHeight() {
+    if (!this.virtualized || this.__rowHeightMeasured) return;
+    const tbody3 = this.shadowRoot?.querySelector("tbody");
+    if (!tbody3) return;
+    const firstRow = Array.from(tbody3.rows).find((r11) => r11.hasAttribute("data-row-idx"));
+    if (!firstRow) return;
+    const h8 = firstRow.getBoundingClientRect().height;
+    if (h8 > 0) {
+      this.__rowHeight = h8;
+      this.__rowHeightMeasured = true;
+    }
+  }
   /**
    * Single function that drives both activation and geometry of the floating
-   * header. Called on scroll, resize, table-resize, and after each render.
+   * header. Called on scroll, resize, table-resize, and after relevant
+   * renders.
+   *
+   * Activation is decided from the *real* header geometry, so this function
+   * works even when the clone subtree hasn't been rendered yet (it's only
+   * rendered when `__floatingActive` is true). The first activation flips
+   * `__floatingActive`; the next render materializes the clone; the next
+   * call here mirrors widths and positions.
    */
   __syncFloatingHeader() {
     const fh = this.__floatingHeaderEl;
     const realTable = this.__realTableEl;
-    const floatTable = this.__floatingTableEl;
-    if (!fh || !realTable || !floatTable) return;
+    if (!fh || !realTable) return;
     const tableRect = realTable.getBoundingClientRect();
     const stick = this.__getStickContext();
-    floatTable.style.tableLayout = realTable.style.tableLayout || "auto";
     const realHeadRows = realTable.tHead?.rows;
-    const floatHeadRows = floatTable.tHead?.rows;
     let headerHeight = 0;
+    if (realHeadRows) {
+      for (let r11 = 0; r11 < realHeadRows.length; r11++) {
+        headerHeight += realHeadRows[r11].getBoundingClientRect().height;
+      }
+    }
+    const shouldBeActive = tableRect.top < stick.top && tableRect.bottom > stick.top + Math.min(headerHeight, 1);
+    if (shouldBeActive !== this.__floatingActive) {
+      this.__floatingActive = shouldBeActive;
+      fh.classList.toggle("active", shouldBeActive);
+      if (shouldBeActive) {
+        this.updateComplete.then(() => this.__syncFloatingHeader());
+        return;
+      }
+    }
+    if (!shouldBeActive) return;
+    const floatTable = this.__floatingTableEl;
+    if (!floatTable) return;
+    floatTable.style.tableLayout = realTable.style.tableLayout || "auto";
+    const floatHeadRows = floatTable.tHead?.rows;
     if (realHeadRows && floatHeadRows) {
       for (let r11 = 0; r11 < realHeadRows.length && r11 < floatHeadRows.length; r11++) {
-        headerHeight += realHeadRows[r11].getBoundingClientRect().height;
         const realCells = realHeadRows[r11].cells;
         const floatCells = floatHeadRows[r11].cells;
         for (let c11 = 0; c11 < realCells.length && c11 < floatCells.length; c11++) {
@@ -165162,12 +165449,6 @@ var _DeesTable = class _DeesTable extends (_a42 = DeesElement, _heading1_dec = [
         }
       }
     }
-    const shouldBeActive = tableRect.top < stick.top && tableRect.bottom > stick.top + Math.min(headerHeight, 1);
-    if (shouldBeActive !== this.__floatingActive) {
-      this.__floatingActive = shouldBeActive;
-      fh.classList.toggle("active", shouldBeActive);
-    }
-    if (!shouldBeActive) return;
     const clipLeft = Math.max(tableRect.left, stick.left);
     const clipRight = Math.min(tableRect.right, stick.right);
     const clipWidth = Math.max(0, clipRight - clipLeft);
@@ -165185,15 +165466,25 @@ var _DeesTable = class _DeesTable extends (_a42 = DeesElement, _heading1_dec = [
   }
   async updated(changedProperties) {
     super.updated(changedProperties);
-    this.determineColumnWidths();
-    if (changedProperties.has("fixedHeight") || changedProperties.has("data") || changedProperties.has("columns") || !this.__floatingScrollHandler) {
-      if (!this.fixedHeight && this.data.length > 0) {
+    const dataOrColsChanged = !this.__columnsSizedFor || this.__columnsSizedFor.data !== this.data || this.__columnsSizedFor.columns !== this.columns;
+    if (dataOrColsChanged) {
+      this.__columnsSizedFor = { data: this.data, columns: this.columns };
+      this.determineColumnWidths();
+      this.__rowHeightMeasured = false;
+    }
+    if (this.virtualized) {
+      this.__measureRowHeight();
+      this.__computeVirtualRange();
+    }
+    if (changedProperties.has("fixedHeight") || changedProperties.has("virtualized") || changedProperties.has("data") || changedProperties.has("columns") || !this.__floatingScrollHandler) {
+      const needsScrollWatchers = (!this.fixedHeight || this.virtualized) && this.data.length > 0;
+      if (needsScrollWatchers) {
         this.setupFloatingHeader();
       } else {
         this.teardownFloatingHeader();
       }
     }
-    if (!this.fixedHeight && this.data.length > 0) {
+    if (!this.fixedHeight && this.data.length > 0 && (this.__floatingActive || dataOrColsChanged)) {
       this.__syncFloatingHeader();
     }
     if (this.searchable) {
@@ -165640,6 +165931,65 @@ var _DeesTable = class _DeesTable extends (_a42 = DeesElement, _heading1_dec = [
     this.emitSelectionChange();
     this.requestUpdate();
   }
+  // ─── Delegated tbody event handlers ─────────────────────────────────
+  // Hoisted from per-<tr> closures to a single set of handlers on <tbody>.
+  // Cuts ~7 closure allocations per row per render. Each handler resolves
+  // the source row via `data-row-idx` (and `data-col-key` for cell-level
+  // events) using the latest `_lastViewData`.
+  __resolveRow(eventArg) {
+    const path2 = eventArg.composedPath?.() || [];
+    let tr3 = null;
+    for (const t9 of path2) {
+      const el = t9;
+      if (el?.tagName === "TR" && el.hasAttribute("data-row-idx")) {
+        tr3 = el;
+        break;
+      }
+    }
+    if (!tr3) return null;
+    const rowIdx = Number(tr3.getAttribute("data-row-idx"));
+    const view = this._lastViewData ?? [];
+    const item = view[rowIdx];
+    if (!item) return null;
+    return { item, rowIdx };
+  }
+  __resolveCell(eventArg) {
+    const row = this.__resolveRow(eventArg);
+    if (!row) return null;
+    const path2 = eventArg.composedPath?.() || [];
+    let td = null;
+    for (const t9 of path2) {
+      const el = t9;
+      if (el?.tagName === "TD" && el.hasAttribute("data-col-key")) {
+        td = el;
+        break;
+      }
+    }
+    if (!td) return null;
+    const colKey = td.getAttribute("data-col-key");
+    const cols = this.__getEffectiveColumns();
+    const col = cols.find((c11) => String(c11.key) === colKey);
+    if (!col) return null;
+    return { item: row.item, rowIdx: row.rowIdx, col };
+  }
+  __isInActionsCol(eventArg) {
+    const path2 = eventArg.composedPath?.() || [];
+    for (const t9 of path2) {
+      const el = t9;
+      if (el?.classList?.contains("actionsCol")) return true;
+    }
+    return false;
+  }
+  __isInEditor(eventArg) {
+    const path2 = eventArg.composedPath?.() || [];
+    for (const t9 of path2) {
+      const el = t9;
+      const tag = el?.tagName;
+      if (tag === "INPUT" || tag === "TEXTAREA" || el?.isContentEditable) return true;
+      if (tag && tag.startsWith("DEES-INPUT-")) return true;
+    }
+    return false;
+  }
   /**
    * Handles row clicks with file-manager style selection semantics:
    *  - plain click: select only this row, set anchor
@@ -165755,38 +166105,193 @@ var _DeesTable = class _DeesTable extends (_a42 = DeesElement, _heading1_dec = [
     }
     return actions;
   }
-  async handleCellEditing(event, itemArg, key2) {
-    await this.domtoolsPromise;
-    const target = event.target;
-    const originalColor = target.style.color;
-    target.style.color = "transparent";
-    const transformedItem = this.displayFunction(itemArg);
-    const initialValue = transformedItem[key2] ?? itemArg[key2] ?? "";
-    const input = document.createElement("input");
-    input.type = "text";
-    input.value = initialValue;
-    const blurInput = /* @__PURE__ */ __name(async (blurArg = true, saveArg = false) => {
-      if (blurArg) {
-        input.blur();
-      }
-      if (saveArg) {
-        itemArg[key2] = input.value;
-        this.changeSubject.next(this);
-      }
-      input.remove();
-      target.style.color = originalColor;
-      this.requestUpdate();
-    }, "blurInput");
-    input.addEventListener("blur", () => {
-      blurInput(false, false);
+  // ─── Cell editing ─────────────────────────────────────────────────────
+  /** True if the column has any in-cell editor configured. */
+  __isColumnEditable(col) {
+    return !!(col.editable || col.editor);
+  }
+  /** Effective columns filtered to those that can be edited (visible only). */
+  __editableColumns(effectiveColumns) {
+    return effectiveColumns.filter((c11) => !c11.hidden && this.__isColumnEditable(c11));
+  }
+  /**
+   * Opens the editor on the given cell. Sets focus + editing state and
+   * focuses the freshly rendered editor on the next frame.
+   */
+  startEditing(item, col) {
+    if (!this.__isColumnEditable(col)) return;
+    const rowId = this.getRowId(item);
+    const colKey = String(col.key);
+    this.__focusedCell = { rowId, colKey };
+    this.__editingCell = { rowId, colKey };
+    this.requestUpdate();
+    this.updateComplete.then(() => {
+      const el = this.shadowRoot?.querySelector(
+        ".editingCell dees-input-text, .editingCell dees-input-checkbox, .editingCell dees-input-dropdown, .editingCell dees-input-datepicker, .editingCell dees-input-tags"
+      );
+      el?.focus?.();
     });
-    input.addEventListener("keydown", (e11) => {
-      if (e11.key === "Enter") {
-        blurInput(true, true);
+  }
+  /** Closes the editor without committing. */
+  cancelCellEdit() {
+    this.__editingCell = void 0;
+    this.requestUpdate();
+  }
+  /**
+   * Commits an editor value to the row. Runs `parse` then `validate`. On
+   * validation failure, fires `cellEditError` and leaves the editor open.
+   * On success, mutates `data` in place, fires `cellEdit`, and closes the
+   * editor.
+   */
+  commitCellEdit(item, col, editorValue) {
+    const key2 = String(col.key);
+    const oldValue = item[col.key];
+    const parsed = col.parse ? col.parse(editorValue, item) : editorValue;
+    if (col.validate) {
+      const result = col.validate(parsed, item);
+      if (typeof result === "string") {
+        this.dispatchEvent(
+          new CustomEvent("cellEditError", {
+            detail: { row: item, key: key2, value: parsed, message: result },
+            bubbles: true,
+            composed: true
+          })
+        );
+        return;
       }
-    });
-    target.appendChild(input);
-    input.focus();
+    }
+    if (parsed !== oldValue) {
+      item[col.key] = parsed;
+      this.dispatchEvent(
+        new CustomEvent("cellEdit", {
+          detail: { row: item, key: key2, oldValue, newValue: parsed },
+          bubbles: true,
+          composed: true
+        })
+      );
+      this.changeSubject.next(this);
+    }
+    this.__editingCell = void 0;
+    this.requestUpdate();
+  }
+  /** Renders the appropriate dees-input-* component for this column. */
+  renderCellEditor(item, col) {
+    const raw2 = item[col.key];
+    const value2 = col.format ? col.format(raw2, item) : raw2;
+    const editorType = col.editor ?? "text";
+    const onTextCommit = /* @__PURE__ */ __name((target) => this.commitCellEdit(item, col, target.value), "onTextCommit");
+    switch (editorType) {
+      case "checkbox":
+        return b2`<dees-input-checkbox
+          .value=${!!value2}
+          @newValue=${(e11) => {
+          e11.stopPropagation();
+          this.commitCellEdit(item, col, e11.detail);
+        }}
+        ></dees-input-checkbox>`;
+      case "dropdown": {
+        const options2 = col.editorOptions?.options ?? [];
+        const selected = options2.find((o13) => (o13?.option ?? o13?.key ?? o13) === value2) ?? null;
+        return b2`<dees-input-dropdown
+          .options=${options2}
+          .selectedOption=${selected}
+          @selectedOption=${(e11) => {
+          e11.stopPropagation();
+          const detail = e11.detail;
+          const newRaw = detail?.option ?? detail?.key ?? detail;
+          this.commitCellEdit(item, col, newRaw);
+        }}
+        ></dees-input-dropdown>`;
+      }
+      case "date":
+        return b2`<dees-input-datepicker
+          .value=${value2}
+          @focusout=${(e11) => onTextCommit(e11.target)}
+          @keydown=${(e11) => this.__handleEditorKey(e11, item, col)}
+        ></dees-input-datepicker>`;
+      case "tags":
+        return b2`<dees-input-tags
+          .value=${value2 ?? []}
+          @focusout=${(e11) => onTextCommit(e11.target)}
+          @keydown=${(e11) => this.__handleEditorKey(e11, item, col)}
+        ></dees-input-tags>`;
+      case "number":
+      case "text":
+      default:
+        return b2`<dees-input-text
+          .value=${value2 == null ? "" : String(value2)}
+          @focusout=${(e11) => onTextCommit(e11.target)}
+          @keydown=${(e11) => this.__handleEditorKey(e11, item, col)}
+        ></dees-input-text>`;
+    }
+  }
+  /**
+   * Centralized keydown handler for text-style editors. Handles Esc (cancel),
+   * Enter (commit + move down) and Tab/Shift+Tab (commit + move horizontally).
+   */
+  __handleEditorKey(eventArg, item, col) {
+    if (eventArg.key === "Escape") {
+      eventArg.preventDefault();
+      eventArg.stopPropagation();
+      this.cancelCellEdit();
+      this.focus();
+    } else if (eventArg.key === "Enter") {
+      eventArg.preventDefault();
+      eventArg.stopPropagation();
+      const target = eventArg.target;
+      this.commitCellEdit(item, col, target.value);
+      this.moveFocusedCell(0, 1, true);
+    } else if (eventArg.key === "Tab") {
+      eventArg.preventDefault();
+      eventArg.stopPropagation();
+      const target = eventArg.target;
+      this.commitCellEdit(item, col, target.value);
+      this.moveFocusedCell(eventArg.shiftKey ? -1 : 1, 0, true);
+    }
+  }
+  /**
+   * Moves the focused cell by `dx` columns and `dy` rows along the editable
+   * grid. Wraps row-end → next row when moving horizontally. If
+   * `andStartEditing` is true, opens the editor on the new cell.
+   */
+  moveFocusedCell(dx, dy, andStartEditing) {
+    const view = this._lastViewData ?? [];
+    if (view.length === 0) return;
+    const allCols = Array.isArray(this.columns) && this.columns.length > 0 ? computeEffectiveColumns(this.columns, this.augmentFromDisplayFunction, this.displayFunction, this.data) : computeColumnsFromDisplayFunction(this.displayFunction, this.data);
+    const editableCols = this.__editableColumns(allCols);
+    if (editableCols.length === 0) return;
+    let rowIdx = 0;
+    let colIdx = 0;
+    if (this.__focusedCell) {
+      rowIdx = view.findIndex((r11) => this.getRowId(r11) === this.__focusedCell.rowId);
+      colIdx = editableCols.findIndex((c11) => String(c11.key) === this.__focusedCell.colKey);
+      if (rowIdx < 0) rowIdx = 0;
+      if (colIdx < 0) colIdx = 0;
+    }
+    if (dx !== 0) {
+      colIdx += dx;
+      while (colIdx >= editableCols.length) {
+        colIdx -= editableCols.length;
+        rowIdx += 1;
+      }
+      while (colIdx < 0) {
+        colIdx += editableCols.length;
+        rowIdx -= 1;
+      }
+    }
+    if (dy !== 0) rowIdx += dy;
+    if (rowIdx < 0 || rowIdx >= view.length) {
+      this.cancelCellEdit();
+      return;
+    }
+    const item = view[rowIdx];
+    const col = editableCols[colIdx];
+    this.__focusedCell = { rowId: this.getRowId(item), colKey: String(col.key) };
+    if (andStartEditing) {
+      this.startEditing(item, col);
+    } else {
+      this.requestUpdate();
+    }
   }
 };
 _init39 = __decoratorStart(_a42);
@@ -165806,7 +166311,6 @@ _augmentFromDisplayFunction = new WeakMap();
 _displayFunction = new WeakMap();
 _reverseDisplayFunction = new WeakMap();
 _selectedDataRow = new WeakMap();
-_editableFields = new WeakMap();
 _showVerticalLines = new WeakMap();
 _showHorizontalLines = new WeakMap();
 _showGrid = new WeakMap();
@@ -165815,10 +166319,16 @@ _filterText = new WeakMap();
 _columnFilters = new WeakMap();
 _showColumnFilters = new WeakMap();
 _showSelectionCheckbox = new WeakMap();
+_virtualized = new WeakMap();
+_virtualOverscan = new WeakMap();
 _fixedHeight = new WeakMap();
 _searchMode = new WeakMap();
 _selectionMode = new WeakMap();
 _selectedIds = new WeakMap();
+___focusedCell = new WeakMap();
+___editingCell = new WeakMap();
+___floatingActive = new WeakMap();
+___virtualRange = new WeakMap();
 __decorateElement(_init39, 4, "heading1", _heading1_dec, _DeesTable, _heading1);
 __decorateElement(_init39, 4, "heading2", _heading2_dec, _DeesTable, _heading22);
 __decorateElement(_init39, 4, "data", _data_dec, _DeesTable, _data);
@@ -165835,7 +166345,6 @@ __decorateElement(_init39, 4, "augmentFromDisplayFunction", _augmentFromDisplayF
 __decorateElement(_init39, 4, "displayFunction", _displayFunction_dec, _DeesTable, _displayFunction);
 __decorateElement(_init39, 4, "reverseDisplayFunction", _reverseDisplayFunction_dec, _DeesTable, _reverseDisplayFunction);
 __decorateElement(_init39, 4, "selectedDataRow", _selectedDataRow_dec, _DeesTable, _selectedDataRow);
-__decorateElement(_init39, 4, "editableFields", _editableFields_dec, _DeesTable, _editableFields);
 __decorateElement(_init39, 4, "showVerticalLines", _showVerticalLines_dec, _DeesTable, _showVerticalLines);
 __decorateElement(_init39, 4, "showHorizontalLines", _showHorizontalLines_dec, _DeesTable, _showHorizontalLines);
 __decorateElement(_init39, 4, "showGrid", _showGrid_dec, _DeesTable, _showGrid);
@@ -165844,10 +166353,16 @@ __decorateElement(_init39, 4, "filterText", _filterText_dec, _DeesTable, _filter
 __decorateElement(_init39, 4, "columnFilters", _columnFilters_dec, _DeesTable, _columnFilters);
 __decorateElement(_init39, 4, "showColumnFilters", _showColumnFilters_dec, _DeesTable, _showColumnFilters);
 __decorateElement(_init39, 4, "showSelectionCheckbox", _showSelectionCheckbox_dec, _DeesTable, _showSelectionCheckbox);
+__decorateElement(_init39, 4, "virtualized", _virtualized_dec, _DeesTable, _virtualized);
+__decorateElement(_init39, 4, "virtualOverscan", _virtualOverscan_dec, _DeesTable, _virtualOverscan);
 __decorateElement(_init39, 4, "fixedHeight", _fixedHeight_dec, _DeesTable, _fixedHeight);
 __decorateElement(_init39, 4, "searchMode", _searchMode_dec, _DeesTable, _searchMode);
 __decorateElement(_init39, 4, "selectionMode", _selectionMode_dec, _DeesTable, _selectionMode);
 __decorateElement(_init39, 4, "selectedIds", _selectedIds_dec, _DeesTable, _selectedIds);
+__decorateElement(_init39, 4, "__focusedCell", ___focusedCell_dec, _DeesTable, ___focusedCell);
+__decorateElement(_init39, 4, "__editingCell", ___editingCell_dec, _DeesTable, ___editingCell);
+__decorateElement(_init39, 4, "__floatingActive", ___floatingActive_dec, _DeesTable, ___floatingActive);
+__decorateElement(_init39, 4, "__virtualRange", ___virtualRange_dec, _DeesTable, ___virtualRange);
 _DeesTable = __decorateElement(_init39, 0, "DeesTable", _DeesTable_decorators, _DeesTable);
 __name(_DeesTable, "DeesTable");
 __publicField(_DeesTable, "demo", demoFunc29);
@@ -199694,7 +200209,7 @@ init_group_runtime();
 // ts_web/00_commitinfo_data.ts
 var commitinfo = {
   name: "@design.estate/dees-catalog",
-  version: "3.64.0",
+  version: "3.66.0",
   description: "A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript."
 };
 export {
@@ -201667,4 +202182,4 @@ ibantools/jsnext/ibantools.js:
    * @preferred
    *)
 */
-//# sourceMappingURL=bundle-1775572474370.js.map
+//# sourceMappingURL=bundle-1775577430289.js.map