vue2-excel-grid 2.4.0 → 2.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue2-excel-grid",
-  "version": "2.4.0",
+  "version": "2.5.0",
   "description": "Excel-style grid component for Vue 2.6.14 with virtual scrolling",
   "license": "MIT",
   "author": "Fozilbek Raimberdiyev",

package/src/components/ExcelGrid.vue

@@ -556,7 +556,7 @@
                               class="eg-cell"
                               :data-fi="ci"
                               :class="getCellClasses(ri, ci)"
-                              :style="getCellStyle(ri, ci)"
+                              :style="[getCellStyle(ri, ci), getRowCustomStyle(ri)]"
                               @mousedown="onCellMouseDown($event, ri, ci)"
                               @mouseover="onCellMouseOver($event, ri, ci)"
                               @mouseup="onCellMouseUp"
@@ -615,7 +615,7 @@
                               class="eg-cell"
                               :data-fi="ci"
                               :class="getCellClasses(ri, ci)"
-                              :style="getCellStyle(ri, ci)"
+                              :style="[getCellStyle(ri, ci), getRowCustomStyle(ri)]"
                               @mousedown="onCellMouseDown($event, ri, ci)"
                               @mouseover="onCellMouseOver($event, ri, ci)"
                               @mouseup="onCellMouseUp"
@@ -674,7 +674,7 @@
                             class="eg-cell"
                             :data-fi="col._flatIndex"
                             :class="getCellClasses(ri, col._flatIndex)"
-                            :style="getCellStyle(ri, col._flatIndex)"
+                            :style="[getCellStyle(ri, col._flatIndex), getRowCustomStyle(ri)]"
                             @mousedown="onCellMouseDown($event, ri, col._flatIndex)"
                             @mouseover="onCellMouseOver($event, ri, col._flatIndex)"
                             @mouseup="onCellMouseUp"
@@ -1361,6 +1361,24 @@ const ExcelGridComponent = {
      */
     loading: { type: Boolean, default: false },
 
+    /**
+     * Data-driven per-row styling: `(row, rowIndex) => styleObject`. The
+     * returned style object is applied to every cell in that row (across
+     * the frozen/scrollable/pinned-right zones alike), giving the row a
+     * continuous horizontal background/style without any host-side CSS.
+     * Selection/active/fill-preview/readonly cell highlighting keeps
+     * winning visually — those already use `!important`, which always
+     * beats a plain (non-`!important`) inline style. Doesn't affect the
+     * row-number header column (mirrors Excel: conditional formatting
+     * colors data cells, not the row gutter). Return `null`/`undefined`
+     * for rows that shouldn't get a custom style.
+     * @type {Function}
+     * @default null
+     * @example
+     * <excel-grid :columns="columns" v-model="data" :row-style="(row) => row.status === 'error' ? { background: '#fde2e2' } : null" />
+     */
+    rowStyle: { type: Function, default: null },
+
     /** Show "Column info" / "Row info" items in the context menu (dev/debug aid). */
     devMode: { type: Boolean, default: false },
 
@@ -3122,6 +3140,17 @@ const ExcelGridComponent = {
       return style
     },
 
+    // rowStyle prop — deliberately NOT merged into getCellStyle()'s return value:
+    // that object is cached/shared by (w,h,left) across unrelated rows/cells (see
+    // comment above), so mutating it here would leak one row's style onto every
+    // other cell that happens to share the same cache key. Kept as a second,
+    // uncached :style array entry instead (see template) — cheap, and correctly
+    // reactive to the row's actual data instead of just its geometry.
+    getRowCustomStyle(ri) {
+      if (!this.rowStyle) return null
+      return this.rowStyle(this._dataRaw[ri], ri) || null
+    },
+
     getCellClasses(ri, ci) {
       const col = this.leafCols[ci]
       const active = this.isActiveCell(ri, ci)