logitude-dashboard-library 3.1.141 → 3.1.143

package/dist/assets/styles/dl-dashboard.scss

@@ -926,23 +926,71 @@ $dark-grey: #717585;
         font-family: "Manrope", sans-serif;
     }
 
+    /* Match DevExtreme pivot typography / colors (custom DX overrides above). */
+    .dl-ag-pivot-grid.ag-theme-balham {
+        font-family: "Manrope", sans-serif;
+        font-size: 12px;
+        color: #46494A;
+        --ag-font-family: "Manrope", sans-serif;
+        --ag-font-size: 12px;
+        --ag-foreground-color: #46494A;
+        --ag-secondary-foreground-color: #46494A;
+        --ag-disabled-foreground-color: #46494A;
+        --ag-header-foreground-color: #222222;
+        --ag-header-background-color: #ffffff;
+        --ag-background-color: #ffffff;
+        --ag-odd-row-background-color: #ffffff;
+        --ag-selected-row-background-color: rgba(221, 221, 221, 0.35);
+        --ag-row-hover-color: rgba(221, 221, 221, 0.15);
+        --ag-border-color: #DFE1E3;
+        --ag-row-border-color: #DFE1E3;
+        --ag-header-column-separator-color: #DFE1E3;
+        --ag-header-column-resize-handle-color: #DFE1E3;
+    }
+
     .dl-ag-pivot-grid .ag-root-wrapper {
-        border: 1px solid #e0e0e0;
+        border: 1px solid #DFE1E3;
+        font-family: "Manrope", sans-serif;
     }
 
     .dl-ag-pivot-grid {
-        --ag-border-color: #e0e0e0;
-        --ag-row-border-color: #e0e0e0;
+        --ag-border-color: #DFE1E3;
+        --ag-row-border-color: #DFE1E3;
+        --ag-header-column-separator-color: #DFE1E3;
+        --ag-header-column-resize-handle-color: #DFE1E3;
         --ag-header-background-color: #ffffff;
     }
 
+    /* Force every Ag Grid structural border to the same color. */
+    .dl-ag-pivot-grid.ag-theme-balham .ag-root-wrapper,
+    .dl-ag-pivot-grid.ag-theme-balham .ag-root,
+    .dl-ag-pivot-grid.ag-theme-balham .ag-header,
+    .dl-ag-pivot-grid.ag-theme-balham .ag-header-row,
+    .dl-ag-pivot-grid.ag-theme-balham .ag-header-cell,
+    .dl-ag-pivot-grid.ag-theme-balham .ag-header-group-cell,
+    .dl-ag-pivot-grid.ag-theme-balham .ag-pinned-left-header,
+    .dl-ag-pivot-grid.ag-theme-balham .ag-pinned-right-header,
+    .dl-ag-pivot-grid.ag-theme-balham .ag-row,
+    .dl-ag-pivot-grid.ag-theme-balham .ag-cell,
+    .dl-ag-pivot-grid.ag-theme-balham .ag-body-viewport,
+    .dl-ag-pivot-grid.ag-theme-balham .ag-center-cols-viewport,
+    .dl-ag-pivot-grid.ag-theme-balham .ag-center-cols-container,
+    .dl-ag-pivot-grid.ag-theme-balham .ag-floating-top,
+    .dl-ag-pivot-grid.ag-theme-balham .ag-floating-bottom,
+    .dl-ag-pivot-grid.ag-theme-balham .ag-side-bar,
+    .dl-ag-pivot-grid.ag-theme-balham .ag-status-bar {
+        border-color: #DFE1E3 !important;
+    }
+
     .dl-ag-pivot-grid.ag-theme-balham .ag-header {
         background-color: #ffffff !important;
+        font-family: "Manrope", sans-serif;
+        color: #222222;
     }
 
     .dl-ag-pivot-grid.ag-theme-balham .ag-header-cell,
     .dl-ag-pivot-grid.ag-theme-balham .ag-header-group-cell {
-        font-family: "Manrope";
+        font-family: "Manrope", sans-serif;
         font-size: 12px;
         font-weight: 600;
         text-align: center;
@@ -950,29 +998,62 @@ $dark-grey: #717585;
         background-color: #ffffff !important;
     }
 
+    /* Balham defaults height:50% / inset top — force full-height separators. */
+    .dl-ag-pivot-grid.ag-theme-balham .ag-header-cell::after,
+    .dl-ag-pivot-grid.ag-theme-balham .ag-header-group-cell::after {
+        height: 100%;
+        top: 0;
+        background-color: #DFE1E3;
+    }
+
+    .dl-ag-pivot-grid.ag-theme-balham .ag-header-cell-text,
+    .dl-ag-pivot-grid.ag-theme-balham .ag-header-group-text,
+    .dl-ag-pivot-grid.ag-theme-balham .ag-header-cell-label,
+    .dl-ag-pivot-grid.ag-theme-balham .ag-header-group-cell-label {
+        font-family: "Manrope", sans-serif;
+        font-size: 12px;
+        font-weight: 600;
+        color: #222222 !important;
+    }
+
     .dl-ag-pivot-grid .ag-header-cell[col-id^="ag-Grid-AutoColumn"] {
         text-align: left;
     }
 
+    .dl-ag-pivot-grid .ag-header-cell[col-id^="ag-Grid-AutoColumn"] .ag-header-cell-text,
+    .dl-ag-pivot-grid .ag-header-cell[col-id^="ag-Grid-AutoColumn"] .ag-header-cell-label {
+        text-align: left;
+    }
+
+    /* Column grand totals — match DevExtreme .dx-grandtotal */
     .dl-ag-pivot-grid .ag-header-cell[col-id^="PivotRowTotal_"],
     .dl-ag-pivot-grid .ag-header-group-cell.dl-pivot-row-grand-total-group-header,
     .dl-ag-pivot-grid .ag-header-group-cell.dl-pivot-row-grand-total-group-header-sibling {
         background-color: #f5f5f5 !important;
     }
 
+    .dl-ag-pivot-grid .ag-cell[col-id^="PivotRowTotal_"] {
+        background-color: #f5f5f5 !important;
+    }
+
     .dl-ag-pivot-grid.ag-theme-balham .ag-cell {
         border: none !important;
-        border-right: 1px solid #e0e0e0 !important;
+        border-right: 1px solid #DFE1E3 !important;
     }
 
     .dl-ag-pivot-grid.ag-theme-balham .ag-row {
-        border-bottom: 1px solid #e0e0e0 !important;
+        border-bottom: 1px solid #DFE1E3 !important;
+        background-color: #ffffff;
     }
 
     .dl-ag-pivot-grid .dl-ag-pivot-data-cell,
     .dl-ag-pivot-grid .ag-cell.dl-ag-pivot-data-cell {
         text-align: right !important;
         cursor: pointer;
+        font-family: "Manrope", sans-serif;
+        font-size: 12px;
+        font-weight: 500;
+        color: #46494A;
     }
 
     .dl-ag-pivot-grid .dl-pivot-date-data-cell,
@@ -991,11 +1072,27 @@ $dark-grey: #717585;
         text-align: left !important;
         justify-content: flex-start;
         background-color: #ffffff;
+        font-family: "Manrope", sans-serif;
+        font-size: 12px;
+        font-weight: 500;
+        color: #46494A;
+    }
+
+    /* Parent row headers — match DevExtreme vertical-headers td div>span (weight 600) */
+    .dl-ag-pivot-grid .ag-row-group.ag-row-group-expanded .dl-ag-pivot-row-label-cell,
+    .dl-ag-pivot-grid .ag-row-group.ag-row-group-contracted .dl-ag-pivot-row-label-cell,
+    .dl-ag-pivot-grid .ag-row-group.ag-row-group-expanded .ag-cell.dl-ag-pivot-row-label-cell,
+    .dl-ag-pivot-grid .ag-row-group.ag-row-group-contracted .ag-cell.dl-ag-pivot-row-label-cell {
+        font-weight: 600 !important;
+        color: #46494A !important;
     }
 
     .dl-ag-pivot-grid .ag-row-footer .ag-cell,
     .dl-ag-pivot-grid .ag-row-group-footer .ag-cell {
+        font-family: "Manrope", sans-serif;
+        font-size: 12px;
         font-weight: 500;
+        color: #46494A;
     }
 
     .dl-ag-pivot-grid .ag-row-footer .dl-ag-pivot-row-label-cell,
@@ -1004,13 +1101,21 @@ $dark-grey: #717585;
     }
 
     .dl-ag-pivot-grid .ag-cell {
-        font-family: "Manrope";
+        font-family: "Manrope", sans-serif;
         font-size: 12px;
         font-weight: 500;
         color: #46494A;
         padding: 6px 8px 5px 8px;
     }
 
+    .dl-ag-pivot-grid .ag-cell-value,
+    .dl-ag-pivot-grid .ag-group-value,
+    .dl-ag-pivot-grid .ag-group-child-count {
+        font-family: "Manrope", sans-serif;
+        font-size: 12px;
+        color: #46494A;
+    }
+
     .dl-ag-pivot-grid .ag-row-group .ag-cell {
         text-align: left;
         background-color: #ffffff;
@@ -1020,8 +1125,38 @@ $dark-grey: #717585;
         text-align: left;
     }
 
+    /*
+     * Ag Grid paints cell backgrounds, not the row. Footer row bg alone is invisible.
+     * Match DevExtreme totals across the full total row (row label + measure cells).
+     */
     .dl-ag-pivot-grid .ag-row-footer,
     .dl-ag-pivot-grid .ag-row-group-footer {
+        background-color: #dddddd33 !important;
+    }
+
+    .dl-ag-pivot-grid .ag-row-footer .ag-cell,
+    .dl-ag-pivot-grid .ag-row-group-footer .ag-cell,
+    .dl-ag-pivot-grid .ag-row-footer .dl-ag-pivot-row-label-cell,
+    .dl-ag-pivot-grid .ag-row-group-footer .dl-ag-pivot-row-label-cell,
+    .dl-ag-pivot-grid .ag-row-footer .dl-ag-pivot-data-cell,
+    .dl-ag-pivot-grid .ag-row-group-footer .dl-ag-pivot-data-cell,
+    .dl-ag-pivot-grid .ag-row-footer .ag-cell.dl-ag-pivot-row-label-cell,
+    .dl-ag-pivot-grid .ag-row-group-footer .ag-cell.dl-ag-pivot-row-label-cell,
+    .dl-ag-pivot-grid .ag-row-footer .ag-cell.dl-ag-pivot-data-cell,
+    .dl-ag-pivot-grid .ag-row-group-footer .ag-cell.dl-ag-pivot-data-cell {
+        background-color: #dddddd33 !important;
+    }
+
+    /* Grand Total row */
+    .dl-ag-pivot-grid .ag-row-footer.ag-row-level--1 {
+        background-color: #f5f5f5 !important;
+    }
+
+    .dl-ag-pivot-grid .ag-row-footer.ag-row-level--1 .ag-cell,
+    .dl-ag-pivot-grid .ag-row-footer.ag-row-level--1 .dl-ag-pivot-row-label-cell,
+    .dl-ag-pivot-grid .ag-row-footer.ag-row-level--1 .dl-ag-pivot-data-cell,
+    .dl-ag-pivot-grid .ag-row-footer.ag-row-level--1 .ag-cell.dl-ag-pivot-row-label-cell,
+    .dl-ag-pivot-grid .ag-row-footer.ag-row-level--1 .ag-cell.dl-ag-pivot-data-cell {
         background-color: #f5f5f5 !important;
     }
 
@@ -1033,6 +1168,10 @@ $dark-grey: #717585;
         visibility: hidden;
     }
 
+    .dl-ag-pivot-grid .ag-icon {
+        color: #46494A;
+    }
+
     .dx-scrollbar-hoverable .dx-scrollable-scroll.dx-state-invisible .dx-scrollable-scroll-content {
         background-color: rgba(191, 191, 191, .7);
     }

package/dist/features/Dashboard/ChartsComponents/CustomCharts/PivotAgGridSupport.d.ts

@@ -26,8 +26,8 @@ export declare const isPivotMeasureValueEmpty: (value: any) => boolean;
 export declare const logitudeSumAgg: (params: {
     values: any[];
 }) => number | null;
-export declare const isDevExtremePivotDataCellTotalOrGrandTotal: (cell: any) => boolean;
-export declare const isDevExtremeSummaryCellTotalOrGrandTotal: (cell: any) => boolean;
+export declare const isDevExtremePivotDataCellTotalOrGrandTotal: (cell: any, hasRowFields: boolean, hasColumnFields: boolean) => boolean;
+export declare const isDevExtremeSummaryCellTotalOrGrandTotal: (cell: any, hasRowFields: boolean, hasColumnFields: boolean) => boolean;
 export declare const isAgGridPivotDateMeasureTotalDisplayCell: (params: any) => boolean;
 export declare const logitudeMinAgg: (params: {
     values: any[];
@@ -52,6 +52,7 @@ export declare const collectPivotRowPath: (startNode: any) => {
     field: string;
     key: any;
 }[];
+export declare const isAgGridPivotDrillDownMeasureColumn: (colDef: any, measures: PivotApiMeasure[]) => boolean;
 export declare const buildPivotDrillDownPivotFields: (colDef: any, startNode: any, apiFields: PivotApiField[]) => any[];
 export declare const getMeasureCaption: (measure: PivotApiMeasure) => string;
 export declare const parseJsonArray: (json: string | null | undefined) => any[];

package/dist/index.js

@@ -2232,14 +2232,22 @@ var isAgGridDateMeasureTotalAggregation = function isAgGridDateMeasureTotalAggre
   return !!(colId && String(colId).indexOf('PivotRowTotal_') === 0);
 };
 
-var isDevExtremePivotDataCellTotalOrGrandTotal = function isDevExtremePivotDataCellTotalOrGrandTotal(cell) {
+var isDevExtremePivotDataCellTotalOrGrandTotal = function isDevExtremePivotDataCellTotalOrGrandTotal(cell, hasRowFields, hasColumnFields) {
   if (!cell) {
     return false;
   }
 
-  return cell.rowType === 'T' || cell.rowType === 'GT' || cell.columnType === 'T' || cell.columnType === 'GT';
+  if (hasRowFields && (cell.rowType === 'T' || cell.rowType === 'GT')) {
+    return true;
+  }
+
+  if (hasColumnFields && (cell.columnType === 'T' || cell.columnType === 'GT')) {
+    return true;
+  }
+
+  return false;
 };
-var isDevExtremeSummaryCellTotalOrGrandTotal = function isDevExtremeSummaryCellTotalOrGrandTotal(cell) {
+var isDevExtremeSummaryCellTotalOrGrandTotal = function isDevExtremeSummaryCellTotalOrGrandTotal(cell, hasRowFields, hasColumnFields) {
   if (!cell) {
     return false;
   }
@@ -2248,7 +2256,16 @@ var isDevExtremeSummaryCellTotalOrGrandTotal = function isDevExtremeSummaryCellT
   var columnPath = cell._columnPath;
   var rowType = rowPath && rowPath[0] ? rowPath[0].type : null;
   var columnType = columnPath && columnPath[0] ? columnPath[0].type : null;
-  return rowType === 'T' || rowType === 'GT' || columnType === 'T' || columnType === 'GT';
+
+  if (hasRowFields && (rowType === 'T' || rowType === 'GT')) {
+    return true;
+  }
+
+  if (hasColumnFields && (columnType === 'T' || columnType === 'GT')) {
+    return true;
+  }
+
+  return false;
 };
 var isAgGridPivotDateMeasureTotalDisplayCell = function isAgGridPivotDateMeasureTotalDisplayCell(params) {
   var node = params && params.node;
@@ -2694,17 +2711,15 @@ var collectPivotRowPath = function collectPivotRowPath(startNode) {
     return path;
   }
 
-  if (startNode.footer) {
-    if (startNode.level === -1) {
-      return path;
-    }
+  if (startNode.footer && startNode.level === -1) {
+    return path;
+  }
 
-    if (startNode.field != null && startNode.key !== undefined) {
-      path.unshift({
-        field: startNode.field,
-        key: startNode.key
-      });
-    }
+  if (startNode.field != null && startNode.key !== undefined) {
+    path.unshift({
+      field: startNode.field,
+      key: startNode.key
+    });
   }
 
   var node = startNode.parent;
@@ -2722,6 +2737,29 @@ var collectPivotRowPath = function collectPivotRowPath(startNode) {
 
   return path;
 };
+var isAgGridPivotDrillDownMeasureColumn = function isAgGridPivotDrillDownMeasureColumn(colDef, measures) {
+  if (!colDef || !measures || measures.length === 0) {
+    return false;
+  }
+
+  if (colDef.pivotValueColumn) {
+    return true;
+  }
+
+  if (colDef.rowGroup || colDef.pivot) {
+    return false;
+  }
+
+  var colId = colDef.colId ? String(colDef.colId) : '';
+
+  if (colId.indexOf('ag-Grid-AutoColumn') === 0) {
+    return false;
+  }
+
+  return measures.some(function (measure) {
+    return measure.PivotMeasureCode === colDef.field || measure.PivotMeasureCode === colId;
+  });
+};
 var buildPivotDrillDownPivotFields = function buildPivotDrillDownPivotFields(colDef, startNode, apiFields) {
   var columnFields = apiFields.filter(function (field) {
     return !isRowPivotField(field);
@@ -2809,6 +2847,8 @@ var PivotTable = React.forwardRef(function (props, comRef) {
   var tabledata = React.useRef();
   var pivotGridRef = React.useRef(null);
   var dateMeasureDataFieldsRef = React.useRef(new Set());
+  var pivotHasRowFieldsRef = React.useRef(false);
+  var pivotHasColumnFieldsRef = React.useRef(false);
 
   var _useState3 = React.useState(new PivotGridDataSource({
     store: [],
@@ -2947,7 +2987,7 @@ var PivotTable = React.forwardRef(function (props, comRef) {
 
     e.cellElement.classList.add(PIVOT_DATE_DATA_CELL_CLASS);
 
-    if (isDevExtremePivotDataCellTotalOrGrandTotal(e.cell)) {
+    if (isDevExtremePivotDataCellTotalOrGrandTotal(e.cell, pivotHasRowFieldsRef.current, pivotHasColumnFieldsRef.current)) {
       e.cell.text = '';
       var contentSpan = e.cellElement ? e.cellElement.querySelector('span') : null;
 
@@ -3035,6 +3075,14 @@ var PivotTable = React.forwardRef(function (props, comRef) {
           }
         };
       });
+      var hasRowFields = tabledata.current.PivoFields.some(function (field) {
+        return field.PivotCode && field.PivotCode.includes('Row');
+      });
+      var hasColumnFields = tabledata.current.PivoFields.some(function (field) {
+        return field.PivotCode && !field.PivotCode.includes('Row');
+      });
+      pivotHasRowFieldsRef.current = hasRowFields;
+      pivotHasColumnFieldsRef.current = hasColumnFields;
       dateMeasureDataFieldsRef.current = new Set(tabledata.current.PivotMeasures.filter(function (measure) {
         return (measure.MeasureCode === 'Min' || measure.MeasureCode === 'Max') && FieldDataType.isDateOrDateTimeType(measure.MeasureFieldDataType);
       }).map(function (measure) {
@@ -3108,7 +3156,7 @@ var PivotTable = React.forwardRef(function (props, comRef) {
           }
         }, isDateMinMaxMeasure ? {
           calculateSummaryValue: function calculateSummaryValue(cell) {
-            if (isDevExtremeSummaryCellTotalOrGrandTotal(cell)) {
+            if (isDevExtremeSummaryCellTotalOrGrandTotal(cell, hasRowFields, hasColumnFields)) {
               return null;
             }
 
@@ -3136,17 +3184,7 @@ var PivotTable = React.forwardRef(function (props, comRef) {
     }
   };
 
-  var isRowsEmptyAndColumnsNotEmpty = function isRowsEmptyAndColumnsNotEmpty() {
-    var pivotRows = widget && !isNullOrUndefinedOrEmpty(widget === null || widget === void 0 ? void 0 : widget.PivotRows) ? JSON.parse(widget === null || widget === void 0 ? void 0 : widget.PivotRows) : [];
-    var pivotColumns = widget && !isNullOrUndefinedOrEmpty(widget === null || widget === void 0 ? void 0 : widget.PivotColumns) ? JSON.parse(widget === null || widget === void 0 ? void 0 : widget.PivotColumns) : [];
-    return (pivotRows === null || pivotRows === void 0 ? void 0 : pivotRows.length) === 0 && (pivotColumns === null || pivotColumns === void 0 ? void 0 : pivotColumns.length) > 0;
-  };
-
   var canShowRowsGrandTotal = function canShowRowsGrandTotal() {
-    if (isRowsEmptyAndColumnsNotEmpty()) {
-      return true;
-    }
-
     var pivotTotalsSettings = widget && !isNullOrUndefinedOrEmpty(widget === null || widget === void 0 ? void 0 : widget.PivotTotalsSettings) ? JSON.parse(widget === null || widget === void 0 ? void 0 : widget.PivotTotalsSettings) : {};
     return !isNullOrUndefinedOrEmpty(pivotTotalsSettings.ShowRowsGrandTotal) ? pivotTotalsSettings.ShowRowsGrandTotal : false;
   };
@@ -3441,12 +3479,6 @@ var AgPivotGrid = React.forwardRef(function (props, _comRef) {
     return colDef;
   };
 
-  var isRowsEmptyAndColumnsNotEmpty = function isRowsEmptyAndColumnsNotEmpty() {
-    var pivotRows = parseJsonArray(widget === null || widget === void 0 ? void 0 : widget.PivotRows);
-    var pivotColumns = parseJsonArray(widget === null || widget === void 0 ? void 0 : widget.PivotColumns);
-    return pivotRows.length === 0 && pivotColumns.length > 0;
-  };
-
   var isRowsNotEmptyAndColumnsEmpty = function isRowsNotEmptyAndColumnsEmpty() {
     var pivotRows = parseJsonArray(widget === null || widget === void 0 ? void 0 : widget.PivotRows);
     var pivotColumns = parseJsonArray(widget === null || widget === void 0 ? void 0 : widget.PivotColumns);
@@ -3454,7 +3486,6 @@ var AgPivotGrid = React.forwardRef(function (props, _comRef) {
   };
 
   var canShowRowsGrandTotal = function canShowRowsGrandTotal() {
-    if (isRowsEmptyAndColumnsNotEmpty()) return true;
     var settings = parsePivotTotalsSettings(widget === null || widget === void 0 ? void 0 : widget.PivotTotalsSettings);
     return !isNullOrUndefinedOrEmpty(settings.ShowRowsGrandTotal) ? !!settings.ShowRowsGrandTotal : false;
   };
@@ -3518,7 +3549,7 @@ var AgPivotGrid = React.forwardRef(function (props, _comRef) {
   }, []);
   var onCellClicked = React.useCallback(function (event) {
     var colDef = event.colDef;
-    if (!colDef || !colDef.pivotValueColumn) return;
+    if (!isAgGridPivotDrillDownMeasureColumn(colDef, pivotMeasuresRef.current)) return;
     if (isPivotMeasureValueEmpty(event.value)) return;
     var pivotFields = buildPivotDrillDownPivotFields(colDef, event.node, pivotFieldsRef.current);
     props.customChartProps.onSelectDataPoint({
@@ -3550,14 +3581,8 @@ var AgPivotGrid = React.forwardRef(function (props, _comRef) {
       wrapText: true,
       autoHeight: true,
       cellClass: 'dl-ag-pivot-row-label-cell',
-      headerValueGetter: function headerValueGetter(params) {
-        var colDef = params.colDef;
-        var showRowGroup = colDef && colDef.showRowGroup;
-        if (!showRowGroup) return '';
-        var field = pivotFieldsRef.current.find(function (f) {
-          return f.PivotCode === showRowGroup;
-        });
-        return field ? field.DisplayName : '';
+      headerValueGetter: function headerValueGetter() {
+        return '';
       },
       valueFormatter: function valueFormatter(params) {
         var colDef = params.colDef;
@@ -3631,6 +3656,21 @@ var AgPivotGrid = React.forwardRef(function (props, _comRef) {
     scheduleRowGrandTotalHeaderLabel();
   };
 
+  var getContextMenuItems = React.useCallback(function (params) {
+    var colId = params.column && params.column.getColId ? params.column.getColId() : '';
+    if (!colId || colId.indexOf('ag-Grid-AutoColumn') !== 0) return [];
+    return [{
+      name: 'Expand All',
+      action: function action() {
+        if (params.api) params.api.expandAll();
+      }
+    }, {
+      name: 'Collapse All',
+      action: function action() {
+        if (params.api) params.api.collapseAll();
+      }
+    }];
+  }, []);
   var gridWrapperClassName = 'ag-theme-balham pivot-grid-element dl-ag-pivot-grid';
   return React__default.createElement(React__default.Fragment, null, isLoading ? React__default.createElement("div", {
     className: 'dl-full-hight dl-flex-content-center spinner-custome'
@@ -3666,8 +3706,8 @@ var AgPivotGrid = React.forwardRef(function (props, _comRef) {
     onFirstDataRendered: onFirstDataRendered,
     onColumnPivotChanged: onColumnPivotChanged,
     onColumnResized: onColumnResized,
+    getContextMenuItems: getContextMenuItems,
     animateRows: false,
-    suppressContextMenu: true,
     suppressMovableColumns: true,
     headerHeight: 36,
     rowHeight: 36