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

package/bundle.scss

@@ -5206,7 +5206,7 @@ dato-list-v2 .checkmark {
     line-height: 19px;
 }
 
-.simple-bold, dato-grid-v2 ag-grid-angular.pivot-mode .ag-header-row .ag-header-group-cell .ag-header-group-cell-label span {
+.simple-bold, .dato-grid.pivot-mode .ag-header .ag-header-row .ag-header-group-cell .ag-header-group-cell-label span {
     font-size: 14px;
     font-weight: 600;
     line-height: 19px;
@@ -6223,7 +6223,7 @@ dato-grid-header span {
     border-left: none;
 }
 
-.ag-dato-core .ag-row-hover {
+.ag-dato-core .ag-row-hover, .ag-dato-core .dato-grid.pivot-mode .ag-row.ag-row-group.ag-row-hover .ag-cell.ag-cell-value, .dato-grid.pivot-mode .ag-row.ag-row-group.ag-row-hover .ag-dato-core .ag-cell.ag-cell-value {
     background-color: themify(accent-100);
 }
 
@@ -11287,7 +11287,7 @@ dato-button-group.is-round-edges dato-button:last-of-type button {
     line-height: 19px;
 }
 
-.simple-bold, dato-grid-v2 ag-grid-angular.pivot-mode .ag-header-row .ag-header-group-cell .ag-header-group-cell-label span {
+.simple-bold, .dato-grid.pivot-mode .ag-header .ag-header-row .ag-header-group-cell .ag-header-group-cell-label span {
     font-size: 14px;
     font-weight: 600;
     line-height: 19px;
@@ -11447,6 +11447,9 @@ dato-input input:disabled:hover {
 }
 
 /* Cells Theme */
+/* Pivot Header Theme */
+/* Pivot Row Theme */
+/* Pivot Cells Theme */
 /* Needs to be global */
 /*
    Common variables
@@ -12352,7 +12355,7 @@ dato-input input:disabled:hover {
     border-left: none;
 }
 
-.dato-grid .ag-row-hover {
+.dato-grid .ag-row-hover, .dato-grid.pivot-mode .ag-row.ag-row-group.ag-row-hover .ag-cell.ag-cell-value {
     background-color: themify(accent-100);
 }
 
@@ -14049,209 +14052,46 @@ dato-input input:disabled:hover {
     fill: themify(accent-400);
 }
 
-.dato-grid .ag-row {
+.dato-grid .da-grid-icon {
+    fill: themify(primary-300);
+}
+
+.dato-grid .da-grid-icon:hover {
+    fill: themify(accent-400);
+}
+
+.dato-grid:not(.pivot-mode) .ag-row {
     cursor: pointer;
 }
 
-.dato-grid .ag-row.ag-row-group {
+.dato-grid:not(.pivot-mode) .ag-row.ag-row-group {
+    background-color: themify(primary-0);
     border-bottom: solid 1px themify(primary-200);
     height: 35px;
 }
 
-.dato-grid .ag-row.ag-row-group span {
+.dato-grid:not(.pivot-mode) .ag-row.ag-row-group span {
     color: themify(primary-300);
     font-weight: 600;
 }
 
-.dato-grid .ag-row.ag-row-group .ag-row-group:not(.ag-row-hover).ag-row-level-0 {
-    background-color: rgba(var(--primary-50), 1) !important;
-}
-
-.dato-grid .ag-row.ag-row-group .ag-row-group:not(.ag-row-hover).ag-row-level-1 {
-    background-color: rgba(var(--primary-50), 1) !important;
-}
-
-.dato-grid .ag-row.ag-row-group .ag-row-group:not(.ag-row-hover).ag-row-level-2 {
-    background-color: rgba(var(--primary-50), 1) !important;
-}
-
-.dato-grid .ag-row.ag-row-group .ag-row-group:not(.ag-row-hover).ag-row-level-3 {
-    background-color: rgba(var(--primary-50), 1) !important;
-}
-
-.dato-grid .ag-row.ag-row-group .ag-row-group:not(.ag-row-hover).ag-row-level-4 {
-    background-color: rgba(var(--primary-50), 1) !important;
-}
-
-.dato-grid .ag-row.ag-row-group .ag-row-group:not(.ag-row-hover).ag-row-level-5 {
-    background-color: rgba(var(--primary-50), 1) !important;
-}
-
-.dato-grid .ag-row.ag-row-group .ag-row-group:not(.ag-row-hover).ag-row-level-6 {
-    background-color: rgba(var(--primary-50), 1) !important;
-}
-
-.dato-grid .ag-row.ag-row-group .ag-row-group:not(.ag-row-hover).ag-row-level-7 {
-    background-color: rgba(var(--primary-50), 1) !important;
-}
-
-.dato-grid .ag-row.ag-row-group .ag-row-group:not(.ag-row-hover).ag-row-level-8 {
-    background-color: rgba(var(--primary-50), 1) !important;
-}
-
-.dato-grid .ag-row.ag-row-group .ag-row-group:not(.ag-row-hover).ag-row-level-9 {
-    background-color: rgba(var(--primary-50), 1) !important;
-}
-
-.dato-grid .ag-row.ag-row-group .ag-row-group:not(.ag-row-hover).ag-row-level-10 {
-    background-color: rgba(var(--primary-50), 1) !important;
-}
-
-.dato-grid .ag-row.ag-row-group .ag-row-group:not(.ag-row-hover).ag-row-level-11 {
-    background-color: rgba(var(--primary-50), 1) !important;
-}
-
-.dato-grid .ag-row.ag-row-group .ag-row-group:not(.ag-row-hover).ag-row-level-12 {
-    background-color: rgba(var(--primary-50), 1) !important;
-}
-
-.dato-grid .ag-row.ag-row-group .ag-row-group:not(.ag-row-hover).ag-row-level-13 {
-    background-color: rgba(var(--primary-50), 1) !important;
-}
-
-.dato-grid .ag-row.ag-row-group .ag-row-group:not(.ag-row-hover).ag-row-level-14 {
-    background-color: rgba(var(--primary-50), 1) !important;
-}
-
-.dato-grid .ag-row.ag-row-group .ag-row-group:not(.ag-row-hover).ag-row-level-2.ag-row-even .ag-cell.ag-cell-value:nth-child(n+3) {
-    background-color: themify(primary-100) !important;
-}
-
-.dato-grid .ag-row.ag-row-group .ag-row-group:not(.ag-row-hover).ag-row-level-2.ag-row-odd .ag-cell.ag-cell-value:nth-child(n+3) {
-    background-color: themify(primary-50) !important;
-}
-
-.dato-grid .ag-row.ag-row-group .ag-row-group:not(.ag-row-hover).ag-row-level-3.ag-row-even .ag-cell.ag-cell-value:nth-child(n+4) {
-    background-color: themify(primary-100) !important;
-}
-
-.dato-grid .ag-row.ag-row-group .ag-row-group:not(.ag-row-hover).ag-row-level-3.ag-row-odd .ag-cell.ag-cell-value:nth-child(n+4) {
-    background-color: themify(primary-50) !important;
-}
-
-.dato-grid .ag-row.ag-row-group .ag-row-group:not(.ag-row-hover).ag-row-level-4.ag-row-even .ag-cell.ag-cell-value:nth-child(n+5) {
-    background-color: themify(primary-100) !important;
-}
-
-.dato-grid .ag-row.ag-row-group .ag-row-group:not(.ag-row-hover).ag-row-level-4.ag-row-odd .ag-cell.ag-cell-value:nth-child(n+5) {
-    background-color: themify(primary-50) !important;
-}
-
-.dato-grid .ag-row.ag-row-group .ag-row-group:not(.ag-row-hover).ag-row-level-5.ag-row-even .ag-cell.ag-cell-value:nth-child(n+6) {
-    background-color: themify(primary-100) !important;
-}
-
-.dato-grid .ag-row.ag-row-group .ag-row-group:not(.ag-row-hover).ag-row-level-5.ag-row-odd .ag-cell.ag-cell-value:nth-child(n+6) {
-    background-color: themify(primary-50) !important;
-}
-
-.dato-grid .ag-row.ag-row-group .ag-row-group:not(.ag-row-hover).ag-row-level-6.ag-row-even .ag-cell.ag-cell-value:nth-child(n+7) {
-    background-color: themify(primary-100) !important;
-}
-
-.dato-grid .ag-row.ag-row-group .ag-row-group:not(.ag-row-hover).ag-row-level-6.ag-row-odd .ag-cell.ag-cell-value:nth-child(n+7) {
-    background-color: themify(primary-50) !important;
-}
-
-.dato-grid .ag-row.ag-row-group .ag-row-group:not(.ag-row-hover).ag-row-level-7.ag-row-even .ag-cell.ag-cell-value:nth-child(n+8) {
-    background-color: themify(primary-100) !important;
-}
-
-.dato-grid .ag-row.ag-row-group .ag-row-group:not(.ag-row-hover).ag-row-level-7.ag-row-odd .ag-cell.ag-cell-value:nth-child(n+8) {
-    background-color: themify(primary-50) !important;
-}
-
-.dato-grid .ag-row.ag-row-group .ag-row-group:not(.ag-row-hover).ag-row-level-8.ag-row-even .ag-cell.ag-cell-value:nth-child(n+9) {
-    background-color: themify(primary-100) !important;
-}
-
-.dato-grid .ag-row.ag-row-group .ag-row-group:not(.ag-row-hover).ag-row-level-8.ag-row-odd .ag-cell.ag-cell-value:nth-child(n+9) {
-    background-color: themify(primary-50) !important;
-}
-
-.dato-grid .ag-row.ag-row-group .ag-row-group:not(.ag-row-hover).ag-row-level-9.ag-row-even .ag-cell.ag-cell-value:nth-child(n+10) {
-    background-color: themify(primary-100) !important;
-}
-
-.dato-grid .ag-row.ag-row-group .ag-row-group:not(.ag-row-hover).ag-row-level-9.ag-row-odd .ag-cell.ag-cell-value:nth-child(n+10) {
-    background-color: themify(primary-50) !important;
-}
-
-.dato-grid .ag-row.ag-row-group .ag-row-group:not(.ag-row-hover).ag-row-level-10.ag-row-even .ag-cell.ag-cell-value:nth-child(n+11) {
-    background-color: themify(primary-100) !important;
-}
-
-.dato-grid .ag-row.ag-row-group .ag-row-group:not(.ag-row-hover).ag-row-level-10.ag-row-odd .ag-cell.ag-cell-value:nth-child(n+11) {
-    background-color: themify(primary-50) !important;
-}
-
-.dato-grid .ag-row.ag-row-group .ag-row-group:not(.ag-row-hover).ag-row-level-11.ag-row-even .ag-cell.ag-cell-value:nth-child(n+12) {
-    background-color: themify(primary-100) !important;
-}
-
-.dato-grid .ag-row.ag-row-group .ag-row-group:not(.ag-row-hover).ag-row-level-11.ag-row-odd .ag-cell.ag-cell-value:nth-child(n+12) {
-    background-color: themify(primary-50) !important;
-}
-
-.dato-grid .ag-row.ag-row-group .ag-row-group:not(.ag-row-hover).ag-row-level-12.ag-row-even .ag-cell.ag-cell-value:nth-child(n+13) {
-    background-color: themify(primary-100) !important;
-}
-
-.dato-grid .ag-row.ag-row-group .ag-row-group:not(.ag-row-hover).ag-row-level-12.ag-row-odd .ag-cell.ag-cell-value:nth-child(n+13) {
-    background-color: themify(primary-50) !important;
-}
-
-.dato-grid .ag-row.ag-row-group .ag-row-group:not(.ag-row-hover).ag-row-level-13.ag-row-even .ag-cell.ag-cell-value:nth-child(n+14) {
-    background-color: themify(primary-100) !important;
-}
-
-.dato-grid .ag-row.ag-row-group .ag-row-group:not(.ag-row-hover).ag-row-level-13.ag-row-odd .ag-cell.ag-cell-value:nth-child(n+14) {
-    background-color: themify(primary-50) !important;
-}
-
-.dato-grid .ag-row.ag-row-group .ag-row-group:not(.ag-row-hover).ag-row-level-14.ag-row-even .ag-cell.ag-cell-value:nth-child(n+15) {
-    background-color: themify(primary-100) !important;
-}
-
-.dato-grid .ag-row.ag-row-group .ag-row-group:not(.ag-row-hover).ag-row-level-14.ag-row-odd .ag-cell.ag-cell-value:nth-child(n+15) {
-    background-color: themify(primary-50) !important;
-}
-
-.dato-grid .ag-row.ag-row-group .ag-row-group:not(.ag-row-hover).ag-row-level-0 .ag-cell.ag-cell-value:nth-child(n+1) {
-    background-color: themify(primary-0) !important;
-}
-
-.dato-grid .ag-row.ag-row-group .ag-row-group:not(.ag-row-hover).ag-row-level-1 .ag-cell.ag-cell-value:nth-child(n+2) {
-    background-color: themify(primary-0) !important;
-}
-
-.dato-grid .ag-row.ag-row-group:hover span {
+.dato-grid:not(.pivot-mode) .ag-row.ag-row-group:hover span {
     color: themify(accent-400);
 }
 
-.dato-grid .ag-row.ag-row-group:hover .da-grid-icon {
+.dato-grid:not(.pivot-mode) .ag-row.ag-row-group:hover .da-grid-icon {
     fill: themify(accent-400);
 }
 
-.dato-grid .ag-row.ag-row-selected.ag-row-even {
+.dato-grid:not(.pivot-mode) .ag-row.ag-row-selected.ag-row-even {
     background-color: themify(accent-180);
 }
 
-.dato-grid .ag-row.actions-hovered:not(.ag-row-selected) {
+.dato-grid:not(.pivot-mode) .ag-row.actions-hovered:not(.ag-row-selected) {
     background-color: themify(accent-100);
 }
 
-.dato-grid .ag-cell .ag-selection-checkbox {
+.dato-grid:not(.pivot-mode) .ag-cell .ag-selection-checkbox {
     display: block;
     position: relative;
     cursor: pointer;
@@ -14264,7 +14104,7 @@ dato-input input:disabled:hover {
     margin-top: -1px;
 }
 
-.dato-grid .ag-cell .ag-selection-checkbox .ag-icon {
+.dato-grid:not(.pivot-mode) .ag-cell .ag-selection-checkbox .ag-icon {
     height: 100%;
     width: 100%;
     border-radius: 2px;
@@ -14273,7 +14113,7 @@ dato-input input:disabled:hover {
     left: 0;
 }
 
-.dato-grid .ag-cell .ag-selection-checkbox .ag-icon:after {
+.dato-grid:not(.pivot-mode) .ag-cell .ag-selection-checkbox .ag-icon:after {
     content: "";
     position: absolute;
     display: none;
@@ -14287,52 +14127,52 @@ dato-input input:disabled:hover {
     box-sizing: border-box;
 }
 
-.dato-grid .ag-cell .ag-selection-checkbox .ag-icon.ag-icon-checkbox-checked {
+.dato-grid:not(.pivot-mode) .ag-cell .ag-selection-checkbox .ag-icon.ag-icon-checkbox-checked {
     background-color: themify(accent-400);
 }
 
-.dato-grid .ag-cell .ag-selection-checkbox .ag-icon.ag-icon-checkbox-checked:hover {
+.dato-grid:not(.pivot-mode) .ag-cell .ag-selection-checkbox .ag-icon.ag-icon-checkbox-checked:hover {
     background-color: themify(accent-500);
 }
 
-.dato-grid .ag-cell .ag-selection-checkbox .ag-icon.ag-icon-checkbox-checked:active {
+.dato-grid:not(.pivot-mode) .ag-cell .ag-selection-checkbox .ag-icon.ag-icon-checkbox-checked:active {
     background-color: themify(accent-600);
 }
 
-.dato-grid .ag-cell .ag-selection-checkbox .ag-icon.ag-icon-checkbox-checked:after {
+.dato-grid:not(.pivot-mode) .ag-cell .ag-selection-checkbox .ag-icon.ag-icon-checkbox-checked:after {
     display: block;
 }
 
-.dato-grid .ag-cell .ag-selection-checkbox .ag-icon.ag-icon-checkbox-unchecked,
-.dato-grid .ag-cell .ag-selection-checkbox .ag-icon.ag-icon-checkbox-indeterminate {
+.dato-grid:not(.pivot-mode) .ag-cell .ag-selection-checkbox .ag-icon.ag-icon-checkbox-unchecked,
+.dato-grid:not(.pivot-mode) .ag-cell .ag-selection-checkbox .ag-icon.ag-icon-checkbox-indeterminate {
     background-color: themify(primary-0);
     border: solid 1px themify(primary-300);
 }
 
-.dato-grid .ag-cell .ag-selection-checkbox .ag-icon.ag-icon-checkbox-unchecked:hover,
-.dato-grid .ag-cell .ag-selection-checkbox .ag-icon.ag-icon-checkbox-indeterminate:hover {
+.dato-grid:not(.pivot-mode) .ag-cell .ag-selection-checkbox .ag-icon.ag-icon-checkbox-unchecked:hover,
+.dato-grid:not(.pivot-mode) .ag-cell .ag-selection-checkbox .ag-icon.ag-icon-checkbox-indeterminate:hover {
     border-color: themify(accent-500);
 }
 
-.dato-grid .ag-cell .ag-selection-checkbox .ag-icon.ag-icon-checkbox-unchecked:active,
-.dato-grid .ag-cell .ag-selection-checkbox .ag-icon.ag-icon-checkbox-indeterminate:active {
+.dato-grid:not(.pivot-mode) .ag-cell .ag-selection-checkbox .ag-icon.ag-icon-checkbox-unchecked:active,
+.dato-grid:not(.pivot-mode) .ag-cell .ag-selection-checkbox .ag-icon.ag-icon-checkbox-indeterminate:active {
     border-color: themify(accent-600);
 }
 
-.dato-grid .ag-cell .ag-selection-checkbox + span.ag-cell-value {
+.dato-grid:not(.pivot-mode) .ag-cell .ag-selection-checkbox + span.ag-cell-value {
     display: inline;
     margin-left: 12px;
 }
 
-.dato-grid .ag-cell .search-highlight {
+.dato-grid:not(.pivot-mode) .ag-cell .search-highlight {
     background-color: #FDF2CF;
 }
 
-.dato-grid .dato-editable-cell {
+.dato-grid:not(.pivot-mode) .dato-editable-cell {
     padding: 2px 0;
 }
 
-.dato-grid .dato-editable-cell .value-wrapper {
+.dato-grid:not(.pivot-mode) .dato-editable-cell .value-wrapper {
     min-height: 31px;
     line-height: 29px;
     margin: 0 2px;
@@ -14341,69 +14181,69 @@ dato-input input:disabled:hover {
     border: 1px solid transparent;
 }
 
-.dato-grid .dato-editable-cell:hover .value-wrapper {
+.dato-grid:not(.pivot-mode) .dato-editable-cell:hover .value-wrapper {
     border-color: themify(accent-400);
 }
 
-.dato-grid .dato-editable-cell.ag-cell-not-inline-editing {
+.dato-grid:not(.pivot-mode) .dato-editable-cell.ag-cell-not-inline-editing {
     display: flex;
     align-items: center;
 }
 
-.dato-grid .dato-editable-cell.ag-cell-not-inline-editing .ag-input-text-wrapper, .dato-grid .dato-editable-cell.ag-cell-not-inline-editing > span {
+.dato-grid:not(.pivot-mode) .dato-editable-cell.ag-cell-not-inline-editing .ag-input-text-wrapper, .dato-grid:not(.pivot-mode) .dato-editable-cell.ag-cell-not-inline-editing > span {
     width: 100%;
 }
 
-.dato-grid .ag-cell-highlight {
+.dato-grid:not(.pivot-mode) .ag-cell-highlight {
     background-color: transparent !important;
 }
 
-.dato-grid .ag-cell-highlight-animation {
+.dato-grid:not(.pivot-mode) .ag-cell-highlight-animation {
     transition: background-color 1s;
 }
 
-.dato-grid .ag-row-drag {
+.dato-grid:not(.pivot-mode) .ag-row-drag {
     background-position-y: center;
 }
 
-.dato-grid .ag-column-drag {
+.dato-grid:not(.pivot-mode) .ag-column-drag {
     background-position-y: center;
 }
 
-.dato-grid .ag-cell-range-selected-1:not(.ag-cell-focus) {
+.dato-grid:not(.pivot-mode) .ag-cell-range-selected-1:not(.ag-cell-focus) {
     background-color: rgba(120, 120, 120, 0.4);
 }
 
-.dato-grid .ag-cell-range-selected-2:not(.ag-cell-focus) {
+.dato-grid:not(.pivot-mode) .ag-cell-range-selected-2:not(.ag-cell-focus) {
     background-color: rgba(110, 110, 110, 0.4);
 }
 
-.dato-grid .ag-cell-range-selected-3:not(.ag-cell-focus) {
+.dato-grid:not(.pivot-mode) .ag-cell-range-selected-3:not(.ag-cell-focus) {
     background-color: rgba(100, 100, 100, 0.4);
 }
 
-.dato-grid .ag-cell-range-selected-4:not(.ag-cell-focus) {
+.dato-grid:not(.pivot-mode) .ag-cell-range-selected-4:not(.ag-cell-focus) {
     background-color: rgba(89, 89, 89, 0.4);
 }
 
-.dato-grid .ag-ltr .ag-has-focus .ag-cell-focus {
+.dato-grid:not(.pivot-mode) .ag-ltr .ag-has-focus .ag-cell-focus {
     border-color: transparent;
 }
 
-.dato-grid .ag-row.ag-row-even .ag-cell-inline-editing {
+.dato-grid:not(.pivot-mode) .ag-row.ag-row-even .ag-cell-inline-editing {
     background-color: themify(accent-180);
 }
 
-.dato-grid .ag-row.ag-row-odd .ag-cell-inline-editing {
+.dato-grid:not(.pivot-mode) .ag-row.ag-row-odd .ag-cell-inline-editing {
     background-color: themify(accent-200);
 }
 
-.dato-grid .ag-cell.ag-cell-inline-editing {
+.dato-grid:not(.pivot-mode) .ag-cell.ag-cell-inline-editing {
     box-shadow: none;
     padding: 0 2px;
 }
 
-.dato-grid .ag-cell.ag-cell-inline-editing input.ag-cell-edit-input[type] {
+.dato-grid:not(.pivot-mode) .ag-cell.ag-cell-inline-editing input.ag-cell-edit-input[type] {
     height: 30px;
     min-height: 30px;
     line-height: 30px;
@@ -14416,187 +14256,313 @@ dato-input input:disabled:hover {
     color: themify(primary-600);
 }
 
-.dato-grid .ag-cell.ag-cell-inline-editing input.ag-cell-edit-input[type].no-clear-btn {
+.dato-grid:not(.pivot-mode) .ag-cell.ag-cell-inline-editing input.ag-cell-edit-input[type].no-clear-btn {
     padding-right: 10px;
 }
 
-.dato-grid .ag-cell.ag-cell-inline-editing input.ag-cell-edit-input[type]:focus {
+.dato-grid:not(.pivot-mode) .ag-cell.ag-cell-inline-editing input.ag-cell-edit-input[type]:focus {
     outline: none;
     box-shadow: none;
 }
 
-.dato-grid .ag-cell.ag-cell-inline-editing input.ag-cell-edit-input[type]:hover {
+.dato-grid:not(.pivot-mode) .ag-cell.ag-cell-inline-editing input.ag-cell-edit-input[type]:hover {
     transition: 0.3s all;
 }
 
-.dato-grid .ag-cell.ag-cell-inline-editing input.ag-cell-edit-input[type]::-webkit-input-placeholder {
+.dato-grid:not(.pivot-mode) .ag-cell.ag-cell-inline-editing input.ag-cell-edit-input[type]::-webkit-input-placeholder {
     color: themify(primary-300);
 }
 
-.dato-grid .ag-cell.ag-cell-inline-editing input.ag-cell-edit-input[type]:-moz-placeholder {
+.dato-grid:not(.pivot-mode) .ag-cell.ag-cell-inline-editing input.ag-cell-edit-input[type]:-moz-placeholder {
     color: themify(primary-300);
 }
 
-.dato-grid .ag-cell.ag-cell-inline-editing input.ag-cell-edit-input[type]::-moz-placeholder {
+.dato-grid:not(.pivot-mode) .ag-cell.ag-cell-inline-editing input.ag-cell-edit-input[type]::-moz-placeholder {
     color: themify(primary-300);
 }
 
-.dato-grid .ag-cell.ag-cell-inline-editing input.ag-cell-edit-input[type]:-ms-input-placeholder {
+.dato-grid:not(.pivot-mode) .ag-cell.ag-cell-inline-editing input.ag-cell-edit-input[type]:-ms-input-placeholder {
     color: themify(primary-300);
 }
 
-.dato-grid .ag-cell.ag-cell-inline-editing input.ag-cell-edit-input[type]:hover {
+.dato-grid:not(.pivot-mode) .ag-cell.ag-cell-inline-editing input.ag-cell-edit-input[type]:hover {
     border-color: themify(primary-300);
 }
 
-.dato-grid .ag-cell.ag-cell-inline-editing input.ag-cell-edit-input[type]:focus {
+.dato-grid:not(.pivot-mode) .ag-cell.ag-cell-inline-editing input.ag-cell-edit-input[type]:focus {
     border-color: themify(accent-400) !important;
 }
 
-.dato-grid .ag-cell.ag-cell-inline-editing input.ag-cell-edit-input[type][disabled] {
+.dato-grid:not(.pivot-mode) .ag-cell.ag-cell-inline-editing input.ag-cell-edit-input[type][disabled] {
     background-color: themify(primary-300, 0.1);
     cursor: not-allowed;
     border: 1px solid transparent;
     color: themify(primary-200);
 }
 
-.dato-grid .ag-cell.ag-cell-inline-editing input.ag-cell-edit-input[type][disabled]:hover {
+.dato-grid:not(.pivot-mode) .ag-cell.ag-cell-inline-editing input.ag-cell-edit-input[type][disabled]:hover {
     border: 1px solid transparent;
 }
 
-.dato-grid .ag-cell.ag-cell-inline-editing input.ag-cell-edit-input[type][disabled] ~ dato-icon path {
+.dato-grid:not(.pivot-mode) .ag-cell.ag-cell-inline-editing input.ag-cell-edit-input[type][disabled] ~ dato-icon path {
     fill: themify(primary-200);
 }
 
-.dato-grid .ag-cell.ag-cell-inline-editing .ag-input-text-wrapper {
+.dato-grid:not(.pivot-mode) .ag-cell.ag-cell-inline-editing .ag-input-text-wrapper {
     width: 100%;
 }
 
-.dato-grid .da-grid-icon {
-    fill: themify(primary-300);
+.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.
+        */
 }
 
-.dato-grid .da-grid-icon:hover {
-    fill: themify(accent-400);
+.dato-grid.pivot-mode .ag-row.ag-row-group:not(.ag-row-hover) {
+    background-color: rgba(var(--primary-50), 1);
 }
 
-dato-grid-v2 .enable-v2_1, dato-grid-v2 .has-background {
-    background-color: themify(primary-50);
+.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-v2 .has-background {
-    padding-left: 30px;
-    padding-right: 30px;
+.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-v2 .ag-cell {
-    border-right: solid 1px themify(primary-300, 0.5);
+.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-v2 ag-grid-angular .ag-floating-bottom {
-    border: none !important;
+.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-v2 ag-grid-angular .ag-floating-bottom .ag-row {
-    background-color: themify(primary-0) !important;
-    border: 1px solid themify(primary-200);
+.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-v2 ag-grid-angular .ag-floating-bottom .ag-row .ag-cell {
-    border-right: none;
+.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-v2 ag-grid-angular.enable-v2_1 {
-    padding-top: 8px;
+.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-v2 ag-grid-angular.enable-v2_1 .ag-header {
-    background-color: themify(primary-50);
+.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-v2 ag-grid-angular.enable-v2_1.has-background {
-    padding-top: 30px;
+.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-v2 ag-grid-angular:not(.with-multi-selection-col) .ag-pinned-left-cols-container {
-    box-shadow: 10px -10px 10px -10px themify(primary-300, 0.5);
-    z-index: 1;
+.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-v2 ag-grid-angular.tree .ag-cell .initials {
-    background-color: themify(primary-100) !important;
+.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-v2 ag-grid-angular.tree .ag-selection-checkbox .ag-icon-checkbox-indeterminate {
-    background-color: themify(primary-200) !important;
+.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-v2 ag-grid-angular.pivot-mode .ag-row.ag-row-group {
-    border-bottom: none;
+.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-v2 ag-grid-angular.pivot-mode .ag-row.ag-row-group span {
-    color: themify(primary-500) !important;
+.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-v2 ag-grid-angular.pivot-mode .ag-row.ag-row-group:not(.ag-row-level-0) span {
-    font-weight: 400;
+.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-v2 ag-grid-angular.pivot-mode .ag-ltr .ag-row-group-leaf-indent {
-    margin-left: 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-v2 ag-grid-angular.pivot-mode .ag-cell {
+.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;
+}
+
+.dato-grid.pivot-mode .ag-cell {
     color: themify(primary-500);
 }
 
-dato-grid-v2 ag-grid-angular.pivot-mode .ag-header-row .ag-header-cell {
+.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;
+}
+
+.dato-grid.pivot-mode .ag-header .ag-header-row .ag-header-cell {
     border: none;
     border-top: 1px solid themify(primary-200);
 }
 
-dato-grid-v2 ag-grid-angular.pivot-mode .ag-header-row .ag-header-cell dato-grid-column-header {
+.dato-grid.pivot-mode .ag-header .ag-header-row .ag-header-cell dato-grid-column-header {
     display: block;
     height: 100%;
 }
 
-dato-grid-v2 ag-grid-angular.pivot-mode .ag-header-row .ag-header-cell dato-grid-column-header > div {
+.dato-grid.pivot-mode .ag-header .ag-header-row .ag-header-cell dato-grid-column-header > div {
     height: inherit;
 }
 
-dato-grid-v2 ag-grid-angular.pivot-mode .ag-header-row .ag-header-cell dato-grid-column-header > div span {
+.dato-grid.pivot-mode .ag-header .ag-header-row .ag-header-cell dato-grid-column-header > div span {
     color: themify(primary-500);
 }
 
-dato-grid-v2 ag-grid-angular.pivot-mode .ag-header-row .ag-header-group-cell .ag-header-cell-resize {
+.dato-grid.pivot-mode .ag-header .ag-header-row .ag-header-cell-resize {
+    height: 100%;
+    margin: 0;
+    padding: 0;
+    right: 0;
+    border-right: 1px solid themify(primary-200);
+}
+
+.dato-grid.pivot-mode .ag-header .ag-header-row .ag-header-group-cell .ag-header-cell-resize {
     height: 100%;
     border: none;
 }
 
-dato-grid-v2 ag-grid-angular.pivot-mode .ag-header-row .ag-header-group-cell .ag-header-group-cell-label {
+.dato-grid.pivot-mode .ag-header .ag-header-row .ag-header-group-cell .ag-header-group-cell-label {
     align-items: center;
 }
 
-dato-grid-v2 ag-grid-angular.pivot-mode .ag-header-row .ag-header-group-cell .ag-header-group-cell-label span {
+.dato-grid.pivot-mode .ag-header .ag-header-row .ag-header-group-cell .ag-header-group-cell-label span {
     height: auto;
     color: themify(primary-500);
 }
 
-dato-grid-v2 ag-grid-angular.pivot-mode .ag-header-row .ag-header-group-cell.ag-header-group-cell-with-group {
+.dato-grid.pivot-mode .ag-header .ag-header-row .ag-header-group-cell.ag-header-group-cell-with-group {
     border-top: 1px solid themify(primary-200);
     border-right: 1px solid themify(primary-200);
     background-color: themify(primary-100);
 }
 
-dato-grid-v2 ag-grid-angular.pivot-mode .ag-header-row .ag-header-group-cell.ag-header-group-cell-with-group.empty-pivot-header {
+.dato-grid.pivot-mode .ag-header .ag-header-row .ag-header-group-cell.ag-header-group-cell-with-group.empty-pivot-header {
     display: none;
 }
 
-dato-grid-v2 ag-grid-angular.pivot-mode .ag-header-row .ag-header-group-cell.ag-header-group-cell-with-group.group-pivot-cell .ag-header-group-cell-label {
+.dato-grid.pivot-mode .ag-header .ag-header-row .ag-header-group-cell.ag-header-group-cell-with-group.group-pivot-cell .ag-header-group-cell-label {
     justify-content: center;
 }
 
+dato-grid-v2 .enable-v2_1, dato-grid-v2 .has-background {
+    background-color: themify(primary-50);
+}
+
+dato-grid-v2 .has-background {
+    padding-left: 30px;
+    padding-right: 30px;
+}
+
+dato-grid-v2 .ag-cell {
+    border-right: solid 1px themify(primary-300, 0.5);
+}
+
+dato-grid-v2 ag-grid-angular .ag-floating-bottom {
+    border: none !important;
+}
+
+dato-grid-v2 ag-grid-angular .ag-floating-bottom .ag-row {
+    background-color: themify(primary-0) !important;
+    border: 1px solid themify(primary-200);
+}
+
+dato-grid-v2 ag-grid-angular .ag-floating-bottom .ag-row .ag-cell {
+    border-right: none;
+}
+
+dato-grid-v2 ag-grid-angular.enable-v2_1 {
+    padding-top: 8px;
+}
+
+dato-grid-v2 ag-grid-angular.enable-v2_1 .ag-header {
+    background-color: themify(primary-50);
+}
+
+dato-grid-v2 ag-grid-angular.enable-v2_1.has-background {
+    padding-top: 30px;
+}
+
+dato-grid-v2 ag-grid-angular:not(.with-multi-selection-col) .ag-pinned-left-cols-container {
+    box-shadow: 10px -10px 10px -10px themify(primary-300, 0.5);
+    z-index: 1;
+}
+
+dato-grid-v2 ag-grid-angular.tree .ag-cell .initials {
+    background-color: themify(primary-100) !important;
+}
+
+dato-grid-v2 ag-grid-angular.tree .ag-selection-checkbox .ag-icon-checkbox-indeterminate {
+    background-color: themify(primary-200) !important;
+}
+
 .ag-dnd-ghost {
     box-shadow: 0 0 10px -1px themify(primary-700, 0.3);
     background-color: themify(primary-100) !important;