@syncfusion/ej2-angular-grids 21.2.5 → 21.2.6

package/styles/grid/_tailwind-definition.scss

@@ -115,7 +115,6 @@ $grid-bigger-group-text-line-height: 22px !default;
 $grid-bigger-groupcaption-line-height: 32px !default;
 $grid-bigger-rtl-group-headercell-margin: 5px 0 0 6px !default;
 $grid-bigger-rtl-group-headercell-padding: 6px 8px 6px 8px !default;
-$grid-bigger-rtl-ungroup-icon-margin-top: 0 !default;
 $grid-bigger-rtl-ungroup-icon-margin-right: 0 !default;
 $grid-bigger-textwrap-srotnumber-rightalign-margin: 3px 2px 0 5px !default;
 $grid-bigger-textwrap-sorticon-rightalign-margin: -9px 5px !default;
@@ -283,7 +282,7 @@ $grid-rowcell-both-border-width: 1px 0 0 1px !default;
 $grid-indentcell-border-width: 0 1px 0 0 !default;
 $grid-group-right-arrow-icon-font-size: $text-sm !default;
 $grid-group-right-arrow-icon-padding: 10px 8px 12px 8px !default;
-$grid-group-unpgroupicon-margin-top: 1px !default;
+$grid-group-unpgroupicon-padding-top: 4px !default;
 $grid-summary-cell-line-height: 18px !default;
 $grid-batch-updated-bg-color: $success-light !default;
 $grid-val-error-color: $danger !default;
@@ -293,7 +292,7 @@ $grid-edit-input-padding-top: 2px !default;
 $grid-edit-input-margin: 2px !default;
 $grid-edit-cell-padding: 2px !default;
 $grid-group-height: 39px !default;
-$grid-ungroup-rtl-padding-top: 1px !default;
+$grid-ungroup-rtl-padding-top: 4px !default;
 $grid-rtl-group-headercell-margin-right: 0 !default;
 $grid-rtl-group-headercell-margin-left: 4px !default;
 $grid-fltr-rtl-sortnumber-margin: 0 4px 0 32px !default;
@@ -336,10 +335,12 @@ $grid-bigger-headercell-font-size: $text-xs !default;
 $grid-bigger-content-font-size: $text-base !default;
 $grid-filterbar-border-radius: 4px !default;
 $grid-bigger-sorticon-margin-top: 0 !default;
+$grid-device-group-sorticon-margin-top: 0 !default;
 $grid-header-border-width: 0 !default;
 $grid-bigger-groupedcell-padding: 0 5px 5px !default;
 $grid-bigger-group-headercell-margin: 5px 6px 0 0 !default;
 $grid-bigger-group-headercell-padding: 6px 0 !default;
+$grid-device-group-headercell-padding: 0 !default;
 $grid-bigger-grouptext-marign: 8px !default;
 $grid-bigger-headercell-padding: 12px !default;
 $grid-bigger-icons-font-size: $text-base !default;
@@ -349,8 +350,10 @@ $grid-bigger-grouped-headercell-border-radius: 0 !default;
 $grid-bigger-groupedcell-icons-marign-left: -8px !default;
 $grid-bigger-ungroupbutton-icons-font-size: $text-base !default;
 $grid-bigger-groupcell-span-padding: 0 0 0 8px !default;
+$grid-device-grouped-headercell-span-padding: 0 8px !default;
 $grid-bigger-ungroupbutton-icon-margin-left: 0 !default;
 $grid-bigger-ungroupbutton-icon-margin-top: 0 !default;
+$grid-device-ungroupbutton-icon-margin-top: 0 !default;
 $grid-bigger-groupcell-span-line-height: 24px !default;
 $grid-bigger-gdownarrow-icon-font-size: $text-base !default;
 $grid-gd-clone-border-radius: 4px !default;
@@ -482,6 +485,7 @@ $grid-bigger-clone-padding: 3px 0 0 8px !default;
 $grid-bigger-draganddrop-clone-padding: 3px 0 0 8px !default;
 $grouped-bigger-text-font-size: $text-base !default;
 $grid-bigger-ungroupbutton-icon-margin-right: 0 !default;
+$grid-bigger-ungroupbutton-icon-padding-top: 0 !default;
 $grid-bigger-font-size: $text-base !default;
 $grid-rtl-bigger-rightalign-fltrdiv-margin: -15px 6px -15px -3px !default;
 $grid-bigger-rtl-ungroup-icon-margin-left: -8px !default;
@@ -596,6 +600,7 @@ $grid-adaptive-sort-clear-button-padding: 5px !default;
 $grid-cc-margin-top: 1px !default;
 $grid-bigger-rtl-cm-margin: -13px 6px -13px -16px !default;
 $grid-bigger-rtl-group-span-padding: $grid-bigger-groupcell-span-padding !default;
+$grid-device-rtl-grouped-headercell-span-padding: $grid-device-grouped-headercell-span-padding !default;
 $grid-rtl-group-span-padding: $grid-grouped-headercell-span-padding !default;
 $grid-ungroup-rtl-padding-left: 8px !default;
 $grid-column-reorder-icon-color: $primary !default;

package/styles/grid/bootstrap-dark.css

@@ -740,6 +740,10 @@
   padding: 9px 0;
   font-size: 16px;
 }
+.e-bigger .e-grid.e-device .e-groupheadercell,
+.e-grid.e-bigger.e-device .e-groupheadercell {
+  padding: 9px 0;
+}
 .e-bigger .e-grid .e-groupheadercell:hover,
 .e-grid.e-bigger .e-groupheadercell:hover {
   padding: 9px 0;
@@ -798,6 +802,7 @@
 .e-bigger .e-grid.e-device .e-groupheadercell span,
 .e-grid.e-bigger.e-device .e-groupheadercell span {
   line-height: 33px;
+  padding: 0 8px;
 }
 .e-bigger .e-grid.e-device .e-rowcell, .e-bigger .e-grid.e-device .e-summarycell,
 .e-grid.e-bigger.e-device .e-rowcell,
@@ -874,12 +879,21 @@
   margin-left: -7px;
   margin-top: -3px;
   margin-right: 0;
+  padding-top: 0;
+}
+.e-bigger .e-grid.e-device span.e-ungroupbutton.e-icons,
+.e-grid.e-bigger.e-device span.e-ungroupbutton.e-icons {
+  margin-top: -3px;
 }
 .e-bigger .e-grid span.e-groupsort.e-icons,
 .e-grid.e-bigger span.e-groupsort.e-icons {
   margin-right: 0;
   margin-top: -4px;
 }
+.e-bigger .e-grid.e-device span.e-groupsort.e-icons,
+.e-grid.e-bigger.e-device span.e-groupsort.e-icons {
+  margin-top: -1px;
+}
 .e-bigger .e-grid.e-rtl .e-groupheadercell, .e-bigger .e-grid.e-rtl .e-groupheadercell:hover,
 .e-grid.e-bigger.e-rtl .e-groupheadercell,
 .e-grid.e-bigger.e-rtl .e-groupheadercell:hover {
@@ -891,7 +905,6 @@
   margin-left: 0;
   margin-right: -10px;
   margin-top: -4px;
-  padding-top: 0;
   padding-left: 8px;
 }
 .e-bigger .e-grid .e-groupcaption,
@@ -1402,6 +1415,7 @@
   border-collapse: separate;
   table-layout: fixed;
   width: 100%;
+  border-spacing: 0.25px;
 }
 .e-grid .e-tableborder {
   border-right: 1px solid;
@@ -1843,6 +1857,8 @@
   border-top-style: solid;
   border-top-width: 1px;
   padding: 0.3em;
+  font-weight: normal;
+  text-align: left;
 }
 .e-grid th.e-detailcell .e-rowcell,
 .e-grid th.e-detailcell .e-gridpager {
@@ -2256,7 +2272,8 @@
 }
 .e-grid span.e-ungroupbutton.e-icons {
   margin-left: -8px;
-  margin-top: 2px;
+  margin-top: -3px;
+  padding-top: 4px;
   padding-right: 8px;
 }
 .e-grid .e-grptogglebtn {
@@ -2832,6 +2849,7 @@
 .e-grid.e-rtl.e-default .e-detailcell, .e-grid.e-rtl.e-default.e-bothlines .e-detailcell {
   border-right-style: solid;
   border-right-width: 1px;
+  text-align: right;
 }
 .e-grid.e-rtl .e-cc-searchdiv span.e-ccsearch-icon.e-icons {
   float: left;
@@ -2843,7 +2861,7 @@
 .e-grid.e-rtl span.e-ungroupbutton.e-icons {
   margin-left: 0;
   margin-right: -10px;
-  padding-top: 0;
+  padding-top: 4px;
 }
 .e-grid.e-rtl.e-default.e-bothlines .e-headercell, .e-grid.e-rtl.e-default.e-bothlines .e-detailheadercell {
   border-width: 0 0 0 1px;
@@ -3174,6 +3192,10 @@
 .e-bigger.e-grid.e-rtl .e-groupheadercell span {
   padding: 0 8px;
 }
+.e-bigger .e-grid.e-device.e-rtl .e-groupheadercell span,
+.e-bigger.e-grid.e-device.e-rtl .e-groupheadercell span {
+  padding: 0 8px;
+}
 
 .e-grid-min-height .e-rowcell,
 .e-grid-min-height .e-icon-grightarrow,
@@ -3323,8 +3345,17 @@
   position: absolute;
   top: 6px;
   white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
   width: 45%;
 }
+.e-bigger .e-grid.e-row-responsive .e-gridcontent .e-verticalwrap td::before, .e-bigger .e-grid.e-row-responsive .e-summarycontent .e-verticalwrap td::before,
+.e-bigger.e-grid.e-row-responsive .e-gridcontent .e-verticalwrap td::before,
+.e-bigger.e-grid.e-row-responsive .e-summarycontent .e-verticalwrap td::before {
+  line-height: 18px;
+  white-space: normal;
+  word-wrap: break-word;
+}
 .e-bigger .e-grid.e-row-responsive .e-gridcontent td[data-cell], .e-bigger .e-grid.e-row-responsive .e-summarycontent td[data-cell],
 .e-bigger.e-grid.e-row-responsive .e-gridcontent td[data-cell],
 .e-bigger.e-grid.e-row-responsive .e-summarycontent td[data-cell] {

package/styles/grid/bootstrap.css

@@ -741,6 +741,10 @@
   padding: 9px 0;
   font-size: 16px;
 }
+.e-bigger .e-grid.e-device .e-groupheadercell,
+.e-grid.e-bigger.e-device .e-groupheadercell {
+  padding: 9px 0;
+}
 .e-bigger .e-grid .e-groupheadercell:hover,
 .e-grid.e-bigger .e-groupheadercell:hover {
   padding: 9px 0;
@@ -799,6 +803,7 @@
 .e-bigger .e-grid.e-device .e-groupheadercell span,
 .e-grid.e-bigger.e-device .e-groupheadercell span {
   line-height: 33px;
+  padding: 0 8px;
 }
 .e-bigger .e-grid.e-device .e-rowcell, .e-bigger .e-grid.e-device .e-summarycell,
 .e-grid.e-bigger.e-device .e-rowcell,
@@ -875,12 +880,21 @@
   margin-left: -7px;
   margin-top: -3px;
   margin-right: 0;
+  padding-top: 0;
+}
+.e-bigger .e-grid.e-device span.e-ungroupbutton.e-icons,
+.e-grid.e-bigger.e-device span.e-ungroupbutton.e-icons {
+  margin-top: -3px;
 }
 .e-bigger .e-grid span.e-groupsort.e-icons,
 .e-grid.e-bigger span.e-groupsort.e-icons {
   margin-right: 0;
   margin-top: -4px;
 }
+.e-bigger .e-grid.e-device span.e-groupsort.e-icons,
+.e-grid.e-bigger.e-device span.e-groupsort.e-icons {
+  margin-top: -1px;
+}
 .e-bigger .e-grid.e-rtl .e-groupheadercell, .e-bigger .e-grid.e-rtl .e-groupheadercell:hover,
 .e-grid.e-bigger.e-rtl .e-groupheadercell,
 .e-grid.e-bigger.e-rtl .e-groupheadercell:hover {
@@ -892,7 +906,6 @@
   margin-left: 0;
   margin-right: -10px;
   margin-top: -4px;
-  padding-top: 0;
   padding-left: 8px;
 }
 .e-bigger .e-grid .e-groupcaption,
@@ -1403,6 +1416,7 @@
   border-collapse: separate;
   table-layout: fixed;
   width: 100%;
+  border-spacing: 0.25px;
 }
 .e-grid .e-tableborder {
   border-right: 1px solid;
@@ -1844,6 +1858,8 @@
   border-top-style: solid;
   border-top-width: 1px;
   padding: 0.3em;
+  font-weight: normal;
+  text-align: left;
 }
 .e-grid th.e-detailcell .e-rowcell,
 .e-grid th.e-detailcell .e-gridpager {
@@ -2257,7 +2273,8 @@
 }
 .e-grid span.e-ungroupbutton.e-icons {
   margin-left: -8px;
-  margin-top: 2px;
+  margin-top: -3px;
+  padding-top: 4px;
   padding-right: 8px;
 }
 .e-grid .e-grptogglebtn {
@@ -2833,6 +2850,7 @@
 .e-grid.e-rtl.e-default .e-detailcell, .e-grid.e-rtl.e-default.e-bothlines .e-detailcell {
   border-right-style: solid;
   border-right-width: 1px;
+  text-align: right;
 }
 .e-grid.e-rtl .e-cc-searchdiv span.e-ccsearch-icon.e-icons {
   float: left;
@@ -2844,7 +2862,7 @@
 .e-grid.e-rtl span.e-ungroupbutton.e-icons {
   margin-left: 0;
   margin-right: -10px;
-  padding-top: 0;
+  padding-top: 4px;
 }
 .e-grid.e-rtl.e-default.e-bothlines .e-headercell, .e-grid.e-rtl.e-default.e-bothlines .e-detailheadercell {
   border-width: 0 0 0 1px;
@@ -3175,6 +3193,10 @@
 .e-bigger.e-grid.e-rtl .e-groupheadercell span {
   padding: 0 8px;
 }
+.e-bigger .e-grid.e-device.e-rtl .e-groupheadercell span,
+.e-bigger.e-grid.e-device.e-rtl .e-groupheadercell span {
+  padding: 0 8px;
+}
 
 .e-grid-min-height .e-rowcell,
 .e-grid-min-height .e-icon-grightarrow,
@@ -3324,8 +3346,17 @@
   position: absolute;
   top: 6px;
   white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
   width: 45%;
 }
+.e-bigger .e-grid.e-row-responsive .e-gridcontent .e-verticalwrap td::before, .e-bigger .e-grid.e-row-responsive .e-summarycontent .e-verticalwrap td::before,
+.e-bigger.e-grid.e-row-responsive .e-gridcontent .e-verticalwrap td::before,
+.e-bigger.e-grid.e-row-responsive .e-summarycontent .e-verticalwrap td::before {
+  line-height: 18px;
+  white-space: normal;
+  word-wrap: break-word;
+}
 .e-bigger .e-grid.e-row-responsive .e-gridcontent td[data-cell], .e-bigger .e-grid.e-row-responsive .e-summarycontent td[data-cell],
 .e-bigger.e-grid.e-row-responsive .e-gridcontent td[data-cell],
 .e-bigger.e-grid.e-row-responsive .e-summarycontent td[data-cell] {

package/styles/grid/bootstrap4.css

@@ -780,6 +780,10 @@
   padding: 6px 0;
   font-size: 14px;
 }
+.e-bigger .e-grid.e-device .e-groupheadercell,
+.e-grid.e-bigger.e-device .e-groupheadercell {
+  padding: 0;
+}
 .e-bigger .e-grid .e-groupheadercell:hover,
 .e-grid.e-bigger .e-groupheadercell:hover {
   padding: 6px 0;
@@ -791,8 +795,8 @@
 }
 .e-bigger .e-grid .e-groupheadercell span,
 .e-grid.e-bigger .e-groupheadercell span {
-  height: 4px;
-  line-height: 4px;
+  height: 24px;
+  line-height: 24px;
   padding: 8px 4px 10px 12px;
 }
 .e-bigger .e-grid .e-groupheadercell .e-ungroupbutton,
@@ -838,6 +842,7 @@
 .e-bigger .e-grid.e-device .e-groupheadercell span,
 .e-grid.e-bigger.e-device .e-groupheadercell span {
   line-height: 33px;
+  padding: 0 4px 0 12px;
 }
 .e-bigger .e-grid.e-device .e-rowcell, .e-bigger .e-grid.e-device .e-summarycell,
 .e-grid.e-bigger.e-device .e-rowcell,
@@ -910,11 +915,17 @@
 }
 .e-bigger .e-grid span.e-ungroupbutton.e-icons,
 .e-grid.e-bigger span.e-ungroupbutton.e-icons {
-  font-size: 12px;
+  font-size: 16px;
   margin-left: -7px;
   margin-top: -1px;
   margin-right: 8px;
   padding-top: 8px;
+  padding-top: 8px;
+}
+.e-bigger .e-grid.e-device span.e-ungroupbutton.e-icons,
+.e-grid.e-bigger.e-device span.e-ungroupbutton.e-icons {
+  margin-top: -1px;
+  padding-top: 0;
 }
 .e-bigger .e-grid span.e-groupsort.e-icons,
 .e-grid.e-bigger span.e-groupsort.e-icons {
@@ -922,6 +933,10 @@
   margin-top: -1px;
   margin-left: -4px;
 }
+.e-bigger .e-grid.e-device span.e-groupsort.e-icons,
+.e-grid.e-bigger.e-device span.e-groupsort.e-icons {
+  margin-top: 0;
+}
 .e-bigger .e-grid.e-rtl span.e-groupsort.e-icons,
 .e-grid.e-bigger.e-rtl span.e-groupsort.e-icons {
   margin-left: 7px;
@@ -936,8 +951,7 @@
 .e-grid.e-bigger.e-rtl span.e-ungroupbutton.e-icons {
   margin-left: -9px;
   margin-right: -15px;
-  margin-top: 3px;
-  padding-top: 4px;
+  margin-top: -1px;
   padding-left: 12px;
 }
 .e-bigger .e-grid .e-groupcaption,
@@ -1451,6 +1465,7 @@
   border-collapse: separate;
   table-layout: fixed;
   width: 100%;
+  border-spacing: 0.25px;
 }
 .e-grid .e-tableborder {
   border-right: 1px solid;
@@ -1892,6 +1907,8 @@
   border-top-style: solid;
   border-top-width: 1px;
   padding: 0.3em;
+  font-weight: normal;
+  text-align: left;
 }
 .e-grid th.e-detailcell .e-rowcell,
 .e-grid th.e-detailcell .e-gridpager {
@@ -2307,8 +2324,8 @@
 .e-grid span.e-ungroupbutton.e-icons {
   margin-left: -8px;
   margin-top: 0;
-  padding-right: 8px;
   padding-top: 4px;
+  padding-right: 8px;
 }
 .e-grid .e-grptogglebtn {
   padding: 7px;
@@ -2884,6 +2901,7 @@
 .e-grid.e-rtl.e-default .e-detailcell, .e-grid.e-rtl.e-default.e-bothlines .e-detailcell {
   border-right-style: solid;
   border-right-width: 1px;
+  text-align: right;
 }
 .e-grid.e-rtl .e-cc-searchdiv span.e-ccsearch-icon.e-icons {
   float: left;
@@ -3226,6 +3244,10 @@
 .e-bigger.e-grid.e-rtl .e-groupheadercell span {
   padding: 8px 4px 10px 8px;
 }
+.e-bigger .e-grid.e-device.e-rtl .e-groupheadercell span,
+.e-bigger.e-grid.e-device.e-rtl .e-groupheadercell span {
+  padding: 0 4px 0 12px;
+}
 
 .e-grid-min-height .e-rowcell,
 .e-grid-min-height .e-icon-grightarrow,
@@ -3376,8 +3398,17 @@
   position: absolute;
   top: 6px;
   white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
   width: 45%;
 }
+.e-bigger .e-grid.e-row-responsive .e-gridcontent .e-verticalwrap td::before, .e-bigger .e-grid.e-row-responsive .e-summarycontent .e-verticalwrap td::before,
+.e-bigger.e-grid.e-row-responsive .e-gridcontent .e-verticalwrap td::before,
+.e-bigger.e-grid.e-row-responsive .e-summarycontent .e-verticalwrap td::before {
+  line-height: 21px;
+  white-space: normal;
+  word-wrap: break-word;
+}
 .e-bigger .e-grid.e-row-responsive .e-gridcontent td[data-cell], .e-bigger .e-grid.e-row-responsive .e-summarycontent td[data-cell],
 .e-bigger.e-grid.e-row-responsive .e-gridcontent td[data-cell],
 .e-bigger.e-grid.e-row-responsive .e-summarycontent td[data-cell] {

package/styles/grid/bootstrap5-dark.css

@@ -800,6 +800,10 @@
   padding: 7px 0;
   font-size: 16px;
 }
+.e-bigger .e-grid.e-device .e-groupheadercell,
+.e-grid.e-bigger.e-device .e-groupheadercell {
+  padding: 0;
+}
 .e-bigger .e-grid .e-groupheadercell:hover,
 .e-grid.e-bigger .e-groupheadercell:hover {
   padding: 7px 0;
@@ -858,6 +862,7 @@
 .e-bigger .e-grid.e-device .e-groupheadercell span,
 .e-grid.e-bigger.e-device .e-groupheadercell span {
   line-height: 33px;
+  padding: 0 8px;
 }
 .e-bigger .e-grid.e-device .e-rowcell, .e-bigger .e-grid.e-device .e-summarycell,
 .e-grid.e-bigger.e-device .e-rowcell,
@@ -934,12 +939,21 @@
   margin-left: -12px;
   margin-top: 1px;
   margin-right: 0;
+  padding-top: 0;
+}
+.e-bigger .e-grid.e-device span.e-ungroupbutton.e-icons,
+.e-grid.e-bigger.e-device span.e-ungroupbutton.e-icons {
+  margin-top: 0;
 }
 .e-bigger .e-grid span.e-groupsort.e-icons,
 .e-grid.e-bigger span.e-groupsort.e-icons {
   margin-right: 0;
   margin-top: 1px;
 }
+.e-bigger .e-grid.e-device span.e-groupsort.e-icons,
+.e-grid.e-bigger.e-device span.e-groupsort.e-icons {
+  margin-top: 0;
+}
 .e-bigger .e-grid.e-rtl .e-groupheadercell, .e-bigger .e-grid.e-rtl .e-groupheadercell:hover,
 .e-grid.e-bigger.e-rtl .e-groupheadercell,
 .e-grid.e-bigger.e-rtl .e-groupheadercell:hover {
@@ -951,7 +965,6 @@
   margin-left: -8px;
   margin-right: -12px;
   margin-top: 1px;
-  padding-top: 0;
   padding-left: 8px;
 }
 .e-bigger .e-grid .e-groupcaption,
@@ -1466,6 +1479,7 @@
   border-collapse: separate;
   table-layout: fixed;
   width: 100%;
+  border-spacing: 0.25px;
 }
 .e-grid .e-tableborder {
   border-right: 1px solid;
@@ -1907,6 +1921,8 @@
   border-top-style: solid;
   border-top-width: 1px;
   padding: 0.3em;
+  font-weight: normal;
+  text-align: left;
 }
 .e-grid th.e-detailcell .e-rowcell,
 .e-grid th.e-detailcell .e-gridpager {
@@ -2320,7 +2336,8 @@
 }
 .e-grid span.e-ungroupbutton.e-icons {
   margin-left: -12px;
-  margin-top: 2px;
+  margin-top: -0.5px;
+  padding-top: 2px;
   padding-right: 8px;
 }
 .e-grid .e-grptogglebtn {
@@ -2896,6 +2913,7 @@
 .e-grid.e-rtl.e-default .e-detailcell, .e-grid.e-rtl.e-default.e-bothlines .e-detailcell {
   border-right-style: solid;
   border-right-width: 1px;
+  text-align: right;
 }
 .e-grid.e-rtl .e-cc-searchdiv span.e-ccsearch-icon.e-icons {
   float: left;
@@ -2907,7 +2925,7 @@
 .e-grid.e-rtl span.e-ungroupbutton.e-icons {
   margin-left: 0;
   margin-right: -12px;
-  padding-top: 0;
+  padding-top: 2px;
 }
 .e-grid.e-rtl.e-default.e-bothlines .e-headercell, .e-grid.e-rtl.e-default.e-bothlines .e-detailheadercell {
   border-width: 0 0 0 1px;
@@ -3246,6 +3264,10 @@
 .e-bigger.e-grid.e-rtl .e-groupheadercell span {
   padding: 0 8px;
 }
+.e-bigger .e-grid.e-device.e-rtl .e-groupheadercell span,
+.e-bigger.e-grid.e-device.e-rtl .e-groupheadercell span {
+  padding: 0 8px;
+}
 
 .e-grid-min-height .e-rowcell,
 .e-grid-min-height .e-icon-grightarrow,
@@ -3396,8 +3418,17 @@
   position: absolute;
   top: 6px;
   white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
   width: 45%;
 }
+.e-bigger .e-grid.e-row-responsive .e-gridcontent .e-verticalwrap td::before, .e-bigger .e-grid.e-row-responsive .e-summarycontent .e-verticalwrap td::before,
+.e-bigger.e-grid.e-row-responsive .e-gridcontent .e-verticalwrap td::before,
+.e-bigger.e-grid.e-row-responsive .e-summarycontent .e-verticalwrap td::before {
+  line-height: 21px;
+  white-space: normal;
+  word-wrap: break-word;
+}
 .e-bigger .e-grid.e-row-responsive .e-gridcontent td[data-cell], .e-bigger .e-grid.e-row-responsive .e-summarycontent td[data-cell],
 .e-bigger.e-grid.e-row-responsive .e-gridcontent td[data-cell],
 .e-bigger.e-grid.e-row-responsive .e-summarycontent td[data-cell] {

package/styles/grid/bootstrap5.css

@@ -800,6 +800,10 @@
   padding: 7px 0;
   font-size: 16px;
 }
+.e-bigger .e-grid.e-device .e-groupheadercell,
+.e-grid.e-bigger.e-device .e-groupheadercell {
+  padding: 0;
+}
 .e-bigger .e-grid .e-groupheadercell:hover,
 .e-grid.e-bigger .e-groupheadercell:hover {
   padding: 7px 0;
@@ -858,6 +862,7 @@
 .e-bigger .e-grid.e-device .e-groupheadercell span,
 .e-grid.e-bigger.e-device .e-groupheadercell span {
   line-height: 33px;
+  padding: 0 8px;
 }
 .e-bigger .e-grid.e-device .e-rowcell, .e-bigger .e-grid.e-device .e-summarycell,
 .e-grid.e-bigger.e-device .e-rowcell,
@@ -934,12 +939,21 @@
   margin-left: -12px;
   margin-top: 1px;
   margin-right: 0;
+  padding-top: 0;
+}
+.e-bigger .e-grid.e-device span.e-ungroupbutton.e-icons,
+.e-grid.e-bigger.e-device span.e-ungroupbutton.e-icons {
+  margin-top: 0;
 }
 .e-bigger .e-grid span.e-groupsort.e-icons,
 .e-grid.e-bigger span.e-groupsort.e-icons {
   margin-right: 0;
   margin-top: 1px;
 }
+.e-bigger .e-grid.e-device span.e-groupsort.e-icons,
+.e-grid.e-bigger.e-device span.e-groupsort.e-icons {
+  margin-top: 0;
+}
 .e-bigger .e-grid.e-rtl .e-groupheadercell, .e-bigger .e-grid.e-rtl .e-groupheadercell:hover,
 .e-grid.e-bigger.e-rtl .e-groupheadercell,
 .e-grid.e-bigger.e-rtl .e-groupheadercell:hover {
@@ -951,7 +965,6 @@
   margin-left: -8px;
   margin-right: -12px;
   margin-top: 1px;
-  padding-top: 0;
   padding-left: 8px;
 }
 .e-bigger .e-grid .e-groupcaption,
@@ -1466,6 +1479,7 @@
   border-collapse: separate;
   table-layout: fixed;
   width: 100%;
+  border-spacing: 0.25px;
 }
 .e-grid .e-tableborder {
   border-right: 1px solid;
@@ -1907,6 +1921,8 @@
   border-top-style: solid;
   border-top-width: 1px;
   padding: 0.3em;
+  font-weight: normal;
+  text-align: left;
 }
 .e-grid th.e-detailcell .e-rowcell,
 .e-grid th.e-detailcell .e-gridpager {
@@ -2320,7 +2336,8 @@
 }
 .e-grid span.e-ungroupbutton.e-icons {
   margin-left: -12px;
-  margin-top: 2px;
+  margin-top: -0.5px;
+  padding-top: 2px;
   padding-right: 8px;
 }
 .e-grid .e-grptogglebtn {
@@ -2896,6 +2913,7 @@
 .e-grid.e-rtl.e-default .e-detailcell, .e-grid.e-rtl.e-default.e-bothlines .e-detailcell {
   border-right-style: solid;
   border-right-width: 1px;
+  text-align: right;
 }
 .e-grid.e-rtl .e-cc-searchdiv span.e-ccsearch-icon.e-icons {
   float: left;
@@ -2907,7 +2925,7 @@
 .e-grid.e-rtl span.e-ungroupbutton.e-icons {
   margin-left: 0;
   margin-right: -12px;
-  padding-top: 0;
+  padding-top: 2px;
 }
 .e-grid.e-rtl.e-default.e-bothlines .e-headercell, .e-grid.e-rtl.e-default.e-bothlines .e-detailheadercell {
   border-width: 0 0 0 1px;
@@ -3246,6 +3264,10 @@
 .e-bigger.e-grid.e-rtl .e-groupheadercell span {
   padding: 0 8px;
 }
+.e-bigger .e-grid.e-device.e-rtl .e-groupheadercell span,
+.e-bigger.e-grid.e-device.e-rtl .e-groupheadercell span {
+  padding: 0 8px;
+}
 
 .e-grid-min-height .e-rowcell,
 .e-grid-min-height .e-icon-grightarrow,
@@ -3396,8 +3418,17 @@
   position: absolute;
   top: 6px;
   white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
   width: 45%;
 }
+.e-bigger .e-grid.e-row-responsive .e-gridcontent .e-verticalwrap td::before, .e-bigger .e-grid.e-row-responsive .e-summarycontent .e-verticalwrap td::before,
+.e-bigger.e-grid.e-row-responsive .e-gridcontent .e-verticalwrap td::before,
+.e-bigger.e-grid.e-row-responsive .e-summarycontent .e-verticalwrap td::before {
+  line-height: 21px;
+  white-space: normal;
+  word-wrap: break-word;
+}
 .e-bigger .e-grid.e-row-responsive .e-gridcontent td[data-cell], .e-bigger .e-grid.e-row-responsive .e-summarycontent td[data-cell],
 .e-bigger.e-grid.e-row-responsive .e-gridcontent td[data-cell],
 .e-bigger.e-grid.e-row-responsive .e-summarycontent td[data-cell] {