@syncfusion/ej2-react-pivotview 22.1.38 → 22.2.5

package/CHANGELOG.md

@@ -6,6 +6,20 @@
 
 #### 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.
+
+#### New 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.
 
 ## 22.1.36 (2023-06-28)

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

@@ -1,6 +1,6 @@
 /*!
 *  filename: ej2-react-pivotview.min.js
-*  version : 22.1.38
+*  version : 22.2.5
 *  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.1.38
+*  version : 22.2.5
 *  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.1.36",
+  "_id": "@syncfusion/ej2-react-pivotview@22.1.39",
   "_inBundle": false,
-  "_integrity": "sha512-SVK9FJzfzNIpZMQ4VUvaXCbf+AJXDlCqdXEHLPdY/2LJ5/kxL2AK7VZzbGvVR6rFrBTtUJRXWrOxsY7a4Zih9w==",
+  "_integrity": "sha512-Ui9ekuF/euHQ/xuGdbZA+RkXGESk5VwMmh0ZikYRCJIcXp0OLynL4LMwMjVn/p5mtml/mT5cg+SKN4ypnHDZNg==",
   "_location": "/@syncfusion/ej2-react-pivotview",
   "_phantomChildren": {},
   "_requested": {
@@ -19,8 +19,8 @@
   "_requiredBy": [
     "/"
   ],
-  "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-react-pivotview/-/ej2-react-pivotview-22.1.36.tgz",
-  "_shasum": "5caad8a1df2b2bd2f1b40cd01a504dbe79ee1001",
+  "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-react-pivotview/-/ej2-react-pivotview-22.1.39.tgz",
+  "_shasum": "d0c469bc62b248e38db90125caa932c15166298e",
   "_spec": "@syncfusion/ej2-react-pivotview@*",
   "_where": "/jenkins/workspace/elease-automation_release_21.1.1/packages/included",
   "author": {
@@ -31,9 +31,9 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~22.1.38",
-    "@syncfusion/ej2-pivotview": "22.1.38",
-    "@syncfusion/ej2-react-base": "~22.1.34"
+    "@syncfusion/ej2-base": "~22.2.5",
+    "@syncfusion/ej2-pivotview": "22.2.5",
+    "@syncfusion/ej2-react-base": "~22.2.5"
   },
   "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.1.38",
+  "version": "22.2.5",
   "sideEffects": false
 }

package/styles/bootstrap-dark.css

@@ -568,6 +568,9 @@
 .e-pivotview .e-pivot-format-dialog .e-pivot-format-dialog-outer .e-pivot-format-decimal-drop {
   margin-bottom: 20px;
 }
+.e-pivotview.sf-pivotview .e-pivot-toolbar {
+  box-sizing: border-box;
+}
 .e-pivotview .e-pivot-toolbar {
   background: #131313;
   border-bottom: 0;
@@ -908,6 +911,25 @@
   /* stylelint-enable */
   /* stylelint-enable */
 }
+.e-pivotview .e-pivotcell-container {
+  display: -ms-flexbox;
+  display: flex;
+}
+.e-pivotview .e-pivotcell-container .e-stackedheadertext.e-cellvalue,
+.e-pivotview .e-pivotcell-container .e-headertext.e-cellvalue {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.e-pivotview .e-pivotcell-container .e-sortfilterdiv.e-value-sort-icon {
+  -ms-flex-align: center;
+      align-items: center;
+  display: -ms-flexbox;
+  display: flex;
+}
+.e-pivotview .e-gridclip .e-pivotcell-container .e-stackedheadertext.e-cellvalue,
+.e-pivotview .e-gridclip .e-pivotcell-container .e-headertext.e-cellvalue {
+  text-overflow: clip;
+}
 .e-pivotview .e-nextspan {
   display: inline-block;
   width: 24px;
@@ -1047,11 +1069,10 @@
 .e-pivotview .e-sortfilterdiv:not(.e-value-sort-icon) {
   display: none;
 }
-.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 {
+.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: -11px 0 !important;
+  margin-left: auto !important;
+  margin-top: 5px !important;
 }
 .e-pivotview .e-rowsheader .e-sortfilterdiv {
   margin: -20px 0 !important;

package/styles/bootstrap.css

@@ -567,6 +567,9 @@
 .e-pivotview .e-pivot-format-dialog .e-pivot-format-dialog-outer .e-pivot-format-decimal-drop {
   margin-bottom: 20px;
 }
+.e-pivotview.sf-pivotview .e-pivot-toolbar {
+  box-sizing: border-box;
+}
 .e-pivotview .e-pivot-toolbar {
   background: #f5f5f5;
   border-bottom: 0;
@@ -907,6 +910,25 @@
   /* stylelint-enable */
   /* stylelint-enable */
 }
+.e-pivotview .e-pivotcell-container {
+  display: -ms-flexbox;
+  display: flex;
+}
+.e-pivotview .e-pivotcell-container .e-stackedheadertext.e-cellvalue,
+.e-pivotview .e-pivotcell-container .e-headertext.e-cellvalue {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.e-pivotview .e-pivotcell-container .e-sortfilterdiv.e-value-sort-icon {
+  -ms-flex-align: center;
+      align-items: center;
+  display: -ms-flexbox;
+  display: flex;
+}
+.e-pivotview .e-gridclip .e-pivotcell-container .e-stackedheadertext.e-cellvalue,
+.e-pivotview .e-gridclip .e-pivotcell-container .e-headertext.e-cellvalue {
+  text-overflow: clip;
+}
 .e-pivotview .e-nextspan {
   display: inline-block;
   width: 18px;
@@ -1046,11 +1068,10 @@
 .e-pivotview .e-sortfilterdiv:not(.e-value-sort-icon) {
   display: none;
 }
-.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 {
+.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: -11px 0 !important;
+  margin-left: auto !important;
+  margin-top: 5px !important;
 }
 .e-pivotview .e-rowsheader .e-sortfilterdiv {
   margin: -20px 0 !important;

package/styles/bootstrap4.css

@@ -601,6 +601,9 @@
 .e-pivotview .e-pivot-format-dialog .e-pivot-format-dialog-outer .e-pivot-format-decimal-drop {
   margin-bottom: 20px;
 }
+.e-pivotview.sf-pivotview .e-pivot-toolbar {
+  box-sizing: border-box;
+}
 .e-pivotview .e-pivot-toolbar {
   background: #f2f4f6;
   border-bottom: 0;
@@ -965,6 +968,25 @@
   /* stylelint-enable */
   /* stylelint-enable */
 }
+.e-pivotview .e-pivotcell-container {
+  display: -ms-flexbox;
+  display: flex;
+}
+.e-pivotview .e-pivotcell-container .e-stackedheadertext.e-cellvalue,
+.e-pivotview .e-pivotcell-container .e-headertext.e-cellvalue {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.e-pivotview .e-pivotcell-container .e-sortfilterdiv.e-value-sort-icon {
+  -ms-flex-align: center;
+      align-items: center;
+  display: -ms-flexbox;
+  display: flex;
+}
+.e-pivotview .e-gridclip .e-pivotcell-container .e-stackedheadertext.e-cellvalue,
+.e-pivotview .e-gridclip .e-pivotcell-container .e-headertext.e-cellvalue {
+  text-overflow: clip;
+}
 .e-pivotview .e-nextspan {
   display: inline-block;
   width: 18px;
@@ -1105,11 +1127,10 @@
 .e-pivotview .e-sortfilterdiv:not(.e-value-sort-icon) {
   display: none;
 }
-.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 {
+.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: -11px 0 !important;
+  margin-left: auto !important;
+  margin-top: 5px !important;
 }
 .e-pivotview .e-rowsheader .e-sortfilterdiv {
   margin: -20px 0 !important;

package/styles/bootstrap5-dark.css

@@ -569,6 +569,9 @@
 .e-pivotview .e-pivot-format-dialog .e-pivot-format-dialog-outer .e-pivot-format-decimal-drop {
   margin-bottom: 20px;
 }
+.e-pivotview.sf-pivotview .e-pivot-toolbar {
+  box-sizing: border-box;
+}
 .e-pivotview .e-pivot-toolbar {
   background: #282d31;
   border-bottom: 0;
@@ -908,6 +911,25 @@
   /* stylelint-enable */
   /* stylelint-enable */
 }
+.e-pivotview .e-pivotcell-container {
+  display: -ms-flexbox;
+  display: flex;
+}
+.e-pivotview .e-pivotcell-container .e-stackedheadertext.e-cellvalue,
+.e-pivotview .e-pivotcell-container .e-headertext.e-cellvalue {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.e-pivotview .e-pivotcell-container .e-sortfilterdiv.e-value-sort-icon {
+  -ms-flex-align: center;
+      align-items: center;
+  display: -ms-flexbox;
+  display: flex;
+}
+.e-pivotview .e-gridclip .e-pivotcell-container .e-stackedheadertext.e-cellvalue,
+.e-pivotview .e-gridclip .e-pivotcell-container .e-headertext.e-cellvalue {
+  text-overflow: clip;
+}
 .e-pivotview .e-nextspan {
   display: inline-block;
   width: 18px;
@@ -1037,7 +1059,6 @@
   display: block;
 }
 .e-pivotview div.e-cellvalue {
-  margin-top: 5px;
   margin-top: 2px;
 }
 .e-pivotview .e-sortfilterdiv .e-value-sort-icon {
@@ -1050,11 +1071,10 @@
 .e-pivotview .e-sortfilterdiv:not(.e-value-sort-icon) {
   display: none;
 }
-.e-pivotview .e-stackedheadercelldiv .e-sortfilterdiv, .e-pivotview .e-headercelldiv .e-sortfilterdiv {
-  margin: -16px 0 !important;
-}
-.e-pivotview .e-stackedheadercelldiv .e-sortfilterdiv.e-value-sort-align, .e-pivotview .e-headercelldiv .e-sortfilterdiv.e-value-sort-align {
+.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: 6px 0 !important;
+  margin-left: auto !important;
+  margin-top: 2px !important;
 }
 .e-pivotview .e-rowsheader .e-sortfilterdiv {
   margin: -5px 0 !important;

package/styles/bootstrap5.css

@@ -571,6 +571,9 @@
 .e-pivotview .e-pivot-format-dialog .e-pivot-format-dialog-outer .e-pivot-format-decimal-drop {
   margin-bottom: 20px;
 }
+.e-pivotview.sf-pivotview .e-pivot-toolbar {
+  box-sizing: border-box;
+}
 .e-pivotview .e-pivot-toolbar {
   background: #f8f9fa;
   border-bottom: 0;
@@ -910,6 +913,25 @@
   /* stylelint-enable */
   /* stylelint-enable */
 }
+.e-pivotview .e-pivotcell-container {
+  display: -ms-flexbox;
+  display: flex;
+}
+.e-pivotview .e-pivotcell-container .e-stackedheadertext.e-cellvalue,
+.e-pivotview .e-pivotcell-container .e-headertext.e-cellvalue {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.e-pivotview .e-pivotcell-container .e-sortfilterdiv.e-value-sort-icon {
+  -ms-flex-align: center;
+      align-items: center;
+  display: -ms-flexbox;
+  display: flex;
+}
+.e-pivotview .e-gridclip .e-pivotcell-container .e-stackedheadertext.e-cellvalue,
+.e-pivotview .e-gridclip .e-pivotcell-container .e-headertext.e-cellvalue {
+  text-overflow: clip;
+}
 .e-pivotview .e-nextspan {
   display: inline-block;
   width: 18px;
@@ -1039,7 +1061,6 @@
   display: block;
 }
 .e-pivotview div.e-cellvalue {
-  margin-top: 5px;
   margin-top: 2px;
 }
 .e-pivotview .e-sortfilterdiv .e-value-sort-icon {
@@ -1052,11 +1073,10 @@
 .e-pivotview .e-sortfilterdiv:not(.e-value-sort-icon) {
   display: none;
 }
-.e-pivotview .e-stackedheadercelldiv .e-sortfilterdiv, .e-pivotview .e-headercelldiv .e-sortfilterdiv {
-  margin: -16px 0 !important;
-}
-.e-pivotview .e-stackedheadercelldiv .e-sortfilterdiv.e-value-sort-align, .e-pivotview .e-headercelldiv .e-sortfilterdiv.e-value-sort-align {
+.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: 6px 0 !important;
+  margin-left: auto !important;
+  margin-top: 2px !important;
 }
 .e-pivotview .e-rowsheader .e-sortfilterdiv {
   margin: -5px 0 !important;

package/styles/fabric-dark.css

@@ -567,6 +567,9 @@
 .e-pivotview .e-pivot-format-dialog .e-pivot-format-dialog-outer .e-pivot-format-decimal-drop {
   margin-bottom: 20px;
 }
+.e-pivotview.sf-pivotview .e-pivot-toolbar {
+  box-sizing: border-box;
+}
 .e-pivotview .e-pivot-toolbar {
   background: #282727;
   border-bottom: 0;
@@ -911,6 +914,25 @@
   /* stylelint-enable */
   /* stylelint-enable */
 }
+.e-pivotview .e-pivotcell-container {
+  display: -ms-flexbox;
+  display: flex;
+}
+.e-pivotview .e-pivotcell-container .e-stackedheadertext.e-cellvalue,
+.e-pivotview .e-pivotcell-container .e-headertext.e-cellvalue {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.e-pivotview .e-pivotcell-container .e-sortfilterdiv.e-value-sort-icon {
+  -ms-flex-align: center;
+      align-items: center;
+  display: -ms-flexbox;
+  display: flex;
+}
+.e-pivotview .e-gridclip .e-pivotcell-container .e-stackedheadertext.e-cellvalue,
+.e-pivotview .e-gridclip .e-pivotcell-container .e-headertext.e-cellvalue {
+  text-overflow: clip;
+}
 .e-pivotview .e-nextspan {
   display: inline-block;
   width: 18px;
@@ -1050,11 +1072,10 @@
 .e-pivotview .e-sortfilterdiv:not(.e-value-sort-icon) {
   display: none;
 }
-.e-pivotview .e-stackedheadercelldiv .e-sortfilterdiv, .e-pivotview .e-headercelldiv .e-sortfilterdiv {
-  margin: -15px 0 !important;
-}
-.e-pivotview .e-stackedheadercelldiv .e-sortfilterdiv.e-value-sort-align, .e-pivotview .e-headercelldiv .e-sortfilterdiv.e-value-sort-align {
+.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: 2px 0 !important;
+  margin-left: auto !important;
+  margin-top: 5px !important;
 }
 .e-pivotview .e-rowsheader .e-sortfilterdiv {
   margin: -5px 0 !important;

package/styles/fabric.css

@@ -567,6 +567,9 @@
 .e-pivotview .e-pivot-format-dialog .e-pivot-format-dialog-outer .e-pivot-format-decimal-drop {
   margin-bottom: 20px;
 }
+.e-pivotview.sf-pivotview .e-pivot-toolbar {
+  box-sizing: border-box;
+}
 .e-pivotview .e-pivot-toolbar {
   background: #f4f4f4;
   border-bottom: 0;
@@ -911,6 +914,25 @@
   /* stylelint-enable */
   /* stylelint-enable */
 }
+.e-pivotview .e-pivotcell-container {
+  display: -ms-flexbox;
+  display: flex;
+}
+.e-pivotview .e-pivotcell-container .e-stackedheadertext.e-cellvalue,
+.e-pivotview .e-pivotcell-container .e-headertext.e-cellvalue {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.e-pivotview .e-pivotcell-container .e-sortfilterdiv.e-value-sort-icon {
+  -ms-flex-align: center;
+      align-items: center;
+  display: -ms-flexbox;
+  display: flex;
+}
+.e-pivotview .e-gridclip .e-pivotcell-container .e-stackedheadertext.e-cellvalue,
+.e-pivotview .e-gridclip .e-pivotcell-container .e-headertext.e-cellvalue {
+  text-overflow: clip;
+}
 .e-pivotview .e-nextspan {
   display: inline-block;
   width: 18px;
@@ -1050,11 +1072,10 @@
 .e-pivotview .e-sortfilterdiv:not(.e-value-sort-icon) {
   display: none;
 }
-.e-pivotview .e-stackedheadercelldiv .e-sortfilterdiv, .e-pivotview .e-headercelldiv .e-sortfilterdiv {
-  margin: -15px 0 !important;
-}
-.e-pivotview .e-stackedheadercelldiv .e-sortfilterdiv.e-value-sort-align, .e-pivotview .e-headercelldiv .e-sortfilterdiv.e-value-sort-align {
+.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: 2px 0 !important;
+  margin-left: auto !important;
+  margin-top: 5px !important;
 }
 .e-pivotview .e-rowsheader .e-sortfilterdiv {
   margin: -5px 0 !important;

package/styles/fluent-dark.css

@@ -568,6 +568,9 @@
 .e-pivotview .e-pivot-format-dialog .e-pivot-format-dialog-outer .e-pivot-format-decimal-drop {
   margin-bottom: 20px;
 }
+.e-pivotview.sf-pivotview .e-pivot-toolbar {
+  box-sizing: border-box;
+}
 .e-pivotview .e-pivot-toolbar {
   background: #201f1e;
   border-bottom: 0;
@@ -924,6 +927,25 @@
   /* stylelint-enable */
   /* stylelint-enable */
 }
+.e-pivotview .e-pivotcell-container {
+  display: -ms-flexbox;
+  display: flex;
+}
+.e-pivotview .e-pivotcell-container .e-stackedheadertext.e-cellvalue,
+.e-pivotview .e-pivotcell-container .e-headertext.e-cellvalue {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.e-pivotview .e-pivotcell-container .e-sortfilterdiv.e-value-sort-icon {
+  -ms-flex-align: center;
+      align-items: center;
+  display: -ms-flexbox;
+  display: flex;
+}
+.e-pivotview .e-gridclip .e-pivotcell-container .e-stackedheadertext.e-cellvalue,
+.e-pivotview .e-gridclip .e-pivotcell-container .e-headertext.e-cellvalue {
+  text-overflow: clip;
+}
 .e-pivotview .e-nextspan {
   display: inline-block;
   width: 18px;
@@ -1052,7 +1074,6 @@
   display: block;
 }
 .e-pivotview div.e-cellvalue {
-  margin-top: 5px;
   margin-top: 1px;
 }
 .e-pivotview .e-sortfilterdiv .e-value-sort-icon {
@@ -1065,11 +1086,10 @@
 .e-pivotview .e-sortfilterdiv:not(.e-value-sort-icon) {
   display: none;
 }
-.e-pivotview .e-stackedheadercelldiv .e-sortfilterdiv, .e-pivotview .e-headercelldiv .e-sortfilterdiv {
-  margin: -33px 0 !important;
-}
-.e-pivotview .e-stackedheadercelldiv .e-sortfilterdiv.e-value-sort-align, .e-pivotview .e-headercelldiv .e-sortfilterdiv.e-value-sort-align {
+.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: -11px 0 !important;
+  margin-left: auto !important;
+  margin-top: 1px !important;
 }
 .e-pivotview .e-rowsheader .e-sortfilterdiv {
   margin: -20px 0 !important;

package/styles/fluent.css

@@ -570,6 +570,9 @@
 .e-pivotview .e-pivot-format-dialog .e-pivot-format-dialog-outer .e-pivot-format-decimal-drop {
   margin-bottom: 20px;
 }
+.e-pivotview.sf-pivotview .e-pivot-toolbar {
+  box-sizing: border-box;
+}
 .e-pivotview .e-pivot-toolbar {
   background: #faf9f8;
   border-bottom: 0;
@@ -926,6 +929,25 @@
   /* stylelint-enable */
   /* stylelint-enable */
 }
+.e-pivotview .e-pivotcell-container {
+  display: -ms-flexbox;
+  display: flex;
+}
+.e-pivotview .e-pivotcell-container .e-stackedheadertext.e-cellvalue,
+.e-pivotview .e-pivotcell-container .e-headertext.e-cellvalue {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.e-pivotview .e-pivotcell-container .e-sortfilterdiv.e-value-sort-icon {
+  -ms-flex-align: center;
+      align-items: center;
+  display: -ms-flexbox;
+  display: flex;
+}
+.e-pivotview .e-gridclip .e-pivotcell-container .e-stackedheadertext.e-cellvalue,
+.e-pivotview .e-gridclip .e-pivotcell-container .e-headertext.e-cellvalue {
+  text-overflow: clip;
+}
 .e-pivotview .e-nextspan {
   display: inline-block;
   width: 18px;
@@ -1054,7 +1076,6 @@
   display: block;
 }
 .e-pivotview div.e-cellvalue {
-  margin-top: 5px;
   margin-top: 1px;
 }
 .e-pivotview .e-sortfilterdiv .e-value-sort-icon {
@@ -1067,11 +1088,10 @@
 .e-pivotview .e-sortfilterdiv:not(.e-value-sort-icon) {
   display: none;
 }
-.e-pivotview .e-stackedheadercelldiv .e-sortfilterdiv, .e-pivotview .e-headercelldiv .e-sortfilterdiv {
-  margin: -33px 0 !important;
-}
-.e-pivotview .e-stackedheadercelldiv .e-sortfilterdiv.e-value-sort-align, .e-pivotview .e-headercelldiv .e-sortfilterdiv.e-value-sort-align {
+.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: -11px 0 !important;
+  margin-left: auto !important;
+  margin-top: 1px !important;
 }
 .e-pivotview .e-rowsheader .e-sortfilterdiv {
   margin: -20px 0 !important;

package/styles/highcontrast-light.css

@@ -566,6 +566,9 @@
 .e-pivotview .e-pivot-format-dialog .e-pivot-format-dialog-outer .e-pivot-format-decimal-drop {
   margin-bottom: 20px;
 }
+.e-pivotview.sf-pivotview .e-pivot-toolbar {
+  box-sizing: border-box;
+}
 .e-pivotview .e-pivot-toolbar {
   background: #d8d8d8;
   border-bottom: 0;
@@ -910,6 +913,25 @@
   /* stylelint-enable */
   /* stylelint-enable */
 }
+.e-pivotview .e-pivotcell-container {
+  display: -ms-flexbox;
+  display: flex;
+}
+.e-pivotview .e-pivotcell-container .e-stackedheadertext.e-cellvalue,
+.e-pivotview .e-pivotcell-container .e-headertext.e-cellvalue {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.e-pivotview .e-pivotcell-container .e-sortfilterdiv.e-value-sort-icon {
+  -ms-flex-align: center;
+      align-items: center;
+  display: -ms-flexbox;
+  display: flex;
+}
+.e-pivotview .e-gridclip .e-pivotcell-container .e-stackedheadertext.e-cellvalue,
+.e-pivotview .e-gridclip .e-pivotcell-container .e-headertext.e-cellvalue {
+  text-overflow: clip;
+}
 .e-pivotview .e-nextspan {
   display: inline-block;
   width: 24px;
@@ -1039,7 +1061,6 @@
   display: block;
 }
 .e-pivotview div.e-cellvalue {
-  margin-top: 5px;
   margin-top: 0;
 }
 .e-pivotview .e-sortfilterdiv .e-value-sort-icon {
@@ -1051,11 +1072,10 @@
 .e-pivotview .e-sortfilterdiv:not(.e-value-sort-icon) {
   display: none;
 }
-.e-pivotview .e-stackedheadercelldiv .e-sortfilterdiv, .e-pivotview .e-headercelldiv .e-sortfilterdiv {
-  margin: -15px 0 !important;
-}
-.e-pivotview .e-stackedheadercelldiv .e-sortfilterdiv.e-value-sort-align, .e-pivotview .e-headercelldiv .e-sortfilterdiv.e-value-sort-align {
+.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: 0 !important;
 }
 .e-pivotview .e-rowsheader .e-sortfilterdiv {
   margin: -6px 0 !important;

package/styles/highcontrast.css

@@ -566,6 +566,9 @@
 .e-pivotview .e-pivot-format-dialog .e-pivot-format-dialog-outer .e-pivot-format-decimal-drop {
   margin-bottom: 20px;
 }
+.e-pivotview.sf-pivotview .e-pivot-toolbar {
+  box-sizing: border-box;
+}
 .e-pivotview .e-pivot-toolbar {
   background: #262626;
   border-bottom: 0;
@@ -910,6 +913,25 @@
   /* stylelint-enable */
   /* stylelint-enable */
 }
+.e-pivotview .e-pivotcell-container {
+  display: -ms-flexbox;
+  display: flex;
+}
+.e-pivotview .e-pivotcell-container .e-stackedheadertext.e-cellvalue,
+.e-pivotview .e-pivotcell-container .e-headertext.e-cellvalue {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.e-pivotview .e-pivotcell-container .e-sortfilterdiv.e-value-sort-icon {
+  -ms-flex-align: center;
+      align-items: center;
+  display: -ms-flexbox;
+  display: flex;
+}
+.e-pivotview .e-gridclip .e-pivotcell-container .e-stackedheadertext.e-cellvalue,
+.e-pivotview .e-gridclip .e-pivotcell-container .e-headertext.e-cellvalue {
+  text-overflow: clip;
+}
 .e-pivotview .e-nextspan {
   display: inline-block;
   width: 18px;
@@ -1039,7 +1061,6 @@
   display: block;
 }
 .e-pivotview div.e-cellvalue {
-  margin-top: 5px;
   margin-top: 0;
 }
 .e-pivotview .e-sortfilterdiv .e-value-sort-icon {
@@ -1051,11 +1072,10 @@
 .e-pivotview .e-sortfilterdiv:not(.e-value-sort-icon) {
   display: none;
 }
-.e-pivotview .e-stackedheadercelldiv .e-sortfilterdiv, .e-pivotview .e-headercelldiv .e-sortfilterdiv {
-  margin: -15px 0 !important;
-}
-.e-pivotview .e-stackedheadercelldiv .e-sortfilterdiv.e-value-sort-align, .e-pivotview .e-headercelldiv .e-sortfilterdiv.e-value-sort-align {
+.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: 0 !important;
 }
 .e-pivotview .e-rowsheader .e-sortfilterdiv {
   margin: -6px 0 !important;