@toolbox-web/grid 1.4.0 → 1.6.0

package/lib/plugins/selection/SelectionPlugin.d.ts

@@ -105,6 +105,11 @@ export declare class SelectionPlugin extends BaseGridPlugin<SelectionConfig> {
     private pendingKeyboardUpdate;
     /** Cell selection state (cell mode) */
     private selectedCell;
+    /**
+     * Check if selection is enabled at the grid level.
+     * Grid-wide `selectable: false` or plugin's `enabled: false` disables all selection.
+     */
+    private isSelectionEnabled;
     /**
      * Check if a row/cell is selectable.
      * Returns true if selectable, false if not.

package/lib/plugins/selection/SelectionPlugin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SelectionPlugin.d.ts","sourceRoot":"","sources":["../../../../../../libs/grid/src/lib/plugins/selection/SelectionPlugin.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAGH,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAC;AACpE,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAC;AAW/F,OAAO,KAAK,EACV,SAAS,EAGT,eAAe,EAEf,eAAe,EAChB,MAAM,SAAS,CAAC;AAyCjB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8EG;AACH,qBAAa,eAAgB,SAAQ,cAAc,CAAC,eAAe,CAAC;;IAClE;;;OAGG;IACH,gBAAyB,QAAQ,EAAE,cAAc,CAAC,eAAe,CAAC,CAYhE;IAEF,gBAAgB;IAChB,QAAQ,CAAC,IAAI,eAAe;IAC5B,gBAAgB;IAChB,SAAkB,MAAM,SAAU;IAElC,gBAAgB;IAChB,cAAuB,aAAa,IAAI,OAAO,CAAC,eAAe,CAAC,CAK/D;IAGD,qCAAqC;IACrC,OAAO,CAAC,QAAQ,CAAqB;IACrC,OAAO,CAAC,YAAY,CAAuB;IAC3C,OAAO,CAAC,MAAM,CAAuB;IAErC,yCAAyC;IACzC,OAAO,CAAC,MAAM,CAA2B;IACzC,OAAO,CAAC,WAAW,CAAkC;IACrD,OAAO,CAAC,UAAU,CAA6C;IAC/D,OAAO,CAAC,UAAU,CAAS;IAE3B,oEAAoE;IACpE,OAAO,CAAC,qBAAqB,CAAsC;IAEnE,uCAAuC;IACvC,OAAO,CAAC,YAAY,CAA6C;IAMjE;;;OAGG;IACH,OAAO,CAAC,eAAe;IAWvB;;OAEG;IACH,OAAO,CAAC,eAAe;IAIvB;;OAEG;IACH,OAAO,CAAC,gBAAgB;IAQxB,gBAAgB;IACP,MAAM,IAAI,IAAI;IAcvB,gBAAgB;IACP,WAAW,CAAC,KAAK,EAAE,cAAc,GAAG,OAAO;IA4HpD,gBAAgB;IACP,SAAS,CAAC,KAAK,EAAE,aAAa,GAAG,OAAO;IA+GjD,gBAAgB;IACP,eAAe,CAAC,KAAK,EAAE,cAAc,GAAG,OAAO,GAAG,IAAI;IAwD/D,gBAAgB;IACP,eAAe,CAAC,KAAK,EAAE,cAAc,GAAG,OAAO,GAAG,IAAI;IAqC/D,gBAAgB;IACP,aAAa,CAAC,MAAM,EAAE,cAAc,GAAG,OAAO,GAAG,IAAI;IAoH9D,gBAAgB;IACP,WAAW,IAAI,IAAI;IA0C5B;;;;OAIG;IACM,cAAc,IAAI,IAAI;IAQ/B;;;;;;;;;;;;;;OAcG;IACH,YAAY,IAAI,eAAe;IAQ/B;;OAEG;IACH,gBAAgB,IAAI,KAAK,CAAC;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAA;KAAE,CAAC;IAIvD;;OAEG;IACH,cAAc,CAAC,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,OAAO;IAIjD;;OAEG;IACH,cAAc,IAAI,IAAI;IAWtB;;OAEG;IACH,SAAS,CAAC,MAAM,EAAE,SAAS,EAAE,GAAG,IAAI;CAgCrC"}
+{"version":3,"file":"SelectionPlugin.d.ts","sourceRoot":"","sources":["../../../../../../libs/grid/src/lib/plugins/selection/SelectionPlugin.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAGH,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAC;AACpE,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAC;AAW/F,OAAO,KAAK,EACV,SAAS,EAGT,eAAe,EAEf,eAAe,EAChB,MAAM,SAAS,CAAC;AAyCjB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8EG;AACH,qBAAa,eAAgB,SAAQ,cAAc,CAAC,eAAe,CAAC;;IAClE;;;OAGG;IACH,gBAAyB,QAAQ,EAAE,cAAc,CAAC,eAAe,CAAC,CAYhE;IAEF,gBAAgB;IAChB,QAAQ,CAAC,IAAI,eAAe;IAC5B,gBAAgB;IAChB,SAAkB,MAAM,SAAU;IAElC,gBAAgB;IAChB,cAAuB,aAAa,IAAI,OAAO,CAAC,eAAe,CAAC,CAM/D;IAGD,qCAAqC;IACrC,OAAO,CAAC,QAAQ,CAAqB;IACrC,OAAO,CAAC,YAAY,CAAuB;IAC3C,OAAO,CAAC,MAAM,CAAuB;IAErC,yCAAyC;IACzC,OAAO,CAAC,MAAM,CAA2B;IACzC,OAAO,CAAC,WAAW,CAAkC;IACrD,OAAO,CAAC,UAAU,CAA6C;IAC/D,OAAO,CAAC,UAAU,CAAS;IAE3B,oEAAoE;IACpE,OAAO,CAAC,qBAAqB,CAAsC;IAEnE,uCAAuC;IACvC,OAAO,CAAC,YAAY,CAA6C;IAMjE;;;OAGG;IACH,OAAO,CAAC,kBAAkB;IAW1B;;;OAGG;IACH,OAAO,CAAC,eAAe;IAWvB;;OAEG;IACH,OAAO,CAAC,eAAe;IAIvB;;OAEG;IACH,OAAO,CAAC,gBAAgB;IAQxB,gBAAgB;IACP,MAAM,IAAI,IAAI;IAcvB,gBAAgB;IACP,WAAW,CAAC,KAAK,EAAE,cAAc,GAAG,OAAO;IA+HpD,gBAAgB;IACP,SAAS,CAAC,KAAK,EAAE,aAAa,GAAG,OAAO;IAkHjD,gBAAgB;IACP,eAAe,CAAC,KAAK,EAAE,cAAc,GAAG,OAAO,GAAG,IAAI;IA2D/D,gBAAgB;IACP,eAAe,CAAC,KAAK,EAAE,cAAc,GAAG,OAAO,GAAG,IAAI;IAwC/D,gBAAgB;IACP,aAAa,CAAC,MAAM,EAAE,cAAc,GAAG,OAAO,GAAG,IAAI;IAuH9D,gBAAgB;IACP,WAAW,IAAI,IAAI;IA6C5B;;;;OAIG;IACM,cAAc,IAAI,IAAI;IAW/B;;;;;;;;;;;;;;OAcG;IACH,YAAY,IAAI,eAAe;IAQ/B;;OAEG;IACH,gBAAgB,IAAI,KAAK,CAAC;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAA;KAAE,CAAC;IAIvD;;OAEG;IACH,cAAc,CAAC,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,OAAO;IAIjD;;OAEG;IACH,cAAc,IAAI,IAAI;IAWtB;;OAEG;IACH,SAAS,CAAC,MAAM,EAAE,SAAS,EAAE,GAAG,IAAI;CAgCrC"}

package/lib/plugins/selection/index.js

@@ -6,15 +6,15 @@ function y(r) {
   if (!t) return -1;
   const s = t.parentElement;
   if (!s) return -1;
-  const l = s.querySelectorAll(":scope > .data-grid-row");
-  for (let i = 0; i < l.length; i++)
-    if (l[i] === t) return i;
+  const i = s.querySelectorAll(":scope > .data-grid-row");
+  for (let l = 0; l < i.length; l++)
+    if (i[l] === t) return l;
   return -1;
 }
 function m(r) {
   r && r.querySelectorAll(".cell-focus").forEach((e) => e.classList.remove("cell-focus"));
 }
-const R = '<svg viewBox="0 0 16 16" width="12" height="12"><path fill="currentColor" d="M6 10.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5zm-2-3a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm-2-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5z"/></svg>', v = {
+const R = '<svg viewBox="0 0 16 16" width="12" height="12"><path fill="currentColor" d="M6 10.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5zm-2-3a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm-2-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5z"/></svg>', S = {
   expand: "▶",
   collapse: "▼",
   sortAsc: "▲",
@@ -27,7 +27,7 @@ const R = '<svg viewBox="0 0 16 16" width="12" height="12"><path fill="currentCo
   filterActive: R,
   print: "🖨️"
 };
-class I {
+class v {
   /**
    * Plugin dependencies - declare other plugins this one requires.
    *
@@ -251,7 +251,7 @@ class I {
    */
   get gridIcons() {
     const e = this.grid?.gridConfig?.icons ?? {};
-    return { ...v, ...e };
+    return { ...S, ...e };
   }
   // #region Animation Helpers
   /**
@@ -338,7 +338,7 @@ function u(r) {
     endCol: Math.max(r.startCol, r.endCol)
   };
 }
-function S(r) {
+function E(r) {
   const e = u(r);
   return {
     from: { row: e.startRow, col: e.startCol },
@@ -346,20 +346,20 @@ function S(r) {
   };
 }
 function p(r) {
-  return r.map(S);
+  return r.map(E);
 }
-function E(r, e, t) {
+function I(r, e, t) {
   const s = u(t);
   return r >= s.startRow && r <= s.endRow && e >= s.startCol && e <= s.endCol;
 }
 function C(r, e, t) {
-  return t.some((s) => E(r, e, s));
+  return t.some((s) => I(r, e, s));
 }
 function x(r) {
   const e = [], t = u(r);
   for (let s = t.startRow; s <= t.endRow; s++)
-    for (let l = t.startCol; l <= t.endCol; l++)
-      e.push({ row: s, col: l });
+    for (let i = t.startCol; i <= t.endCol; i++)
+      e.push({ row: s, col: i });
   return e;
 }
 function q(r) {
@@ -394,15 +394,15 @@ function K(r, e, t) {
       ]
     };
   if (r === "row" && e.selected.size > 0) {
-    const s = [...e.selected].map((l) => ({
-      from: { row: l, col: 0 },
-      to: { row: l, col: t - 1 }
+    const s = [...e.selected].map((i) => ({
+      from: { row: i, col: 0 },
+      to: { row: i, col: t - 1 }
     }));
     return { mode: r, ranges: s };
   }
   return r === "range" && e.ranges.length > 0 ? { mode: r, ranges: p(e.ranges) } : { mode: r, ranges: [] };
 }
-class D extends I {
+class D extends v {
   /**
    * Plugin manifest - declares configuration validation rules.
    * @internal
@@ -427,7 +427,8 @@ class D extends I {
   get defaultConfig() {
     return {
       mode: "cell",
-      triggerOn: "click"
+      triggerOn: "click",
+      enabled: !0
     };
   }
   // #region Internal State
@@ -445,6 +446,15 @@ class D extends I {
   /** Cell selection state (cell mode) */
   selectedCell = null;
   // #endregion
+  // #region Private Helpers - Selection Enabled Check
+  /**
+   * Check if selection is enabled at the grid level.
+   * Grid-wide `selectable: false` or plugin's `enabled: false` disables all selection.
+   */
+  isSelectionEnabled() {
+    return this.config.enabled === !1 ? !1 : this.grid.effectiveConfig?.selectable !== !1;
+  }
+  // #endregion
   // #region Private Helpers - Selectability
   /**
    * Check if a row/cell is selectable.
@@ -453,10 +463,10 @@ class D extends I {
   checkSelectable(e, t) {
     const { isSelectable: s } = this.config;
     if (!s) return !0;
-    const l = this.rows[e];
-    if (!l) return !1;
-    const i = t !== void 0 ? this.columns[t] : void 0;
-    return s(l, e, i, t);
+    const i = this.rows[e];
+    if (!i) return !1;
+    const l = t !== void 0 ? this.columns[t] : void 0;
+    return s(i, e, l, t);
   }
   /**
    * Check if an entire row is selectable (for row mode).
@@ -480,45 +490,46 @@ class D extends I {
   // #region Event Handlers
   /** @internal */
   onCellClick(e) {
-    const { rowIndex: t, colIndex: s, originalEvent: l } = e, { mode: i, triggerOn: n = "click" } = this.config;
-    if (l.type !== n)
+    if (!this.isSelectionEnabled()) return !1;
+    const { rowIndex: t, colIndex: s, originalEvent: i } = e, { mode: l, triggerOn: n = "click" } = this.config;
+    if (i.type !== n)
       return !1;
     const o = this.columns[s], d = o && g(o);
-    if (i === "cell") {
+    if (l === "cell") {
       if (d || !this.isCellSelectable(t, s))
         return !1;
-      const c = this.selectedCell;
-      return c && c.row === t && c.col === s || (this.selectedCell = { row: t, col: s }, this.emit("selection-change", this.#e()), this.requestAfterRender()), !1;
+      const a = this.selectedCell;
+      return a && a.row === t && a.col === s || (this.selectedCell = { row: t, col: s }, this.emit("selection-change", this.#e()), this.requestAfterRender()), !1;
     }
-    if (i === "row")
+    if (l === "row")
       return !this.isRowSelectable(t) || this.selected.size === 1 && this.selected.has(t) || (this.selected.clear(), this.selected.add(t), this.lastSelected = t, this.emit("selection-change", this.#e()), this.requestAfterRender()), !1;
-    if (i === "range") {
+    if (l === "range") {
       if (d || !this.isCellSelectable(t, s))
         return !1;
-      const c = l.shiftKey, h = l.ctrlKey || l.metaKey;
-      if (c && this.cellAnchor) {
-        const a = b(this.cellAnchor, { row: t, col: s }), f = this.ranges.length > 0 ? this.ranges[this.ranges.length - 1] : null;
-        if (f && w(f, a))
+      const a = i.shiftKey, h = i.ctrlKey || i.metaKey;
+      if (a && this.cellAnchor) {
+        const c = b(this.cellAnchor, { row: t, col: s }), f = this.ranges.length > 0 ? this.ranges[this.ranges.length - 1] : null;
+        if (f && w(f, c))
           return !1;
-        h ? this.ranges.length > 0 ? this.ranges[this.ranges.length - 1] = a : this.ranges.push(a) : this.ranges = [a], this.activeRange = a;
+        h ? this.ranges.length > 0 ? this.ranges[this.ranges.length - 1] = c : this.ranges.push(c) : this.ranges = [c], this.activeRange = c;
       } else if (h) {
-        const a = {
+        const c = {
           startRow: t,
           startCol: s,
           endRow: t,
           endCol: s
         };
-        this.ranges.push(a), this.activeRange = a, this.cellAnchor = { row: t, col: s };
+        this.ranges.push(c), this.activeRange = c, this.cellAnchor = { row: t, col: s };
       } else {
-        const a = {
+        const c = {
           startRow: t,
           startCol: s,
           endRow: t,
           endCol: s
         };
-        if (this.ranges.length === 1 && w(this.ranges[0], a))
+        if (this.ranges.length === 1 && w(this.ranges[0], c))
           return !1;
-        this.ranges = [a], this.activeRange = a, this.cellAnchor = { row: t, col: s };
+        this.ranges = [c], this.activeRange = c, this.cellAnchor = { row: t, col: s };
       }
       return this.emit("selection-change", this.#e()), this.requestAfterRender(), !1;
     }
@@ -526,31 +537,32 @@ class D extends I {
   }
   /** @internal */
   onKeyDown(e) {
-    const { mode: t } = this.config, l = ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight", "Tab", "Home", "End", "PageUp", "PageDown"].includes(e.key);
+    if (!this.isSelectionEnabled()) return !1;
+    const { mode: t } = this.config, i = ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight", "Tab", "Home", "End", "PageUp", "PageDown"].includes(e.key);
     if (e.key === "Escape")
       return t === "cell" ? this.selectedCell = null : t === "row" ? (this.selected.clear(), this.anchor = null) : t === "range" && (this.ranges = [], this.activeRange = null, this.cellAnchor = null), this.emit("selection-change", this.#e()), this.requestAfterRender(), !0;
-    if (t === "cell" && l)
+    if (t === "cell" && i)
       return queueMicrotask(() => {
-        const i = this.grid._focusRow, n = this.grid._focusCol;
-        this.isCellSelectable(i, n) ? this.selectedCell = { row: i, col: n } : this.selectedCell = null, this.emit("selection-change", this.#e()), this.requestAfterRender();
+        const l = this.grid._focusRow, n = this.grid._focusCol;
+        this.isCellSelectable(l, n) ? this.selectedCell = { row: l, col: n } : this.selectedCell = null, this.emit("selection-change", this.#e()), this.requestAfterRender();
       }), !1;
     if (t === "row" && (e.key === "ArrowUp" || e.key === "ArrowDown"))
       return queueMicrotask(() => {
-        const i = this.grid._focusRow;
-        this.isRowSelectable(i) ? (this.selected.clear(), this.selected.add(i), this.lastSelected = i) : this.selected.clear(), this.emit("selection-change", this.#e()), this.requestAfterRender();
+        const l = this.grid._focusRow;
+        this.isRowSelectable(l) ? (this.selected.clear(), this.selected.add(l), this.lastSelected = l) : this.selected.clear(), this.emit("selection-change", this.#e()), this.requestAfterRender();
       }), !1;
-    if (t === "range" && l) {
-      const i = e.key === "Tab", n = e.shiftKey && !i;
+    if (t === "range" && i) {
+      const l = e.key === "Tab", n = e.shiftKey && !l;
       return n && !this.cellAnchor && (this.cellAnchor = { row: this.grid._focusRow, col: this.grid._focusCol }), this.pendingKeyboardUpdate = { shiftKey: n }, queueMicrotask(() => this.requestAfterRender()), !1;
     }
     if (t === "range" && e.key === "a" && (e.ctrlKey || e.metaKey)) {
-      const i = this.rows.length, n = this.columns.length;
-      if (i > 0 && n > 0) {
+      const l = this.rows.length, n = this.columns.length;
+      if (l > 0 && n > 0) {
         e.preventDefault(), e.stopPropagation();
         const o = {
           startRow: 0,
           startCol: 0,
-          endRow: i - 1,
+          endRow: l - 1,
           endCol: n - 1
         };
         return this.ranges = [o], this.activeRange = o, this.emit("selection-change", this.#e()), this.requestAfterRender(), !0;
@@ -560,34 +572,34 @@ class D extends I {
   }
   /** @internal */
   onCellMouseDown(e) {
-    if (this.config.mode !== "range" || e.rowIndex === void 0 || e.colIndex === void 0 || e.rowIndex < 0) return;
+    if (!this.isSelectionEnabled() || this.config.mode !== "range" || e.rowIndex === void 0 || e.colIndex === void 0 || e.rowIndex < 0) return;
     const t = this.columns[e.colIndex];
     if (t && g(t) || !this.isCellSelectable(e.rowIndex, e.colIndex) || e.originalEvent.shiftKey && this.cellAnchor)
       return;
     this.isDragging = !0;
-    const s = e.rowIndex, l = e.colIndex, i = e.originalEvent.ctrlKey || e.originalEvent.metaKey, n = {
+    const s = e.rowIndex, i = e.colIndex, l = e.originalEvent.ctrlKey || e.originalEvent.metaKey, n = {
       startRow: s,
-      startCol: l,
+      startCol: i,
       endRow: s,
-      endCol: l
+      endCol: i
     };
-    return !i && this.ranges.length === 1 && w(this.ranges[0], n) ? (this.cellAnchor = { row: s, col: l }, !0) : (this.cellAnchor = { row: s, col: l }, i || (this.ranges = []), this.ranges.push(n), this.activeRange = n, this.emit("selection-change", this.#e()), this.requestAfterRender(), !0);
+    return !l && this.ranges.length === 1 && w(this.ranges[0], n) ? (this.cellAnchor = { row: s, col: i }, !0) : (this.cellAnchor = { row: s, col: i }, l || (this.ranges = []), this.ranges.push(n), this.activeRange = n, this.emit("selection-change", this.#e()), this.requestAfterRender(), !0);
   }
   /** @internal */
   onCellMouseMove(e) {
-    if (this.config.mode !== "range" || !this.isDragging || !this.cellAnchor || e.rowIndex === void 0 || e.colIndex === void 0 || e.rowIndex < 0) return;
+    if (!this.isSelectionEnabled() || this.config.mode !== "range" || !this.isDragging || !this.cellAnchor || e.rowIndex === void 0 || e.colIndex === void 0 || e.rowIndex < 0) return;
     let t = e.colIndex;
     const s = this.columns[t];
     if (s && g(s)) {
       const n = this.columns.findIndex((o) => !g(o));
       n >= 0 && (t = n);
     }
-    const l = b(this.cellAnchor, { row: e.rowIndex, col: t }), i = this.ranges.length > 0 ? this.ranges[this.ranges.length - 1] : null;
-    return i && w(i, l) || (this.ranges.length > 0 ? this.ranges[this.ranges.length - 1] = l : this.ranges.push(l), this.activeRange = l, this.emit("selection-change", this.#e()), this.requestAfterRender()), !0;
+    const i = b(this.cellAnchor, { row: e.rowIndex, col: t }), l = this.ranges.length > 0 ? this.ranges[this.ranges.length - 1] : null;
+    return l && w(l, i) || (this.ranges.length > 0 ? this.ranges[this.ranges.length - 1] = i : this.ranges.push(i), this.activeRange = i, this.emit("selection-change", this.#e()), this.requestAfterRender()), !0;
   }
   /** @internal */
   onCellMouseUp(e) {
-    if (this.config.mode === "range" && this.isDragging)
+    if (this.isSelectionEnabled() && this.config.mode === "range" && this.isDragging)
       return this.isDragging = !1, !0;
   }
   /**
@@ -601,28 +613,28 @@ class D extends I {
     e.querySelectorAll(".cell").forEach((n) => {
       n.classList.remove("selected", "top", "bottom", "first", "last"), s && n.removeAttribute("data-selectable");
     });
-    const i = e.querySelectorAll(".data-grid-row");
-    if (i.forEach((n) => {
+    const l = e.querySelectorAll(".data-grid-row");
+    if (l.forEach((n) => {
       n.classList.remove("selected", "row-focus"), s && n.removeAttribute("data-selectable");
-    }), t === "row" && (m(e), i.forEach((n) => {
+    }), t === "row" && (m(e), l.forEach((n) => {
       const o = n.querySelector(".cell[data-row]"), d = y(o);
       d >= 0 && (s && !this.isRowSelectable(d) && n.setAttribute("data-selectable", "false"), this.selected.has(d) && n.classList.add("selected", "row-focus"));
     })), (t === "cell" || t === "range") && s && e.querySelectorAll(".cell[data-row][data-col]").forEach((o) => {
-      const d = parseInt(o.getAttribute("data-row") ?? "-1", 10), c = parseInt(o.getAttribute("data-col") ?? "-1", 10);
-      d >= 0 && c >= 0 && (this.isCellSelectable(d, c) || o.setAttribute("data-selectable", "false"));
+      const d = parseInt(o.getAttribute("data-row") ?? "-1", 10), a = parseInt(o.getAttribute("data-col") ?? "-1", 10);
+      d >= 0 && a >= 0 && (this.isCellSelectable(d, a) || o.setAttribute("data-selectable", "false"));
     }), t === "range" && this.ranges.length > 0) {
       m(e);
-      const n = this.activeRange ? u(this.activeRange) : null, o = this.columns.findIndex((c) => !g(c));
-      this.columns.length - 1, e.querySelectorAll(".cell[data-row][data-col]").forEach((c) => {
-        const h = parseInt(c.getAttribute("data-row") ?? "-1", 10), a = parseInt(c.getAttribute("data-col") ?? "-1", 10);
-        if (h >= 0 && a >= 0) {
-          const f = this.columns[a];
+      const n = this.activeRange ? u(this.activeRange) : null, o = this.columns.findIndex((a) => !g(a));
+      this.columns.length - 1, e.querySelectorAll(".cell[data-row][data-col]").forEach((a) => {
+        const h = parseInt(a.getAttribute("data-row") ?? "-1", 10), c = parseInt(a.getAttribute("data-col") ?? "-1", 10);
+        if (h >= 0 && c >= 0) {
+          const f = this.columns[c];
           if (f && g(f))
             return;
-          if (C(h, a, this.ranges) && (c.classList.add("selected"), n)) {
-            h === n.startRow && c.classList.add("top"), h === n.endRow && c.classList.add("bottom");
+          if (C(h, c, this.ranges) && (a.classList.add("selected"), n)) {
+            h === n.startRow && a.classList.add("top"), h === n.endRow && a.classList.add("bottom");
             const A = Math.max(n.startCol, o);
-            a === A && c.classList.add("first"), a === n.endCol && c.classList.add("last");
+            c === A && a.classList.add("first"), c === n.endCol && a.classList.add("last");
           }
         }
       });
@@ -630,17 +642,18 @@ class D extends I {
   }
   /** @internal */
   afterRender() {
+    if (!this.isSelectionEnabled()) return;
     const e = this.gridElement;
     if (!e) return;
     const t = e.children[0], { mode: s } = this.config;
     if (this.pendingKeyboardUpdate && s === "range") {
-      const { shiftKey: l } = this.pendingKeyboardUpdate;
+      const { shiftKey: i } = this.pendingKeyboardUpdate;
       this.pendingKeyboardUpdate = null;
-      const i = this.grid._focusRow, n = this.grid._focusCol;
-      if (l && this.cellAnchor) {
-        const o = b(this.cellAnchor, { row: i, col: n });
+      const l = this.grid._focusRow, n = this.grid._focusCol;
+      if (i && this.cellAnchor) {
+        const o = b(this.cellAnchor, { row: l, col: n });
         this.ranges = [o], this.activeRange = o;
-      } else l || (this.ranges = [], this.activeRange = null, this.cellAnchor = { row: i, col: n });
+      } else i || (this.ranges = [], this.activeRange = null, this.cellAnchor = { row: l, col: n });
       this.emit("selection-change", this.#e());
     }
     this.grid.setAttribute("data-selection-mode", s), t && t.classList.toggle("selecting", this.isDragging), this.#t();
@@ -651,7 +664,7 @@ class D extends I {
    * @internal
    */
   onScrollRender() {
-    this.#t();
+    this.isSelectionEnabled() && this.#t();
   }
   // #endregion
   // #region Public API