@alaarab/ogrid-js 2.4.0 → 2.4.2

package/dist/esm/index.js

@@ -1221,7 +1221,8 @@ function computeCellDescriptor(item, col, rowIndex, colIdx, input) {
     globalColIndex,
     rowId,
     rowIndex,
-    displayValue: formulaDisplay !== void 0 ? formulaDisplay : cellValue
+    displayValue: formulaDisplay !== void 0 ? formulaDisplay : cellValue,
+    columnType: col.type
   };
 }
 function resolveCellDisplayContent(col, item, displayValue) {
@@ -1354,6 +1355,8 @@ var CHECKBOX_COLUMN_WIDTH = 48;
 var ROW_NUMBER_COLUMN_WIDTH = 50;
 var DEFAULT_MIN_COLUMN_WIDTH = 80;
 var CELL_PADDING = 16;
+var ROW_NUMBER_COLUMN_MIN_WIDTH = 30;
+var ROW_NUMBER_COLUMN_ID = "__row_number__";
 var GRID_BORDER_RADIUS = 6;
 var AUTOSIZE_EXTRA_PX = 16;
 var AUTOSIZE_MAX_PX = 520;
@@ -7579,12 +7582,13 @@ var TableRenderer = class {
       const target = e.target;
       if (target.classList.contains("ogrid-resize-handle")) {
         e.stopPropagation();
+        const handleColumnId = target.getAttribute("data-column-id");
         const th = target.closest("th[data-column-id]");
-        if (!th) return;
-        const columnId = th.getAttribute("data-column-id");
+        const columnId = handleColumnId ?? th?.getAttribute("data-column-id");
         if (columnId) {
-          const rect = th.getBoundingClientRect();
-          this.interactionState?.onResizeStart?.(columnId, e.clientX, rect.width);
+          const parentTh = target.closest("th");
+          const rect = parentTh?.getBoundingClientRect();
+          this.interactionState?.onResizeStart?.(columnId, e.clientX, rect?.width ?? ROW_NUMBER_COLUMN_WIDTH);
         }
         return;
       }
@@ -7602,9 +7606,9 @@ var TableRenderer = class {
       const target = e.target;
       if (target.classList.contains("ogrid-resize-handle")) {
         e.stopPropagation();
+        const handleColumnId = target.getAttribute("data-column-id");
         const th = target.closest("th[data-column-id]");
-        if (!th) return;
-        const columnId = th.getAttribute("data-column-id");
+        const columnId = handleColumnId ?? th?.getAttribute("data-column-id");
         if (columnId) {
           this.interactionState?.onResizeDoubleClick?.(columnId);
         }
@@ -7681,6 +7685,9 @@ var TableRenderer = class {
     parts.push(`allSel:${is?.allSelected ?? ""}`);
     parts.push(`someSel:${is?.someSelected ?? ""}`);
     parts.push(`rn:${is?.showRowNumbers ?? ""}`);
+    if (is?.showRowNumbers) {
+      parts.push(`rnw:${is?.columnWidths[ROW_NUMBER_COLUMN_ID] ?? ""}`);
+    }
     parts.push(`cl:${is?.showColumnLetters ?? ""}`);
     for (const [colId, config] of this.filterConfigs) {
       const hasActive = this.headerFilterState?.hasActiveFilter(config);
@@ -7896,7 +7903,8 @@ var TableRenderer = class {
       if (hasRowNumbers) {
         const th = document.createElement("th");
         th.className = "ogrid-column-letter-cell";
-        th.style.width = `${ROW_NUMBER_COLUMN_WIDTH}px`;
+        const rnw = this.interactionState?.columnWidths[ROW_NUMBER_COLUMN_ID] ?? ROW_NUMBER_COLUMN_WIDTH;
+        th.style.width = `${rnw}px`;
         letterTr.appendChild(th);
       }
       for (let colIdx = 0; colIdx < visibleCols.length; colIdx++) {
@@ -7909,17 +7917,49 @@ var TableRenderer = class {
     }
     const headerRows = buildHeaderRows(this.state.allColumns, this.state.visibleColumns);
     if (headerRows.length > 1) {
-      for (const row of headerRows) {
+      for (let rowIdx = 0; rowIdx < headerRows.length; rowIdx++) {
+        const row = headerRows[rowIdx];
+        const isLastRow = rowIdx === headerRows.length - 1;
         const tr = document.createElement("tr");
         if (hasCheckbox) {
           const th = document.createElement("th");
           th.className = "ogrid-header-cell ogrid-checkbox-header";
           th.style.width = `${CHECKBOX_COLUMN_WIDTH}px`;
-          if (row === headerRows[headerRows.length - 1]) {
+          if (isLastRow) {
             this.appendSelectAllCheckbox(th);
           }
           tr.appendChild(th);
         }
+        if (hasRowNumbers) {
+          if (isLastRow) {
+            const rnw = this.interactionState?.columnWidths[ROW_NUMBER_COLUMN_ID] ?? ROW_NUMBER_COLUMN_WIDTH;
+            const th = document.createElement("th");
+            th.className = "ogrid-header-cell ogrid-row-number-header";
+            th.style.width = `${rnw}px`;
+            th.style.minWidth = `${rnw}px`;
+            th.style.maxWidth = `${rnw}px`;
+            th.style.textAlign = "center";
+            th.style.position = th.style.position || "relative";
+            th.textContent = "#";
+            const resizeHandle = document.createElement("div");
+            resizeHandle.className = "ogrid-resize-handle";
+            resizeHandle.style.position = "absolute";
+            resizeHandle.style.right = "0";
+            resizeHandle.style.top = "0";
+            resizeHandle.style.bottom = "0";
+            resizeHandle.style.width = "4px";
+            resizeHandle.style.cursor = "col-resize";
+            resizeHandle.style.userSelect = "none";
+            resizeHandle.setAttribute("data-column-id", ROW_NUMBER_COLUMN_ID);
+            th.appendChild(resizeHandle);
+            tr.appendChild(th);
+          } else if (rowIdx === 0) {
+            const th = document.createElement("th");
+            th.rowSpan = headerRows.length - 1;
+            th.style.padding = "0";
+            tr.appendChild(th);
+          }
+        }
         for (const cell of row) {
           const th = document.createElement("th");
           th.textContent = cell.label;
@@ -7954,11 +7994,26 @@ var TableRenderer = class {
         tr.appendChild(th);
       }
       if (this.hasRowNumbersColumn()) {
+        const rnw = this.interactionState?.columnWidths[ROW_NUMBER_COLUMN_ID] ?? ROW_NUMBER_COLUMN_WIDTH;
         const th = document.createElement("th");
         th.className = "ogrid-header-cell ogrid-row-number-header";
-        th.style.width = `${ROW_NUMBER_COLUMN_WIDTH}px`;
+        th.style.width = `${rnw}px`;
+        th.style.minWidth = `${rnw}px`;
+        th.style.maxWidth = `${rnw}px`;
         th.style.textAlign = "center";
+        th.style.position = th.style.position || "relative";
         th.textContent = "#";
+        const resizeHandle = document.createElement("div");
+        resizeHandle.className = "ogrid-resize-handle";
+        resizeHandle.style.position = "absolute";
+        resizeHandle.style.right = "0";
+        resizeHandle.style.top = "0";
+        resizeHandle.style.bottom = "0";
+        resizeHandle.style.width = "4px";
+        resizeHandle.style.cursor = "col-resize";
+        resizeHandle.style.userSelect = "none";
+        resizeHandle.setAttribute("data-column-id", ROW_NUMBER_COLUMN_ID);
+        th.appendChild(resizeHandle);
         tr.appendChild(th);
       }
       for (let colIdx = 0; colIdx < visibleCols.length; colIdx++) {
@@ -8130,9 +8185,12 @@ var TableRenderer = class {
         tr.appendChild(td);
       }
       if (hasRowNumbers) {
+        const rnw = this.interactionState?.columnWidths[ROW_NUMBER_COLUMN_ID] ?? ROW_NUMBER_COLUMN_WIDTH;
         const td = document.createElement("td");
         td.className = "ogrid-cell ogrid-row-number-cell";
-        td.style.width = `${ROW_NUMBER_COLUMN_WIDTH}px`;
+        td.style.width = `${rnw}px`;
+        td.style.minWidth = `${rnw}px`;
+        td.style.maxWidth = `${rnw}px`;
         td.style.textAlign = "center";
         td.style.color = "var(--ogrid-fg-muted, #666)";
         td.style.fontSize = "0.9em";
@@ -8188,7 +8246,16 @@ var TableRenderer = class {
         } else {
           const rawValue = getCellValue(item, col);
           const value = this.formulaEngine?.isEnabled() && this.formulaEngine.hasFormula(colIndex, rowIndex) ? this.formulaEngine.getValue(colIndex, rowIndex) ?? rawValue : rawValue;
-          if (col.valueFormatter) {
+          if (col.type === "boolean") {
+            const checkbox = document.createElement("input");
+            checkbox.type = "checkbox";
+            checkbox.checked = Boolean(value);
+            checkbox.disabled = true;
+            checkbox.style.margin = "0";
+            checkbox.style.pointerEvents = "none";
+            checkbox.setAttribute("aria-label", value ? "True" : "False");
+            td.appendChild(checkbox);
+          } else if (col.valueFormatter) {
             td.textContent = col.valueFormatter(value, item);
           } else if (value != null) {
             td.textContent = String(value);
@@ -10329,13 +10396,15 @@ var ColumnResizeState = class {
   updateResize(clientX) {
     if (!this.isResizing || !this.resizeColumnId) return null;
     const delta = clientX - this.resizeStartX;
-    const newWidth = Math.max(DEFAULT_MIN_COLUMN_WIDTH, this.resizeStartWidth + delta);
+    const minW = this.resizeColumnId === ROW_NUMBER_COLUMN_ID ? ROW_NUMBER_COLUMN_MIN_WIDTH : DEFAULT_MIN_COLUMN_WIDTH;
+    const newWidth = Math.max(minW, this.resizeStartWidth + delta);
     return newWidth;
   }
   endResize(clientX) {
     if (!this.isResizing || !this.resizeColumnId) return;
     const delta = clientX - this.resizeStartX;
-    const newWidth = Math.max(DEFAULT_MIN_COLUMN_WIDTH, this.resizeStartWidth + delta);
+    const minW = this.resizeColumnId === ROW_NUMBER_COLUMN_ID ? ROW_NUMBER_COLUMN_MIN_WIDTH : DEFAULT_MIN_COLUMN_WIDTH;
+    const newWidth = Math.max(minW, this.resizeStartWidth + delta);
     this.columnWidths.set(this.resizeColumnId, newWidth);
     this.emitter.emit("columnWidthChange", { columnId: this.resizeColumnId, widthPx: newWidth });
     this.isResizing = false;
@@ -10798,6 +10867,7 @@ var InlineCellEditor = class {
     this.onCommit = null;
     this.onCancel = null;
     this.onAfterCommit = null;
+    this.scrollCleanup = null;
     this.container = container;
   }
   startEdit(rowId, columnId, item, column, cell, onCommit, onCancel, onAfterCommit) {
@@ -10836,6 +10906,14 @@ var InlineCellEditor = class {
       } else {
         dropdownEl.style.top = `${rect.bottom}px`;
       }
+      const scrollParent = editor.closest(".ogrid-table-wrapper") ?? editor.closest('[style*="overflow"]');
+      const handleScroll = () => this.closeEditor();
+      if (scrollParent) scrollParent.addEventListener("scroll", handleScroll, { passive: true });
+      window.addEventListener("scroll", handleScroll, { passive: true });
+      this.scrollCleanup = () => {
+        if (scrollParent) scrollParent.removeEventListener("scroll", handleScroll);
+        window.removeEventListener("scroll", handleScroll);
+      };
     }
   }
   /** Returns the cell currently being edited, or null if no editor is open. */
@@ -10843,6 +10921,8 @@ var InlineCellEditor = class {
     return this.editingCell;
   }
   closeEditor() {
+    this.scrollCleanup?.();
+    this.scrollCleanup = null;
     if (this.editingCell && this.container.isConnected) {
       const { rowId, columnId } = this.editingCell;
       const row = this.container.querySelector(`tr[data-row-id="${rowId}"]`);
@@ -10928,6 +11008,8 @@ var InlineCellEditor = class {
         e.stopPropagation();
         this.onCancel?.();
         this.closeEditor();
+      } else if (["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown"].includes(e.key)) {
+        e.stopPropagation();
       } else if ((e.ctrlKey || e.metaKey) && ["c", "x", "v", "a", "z", "y"].includes(e.key)) {
         e.stopPropagation();
       }
@@ -10972,6 +11054,8 @@ var InlineCellEditor = class {
         e.stopPropagation();
         this.onCancel?.();
         this.closeEditor();
+      } else if (["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown"].includes(e.key)) {
+        e.stopPropagation();
       }
     });
     return input;
@@ -11070,6 +11154,7 @@ var InlineCellEditor = class {
     };
     buildOptions();
     wrapper.addEventListener("keydown", (e) => {
+      e.stopPropagation();
       switch (e.key) {
         case "ArrowDown": {
           e.preventDefault();
@@ -11191,6 +11276,8 @@ var InlineCellEditor = class {
         e.stopPropagation();
         this.onCancel?.();
         this.closeEditor();
+      } else if (["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown"].includes(e.key)) {
+        e.stopPropagation();
       } else if ((e.ctrlKey || e.metaKey) && ["c", "x", "v", "a", "z", "y"].includes(e.key)) {
         e.stopPropagation();
       }
@@ -12756,4 +12843,4 @@ var OGrid = class {
   }
 };
 
-export { AUTOSIZE_EXTRA_PX, AUTOSIZE_MAX_PX, CELL_PADDING, CHECKBOX_COLUMN_WIDTH, CIRC_ERROR, COLUMN_HEADER_MENU_ITEMS, CellDescriptorCache, ClipboardState, ColumnChooser, ColumnPinningState, ColumnReorderState, ColumnResizeState, ContextMenu, DEFAULT_DEBOUNCE_MS, DEFAULT_MIN_COLUMN_WIDTH, DIV_ZERO_ERROR, DependencyGraph, EventEmitter, FORMULA_BAR_CSS, FORMULA_BAR_STYLES, FORMULA_REF_COLORS, FillHandleState, FormulaBar, FormulaEngine, FormulaEngineState, FormulaError, FormulaEvaluator, GENERAL_ERROR, GRID_BORDER_RADIUS, GRID_CONTEXT_MENU_ITEMS, GridState, HeaderFilter, HeaderFilterState, InlineCellEditor, KeyboardNavState, MAX_PAGE_BUTTONS, MarchingAntsOverlay, NAME_ERROR, NA_ERROR, OGrid, OGridEventWiring, OGridRendering, PAGE_SIZE_OPTIONS, PEOPLE_SEARCH_DEBOUNCE_MS, PaginationControls, REF_ERROR, ROW_NUMBER_COLUMN_WIDTH, RowSelectionState, SIDEBAR_TRANSITION_MS, SelectionState, SideBar, SideBarState, StatusBar, TableLayoutState, TableRenderer, UndoRedoStack, UndoRedoState, VALUE_ERROR, VirtualScrollState, Z_INDEX, adjustFormulaReferences, applyCellDeletion, applyCutClear, applyFillValues, applyPastedValues, applyRangeRowSelection, areGridRowPropsEqual, booleanParser, buildCellIndex, buildCsvHeader, buildCsvRows, buildHeaderRows, buildInlineEditorProps, buildPopoverEditorProps, calculateDropTarget, clampSelectionToBounds, columnLetterToIndex, computeAggregations, computeArrowNavigation, computeAutoScrollSpeed, computeNextSortState, computeRowSelectionState, computeTabNavigation, computeTotalHeight, computeVisibleColumnRange, computeVisibleRange, createBuiltInFunctions, createGridDataAccessor, createSortFilterWorker, currencyParser, dateParser, debounce, deriveFilterOptionsFromData, deriveFormulaBarText, emailParser, escapeCsvValue, exportToCsv, extractFormulaReferences, extractValueMatrix, findCtrlArrowTarget, flattenArgs, flattenColumns, formatAddress, formatCellReference, formatCellValueForTsv, formatSelectionAsTsv, formatShortcut, toString as formulaToString, fromCellKey, getCellRenderDescriptor, getCellValue, getColumnHeaderMenuItems, getContextMenuHandlers, getDataGridStatusBarConfig, getFilterField, getHeaderFilterConfig, getMultiSelectFilterFields, getPaginationViewModel, getPinStateForColumn, getScrollTopForRow, getStatusBarParts, handleFormulaBarKeyDown, indexToColumnLetter, injectGlobalStyles, isColumnEditable, isFilterConfig, isFormulaError, isInSelectionRange, isRowInRange, measureColumnContentWidth, measureRange, mergeFilter, normalizeSelectionRange, numberParser, parse, parseCellRef, parseRange, parseTsvClipboard, parseValue, partitionColumnsForVirtualization, processClientSideData, processClientSideDataAsync, processFormulaBarCommit, rangesEqual, reorderColumnArray, resolveCellDisplayContent, resolveCellStyle, terminateSortFilterWorker, toBoolean, toCellKey, toNumber, toUserLike, tokenize, triggerCsvDownload, validateColumns, validateRowIds, validateVirtualScrollConfig };
+export { AUTOSIZE_EXTRA_PX, AUTOSIZE_MAX_PX, CELL_PADDING, CHECKBOX_COLUMN_WIDTH, CIRC_ERROR, COLUMN_HEADER_MENU_ITEMS, CellDescriptorCache, ClipboardState, ColumnChooser, ColumnPinningState, ColumnReorderState, ColumnResizeState, ContextMenu, DEFAULT_DEBOUNCE_MS, DEFAULT_MIN_COLUMN_WIDTH, DIV_ZERO_ERROR, DependencyGraph, EventEmitter, FORMULA_BAR_CSS, FORMULA_BAR_STYLES, FORMULA_REF_COLORS, FillHandleState, FormulaBar, FormulaEngine, FormulaEngineState, FormulaError, FormulaEvaluator, GENERAL_ERROR, GRID_BORDER_RADIUS, GRID_CONTEXT_MENU_ITEMS, GridState, HeaderFilter, HeaderFilterState, InlineCellEditor, KeyboardNavState, MAX_PAGE_BUTTONS, MarchingAntsOverlay, NAME_ERROR, NA_ERROR, OGrid, OGridEventWiring, OGridRendering, PAGE_SIZE_OPTIONS, PEOPLE_SEARCH_DEBOUNCE_MS, PaginationControls, REF_ERROR, ROW_NUMBER_COLUMN_ID, ROW_NUMBER_COLUMN_MIN_WIDTH, ROW_NUMBER_COLUMN_WIDTH, RowSelectionState, SIDEBAR_TRANSITION_MS, SelectionState, SideBar, SideBarState, StatusBar, TableLayoutState, TableRenderer, UndoRedoStack, UndoRedoState, VALUE_ERROR, VirtualScrollState, Z_INDEX, adjustFormulaReferences, applyCellDeletion, applyCutClear, applyFillValues, applyPastedValues, applyRangeRowSelection, areGridRowPropsEqual, booleanParser, buildCellIndex, buildCsvHeader, buildCsvRows, buildHeaderRows, buildInlineEditorProps, buildPopoverEditorProps, calculateDropTarget, clampSelectionToBounds, columnLetterToIndex, computeAggregations, computeArrowNavigation, computeAutoScrollSpeed, computeNextSortState, computeRowSelectionState, computeTabNavigation, computeTotalHeight, computeVisibleColumnRange, computeVisibleRange, createBuiltInFunctions, createGridDataAccessor, createSortFilterWorker, currencyParser, dateParser, debounce, deriveFilterOptionsFromData, deriveFormulaBarText, emailParser, escapeCsvValue, exportToCsv, extractFormulaReferences, extractValueMatrix, findCtrlArrowTarget, flattenArgs, flattenColumns, formatAddress, formatCellReference, formatCellValueForTsv, formatSelectionAsTsv, formatShortcut, toString as formulaToString, fromCellKey, getCellRenderDescriptor, getCellValue, getColumnHeaderMenuItems, getContextMenuHandlers, getDataGridStatusBarConfig, getFilterField, getHeaderFilterConfig, getMultiSelectFilterFields, getPaginationViewModel, getPinStateForColumn, getScrollTopForRow, getStatusBarParts, handleFormulaBarKeyDown, indexToColumnLetter, injectGlobalStyles, isColumnEditable, isFilterConfig, isFormulaError, isInSelectionRange, isRowInRange, measureColumnContentWidth, measureRange, mergeFilter, normalizeSelectionRange, numberParser, parse, parseCellRef, parseRange, parseTsvClipboard, parseValue, partitionColumnsForVirtualization, processClientSideData, processClientSideDataAsync, processFormulaBarCommit, rangesEqual, reorderColumnArray, resolveCellDisplayContent, resolveCellStyle, terminateSortFilterWorker, toBoolean, toCellKey, toNumber, toUserLike, tokenize, triggerCsvDownload, validateColumns, validateRowIds, validateVirtualScrollConfig };

package/dist/types/components/InlineCellEditor.d.ts

@@ -8,6 +8,7 @@ export declare class InlineCellEditor<T> {
     private onCommit;
     private onCancel;
     private onAfterCommit;
+    private scrollCleanup;
     constructor(container: HTMLElement);
     startEdit(rowId: RowId, columnId: string, item: T, column: IColumnDef<T>, cell: HTMLTableCellElement, onCommit: (rowId: RowId, columnId: string, value: unknown) => void, onCancel: () => void, onAfterCommit?: () => void): void;
     /** Returns the cell currently being edited, or null if no editor is open. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alaarab/ogrid-js",
-  "version": "2.4.0",
+  "version": "2.4.2",
   "description": "OGrid vanilla JS – framework-free data grid with sorting, filtering, pagination, and spreadsheet-style editing.",
   "main": "dist/esm/index.js",
   "module": "dist/esm/index.js",
@@ -36,7 +36,7 @@
     "node": ">=18"
   },
   "dependencies": {
-    "@alaarab/ogrid-core": "2.4.0"
+    "@alaarab/ogrid-core": "2.4.2"
   },
   "sideEffects": [
     "**/*.css"