@datorama/core 22.10.9-rc.3 → 22.10.9-rc.4

package/bundle.scss

@@ -14313,147 +14313,20 @@ dato-input input:disabled:hover {
 }
 
 .dato-grid.pivot-mode .ag-row.ag-row-group {
-    /** Split into .ag-row-hover/:not(.ag-row-hover) and color the cell instead of the row,
-          to prevent unwanted cell color flicker on row hover change.
-        */
+    /**
+        Because in pivot mode we style the cells themselves,
+        we need to reflect the hover state to those cells also
+       */
 }
 
 .dato-grid.pivot-mode .ag-row.ag-row-group:not(.ag-row-hover) {
-    background-color: rgba(var(--primary-50), 1);
-}
-
-.dato-grid.pivot-mode .ag-row.ag-row-group:not(.ag-row-hover).ag-row-level-0 .ag-cell.ag-cell-value:nth-child(n+1):not(.leaf-cell) {
-    background-color: themify(primary-0);
-}
-
-.dato-grid.pivot-mode .ag-row.ag-row-group:not(.ag-row-hover).ag-row-level-0 .ag-cell.ag-cell-value:nth-child(n+1).even {
-    background-color: themify(primary-100);
-}
-
-.dato-grid.pivot-mode .ag-row.ag-row-group:not(.ag-row-hover).ag-row-level-1 .ag-cell.ag-cell-value:nth-child(n+2):not(.leaf-cell) {
-    background-color: themify(primary-0);
-}
-
-.dato-grid.pivot-mode .ag-row.ag-row-group:not(.ag-row-hover).ag-row-level-1 .ag-cell.ag-cell-value:nth-child(n+2).even {
-    background-color: themify(primary-100);
-}
-
-.dato-grid.pivot-mode .ag-row.ag-row-group:not(.ag-row-hover).ag-row-level-2 .ag-cell.ag-cell-value:nth-child(n+3):not(.leaf-cell) {
-    background-color: themify(primary-0);
-}
-
-.dato-grid.pivot-mode .ag-row.ag-row-group:not(.ag-row-hover).ag-row-level-2 .ag-cell.ag-cell-value:nth-child(n+3).even {
-    background-color: themify(primary-100);
-}
-
-.dato-grid.pivot-mode .ag-row.ag-row-group:not(.ag-row-hover).ag-row-level-3 .ag-cell.ag-cell-value:nth-child(n+4):not(.leaf-cell) {
-    background-color: themify(primary-0);
-}
-
-.dato-grid.pivot-mode .ag-row.ag-row-group:not(.ag-row-hover).ag-row-level-3 .ag-cell.ag-cell-value:nth-child(n+4).even {
-    background-color: themify(primary-100);
-}
-
-.dato-grid.pivot-mode .ag-row.ag-row-group:not(.ag-row-hover).ag-row-level-4 .ag-cell.ag-cell-value:nth-child(n+5):not(.leaf-cell) {
-    background-color: themify(primary-0);
-}
-
-.dato-grid.pivot-mode .ag-row.ag-row-group:not(.ag-row-hover).ag-row-level-4 .ag-cell.ag-cell-value:nth-child(n+5).even {
-    background-color: themify(primary-100);
-}
-
-.dato-grid.pivot-mode .ag-row.ag-row-group:not(.ag-row-hover).ag-row-level-5 .ag-cell.ag-cell-value:nth-child(n+6):not(.leaf-cell) {
-    background-color: themify(primary-0);
-}
-
-.dato-grid.pivot-mode .ag-row.ag-row-group:not(.ag-row-hover).ag-row-level-5 .ag-cell.ag-cell-value:nth-child(n+6).even {
-    background-color: themify(primary-100);
-}
-
-.dato-grid.pivot-mode .ag-row.ag-row-group:not(.ag-row-hover).ag-row-level-6 .ag-cell.ag-cell-value:nth-child(n+7):not(.leaf-cell) {
-    background-color: themify(primary-0);
-}
-
-.dato-grid.pivot-mode .ag-row.ag-row-group:not(.ag-row-hover).ag-row-level-6 .ag-cell.ag-cell-value:nth-child(n+7).even {
-    background-color: themify(primary-100);
-}
-
-.dato-grid.pivot-mode .ag-row.ag-row-group:not(.ag-row-hover).ag-row-level-7 .ag-cell.ag-cell-value:nth-child(n+8):not(.leaf-cell) {
-    background-color: themify(primary-0);
-}
-
-.dato-grid.pivot-mode .ag-row.ag-row-group:not(.ag-row-hover).ag-row-level-7 .ag-cell.ag-cell-value:nth-child(n+8).even {
-    background-color: themify(primary-100);
-}
-
-.dato-grid.pivot-mode .ag-row.ag-row-group:not(.ag-row-hover).ag-row-level-8 .ag-cell.ag-cell-value:nth-child(n+9):not(.leaf-cell) {
-    background-color: themify(primary-0);
-}
-
-.dato-grid.pivot-mode .ag-row.ag-row-group:not(.ag-row-hover).ag-row-level-8 .ag-cell.ag-cell-value:nth-child(n+9).even {
-    background-color: themify(primary-100);
-}
-
-.dato-grid.pivot-mode .ag-row.ag-row-group:not(.ag-row-hover).ag-row-level-9 .ag-cell.ag-cell-value:nth-child(n+10):not(.leaf-cell) {
-    background-color: themify(primary-0);
-}
-
-.dato-grid.pivot-mode .ag-row.ag-row-group:not(.ag-row-hover).ag-row-level-9 .ag-cell.ag-cell-value:nth-child(n+10).even {
-    background-color: themify(primary-100);
-}
-
-.dato-grid.pivot-mode .ag-row.ag-row-group:not(.ag-row-hover).ag-row-level-10 .ag-cell.ag-cell-value:nth-child(n+11):not(.leaf-cell) {
-    background-color: themify(primary-0);
-}
-
-.dato-grid.pivot-mode .ag-row.ag-row-group:not(.ag-row-hover).ag-row-level-10 .ag-cell.ag-cell-value:nth-child(n+11).even {
-    background-color: themify(primary-100);
-}
-
-.dato-grid.pivot-mode .ag-row.ag-row-group:not(.ag-row-hover).ag-row-level-11 .ag-cell.ag-cell-value:nth-child(n+12):not(.leaf-cell) {
-    background-color: themify(primary-0);
-}
-
-.dato-grid.pivot-mode .ag-row.ag-row-group:not(.ag-row-hover).ag-row-level-11 .ag-cell.ag-cell-value:nth-child(n+12).even {
-    background-color: themify(primary-100);
-}
-
-.dato-grid.pivot-mode .ag-row.ag-row-group:not(.ag-row-hover).ag-row-level-12 .ag-cell.ag-cell-value:nth-child(n+13):not(.leaf-cell) {
-    background-color: themify(primary-0);
-}
-
-.dato-grid.pivot-mode .ag-row.ag-row-group:not(.ag-row-hover).ag-row-level-12 .ag-cell.ag-cell-value:nth-child(n+13).even {
-    background-color: themify(primary-100);
-}
-
-.dato-grid.pivot-mode .ag-row.ag-row-group:not(.ag-row-hover).ag-row-level-13 .ag-cell.ag-cell-value:nth-child(n+14):not(.leaf-cell) {
-    background-color: themify(primary-0);
-}
-
-.dato-grid.pivot-mode .ag-row.ag-row-group:not(.ag-row-hover).ag-row-level-13 .ag-cell.ag-cell-value:nth-child(n+14).even {
-    background-color: themify(primary-100);
-}
-
-.dato-grid.pivot-mode .ag-row.ag-row-group:not(.ag-row-hover).ag-row-level-14 .ag-cell.ag-cell-value:nth-child(n+15):not(.leaf-cell) {
-    background-color: themify(primary-0);
-}
-
-.dato-grid.pivot-mode .ag-row.ag-row-group:not(.ag-row-hover).ag-row-level-14 .ag-cell.ag-cell-value:nth-child(n+15).even {
-    background-color: themify(primary-100);
-}
-
-.dato-grid.pivot-mode .ag-row.ag-row-group.ag-row-hover .ag-cell.ag-cell-value:not(.leaf-cell) {
-    cursor: pointer;
+    background-color: themify(primary-50);
 }
 
 .dato-grid.pivot-mode .ag-cell {
     color: themify(primary-500);
 }
 
-.dato-grid.pivot-mode .ag-cell:not(.leaf-cell) {
-    font-weight: 600;
-}
-
 .dato-grid.pivot-mode .ag-cell .ag-row-group-leaf-indent {
     margin: 0 !important;
 }

package/bundles/datorama-core.umd.js

@@ -14336,21 +14336,32 @@
                 this.initPivotSecondaryColsProcess(params);
                 params.gridOptions.enableV2_1 = true;
                 params.gridOptions.saveSettings = false;
-                params.gridOptions.ensureDomOrder = true;
-                params.gridOptions.suppressColumnVirtualisation = true;
                 params.gridOptions.defaultColDef.cellClass = this.getPivotCellClass.bind(this);
                 params.gridOptions.autoGroupColumnDef.cellClass = this.getPivotCellClass.bind(this);
             }
             return params.gridOptions;
         };
         GridService.prototype.getPivotCellClass = function (params) {
-            var _a = params.node, leafGroup = _a.leafGroup, childIndex = _a.childIndex;
-            var cellClass = '';
-            if (leafGroup) {
-                var isEven = childIndex % 2 === 0;
-                cellClass += 'leaf-cell';
-                if (isEven) {
-                    cellClass += ' even';
+            var _a = params.node, leafGroup = _a.leafGroup, childIndex = _a.childIndex, rowGroupIndex = _a.rowGroupIndex;
+            var gridQuery = params.colDef.headerComponentParams.gridQuery;
+            var cellClass = "";
+            if (gridQuery) {
+                var columns = gridQuery.api.columns;
+                var allDisplayedColumns = columns.getAllDisplayedColumns();
+                var col = allDisplayedColumns.find(function (column) {
+                    return column.getColId() === params.colDef.colId;
+                });
+                var colIndex = allDisplayedColumns.indexOf(col);
+                if (rowGroupIndex <= colIndex) {
+                    if (leafGroup) {
+                        if (childIndex % 2 === 0) {
+                            /** If row is even */
+                            cellClass += ' primary-100-background-color';
+                        }
+                    }
+                    else {
+                        cellClass += 'primary-0-background-color pointer dato-simple-bold';
+                    }
                 }
             }
             return cellClass;