@syncfusion/ej2-react-pivotview 22.2.12 → 23.1.36

package/CHANGELOG.md

@@ -4,85 +4,25 @@
 
 ### PivotTable
 
-#### Bug Fixes
-
-- `#F183246` - An issue with adding multiple classes using the `cssClass` property has been fixed.
-- `#F183955` - An issue with the pivot table not displaying with the selected display view options from the loaded report while using the toolbar has been fixed.
-
-## 22.2.11 (2023-08-29)
-
-### Pivot Table
-
-#### Bug fixes
-
-- `F183271` - The pivot table can now be properly displayed while adding the field at runtime with data compression.
-
-## 22.2.10 (2023-08-22)
-
-### Pivot Table
-
-#### Bug fixes
-
-- The issue with server side rendering in next.js has been resolved.
-
-## 22.2.9 (2023-08-15)
-
-### Pivot Table
-
-#### Bug fixes
-
-- `I489341` - The toolbar menu items will now be properly displayed in the pivot table with the material dark theme.
-
-## 22.2.8 (2023-08-08)
-
-### Pivot Table
-
-#### Bug fixes
-
-- `I485463` - The pivot table can now be properly rendered when sorting is applied with virtualization.
-- `I486436` - The pivot chart can now be properly rendered with remote data binding.
-- `F183726` - The "multiLevelLabelRender" event will now work properly in the Angular pivot table.
-
-## 22.2.7 (2023-08-02)
-
-### Pivot Table
-
-#### Bug fixes
-
-- `I459099` - The pivot table can now be rendered properly with the reordering feature.
-
-## 22.2.5 (2023-07-27)
-
-### Pivot Table
-
-#### Bug fixes
-
-- `I471218` - The value sort icon in the pivot table is now properly positioned with larger column text.
-- `F183271` - When defer layout update is enabled, the pivot table now renders properly with the pivot chart.
-- `I463929` - When enabling virtualization dynamically at runtime, the pivot table will now render properly.
-
-#### Features
-
-- `I398184` - Provided support to customize the column width when exporting the pivot table to a PDF document.
-
-## 22.1.39 (2023-07-18)
-
-### Pivot Table
-
-#### Bug fixes
-
-- `#F183090` - Columns can now be hidden specifically with an OLAP data source.
+#### Breaking Changes
 
-## 22.1.36 (2023-06-28)
+- The skeleton (aka, HTML) of the pivot table has been restructured. Previously, the pivot table displayed frozen row headers and values data in a two-table manner. It has been simplified to one table. The appearance of the horizontal scrollbar has changed as the row headers were frozen using the CSS attributes. However, the pivot table's appearance will remain unchanged as the prior version.
+- Because the DOM structure of the pivot table has changed, the following classes included elements have been removed and can now be identified using the classes listed below.
+- The frozen and moveable header elements have now been identified within the `e-gridheader` element using the class names shown below.
 
-### Pivot Table
+| Previous | Now | Description | 
+|---|---|---|
+| `e-frozenheader > e-table > th.e-headercell` | `e-table > th.e-leftfreeze.e-headercell` | Element defining the frozen column header. | 
+| `e-movableheader > e-table > th.e-headercell` | `e-table > th.e-unfreeze.e-headercell` | Element defining the moveable column header. | 
 
-#### Bug fixes
+- The frozen and moveable content elements have now been identified within the `e-gridcontent` element using the class names shown below.
 
-- `#I473176` - The issue with the spinner not being properly hidden on the pivot table when the drillthrough popup was closed with server-side engine has now been resolved.
-- `#I461804` - When we bind fields from the same hierarchy, drill down/up will now work properly in the pivot table with an OLAP data.
+| Previous | Now | Description | 
+|---|---|---|
+| `e-frozencontent > e-table > th.e-rowcell` | `e-table > th.e-leftfreeze.e-rowcell` | Element defining the frozen content (aka, row headers). | 
+| `e-movablecontent > e-table > th.e-rowcell` | `e-table > th.e-unfreeze.e-rowcell` | Element defining the moveable content (aka, values). | 
 
-## 22.1.34 (2023-06-21)
+## 22.1.34 (2023-01-21)
 
 ### Pivot Table
 

package/dist/ej2-react-pivotview.min.js

@@ -1,6 +1,6 @@
 /*!
 *  filename: ej2-react-pivotview.min.js
-*  version : 22.2.12
+*  version : 23.1.36
 *  Copyright Syncfusion Inc. 2001 - 2020. All rights reserved.
 *  Use of this code is subject to the terms of our license.
 *  A copy of the current license can be obtained at any time by e-mailing

package/dist/ej2-react-pivotview.umd.min.js

@@ -1,6 +1,6 @@
 /*!
 *  filename: ej2-react-pivotview.umd.min.js
-*  version : 22.2.12
+*  version : 23.1.36
 *  Copyright Syncfusion Inc. 2001 - 2020. All rights reserved.
 *  Use of this code is subject to the terms of our license.
 *  A copy of the current license can be obtained at any time by e-mailing

package/package.json

@@ -1,8 +1,8 @@
 {
   "_from": "@syncfusion/ej2-react-pivotview@*",
-  "_id": "@syncfusion/ej2-react-pivotview@22.2.11",
+  "_id": "@syncfusion/ej2-react-pivotview@20.16.4",
   "_inBundle": false,
-  "_integrity": "sha512-3ghpT/fnG1BKlCBvGwLCHl1ItMOoUoZVTpBBR+4kdrvkErObwH/b05MCx3wVb2a7bxETd3TJuCMkRVINYpehYw==",
+  "_integrity": "sha512-x6gStlqQlMQkseV0GfVd5iY76sBgagnf1oKArxcRkETEAEcswc4POFIyd8ym9AfqSG/9CHU+aj24EFC1ls5ZpQ==",
   "_location": "/@syncfusion/ej2-react-pivotview",
   "_phantomChildren": {},
   "_requested": {
@@ -19,10 +19,10 @@
   "_requiredBy": [
     "/"
   ],
-  "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-react-pivotview/-/ej2-react-pivotview-22.2.11.tgz",
-  "_shasum": "12f69d4c69fb8b77306aade193d55c015b66a438",
+  "_resolved": "https://nexus.syncfusion.com/repository/ej2-release/@syncfusion/ej2-react-pivotview/-/ej2-react-pivotview-20.16.4.tgz",
+  "_shasum": "79a793e8408cb110f2faa51d2d348b1c5552fc68",
   "_spec": "@syncfusion/ej2-react-pivotview@*",
-  "_where": "/jenkins/workspace/elease-automation_release_21.1.1/packages/included",
+  "_where": "/jenkins/workspace/elease-automation_release_23.1.1/packages/included",
   "author": {
     "name": "Syncfusion Inc."
   },
@@ -31,9 +31,9 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~22.2.12",
-    "@syncfusion/ej2-pivotview": "22.2.12",
-    "@syncfusion/ej2-react-base": "~22.2.5"
+    "@syncfusion/ej2-base": "~23.1.36",
+    "@syncfusion/ej2-pivotview": "23.1.36",
+    "@syncfusion/ej2-react-base": "~23.1.36"
   },
   "deprecated": false,
   "description": "The pivot grid, or pivot table, is used to visualize large sets of relational data in a cross-tabular format, similar to an Excel pivot table. for React",
@@ -53,6 +53,6 @@
     "type": "git",
     "url": "git+https://github.com/syncfusion/ej2-react-ui-components.git"
   },
-  "version": "22.2.12",
+  "version": "23.1.36",
   "sideEffects": false
 }

package/styles/bootstrap-dark.css

@@ -162,6 +162,8 @@
   /* stylelint-disable */
   /* stylelint-enable */
   /* stylelint-enable */
+  /* stylelint-disable */
+  /* stylelint-enable */
 }
 .e-pivotview .e-value-field-settings,
 .e-pivotview .e-member-editor-dialog,
@@ -627,6 +629,9 @@
 .e-pivotview .e-frozenscrollbar {
   background: #131313;
 }
+.e-pivotview .e-headercontent .e-columnheader .e-headercell.e-leftfreeze {
+  -webkit-transform: translate3d(0, 0, 0);
+}
 
 .e-pivotview-disable-icon {
   visibility: hidden;
@@ -901,7 +906,6 @@
 
 /*! PivotView theme */
 .e-pivotview {
-  /* stylelint-enable */
   /* stylelint-enable */
   /* stylelint-disable */
   /* stylelint-enable */
@@ -912,6 +916,8 @@
   /* stylelint-enable */
 }
 .e-pivotview .e-pivotcell-container {
+  -ms-flex-align: center;
+      align-items: center;
   display: -ms-flexbox;
   display: flex;
 }
@@ -957,14 +963,23 @@
   -ms-user-select: none;
   user-select: none;
 }
+.e-pivotview .e-grid .e-content-virtualtable {
+  overflow-x: auto;
+  scrollbar-width: none; /* firefox */
+}
+.e-pivotview .e-grid .e-content-virtualtable::-webkit-scrollbar {
+  display: none; /* safari, chrome and edge */
+}
 .e-pivotview .e-gtot,
 .e-pivotview .e-gtot.e-rowsheader,
 .e-pivotview .e-gtot.e-columnsheader,
 .e-pivotview .e-grid .e-content,
-.e-pivotview .e-grid .e-gridheader,
-.e-pivotview .e-headercell {
+.e-pivotview .e-grid .e-gridheader {
   background: #131313;
 }
+.e-pivotview .e-headercell:not(.e-columnsheader) {
+  background: #131313 !important;
+}
 .e-pivotview .e-grid .e-gridheader {
   border-bottom-width: 1px;
 }
@@ -1057,9 +1072,6 @@
 .e-pivotview .e-drop-indicator {
   display: block;
 }
-.e-pivotview div.e-cellvalue {
-  margin-top: 5px;
-}
 .e-pivotview .e-sortfilterdiv .e-value-sort-icon {
   float: right;
 }
@@ -1069,10 +1081,17 @@
 .e-pivotview .e-sortfilterdiv:not(.e-value-sort-icon) {
   display: none;
 }
-.e-pivotview .e-stackedheadercelldiv .e-sortfilterdiv, .e-pivotview .e-stackedheadercelldiv .e-sortfilterdiv.e-value-sort-align, .e-pivotview .e-headercelldiv .e-sortfilterdiv, .e-pivotview .e-headercelldiv .e-sortfilterdiv.e-value-sort-align {
+.e-pivotview .e-stackedheadercelldiv .e-sortfilterdiv, .e-pivotview .e-headercelldiv .e-sortfilterdiv {
+  margin: -28px 0 !important;
+}
+.e-pivotview .e-stackedheadercelldiv .e-sortfilterdiv.e-value-sort-align, .e-pivotview .e-headercelldiv .e-sortfilterdiv.e-value-sort-align {
   margin: -11px 0 !important;
+}
+.e-pivotview .e-stackedheadercelldiv .e-sortfilterdiv, .e-pivotview .e-stackedheadercelldiv .e-sortfilterdiv.e-value-sort-align, .e-pivotview .e-headercelldiv .e-sortfilterdiv, .e-pivotview .e-headercelldiv .e-sortfilterdiv.e-value-sort-align {
+  margin: 0 !important;
   margin-left: auto !important;
-  margin-top: 5px !important;
+  padding-bottom: 0 !important;
+  padding-top: 0 !important;
 }
 .e-pivotview .e-rowsheader .e-sortfilterdiv {
   margin: -20px 0 !important;
@@ -1107,9 +1126,25 @@
 }
 .e-pivotview.sf-pivotview .e-spinner-pane.e-pivot-outer-spinner .e-spinner-inner {
   visibility: hidden !important;
+  /* stylelint-enable */
+}
+.e-pivotview.sf-pivotview .e-grid .e-pivot-content-loader {
+  position: absolute;
+  z-index: 10;
+  color: #0070f0;
+  font-size: 20px;
+  text-align: center;
+  padding: 10%;
+}
+.e-pivotview.sf-pivotview .e-grid .e-pivot-content-loader.e-hide-loader {
+  display: none;
+}
+.e-pivotview.sf-pivotview .e-grid .e-virtual-pivot-content {
+  visibility: hidden;
 }
 .e-pivotview .e-grid .e-headercelldiv,
 .e-pivotview .e-grid .e-columnsheader {
+  /* stylelint-disable */
   padding-left: 8px !important;
 }
 .e-pivotview .sf-grid .e-spinner-pane {
@@ -1130,6 +1165,14 @@
   border-left: 0;
   border-right-width: 1px;
 }
+.e-pivotview .e-leftfreeze.e-freezeleftborder {
+  border-left-color: #414141 !important;
+  border-right-color: #414141 !important;
+  border-right-width: 1px !important;
+}
+.e-pivotview .e-leftfreeze.e-freezeleftborder:not(.e-gtot) {
+  background: #131313;
+}
 .e-pivotview .e-stackedheadercelldiv {
   display: block;
 }
@@ -1137,7 +1180,6 @@
 .e-pivotview .e-stackedheadercelldiv.e-cellvalue {
   display: inline-block;
   padding-left: 12px !important;
-  margin-top: 5px;
 }
 .e-pivotview .e-headercelldiv.e-cellvalue {
   margin-left: 0px;
@@ -1634,8 +1676,6 @@
   cursor: pointer;
   display: inline-block;
   height: 18px;
-  margin-top: 5px;
-  margin-bottom: 0;
   text-align: center;
   width: 18px;
 }
@@ -1643,8 +1683,6 @@
 .e-pivotview th .e-collapse {
   font-size: 12px !important;
   margin-left: 0px;
-  margin-top: 6px;
-  margin-bottom: 0;
 }
 .e-pivotview .e-expand::before {
   font-size: 10px;
@@ -2008,6 +2046,10 @@
   border-left-width: 1px;
   border-right: 0;
 }
+.e-pivotview.e-rtl .e-leftfreeze.e-freezeleftborder {
+  border-left-width: 1px;
+  border-right: 0;
+}
 .e-pivotview.e-rtl .e-rowsheader .e-cellvalue {
   margin-left: 0;
   margin-right: 7px;
@@ -2240,12 +2282,6 @@
 .e-bigger.e-pivotview .e-bigger .e-stackedheadercelldiv {
   padding-left: 16px !important;
 }
-.e-bigger .e-pivotview th .e-expand,
-.e-bigger .e-pivotview th .e-collapse,
-.e-bigger.e-pivotview th .e-expand,
-.e-bigger.e-pivotview th .e-collapse {
-  margin-top: 6px;
-}
 .e-bigger .e-pivotview .e-grouping-bar,
 .e-bigger.e-pivotview .e-grouping-bar {
   /* stylelint-enable */
@@ -3218,7 +3254,7 @@
   width: 100% !important;
 }
 .e-pivot-formatting-dialog.e-device .e-format-condition-button .e-add-icon {
-  margin-left: 0;
+  margin-left: 0 !important;
 }
 .e-pivot-formatting-dialog.e-device .e-format-value1,
 .e-pivot-formatting-dialog.e-device .e-format-value2,

package/styles/bootstrap.css

@@ -161,6 +161,8 @@
   /* stylelint-disable */
   /* stylelint-enable */
   /* stylelint-enable */
+  /* stylelint-disable */
+  /* stylelint-enable */
 }
 .e-pivotview .e-value-field-settings,
 .e-pivotview .e-member-editor-dialog,
@@ -626,6 +628,9 @@
 .e-pivotview .e-frozenscrollbar {
   background: #f5f5f5;
 }
+.e-pivotview .e-headercontent .e-columnheader .e-headercell.e-leftfreeze {
+  -webkit-transform: translate3d(0, 0, 0);
+}
 
 .e-pivotview-disable-icon {
   visibility: hidden;
@@ -900,7 +905,6 @@
 
 /*! PivotView theme */
 .e-pivotview {
-  /* stylelint-enable */
   /* stylelint-enable */
   /* stylelint-disable */
   /* stylelint-enable */
@@ -911,6 +915,8 @@
   /* stylelint-enable */
 }
 .e-pivotview .e-pivotcell-container {
+  -ms-flex-align: center;
+      align-items: center;
   display: -ms-flexbox;
   display: flex;
 }
@@ -956,14 +962,23 @@
   -ms-user-select: none;
   user-select: none;
 }
+.e-pivotview .e-grid .e-content-virtualtable {
+  overflow-x: auto;
+  scrollbar-width: none; /* firefox */
+}
+.e-pivotview .e-grid .e-content-virtualtable::-webkit-scrollbar {
+  display: none; /* safari, chrome and edge */
+}
 .e-pivotview .e-gtot,
 .e-pivotview .e-gtot.e-rowsheader,
 .e-pivotview .e-gtot.e-columnsheader,
 .e-pivotview .e-grid .e-content,
-.e-pivotview .e-grid .e-gridheader,
-.e-pivotview .e-headercell {
+.e-pivotview .e-grid .e-gridheader {
   background: #f5f5f5;
 }
+.e-pivotview .e-headercell:not(.e-columnsheader) {
+  background: #f5f5f5 !important;
+}
 .e-pivotview .e-grid .e-gridheader {
   border-bottom-width: 1px;
 }
@@ -1056,9 +1071,6 @@
 .e-pivotview .e-drop-indicator {
   display: block;
 }
-.e-pivotview div.e-cellvalue {
-  margin-top: 5px;
-}
 .e-pivotview .e-sortfilterdiv .e-value-sort-icon {
   float: right;
 }
@@ -1068,10 +1080,17 @@
 .e-pivotview .e-sortfilterdiv:not(.e-value-sort-icon) {
   display: none;
 }
-.e-pivotview .e-stackedheadercelldiv .e-sortfilterdiv, .e-pivotview .e-stackedheadercelldiv .e-sortfilterdiv.e-value-sort-align, .e-pivotview .e-headercelldiv .e-sortfilterdiv, .e-pivotview .e-headercelldiv .e-sortfilterdiv.e-value-sort-align {
+.e-pivotview .e-stackedheadercelldiv .e-sortfilterdiv, .e-pivotview .e-headercelldiv .e-sortfilterdiv {
+  margin: -28px 0 !important;
+}
+.e-pivotview .e-stackedheadercelldiv .e-sortfilterdiv.e-value-sort-align, .e-pivotview .e-headercelldiv .e-sortfilterdiv.e-value-sort-align {
   margin: -11px 0 !important;
+}
+.e-pivotview .e-stackedheadercelldiv .e-sortfilterdiv, .e-pivotview .e-stackedheadercelldiv .e-sortfilterdiv.e-value-sort-align, .e-pivotview .e-headercelldiv .e-sortfilterdiv, .e-pivotview .e-headercelldiv .e-sortfilterdiv.e-value-sort-align {
+  margin: 0 !important;
   margin-left: auto !important;
-  margin-top: 5px !important;
+  padding-bottom: 0 !important;
+  padding-top: 0 !important;
 }
 .e-pivotview .e-rowsheader .e-sortfilterdiv {
   margin: -20px 0 !important;
@@ -1106,9 +1125,25 @@
 }
 .e-pivotview.sf-pivotview .e-spinner-pane.e-pivot-outer-spinner .e-spinner-inner {
   visibility: hidden !important;
+  /* stylelint-enable */
+}
+.e-pivotview.sf-pivotview .e-grid .e-pivot-content-loader {
+  position: absolute;
+  z-index: 10;
+  color: #317ab9;
+  font-size: 20px;
+  text-align: center;
+  padding: 10%;
+}
+.e-pivotview.sf-pivotview .e-grid .e-pivot-content-loader.e-hide-loader {
+  display: none;
+}
+.e-pivotview.sf-pivotview .e-grid .e-virtual-pivot-content {
+  visibility: hidden;
 }
 .e-pivotview .e-grid .e-headercelldiv,
 .e-pivotview .e-grid .e-columnsheader {
+  /* stylelint-disable */
   padding-left: 8px !important;
 }
 .e-pivotview .sf-grid .e-spinner-pane {
@@ -1129,6 +1164,14 @@
   border-left: 0;
   border-right-width: 1px;
 }
+.e-pivotview .e-leftfreeze.e-freezeleftborder {
+  border-left-color: #e6e6e6 !important;
+  border-right-color: #e6e6e6 !important;
+  border-right-width: 1px !important;
+}
+.e-pivotview .e-leftfreeze.e-freezeleftborder:not(.e-gtot) {
+  background: #f9f9f9;
+}
 .e-pivotview .e-stackedheadercelldiv {
   display: block;
 }
@@ -1136,7 +1179,6 @@
 .e-pivotview .e-stackedheadercelldiv.e-cellvalue {
   display: inline-block;
   padding-left: 12px !important;
-  margin-top: 5px;
 }
 .e-pivotview .e-headercelldiv.e-cellvalue {
   margin-left: 0px;
@@ -1633,8 +1675,6 @@
   cursor: pointer;
   display: inline-block;
   height: 18px;
-  margin-top: 5px;
-  margin-bottom: 0;
   text-align: center;
   width: 18px;
 }
@@ -1642,8 +1682,6 @@
 .e-pivotview th .e-collapse {
   font-size: 11px !important;
   margin-left: 0px;
-  margin-top: 6px;
-  margin-bottom: 0;
 }
 .e-pivotview .e-expand::before {
   font-size: 10px;
@@ -2007,6 +2045,10 @@
   border-left-width: 1px;
   border-right: 0;
 }
+.e-pivotview.e-rtl .e-leftfreeze.e-freezeleftborder {
+  border-left-width: 1px;
+  border-right: 0;
+}
 .e-pivotview.e-rtl .e-rowsheader .e-cellvalue {
   margin-left: 0;
   margin-right: 7px;
@@ -2139,7 +2181,7 @@
 }
 
 .e-pivottooltip p {
-  color: #333;
+  color: #fff;
   display: inline-block;
   font-family: Helvetica;
   font-size: 14px;
@@ -2239,12 +2281,6 @@
 .e-bigger.e-pivotview .e-bigger .e-stackedheadercelldiv {
   padding-left: 16px !important;
 }
-.e-bigger .e-pivotview th .e-expand,
-.e-bigger .e-pivotview th .e-collapse,
-.e-bigger.e-pivotview th .e-expand,
-.e-bigger.e-pivotview th .e-collapse {
-  margin-top: 6px;
-}
 .e-bigger .e-pivotview .e-grouping-bar,
 .e-bigger.e-pivotview .e-grouping-bar {
   /* stylelint-enable */
@@ -3215,7 +3251,7 @@
   width: 100% !important;
 }
 .e-pivot-formatting-dialog.e-device .e-format-condition-button .e-add-icon {
-  margin-left: 0;
+  margin-left: 0 !important;
 }
 .e-pivot-formatting-dialog.e-device .e-format-value1,
 .e-pivot-formatting-dialog.e-device .e-format-value2,