@syncfusion/ej2-pivotview - npm Package Compare versions

Comparing version 27.2.4 to 28.1.33

dist/global/index.d.ts

 /*!
 *  filename: index.d.ts
-*  version : 27.2.4
-*  Copyright Syncfusion Inc. 2001 - 2023. All rights reserved.
+*  version : 28.1.33
+*  Copyright Syncfusion Inc. 2001 - 2024. All rights reserved.
 *  Use of this code is subject to the terms of our license.
@@ -6,0 +6,0 @@ *  A copy of the current license can be obtained at any time by e-mailing

package.json

 {
   "_from": "@syncfusion/ej2-pivotview@*",
-  "_id": "@syncfusion/ej2-pivotview@27.2.3",
+  "_id": "@syncfusion/ej2-pivotview@26.1.35",
   "_inBundle": false,
-  "_integrity": "sha512-/kza9YO/FRsib23yeV90VYjl4I4L34fsuGPMDd7ziy7aWqFfvGM+kDH+hsY6tNj8qS8gcFLE5D/oJJQz1YW7/w==",
+  "_integrity": "sha512-z8DWRjIZFOgwhAjVI+L1+a9NZBcspIvqSP3SBOJsaEYTScFPYcvFk9nHv5MF3IrIDcD8coUltfwxHnnhUXkiPg==",
   "_location": "/@syncfusion/ej2-pivotview",
@@ -26,6 +26,6 @@ "_phantomChildren": {},
   ],
-  "_resolved": "https://nexus.syncfusioninternal.com/repository/ej2-hotfix-new/@syncfusion/ej2-pivotview/-/ej2-pivotview-27.2.3.tgz",
-  "_shasum": "332f6ae27318baee6e6a50b8c2d9592c7134c646",
+  "_resolved": "https://nexus.syncfusioninternal.com/repository/ej2-release/@syncfusion/ej2-pivotview/-/ej2-pivotview-26.1.35.tgz",
+  "_shasum": "d08a927e2b80b5c54e40b7ac3ed723ae82be582d",
   "_spec": "@syncfusion/ej2-pivotview@*",
-  "_where": "/jenkins/workspace/elease-automation_release_27.1.1/packages/included",
+  "_where": "/jenkins/workspace/elease-automation_release_28.1.1/packages/included",
   "author": {
@@ -39,19 +39,19 @@ "name": "Syncfusion Inc."
   "dependencies": {
-    "@syncfusion/ej2-base": "~27.2.2",
-    "@syncfusion/ej2-buttons": "~27.2.4",
-    "@syncfusion/ej2-calendars": "~27.2.3",
-    "@syncfusion/ej2-charts": "~27.2.4",
-    "@syncfusion/ej2-compression": "~27.2.2",
-    "@syncfusion/ej2-data": "~27.2.2",
-    "@syncfusion/ej2-dropdowns": "~27.2.4",
-    "@syncfusion/ej2-excel-export": "~27.2.2",
-    "@syncfusion/ej2-file-utils": "~27.2.2",
-    "@syncfusion/ej2-grids": "~27.2.4",
-    "@syncfusion/ej2-inputs": "~27.2.4",
-    "@syncfusion/ej2-lists": "~27.2.3",
-    "@syncfusion/ej2-navigations": "~27.2.4",
-    "@syncfusion/ej2-pdf-export": "~27.2.2",
-    "@syncfusion/ej2-popups": "~27.2.2",
-    "@syncfusion/ej2-splitbuttons": "~27.2.2",
-    "@syncfusion/ej2-svg-base": "~27.2.2"
+    "@syncfusion/ej2-base": "~28.1.33",
+    "@syncfusion/ej2-buttons": "~28.1.33",
+    "@syncfusion/ej2-calendars": "~28.1.33",
+    "@syncfusion/ej2-charts": "~28.1.33",
+    "@syncfusion/ej2-compression": "~28.1.33",
+    "@syncfusion/ej2-data": "~28.1.33",
+    "@syncfusion/ej2-dropdowns": "~28.1.33",
+    "@syncfusion/ej2-excel-export": "~28.1.33",
+    "@syncfusion/ej2-file-utils": "~28.1.33",
+    "@syncfusion/ej2-grids": "~28.1.33",
+    "@syncfusion/ej2-inputs": "~28.1.33",
+    "@syncfusion/ej2-lists": "~28.1.33",
+    "@syncfusion/ej2-navigations": "~28.1.33",
+    "@syncfusion/ej2-pdf-export": "~28.1.33",
+    "@syncfusion/ej2-popups": "~28.1.33",
+    "@syncfusion/ej2-splitbuttons": "~28.1.33",
+    "@syncfusion/ej2-svg-base": "~28.1.33"
   },
@@ -124,4 +124,4 @@ "deprecated": false,
   "typings": "index.d.ts",
-  "version": "27.2.4",
+  "version": "28.1.33",
   "sideEffects": false
 }

README.md

@@ -77,3 +77,3 @@ # JavaScript Pivot Table control
 
-> This is a commercial product and requires a paid license for possession or use. Syncfusion’s licensed software, including this control, is subject to the terms and conditions of Syncfusion's [EULA](https://www.syncfusion.com/eula/es/). To acquire a license for 80+ [JavaScript UI controls](https://www.syncfusion.com/javascript-ui-controls), you can [purchase](https://www.syncfusion.com/sales/products) or [start a free 30-day trial](https://www.syncfusion.com/account/manage-trials/start-trials).
+> This is a commercial product and requires a paid license for possession or use. Syncfusion<sup>®</sup> licensed software, including this control, is subject to the terms and conditions of Syncfusion<sup>®</sup> [EULA](https://www.syncfusion.com/eula/es/). To acquire a license for 80+ [JavaScript UI controls](https://www.syncfusion.com/javascript-ui-controls), you can [purchase](https://www.syncfusion.com/sales/products) or [start a free 30-day trial](https://www.syncfusion.com/account/manage-trials/start-trials).
 
@@ -84,2 +84,2 @@ > A [free community license](https://www.syncfusion.com/products/communitylicense) is also available for companies and individuals whose organizations have less than $1 million USD in annual gross revenue and five or fewer developers.
 
-© Copyright 2024 Syncfusion, Inc. All Rights Reserved. The Syncfusion Essential Studio license and copyright applies to this distribution.
+© Copyright 2024 Syncfusion<sup>®</sup> Inc. All Rights Reserved. The Syncfusion<sup>®</sup> Essential Studio<sup>®</sup> license and copyright applies to this distribution.

src/base/util.js

@@ -1072,7 +1072,23 @@ import { isNullOrUndefined } from '@syncfusion/ej2-base';
         else if (type === 'datetime' || type === 'date' || type === 'time') {
-            sortMembersOrder = sortOrder === 'Ascending' ?
-                (sortMembersOrder.sort(function (a, b) { return (a.dateText > b.dateText) ? 1 :
-                    ((b.dateText > a.dateText) ? -1 : 0); })) : sortOrder === 'Descending' ?
-                (sortMembersOrder.sort(function (a, b) { return (a.dateText < b.dateText) ? 1 :
-                    ((b.dateText < a.dateText) ? -1 : 0); })) : sortMembersOrder;
+            sortMembersOrder = sortOrder === 'Ascending'
+                ? sortMembersOrder.sort(function (a, b) {
+                    if (a.dateText === 'Out of Range') {
+                        return 1;
+                    }
+                    if (b.dateText === 'Out of Range') {
+                        return -1;
+                    }
+                    return a.dateText > b.dateText ? 1 : a.dateText < b.dateText ? -1 : 0;
+                })
+                : sortOrder === 'Descending'
+                    ? sortMembersOrder.sort(function (a, b) {
+                        if (a.dateText === 'Out of Range') {
+                            return 1;
+                        }
+                        if (b.dateText === 'Out of Range') {
+                            return -1;
+                        }
+                        return a.dateText < b.dateText ? 1 : a.dateText > b.dateText ? -1 : 0;
+                    })
+                    : sortMembersOrder;
         }
@@ -1079,0 +1095,0 @@ else if (type === true) {

src/common/base/css-constant.d.ts

@@ -854,1 +854,17 @@ /**
 export declare const RESIZED: string;
+/** @hidden */
+export declare const TABULAR_ROW_BUTTON: string;
+/** @hidden */
+export declare const TABULAR_PIVOT_BUTTON: string;
+/** @hidden */
+export declare const GROUP_ROW: string;
+/** @hidden */
+export declare const FREEZE_LEFT_BORDER: string;
+/** @hidden */
+export declare const ROWCELL: string;
+/** @hidden */
+export declare const ROW_CLASS: string;
+/** @hidden */
+export declare const TABULAR_GROUP_ROWS: string;
+/** @hidden */
+export declare const TABULAR_LAYOUT_HEADER: string;

src/common/base/css-constant.js

@@ -854,1 +854,17 @@ /**
 export var RESIZED = 'e-resized';
+/** @hidden */
+export var TABULAR_ROW_BUTTON = 'e-tabular-row-btn';
+/** @hidden */
+export var TABULAR_PIVOT_BUTTON = 'e-tabular-pvt-btn';
+/** @hidden */
+export var GROUP_ROW = 'e-group-row';
+/** @hidden */
+export var FREEZE_LEFT_BORDER = 'e-freezeleftborder';
+/** @hidden */
+export var ROWCELL = 'e-rowcell';
+/** @hidden */
+export var ROW_CLASS = 'e-row';
+/** @hidden */
+export var TABULAR_GROUP_ROWS = 'e-tabular-group-rows';
+/** @hidden */
+export var TABULAR_LAYOUT_HEADER = 'e-tabular-layout-header';

src/common/base/enum.d.ts

@@ -1134,1 +1134,12 @@ /**
 'Chart';
+/**
+ * Specifies the layout options for displaying the pivot table in either a compact or tabular format.
+ * The available options are:
+ * * `Compact`: Displays the pivot table in a compact format, merging row headers into a single column.
+ * * `Tabular`: Displays the pivot table in a traditional format with separate columns for row headers, creating a more detailed table format.
+ */
+export declare type GridLayout = 
+/** Displays the pivot table in a compact format, merging row headers into a single column. */
+'Compact' | 
+/** Displays the pivot table in a traditional format with separate columns for row headers, creating a more detailed table format. */
+'Tabular';

src/common/grouping-bar/axis-field-renderer.js

@@ -35,7 +35,9 @@ import * as events from '../../common/base/constant';
             var indentWidth = 24;
-            var indentDiv = createElement('span', {
-                className: 'e-indent-div',
-                styles: 'width:' + j * indentWidth + 'px'
-            });
-            prepend([indentDiv], pivotButtons[j]);
+            if (!this.parent.isTabular) {
+                var indentDiv = createElement('span', {
+                    className: 'e-indent-div',
+                    styles: this.parent.isTabular ? 'auto' : 'width:' + j * indentWidth + 'px'
+                });
+                prepend([indentDiv], pivotButtons[j]);
+            }
         }
@@ -42,0 +44,0 @@ };

src/common/grouping-bar/grouping-bar.d.ts

@@ -25,2 +25,3 @@ import { PivotView } from '../../pivotview/base/pivotview';
     private timeOutObj;
+    private rowAxisWidth;
     /**
@@ -102,2 +103,3 @@ * Module declarations
     destroy(): void;
+    private getPivotButtonsTotalWidth;
 }

src/common/grouping-bar/grouping-bar.js

@@ -18,2 +18,3 @@ import { createElement, remove, Droppable, setStyleAttribute, removeClass, select, selectAll } from '@syncfusion/ej2-base';
     function GroupingBar(parent) {
+        this.rowAxisWidth = 0;
         this.parent = parent;
@@ -55,3 +56,4 @@ this.parent.groupingBarModule = this;
         });
-        this.rowPanel = createElement('div', { className: cls.GROUP_ROW_CLASS + ' ' + cls.ROW_AXIS_CLASS });
+        this.rowPanel = createElement('div', { className: cls.GROUP_ROW_CLASS + ' ' + cls.ROW_AXIS_CLASS + (this.parent.isTabular ?
+                ' ' + cls.TABULAR_GROUP_ROWS : '') });
         var columnPanel = createElement('div', { className: cls.GROUP_COLUMN_CLASS + ' ' + cls.COLUMN_AXIS_CLASS });
@@ -169,4 +171,12 @@ var valuePanel = createElement('div', { className: cls.GROUP_VALUE_CLASS + ' ' + cls.VALUE_AXIS_CLASS });
                     if (this.parent.isAdaptive) {
-                        leftAxisPanel.style.minWidth = '180px';
-                        valuePanel.style.minWidth = '180px';
+                        if (this.parent.isTabular) {
+                            leftAxisPanel.style.minWidth = this.parent.dataSourceSettings.rows.length *
+                                this.parent.gridSettings.columnWidth + 'px';
+                            valuePanel.style.minWidth = this.parent.dataSourceSettings.rows.length *
+                                this.parent.gridSettings.columnWidth + 'px';
+                        }
+                        else {
+                            leftAxisPanel.style.minWidth = '180px';
+                            valuePanel.style.minWidth = '180px';
+                        }
                     }
@@ -203,3 +213,3 @@ if (this.parent.firstColWidth) {
                             (this.parent.getWidthAsNumber() - 2);
-                        this.gridPanel.width = gridPanelWidth < 400 ? '398px' : gridPanelWidth;
+                        this.gridPanel.width = gridPanelWidth;
                         this.gridPanel.refreshOverflow();
@@ -211,6 +221,12 @@ }
                     var colGroupElement = this.parent.element.querySelector('.' + cls.HEADERCONTENT).querySelector('colgroup').children[0];
-                    var rightAxisPanelWidth = formatUnit(this.groupingTable.offsetWidth - parseInt(colGroupElement.style.width, 10));
-                    setStyleAttribute(valuePanel, { width: colGroupElement.style.width });
+                    var valuePanelWidth = this.parent.isTabular ? this.rowAxisWidth :
+                        parseInt(colGroupElement.style.width, 10);
+                    var rightAxisPanelWidth = formatUnit(this.groupingTable.offsetWidth - valuePanelWidth);
+                    setStyleAttribute(valuePanel, { width: valuePanelWidth + 'px' });
                     setStyleAttribute(this.rightAxisPanel, { width: rightAxisPanelWidth });
+                    this.groupingTable.style.display = '';
                     var rightPanelHeight = (valuePanel.offsetHeight / 2);
+                    if (this.parent.displayOption.primary === 'Chart') {
+                        this.groupingTable.style.display = 'none';
+                    }
                     if (rightPanelHeight > columnPanel.offsetHeight) {
@@ -321,4 +337,5 @@ setStyleAttribute(filterPanel, { height: formatUnit(rightPanelHeight) });
             var colGroupElement = this.parent.element.querySelector('.' + cls.HEADERCONTENT).querySelector('colgroup').children[0];
-            var rightAxisWidth = formatUnit(this.groupingTable.offsetWidth - parseInt(colGroupElement.style.width, 10));
-            setStyleAttribute(valuePanel, { width: colGroupElement.style.width });
+            var valuePanelWidth = this.parent.isTabular ? this.rowAxisWidth : parseInt(colGroupElement.style.width, 10);
+            var rightAxisWidth = formatUnit(this.groupingTable.offsetWidth - valuePanelWidth);
+            setStyleAttribute(valuePanel, { width: valuePanelWidth + 'px' });
             setStyleAttribute(this.rightAxisPanel, { width: rightAxisWidth });
@@ -385,3 +402,4 @@ if (this.parent.showFieldList && this.parent.pivotFieldListModule && this.parent.pivotFieldListModule.element) {
             if (currentWidth) {
-                var actWidth = currentWidth < 400 ? 400 : currentWidth;
+                var minWidth = !this.parent.isAdaptive ? 400 : 300;
+                var actWidth = currentWidth < minWidth ? minWidth : currentWidth;
                 setStyleAttribute(element.querySelector('.' + cls.TOGGLE_FIELD_LIST_CLASS), {
@@ -412,7 +430,9 @@ left: formatUnit(this.parent.enableRtl ?
                 var lastButton = pivotButtons[pivotButtons.length - 1];
+                var indentWidth = this.parent.isTabular ? 0 : lastButton.querySelector('.e-indent-div').offsetWidth + 20;
                 var lastButtonWidth = (lastButton.querySelector('.' + cls.PIVOT_BUTTON_CLASS).offsetWidth +
-                    lastButton.querySelector('.e-indent-div').offsetWidth + 20);
+                    indentWidth);
                 var buttonWidth = formatUnit(lastButtonWidth < this.resColWidth ? this.resColWidth : lastButtonWidth);
                 var rowHeaderTable = this.parent.element.querySelector('.' + cls.HEADERCONTENT).querySelector('.' + cls.HEADERCELL);
-                var rowContentTable = this.parent.element.querySelector('.' + cls.CONTENT_CLASS).querySelector('tbody').querySelector('.' + cls.FREEZED_CELL);
+                //const rowContentTable: HTMLElement =
+                //this.parent.element.querySelector('.' + cls.CONTENT_CLASS).querySelector('tbody').querySelector('.' + cls.FREEZED_CELL);
                 var rowContent = this.parent.element.querySelector('.' + cls.CONTENT_CLASS).querySelector('colgroup').children[0];
@@ -458,2 +478,12 @@ var colwidth = parseInt(buttonWidth, 10);
                 }
+                if (this.parent.isTabular) {
+                    var pivotButtons_1 = this.rowAxisPanel.querySelectorAll('.' + cls.PIVOT_BUTTON_WRAPPER_CLASS);
+                    this.rowAxisWidth = this.getPivotButtonsTotalWidth(pivotButtons_1);
+                    if (this.parent.engineModule.rowMaxLevel === 0 && pivotButtons_1.length === 1) {
+                        this.rowAxisWidth = 250;
+                    }
+                    if ((this.parent.element.getBoundingClientRect().width * 0.8) <= this.rowAxisWidth) {
+                        this.rowAxisWidth = pivotButtons_1.length * this.parent.gridSettings.columnWidth;
+                    }
+                }
                 this.parent.posCount = 0;
@@ -467,5 +497,5 @@ this.parent.setGridColumns(this.parent.grid.columns);
                     rowHeaderTable.style.width = buttonWidth;
-                    rowContentTable.style.width = buttonWidth;
+                    //rowContentTable.style.width = buttonWidth;
                     setStyleAttribute(rowHeaderTable, { 'width': buttonWidth });
-                    setStyleAttribute(rowContentTable, { 'width': buttonWidth });
+                    //setStyleAttribute(rowContentTable, { 'width': buttonWidth });
                 }
@@ -477,3 +507,11 @@ }
                     if (gridColumn && gridColumn.length > 0) {
-                        gridColumn[0].width = this.resColWidth;
+                        if (this.parent.isTabular) {
+                            this.rowAxisWidth = this.parent.dataSourceSettings.rows.length * this.parent.gridSettings.columnWidth;
+                            for (var i = 0; i < this.parent.engineModule.rowMaxLevel; i++) {
+                                gridColumn[i].width = this.parent.gridSettings.columnWidth;
+                            }
+                        }
+                        else {
+                            gridColumn[0].width = this.resColWidth;
+                        }
                     }
@@ -555,3 +593,3 @@ this.parent.posCount = 0;
             allowKeyboard: false,
-            width: this.parent.grid ? (this.parent.getGridWidthAsNumber() - 2) : (this.parent.getWidthAsNumber() - 2)
+            width: !this.parent.gridSettings.allowAutoResizing ? (this.parent.grid ? (this.parent.getGridWidthAsNumber() - 2) : (this.parent.getWidthAsNumber() - 2)) : 'auto'
         });
@@ -612,4 +650,13 @@ toolbarObj.appendTo(select('#' + this.parent.element.id + '_AllFields', element));
     };
+    GroupingBar.prototype.getPivotButtonsTotalWidth = function (pivotButtons) {
+        var totalWidth = 0;
+        for (var i = 0; i < pivotButtons.length; i++) {
+            var buttonWidth = pivotButtons[i].getBoundingClientRect().width < this.parent.gridSettings.columnWidth ?
+                this.parent.gridSettings.columnWidth : pivotButtons[i].getBoundingClientRect().width;
+            totalWidth += buttonWidth + 6;
+        }
+        return totalWidth;
+    };
     return GroupingBar;
 }());
 export { GroupingBar };

src/common/popups/aggregate-menu.js

@@ -271,3 +271,4 @@ import { createElement, remove, extend, getInstance, select } from '@syncfusion/ej2-base';
             (buttonElement.getAttribute('data-uid') ? buttonElement.getAttribute('data-uid') : buttonElement.getAttribute('data-field'));
-        this.buttonElement = this.buttonElement ? this.buttonElement : document.querySelector('.' + textContent.innerText);
+        this.buttonElement =
+            this.buttonElement ? this.buttonElement : document.getElementsByClassName(textContent.innerText)[0];
         var inputTextDiv1 = createElement('div', {
@@ -400,3 +401,5 @@ className: 'e-type-option-text'
                     captionName = this.parent.enableHtmlSanitizer ? SanitizeHtmlHelper.sanitize(captionName) : captionName;
-                    contentElement.innerText = captionName;
+                    if (this.parent.dataSourceSettings.showAggregationOnValueField) {
+                        contentElement.innerText = captionName;
+                    }
                     contentElement.setAttribute('title', captionName);
@@ -452,9 +455,11 @@ buttonElement.setAttribute('data-type', type);
         if (this.parentElement.querySelector('.' + cls.PIVOT_BUTTON_CLASS)) {
-            buttonElement = this.parentElement.
-                querySelector('.' + cls.PIVOT_BUTTON_CLASS + '.' + fieldName.replace(/[^A-Z0-9]/ig, ''));
+            buttonElement =
+                this.parentElement.getElementsByClassName(cls.PIVOT_BUTTON_CLASS + " " + fieldName.replace(/[^A-Z0-9]/ig, ''))[0];
         }
         if (buttonElement) {
             var contentElement = buttonElement.querySelector('.' + cls.PIVOT_BUTTON_CONTENT_CLASS);
-            var captionName = this.parent.localeObj.getConstant(summaryInstance.value) + ' ' +
-                this.parent.localeObj.getConstant('of') + ' ' + captionInstance.value;
+            var captionName = this.parent.dataSourceSettings.showAggregationOnValueField
+                ? (this.parent.localeObj.getConstant(summaryInstance.value) + ' ' +
+                    this.parent.localeObj.getConstant('of') + ' ' + captionInstance.value)
+                : captionInstance.value;
             captionName = this.parent.enableHtmlSanitizer ? SanitizeHtmlHelper.sanitize(captionName) : captionName;
@@ -461,0 +466,0 @@ contentElement.innerText = captionName;

src/common/popups/context-menu.js

@@ -82,2 +82,11 @@ import { createElement, remove, select } from '@syncfusion/ej2-base';
         }
+        else if (this.fieldElement.getAttribute('isvalue') === 'true') {
+            for (var _c = 0, items_4 = items; _c < items_4.length; _c++) {
+                var item = items_4[_c];
+                if (item.textContent === this.parent.localeObj.getConstant('addToValue') ||
+                    item.textContent === this.parent.localeObj.getConstant('addToFilter')) {
+                    addClass([item], cls.MENU_DISABLE);
+                }
+            }
+        }
     };
@@ -84,0 +93,0 @@ PivotContextMenu.prototype.onSelectContextMenu = function (menu) {

src/common/popups/drillthrough-dialog.js

@@ -459,2 +459,3 @@ import { Dialog } from '@syncfusion/ej2-popups';
     DrillThroughDialog.prototype.frameGridColumns = function (rawData) {
+        this.engine = this.parent.dataType === 'olap' ? this.parent.olapEngineModule : this.parent.engineModule;
         var keys = this.parent.dataType === 'olap' ? rawData[0] ? Object.keys(rawData[0]) : [] :
@@ -461,0 +462,0 @@ Object.keys(this.engine.fieldList);

src/common/popups/grouping.js

@@ -755,3 +755,3 @@ import { createElement, remove, extend, getInstance, addClass, removeClass, select, isNullOrUndefined } from '@syncfusion/ej2-base';
                 var fields = customFields[field].map(function (item) { return item.name; });
-                orderedGroups = this.reOrderSettings(customFields[field], fields, orderedGroups, field);
+                orderedGroups = this.reOrderSettings(customFields[field], fields, orderedGroups, field, fieldName);
             }
@@ -764,4 +764,36 @@ groups[groupOrders[2]] = orderedGroups;
                 groups[groupOrders[0]] = groupFields_3.filter(function (field) { return field.name !== fieldName; });
+                var groupingTypes_1 = [
+                    '_date_group_years',
+                    '_date_group_quarters',
+                    '_date_group_quarterYear',
+                    '_date_group_months',
+                    '_date_group_days',
+                    '_date_group_hours',
+                    '_date_group_minutes',
+                    '_date_group_seconds'
+                ];
                 if (groups[groupOrders[0]].length === 0) {
                     delete this.parent.engineModule.groupingFieldsInfo[fieldName];
+                    var _loop_1 = function (key) {
+                        if (groupingTypes_1.some(function (dateTypes) { return key === "" + fieldName + dateTypes; })) {
+                            delete this_1.parent.engineModule.groupingFieldsInfo[key];
+                        }
+                    };
+                    var this_1 = this;
+                    for (var key in this.parent.engineModule.groupingFieldsInfo) {
+                        _loop_1(key);
+                    }
+                    var _loop_2 = function (key) {
+                        if (groupingTypes_1.some(function (dateTypes) { return key === "" + fieldName + dateTypes; })) {
+                            delete this_2.parent.engineModule.fieldList[key];
+                        }
+                    };
+                    var this_2 = this;
+                    for (var key in this.parent.engineModule.fieldList) {
+                        _loop_2(key);
+                    }
+                    var updatedFields = this.parent.engineModule.fields.filter(function (item) {
+                        return !groupingTypes_1.some(function (dateTypes) { return item === "" + fieldName + dateTypes; });
+                    });
+                    this.parent.engineModule.fields = updatedFields;
                 }
@@ -782,3 +814,3 @@ }
     };
-    Grouping.prototype.reOrderSettings = function (customGroups, fields, orderedSettings, fieldName) {
+    Grouping.prototype.reOrderSettings = function (customGroups, fields, orderedSettings, fieldName, groupedFieldName) {
         var index = fields.indexOf(fieldName);
@@ -789,2 +821,9 @@ if (index > -1 && customGroups[index].customGroups && customGroups[index].customGroups.length > 0) {
         }
+        else if (index > -1 && customGroups[index].customGroups && customGroups[index].customGroups.length === 0 &&
+            !isNullOrUndefined(groupedFieldName)) {
+            delete this.parent.engineModule.fieldList[groupedFieldName];
+            delete this.parent.engineModule.groupingFieldsInfo[groupedFieldName];
+            var updatedFields = this.parent.engineModule.fields.filter(function (value) { return value !== groupedFieldName; });
+            this.parent.engineModule.fields = updatedFields;
+        }
         return orderedSettings;
@@ -791,0 +830,0 @@ };

src/pivotfieldlist/base/field-list.d.ts

@@ -124,2 +124,3 @@ import { Component, EmitType, Internationalization } from '@syncfusion/ej2-base';
     isDeferLayoutUpdate: boolean;
+    private isInitial;
     /**
@@ -126,0 +127,0 @@ * Allows the following pivot report information such as rows, columns, values, filters, etc., that are used to render the pivot table and field list.

src/pivotview/actions/drill-through.js

@@ -56,3 +56,4 @@ import { contentReady } from '../../common/base/constant';
         if (ele) {
-            if (this.parent.allowDrillThrough && ele.classList.contains('e-valuescontent') || this.parent.editSettings.allowEditing) {
+            if (this.parent.pivotValues.length > 0 && (this.parent.allowDrillThrough && ele.classList.contains('e-valuescontent')
+                || this.parent.editSettings.allowEditing)) {
                 var colIndex = Number(ele.getAttribute('data-colindex'));
@@ -89,8 +90,13 @@ var rowIndex = Number(ele.getAttribute('index'));
                 aggType = engine.fieldList[measureName || pivotValue.actualText].aggregateType;
-                this.parent.olapEngineModule.getDrillThroughData(pivotValue, this.parent.maxRowsInDrillThrough);
                 try {
+                    this.parent.olapEngineModule.getDrillThroughData(pivotValue, this.parent.maxRowsInDrillThrough);
                     rawData = JSON.parse(engine.gridJSON);
                 }
                 catch (exception) {
-                    this.parent.pivotCommon.errorDialog.createErrorDialog(this.parent.localeObj.getConstant('error'), engine.gridJSON);
+                    if (this.parent.olapEngineModule.errorInfo) {
+                        this.parent.actionFailureMethod(this.parent.olapEngineModule.errorInfo);
+                    }
+                    this.parent.pivotCommon.errorDialog.createErrorDialog(this.parent.localeObj.getConstant('error'), this.parent.olapEngineModule.errorInfo ?
+                        this.parent.olapEngineModule.errorInfo : engine.gridJSON);
+                    this.parent.olapEngineModule.errorInfo = undefined;
                     return;
@@ -97,0 +103,0 @@ }

src/pivotview/actions/virtualscroll.d.ts

@@ -70,2 +70,3 @@ import { PivotView } from '../base/pivotview';
     destroy(): void;
+    private setFrozenColumnPosition;
 }

src/pivotview/actions/virtualscroll.js

@@ -230,3 +230,5 @@ import { EventHandler, setStyleAttribute, Browser, closest, addClass, removeClass } from '@syncfusion/ej2-base';
                     addClass([this.parent.grid.element.querySelector('.e-spinner-inner')], [cls.PIVOT_HIDE_LOADER]);
-                    removeClass([mHdr, mCont], ['e-virtual-pivot-content']);
+                    if (mHdr) {
+                        removeClass([mHdr, mCont], ['e-virtual-pivot-content']);
+                    }
                 }
@@ -440,16 +442,37 @@ this.parent.actionBeginMethod();
         for (var i = 0, j = this.parent.element.querySelectorAll('.' + cls.FREEZED_CELL); i < j.length; i++) {
-            if (isParentCells) {
-                if (this.parent.enableRtl) {
-                    j[i].style.right = -horiOffset + 'px';
+            if (this.parent.isTabular && this.parent.dataSourceSettings.rows.length > 1) {
+                var rowsHeaderElement = this.parent.element.querySelector('.' + cls.FREEZED_CELL);
+                if (isParentCells) {
+                    if (this.parent.enableRtl) {
+                        j[i].style.right = -horiOffset + 'px';
+                    }
+                    else {
+                        this.setFrozenColumnPosition(horiOffset, rowsHeaderElement, i, j);
+                    }
                 }
                 else {
-                    j[i].style.left = horiOffset + 'px';
+                    if (this.parent.enableRtl) {
+                        j[i].style.right = (Number(horiOffset)) + 'px';
+                    }
+                    else {
+                        this.setFrozenColumnPosition(horiOffset, rowsHeaderElement, i, j);
+                    }
                 }
             }
             else {
-                if (this.parent.enableRtl) {
-                    j[i].style.right = (Number(horiOffset)) + 'px';
+                if (isParentCells) {
+                    if (this.parent.enableRtl) {
+                        j[i].style.right = -horiOffset + 'px';
+                    }
+                    else {
+                        j[i].style.left = horiOffset + 'px';
+                    }
                 }
                 else {
-                    j[i].style.left = (Number(-horiOffset)) + 'px';
+                    if (this.parent.enableRtl) {
+                        j[i].style.right = (Number(horiOffset)) + 'px';
+                    }
+                    else {
+                        j[i].style.left = (Number(-horiOffset)) + 'px';
+                    }
                 }
@@ -467,3 +490,4 @@ }
                 var top_1 = mCont.scrollTop * _this.parent.verticalScrollScale;
-                if (e.type === 'wheel' || e.type === 'touchmove' || _this.eventType === 'wheel' || _this.eventType === 'touchmove' || e.type === 'keyup' || e.type === 'keydown') {
+                if (e.type === 'wheel' || e.type === 'touchmove' || e.type === 'scroll'
+                    || _this.eventType === 'wheel' || _this.eventType === 'touchmove' || e.type === 'keyup' || e.type === 'keydown') {
                     var ele_1 = _this.parent.isAdaptive ? mCont : closest(mCont, '.' + cls.GRID_CONTENT).querySelector('.' + cls.VIRTUALTABLE_DIV);
@@ -574,4 +598,15 @@ clearTimeout(timeOutObj);
     };
+    VirtualScroll.prototype.setFrozenColumnPosition = function (horiOffset, rowsHeaderElement, i, j) {
+        if (rowsHeaderElement) {
+            var colIndex = Number(rowsHeaderElement.getAttribute('data-colIndex'));
+            if (colIndex > 0 && colIndex <= (this.parent.engineModule.rowMaxLevel + 1)) {
+                j[i].style.left = (colIndex * this.parent.gridSettings.columnWidth) + 'px';
+            }
+        }
+        else {
+            j[i].style.left = horiOffset + 'px';
+        }
+    };
     return VirtualScroll;
 }());
 export { VirtualScroll };

src/pivotview/model/gridsettings-model.d.ts

@@ -1,2 +0,2 @@
-import { Property, ChildProperty, EmitType, Event } from '@syncfusion/ej2-base';import { ExcelHeaderQueryCellInfoEventArgs, GridLine, ClipMode, BeforeCopyEventArgs, PrintMode } from '@syncfusion/ej2-grids';import { ExcelQueryCellInfoEventArgs, PdfHeaderQueryCellInfoEventArgs, SelectionSettingsModel } from '@syncfusion/ej2-grids';import { QueryCellInfoEventArgs, HeaderCellInfoEventArgs, CellSelectEventArgs, RowSelectEventArgs } from '@syncfusion/ej2-grids';import { CellSelectingEventArgs, CellDeselectEventArgs, ResizeArgs, PrintEventArgs, TextWrapSettings } from '@syncfusion/ej2-grids';import { ContextMenuItemModel, RowDeselectEventArgs, PdfQueryCellInfoEventArgs, ColumnDragEventArgs } from '@syncfusion/ej2-grids';import { CheckboxSelectionType, SelectionType } from '@syncfusion/ej2-grids';import { BeforeOpenCloseMenuEventArgs, MenuEventArgs } from '@syncfusion/ej2-navigations';import { ColumnRenderEventArgs, SelectionSettings } from '../../common/base/interface';import { PivotTableContextMenuItem, SelectionMode, PivotCellSelectionMode } from '../../common/base/enum';
+import { Property, ChildProperty, EmitType, Event } from '@syncfusion/ej2-base';import { ExcelHeaderQueryCellInfoEventArgs, GridLine, ClipMode, BeforeCopyEventArgs, PrintMode } from '@syncfusion/ej2-grids';import { ExcelQueryCellInfoEventArgs, PdfHeaderQueryCellInfoEventArgs, SelectionSettingsModel } from '@syncfusion/ej2-grids';import { QueryCellInfoEventArgs, HeaderCellInfoEventArgs, CellSelectEventArgs, RowSelectEventArgs } from '@syncfusion/ej2-grids';import { CellSelectingEventArgs, CellDeselectEventArgs, ResizeArgs, PrintEventArgs, TextWrapSettings } from '@syncfusion/ej2-grids';import { ContextMenuItemModel, RowDeselectEventArgs, PdfQueryCellInfoEventArgs, ColumnDragEventArgs } from '@syncfusion/ej2-grids';import { CheckboxSelectionType, SelectionType } from '@syncfusion/ej2-grids';import { BeforeOpenCloseMenuEventArgs, MenuEventArgs } from '@syncfusion/ej2-navigations';import { ColumnRenderEventArgs, SelectionSettings } from '../../common/base/interface';import { PivotTableContextMenuItem, SelectionMode, PivotCellSelectionMode, GridLayout } from '../../common/base/enum';
 
@@ -163,2 +163,12 @@ /**
     /**
+     * Specifies the layout options for displaying the pivot table in either a compact or tabular format.
+     * The available options are:
+     * * `Compact`: Displays the pivot table in a compact format, merging row headers into a single column.
+     * * `Tabular`: Displays the pivot table in a traditional format with separate columns for row headers, creating a more detailed table format.
+     *
+     * @default Compact
+     */
+    layout?: GridLayout;
+
+    /**
      * Allows the contents of the cell overflow to be displayed in the pivot table.
@@ -165,0 +175,0 @@ * For example, to truncate the cell content of a cell when it overflows with respect to its cell width, set the property `clipMode` to **Clip**.

src/pivotview/model/gridsettings.d.ts

@@ -10,3 +10,3 @@ import { ChildProperty, EmitType } from '@syncfusion/ej2-base';
 import { ColumnRenderEventArgs, SelectionSettings } from '../../common/base/interface';
-import { PivotTableContextMenuItem, SelectionMode, PivotCellSelectionMode } from '../../common/base/enum';
+import { PivotTableContextMenuItem, SelectionMode, PivotCellSelectionMode, GridLayout } from '../../common/base/enum';
 /**
@@ -153,2 +153,11 @@ * Interface for a class SelectionSettings
     /**
+     * Specifies the layout options for displaying the pivot table in either a compact or tabular format.
+     * The available options are:
+     * * `Compact`: Displays the pivot table in a compact format, merging row headers into a single column.
+     * * `Tabular`: Displays the pivot table in a traditional format with separate columns for row headers, creating a more detailed table format.
+     *
+     * @default Compact
+     */
+    layout: GridLayout;
+    /**
      * Allows the contents of the cell overflow to be displayed in the pivot table.
@@ -155,0 +164,0 @@ * For example, to truncate the cell content of a cell when it overflows with respect to its cell width, set the property `clipMode` to **Clip**.

src/pivotview/model/gridsettings.js

@@ -89,2 +89,5 @@ var __extends = (this && this.__extends) || (function () {
     __decorate([
+        Property('Compact')
+    ], GridSettings.prototype, "layout", void 0);
+    __decorate([
         Property('Ellipsis')
@@ -91,0 +94,0 @@ ], GridSettings.prototype, "clipMode", void 0);

src/pivotview/renderer/render.d.ts

@@ -170,2 +170,5 @@ import { IAxisSet, IGridValues } from '../../base/engine';
     private wireEvents;
+    private setSpanAttributes;
+    private updatePivotColumn;
+    private getTotalColumnWidth;
 }

No alert changes

Improved metrics

Total package byte prevSize

49622676

increased by5.23%

Number of package files

433

increased by4.84%

Lines of code

552580

increased by8.02%

Dependency changes

• + Added@syncfusion/ej2-base@28.1.33(transitive)

• + Added@syncfusion/ej2-buttons@28.1.39(transitive)

• + Added@syncfusion/ej2-calendars@28.1.41(transitive)

• + Added@syncfusion/ej2-charts@28.1.41(transitive)

• + Added@syncfusion/ej2-compression@28.1.33(transitive)

• + Added@syncfusion/ej2-data@28.1.33(transitive)

• + Added@syncfusion/ej2-dropdowns@28.1.41(transitive)

• + Added@syncfusion/ej2-excel-export@28.1.33(transitive)

• + Added@syncfusion/ej2-file-utils@28.1.33(transitive)

• + Added@syncfusion/ej2-grids@28.1.41(transitive)

• + Added@syncfusion/ej2-icons@28.1.33(transitive)

• + Added@syncfusion/ej2-inputs@28.1.41(transitive)

• + Added@syncfusion/ej2-lists@28.1.37(transitive)

• + Added@syncfusion/ej2-navigations@28.1.41(transitive)

• + Added@syncfusion/ej2-notifications@28.1.33(transitive)

• + Added@syncfusion/ej2-pdf-export@28.1.38(transitive)

• + Added@syncfusion/ej2-popups@28.1.39(transitive)

• + Added@syncfusion/ej2-splitbuttons@28.1.41(transitive)

• + Added@syncfusion/ej2-svg-base@28.1.37(transitive)

• - Removed@syncfusion/ej2-base@27.2.5(transitive)

• - Removed@syncfusion/ej2-buttons@27.2.4(transitive)

• - Removed@syncfusion/ej2-calendars@27.2.3(transitive)

• - Removed@syncfusion/ej2-charts@27.2.5(transitive)

• - Removed@syncfusion/ej2-compression@27.2.2(transitive)

• - Removed@syncfusion/ej2-data@27.2.2(transitive)

• - Removed@syncfusion/ej2-dropdowns@27.2.5(transitive)

• - Removed@syncfusion/ej2-excel-export@27.2.2(transitive)

• - Removed@syncfusion/ej2-file-utils@27.2.2(transitive)

• - Removed@syncfusion/ej2-grids@27.2.5(transitive)

• - Removed@syncfusion/ej2-icons@27.2.2(transitive)

• - Removed@syncfusion/ej2-inputs@27.2.4(transitive)

• - Removed@syncfusion/ej2-lists@27.2.5(transitive)

• - Removed@syncfusion/ej2-navigations@27.2.5(transitive)

• - Removed@syncfusion/ej2-notifications@27.2.4(transitive)

• - Removed@syncfusion/ej2-pdf-export@27.2.2(transitive)

• - Removed@syncfusion/ej2-popups@27.2.2(transitive)

• - Removed@syncfusion/ej2-splitbuttons@27.2.2(transitive)

• - Removed@syncfusion/ej2-svg-base@27.2.2(transitive)

• Updated@syncfusion/ej2-base@~28.1.33

• Updated@syncfusion/ej2-buttons@~28.1.33

• Updated@syncfusion/ej2-calendars@~28.1.33

• Updated@syncfusion/ej2-charts@~28.1.33

• Updated@syncfusion/ej2-compression@~28.1.33

• Updated@syncfusion/ej2-data@~28.1.33

• Updated@syncfusion/ej2-dropdowns@~28.1.33

• Updated@syncfusion/ej2-excel-export@~28.1.33

• Updated@syncfusion/ej2-file-utils@~28.1.33

• Updated@syncfusion/ej2-grids@~28.1.33

• Updated@syncfusion/ej2-inputs@~28.1.33

• Updated@syncfusion/ej2-lists@~28.1.33

• Updated@syncfusion/ej2-navigations@~28.1.33

• Updated@syncfusion/ej2-pdf-export@~28.1.33

• Updated@syncfusion/ej2-popups@~28.1.33

• Updated@syncfusion/ej2-splitbuttons@~28.1.33

• Updated@syncfusion/ej2-svg-base@~28.1.33