@design.estate/dees-catalog 3.65.0 → 3.66.0

package/dist_bundle/bundle.js

@@ -163781,7 +163781,8 @@ var demoFunc29 = /* @__PURE__ */ __name(() => b2`
         <dees-table
           id="scrollSmallHeight"
           .fixedHeight=${true}
-          heading1="People Directory (Scrollable)"
+          .virtualized=${true}
+          heading1="People Directory (Scrollable, Virtualized)"
           heading2="Forced scrolling with many items"
           .columns=${[
   { key: "id", header: "ID", sortable: true },
@@ -164580,7 +164581,7 @@ __name(compileLucenePredicate, "compileLucenePredicate");
 init_dist_ts30();
 init_dist_ts29();
 init_theme();
-var ___editingCell_dec, ___focusedCell_dec, _selectedIds_dec, _selectionMode_dec, _searchMode_dec, _fixedHeight_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, _fixedHeight, _searchMode, _selectionMode, _selectedIds, ___focusedCell, ___editingCell;
+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;
@@ -164627,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 })], ___focusedCell_dec = [r5()], ___editingCell_dec = [r5()], _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);
@@ -164658,12 +164659,14 @@ var _DeesTable = class _DeesTable extends (_a42 = DeesElement, _heading1_dec = [
     __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, _fixedHeight, __runInitializers(_init39, 104, this, false)), __runInitializers(_init39, 107, this);
-    __privateAdd(this, _searchMode, __runInitializers(_init39, 108, this, "table")), __runInitializers(_init39, 111, 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, 112, this, "none")), __runInitializers(_init39, 115, this);
-    __privateAdd(this, _selectedIds, __runInitializers(_init39, 116, this, /* @__PURE__ */ new Set())), __runInitializers(_init39, 119, 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);
     /**
@@ -164672,8 +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, 120, this)), __runInitializers(_init39, 123, this);
-    __privateAdd(this, ___editingCell, __runInitializers(_init39, 124, this)), __runInitializers(_init39, 127, this);
+    __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
@@ -164753,9 +164771,110 @@ var _DeesTable = class _DeesTable extends (_a42 = DeesElement, _heading1_dec = [
     // ─── 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);
   }
@@ -164788,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">
@@ -164873,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;">
@@ -164971,7 +165084,6 @@ var _DeesTable = class _DeesTable extends (_a42 = DeesElement, _heading1_dec = [
         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 rowId = this.getRowId(itemArg);
         const isFocused = this.__focusedCell?.rowId === rowId && this.__focusedCell?.colKey === editKey;
         const isEditing = this.__editingCell?.rowId === rowId && this.__editingCell?.colKey === editKey;
         const cellClasses = [
@@ -164982,26 +165094,7 @@ var _DeesTable = class _DeesTable extends (_a42 = DeesElement, _heading1_dec = [
         return b2`
                               <td
                                 class=${cellClasses}
-                                @click=${(e11) => {
-          if (isEditing) {
-            e11.stopPropagation();
-            return;
-          }
-          if (isEditable) {
-            this.__focusedCell = { rowId, colKey: editKey };
-          }
-        }}
-                                @dblclick=${(e11) => {
-          const dblAction = this.dataActions.find(
-            (actionArg) => actionArg.type?.includes("doubleClick")
-          );
-          if (isEditable) {
-            e11.stopPropagation();
-            this.startEditing(itemArg, col);
-          } else if (dblAction) {
-            dblAction.actionFunc({ item: itemArg, table: this });
-          }
-        }}
+                                data-col-key=${editKey}
                               >
                                 <div class="innerCellContainer">
                                   ${isEditing ? this.renderCellEditor(itemArg, col) : content3}
@@ -165034,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">
@@ -165202,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();
@@ -165236,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++) {
@@ -165264,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);
@@ -165287,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) {
@@ -165742,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
@@ -166071,12 +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);
@@ -166101,12 +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);
@@ -199953,7 +200209,7 @@ init_group_runtime();
 // ts_web/00_commitinfo_data.ts
 var commitinfo = {
   name: "@design.estate/dees-catalog",
-  version: "3.65.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 {
@@ -201926,4 +202182,4 @@ ibantools/jsnext/ibantools.js:
    * @preferred
    *)
 */
-//# sourceMappingURL=bundle-1775575945430.js.map
+//# sourceMappingURL=bundle-1775577430289.js.map