@syncfusion/ej2-angular-pivotview 22.1.39 → 22.2.5

package/styles/material-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: #212121;
   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: -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: 5px !important;
 }
 .e-pivotview .e-rowsheader .e-sortfilterdiv {
   margin: -8px 0 !important;

package/styles/material.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: #f5f5f5;
   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;
@@ -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: -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: 5px !important;
 }
 .e-pivotview .e-rowsheader .e-sortfilterdiv {
   margin: -8px 0 !important;

package/styles/material3-dark.css

@@ -638,6 +638,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: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.05), rgba(var(--color-sf-primary), 0.05)), rgba(var(--color-sf-surface));
   border-bottom: 0;
@@ -979,6 +982,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;
@@ -1108,7 +1130,6 @@
   display: block;
 }
 .e-pivotview div.e-cellvalue {
-  margin-top: 5px;
   margin-top: 0;
 }
 .e-pivotview div div span.e-value-sort-icon {
@@ -1124,11 +1145,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: -8px 0 !important;

package/styles/material3.css

@@ -696,6 +696,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: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.05), rgba(var(--color-sf-primary), 0.05)), rgba(var(--color-sf-surface));
   border-bottom: 0;
@@ -1037,6 +1040,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;
@@ -1166,7 +1188,6 @@
   display: block;
 }
 .e-pivotview div.e-cellvalue {
-  margin-top: 5px;
   margin-top: 0;
 }
 .e-pivotview div div span.e-value-sort-icon {
@@ -1182,11 +1203,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: -8px 0 !important;

package/styles/pivotview/_bootstrap-dark-definition.scss

@@ -117,6 +117,7 @@ $pivotgrid-rowsheader-cellvalue-margin-left: 8px !default;
 $pivotgrid-rowsheader-cellvalue-margin-top: 5px !default;
 $pivotgrid-excelfilter-member-editor-node-limit-height: 100px !default;
 $pivotgrid-member-editor-node-limit-bigger-height: 450px !default;
+$pivotgrid-cell-value-margin-top: 5px !default;
 
 //enddefault
 

package/styles/pivotview/_bootstrap-definition.scss

@@ -116,6 +116,7 @@ $pivotgrid-rowsheader-cellvalue-margin-left: 8px !default;
 $pivotgrid-rowsheader-cellvalue-margin-top: 5px !default;
 $pivotgrid-excelfilter-member-editor-node-limit-height: 100px !default;
 $pivotgrid-member-editor-node-limit-bigger-height: 450px !default;
+$pivotgrid-cell-value-margin-top: 5px !default;
 
 /*! component's common definitions and variables */
 $pivotgrid-grouping-height: 28px !default;

package/styles/pivotview/_bootstrap4-definition.scss

@@ -116,6 +116,7 @@ $pivotgrid-rowsheader-cellvalue-margin-left: 8px !default;
 $pivotgrid-rowsheader-cellvalue-margin-top: 5px !default;
 $pivotgrid-excelfilter-member-editor-node-limit-height: 115px !default;
 $pivotgrid-member-editor-node-limit-bigger-height: 450px !default;
+$pivotgrid-cell-value-margin-top: 5px !default;
 
 /*! component's common definitions and variables */
 $pivotgrid-grouping-height: 30px !default;

package/styles/pivotview/_bootstrap5-definition.scss

@@ -68,6 +68,7 @@ $pivotgrid-rowsheader-cellvalue-margin-left: 8px !default;
 $pivotgrid-rowsheader-cellvalue-margin-top: 5px !default;
 $pivotgrid-excelfilter-member-editor-node-limit-height: 115px !default;
 $pivotgrid-member-editor-node-limit-bigger-height: 440px !default;
+$pivotgrid-cell-value-margin-top: 2px !default;
 
 // $pivotview-filter-toolbar-indicator-margin-left: 20px !default;
 $pivotview-filter-toolbar-items-margin-left: 20px !default;

package/styles/pivotview/_fabric-dark-definition.scss

@@ -116,6 +116,7 @@ $pivotgrid-rowsheader-cellvalue-margin-left: 8px !default;
 $pivotgrid-rowsheader-cellvalue-margin-top: 5px !default;
 $pivotgrid-excelfilter-member-editor-node-limit-height: 75px !default;
 $pivotgrid-member-editor-node-limit-bigger-height: 450px !default;
+$pivotgrid-cell-value-margin-top: 5px !default;
 
 //enddefault
 

package/styles/pivotview/_fabric-definition.scss

@@ -115,6 +115,7 @@ $pivotgrid-rowsheader-cellvalue-margin-left: 8px !default;
 $pivotgrid-rowsheader-cellvalue-margin-top: 5px !default;
 $pivotgrid-excelfilter-member-editor-node-limit-height: 75px !default;
 $pivotgrid-member-editor-node-limit-bigger-height: 450px !default;
+$pivotgrid-cell-value-margin-top: 5px !default;
 
 /*! component's common definitions and variables */
 $pivotgrid-grouping-height: 30px !default;

package/styles/pivotview/_fluent-definition.scss

@@ -68,6 +68,7 @@ $pivotgrid-rowsheader-cellvalue-margin-left: 8px !default;
 $pivotgrid-rowsheader-cellvalue-margin-top: 5px !default;
 $pivotgrid-excelfilter-member-editor-node-limit-height: 65px !default;
 $pivotgrid-member-editor-node-limit-bigger-height: 450px !default;
+$pivotgrid-cell-value-margin-top: 1px !default;
 
 // $pivotview-filter-toolbar-indicator-margin-left: 20px !default;
 $pivotview-filter-toolbar-items-margin-left: 20px !default;

package/styles/pivotview/_fusionnew-definition.scss

@@ -68,6 +68,7 @@ $pivotgrid-rowsheader-cellvalue-margin-left: 8px !default;
 $pivotgrid-rowsheader-cellvalue-margin-top: 5px !default;
 $pivotgrid-excelfilter-member-editor-node-limit-height: 70px !default;
 $pivotgrid-member-editor-node-limit-bigger-height: 440px !default;
+$pivotgrid-cell-value-margin-top: 5px !default;
 
 // $pivotview-filter-toolbar-indicator-margin-left: 20px !default;
 $pivotview-filter-toolbar-items-margin-left: 20px !default;

package/styles/pivotview/_highcontrast-definition.scss

@@ -114,6 +114,7 @@ $pivotgrid-rowsheader-cellvalue-margin-left: 8px !default;
 $pivotgrid-rowsheader-cellvalue-margin-top: 0 !default;
 $pivotgrid-excelfilter-member-editor-node-limit-height: 75px !default;
 $pivotgrid-member-editor-node-limit-bigger-height: 450px !default;
+$pivotgrid-cell-value-margin-top: 0 !default;
 
 /*! component's common definitions and variables */
 $pivotgrid-grouping-height: 30px !default;

package/styles/pivotview/_highcontrast-light-definition.scss

@@ -115,6 +115,7 @@ $pivotgrid-rowsheader-cellvalue-margin-left: 8px !default;
 $pivotgrid-rowsheader-cellvalue-margin-top: 0 !default;
 $pivotgrid-excelfilter-member-editor-node-limit-height: 75px !default;
 $pivotgrid-member-editor-node-limit-bigger-height: 450px !default;
+$pivotgrid-cell-value-margin-top: 0 !default;
 
 /*! component's common definitions and variables */
 $pivotgrid-grouping-height: 36px !default;

package/styles/pivotview/_layout.scss

@@ -647,6 +647,12 @@
       }
     }
 
+    &.sf-pivotview {
+      .e-pivot-toolbar {
+        box-sizing: border-box;
+      }
+    }
+
     .e-pivot-toolbar {
       background: $pivotgrid-grp-bg-color;
       border-bottom: 0;

package/styles/pivotview/_material-dark-definition.scss

@@ -108,6 +108,7 @@ $pivotgrid-rowsheader-cellvalue-margin-left: 8px !default;
 $pivotgrid-rowsheader-cellvalue-margin-top: 5px !default;
 $pivotgrid-excelfilter-member-editor-node-limit-height: 85px !default;
 $pivotgrid-member-editor-node-limit-bigger-height: 415px !default;
+$pivotgrid-cell-value-margin-top: 5px !default;
 
 // $pivotview-filter-toolbar-indicator-margin-left: 20px !default;
 $pivotview-filter-toolbar-items-margin-left: 20px !default;

package/styles/pivotview/_material-definition.scss

@@ -106,6 +106,7 @@ $pivotgrid-rowsheader-cellvalue-margin-left: 8px !default;
 $pivotgrid-rowsheader-cellvalue-margin-top: 5px !default;
 $pivotgrid-excelfilter-member-editor-node-limit-height: 90px !default;
 $pivotgrid-member-editor-node-limit-bigger-height: 415px !default;
+$pivotgrid-cell-value-margin-top: 5px !default;
 
 // $pivotview-filter-toolbar-indicator-margin-left: 20px !default;
 $pivotview-filter-toolbar-items-margin-left: 20px !default;

package/styles/pivotview/_material3-definition.scss

@@ -69,6 +69,7 @@ $pivotgrid-rowsheader-cellvalue-margin-top: 5px !default;
 $pivotgrid-excelfilter-member-editor-node-limit-height: 100px !default;
 $pivotgrid-member-editor-node-limit-bigger-height: 455px !default;
 $pivotgrid-member-sort-border-radius: $text-xl !default;
+$pivotgrid-cell-value-margin-top: 0 !default;
 
 // $pivotview-filter-toolbar-indicator-margin-left: 20px !default;
 $pivotview-filter-toolbar-items-margin-left: 20px !default;

package/styles/pivotview/_tailwind-definition.scss

@@ -68,6 +68,7 @@ $pivotgrid-rowsheader-cellvalue-margin-left: 8px !default;
 $pivotgrid-rowsheader-cellvalue-margin-top: 4px !default;
 $pivotgrid-excelfilter-member-editor-node-limit-height: 120px !default;
 $pivotgrid-member-editor-node-limit-bigger-height: 450px !default;
+$pivotgrid-cell-value-margin-top: 2px !default;
 
 // $pivotview-filter-toolbar-indicator-margin-left: 20px !default;
 $pivotview-filter-toolbar-items-margin-left: 20px !default;

package/styles/pivotview/_theme.scss

@@ -2,6 +2,32 @@
 
   /*! PivotView theme */
   .e-pivotview {
+    .e-pivotcell-container {
+      display: flex;
+
+      .e-stackedheadertext,
+      .e-headertext {
+        &.e-cellvalue {
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+      }
+
+      .e-sortfilterdiv.e-value-sort-icon {
+        align-items: center;
+        display: flex;
+      }
+    }
+
+    .e-gridclip .e-pivotcell-container {
+      .e-stackedheadertext,
+      .e-headertext {
+        &.e-cellvalue {
+          text-overflow: clip;
+        }
+      }
+    }
+
     .e-nextspan {
       display: inline-block;
       width: $pivotview-indent-space-size;
@@ -150,19 +176,7 @@
 
     div {
       &.e-cellvalue {
-        margin-top: 5px;
-  
-        @if ($pivotgrid-skin == 'highcontrast-light') or ($pivotgrid-skin == 'highcontrast') or ($skin-name == 'Material3') {
-          margin-top: 0;
-        }
-  
-        @if ($skin-name == 'tailwind') or ($skin-name == 'bootstrap5') {
-          margin-top: 2px;
-        }
-  
-        @if ($skin-name == 'FluentUI') {
-          margin-top: 1px;
-        }
+        margin-top: $pivotgrid-cell-value-margin-top;
       }
 
       div span.e-value-sort-icon {
@@ -196,12 +210,12 @@
       }
     }
 
-    .e-stackedheadercelldiv .e-sortfilterdiv, .e-headercelldiv .e-sortfilterdiv {
-      margin: $pivotgrid-vsort-column-margin !important;
-    }
-
-    .e-stackedheadercelldiv .e-sortfilterdiv.e-value-sort-align, .e-headercelldiv .e-sortfilterdiv.e-value-sort-align {
-      margin: $pivotgrid-vsort-column-parent-margin !important;
+    .e-stackedheadercelldiv, .e-headercelldiv {
+      .e-sortfilterdiv, .e-sortfilterdiv.e-value-sort-align {
+        margin: $pivotgrid-vsort-column-parent-margin !important;
+        margin-left: auto !important;
+        margin-top: $pivotgrid-cell-value-margin-top !important;
+      }
     }
 
     .e-rowsheader .e-sortfilterdiv {

package/styles/pivotview/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/pivotview/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/pivotview/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/pivotview/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;