@syncfusion/ej2-react-grids 21.2.4 → 21.2.6

package/CHANGELOG.md

@@ -6,6 +6,32 @@
 
 #### Bug Fixes
 
+- `#I458689` - Resolved the issue where the bottom border was not shown when using `virtualization` with a limited number of records.
+- `#I455549` - Fixed the problem where the column template was not being re-created after tabbing from batch edit mode in React.
+- `#I456631` - Resolved the issue where the search functionality was not working properly within brackets.
+- `#I458148` - `ResetOnRowClick` resets only the checked rows in the current page while using remote data binding has been resolved.
+- `#I453406` - Removed the deprecated attribute `cellspacing` from the grid table and added the CSS property `border-spacing` instead.
+- `I#459037` - Fixed the paste error that occurred with an empty data source and the addition of a row in Batch mode.
+
+## 21.2.5 (2023-05-16)
+
+### Grid
+
+#### Bug Fixes
+
+- `#I459274` - The issue regarding the `All` page size is not working properly with the `RemoteSaveAdaptor` has been resolved.
+- `#I459703` - Pager component's tooltip not getting updated on locale change issue has been fixed.
+- `#F181837` - The problem related to copy-pasting when adding a new record has been resolved.
+- `#I452083` - The issue of text overlapping in the vertical row rendering mode of the adaptive grid has been resolved.
+- `#FB43372` -The Content Security Policy violation issue related to grid paging and grouping has been resolved.
+- `#I460038` - Resolved the issue where the detail template being rendered with bold and centred formatting.
+
+## 21.2.4 (2023-05-09)
+
+### Grid
+
+#### Bug Fixes
+
 - `#F169671` - Now, the `ExcelQueryCellInfo` event is called properly in both parent and child grids.
 - `#I441999` - Ensured that the `recordDoubleClick` event is now properly triggered on iPad devices as well.
 - `#F181654` - Fixed issue where the react state value was being updated incorrectly with Grid templates.

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

@@ -1,6 +1,6 @@
 /*!
 *  filename: ej2-react-grids.min.js
-*  version : 21.2.4
+*  version : 21.2.6
 *  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-grids.umd.min.js

@@ -1,6 +1,6 @@
 /*!
 *  filename: ej2-react-grids.umd.min.js
-*  version : 21.2.4
+*  version : 21.2.6
 *  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-grids@*",
-  "_id": "@syncfusion/ej2-react-grids@21.2.3",
+  "_id": "@syncfusion/ej2-react-grids@21.2.5",
   "_inBundle": false,
-  "_integrity": "sha512-GIE2uqJauwb1/Foo5htzAoX+oS4Vr5Ys/mbh4OWNQJbXpkqjtui2eAJauPLQ4c4gWwKkJAEPOKj16GTvUotyPQ==",
+  "_integrity": "sha512-Sw/XU7a323uqTzEGuRK32+PqLom974grs/9EgyB3KNjrQuK3PMtxysucWZM+FDqeHFbTxI35E/0+7xDfpiGzKw==",
   "_location": "/@syncfusion/ej2-react-grids",
   "_phantomChildren": {},
   "_requested": {
@@ -19,8 +19,8 @@
   "_requiredBy": [
     "/"
   ],
-  "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-react-grids/-/ej2-react-grids-21.2.3.tgz",
-  "_shasum": "f7ae1bd1248f813de0dc2ea59f106c2166e7d351",
+  "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-react-grids/-/ej2-react-grids-21.2.5.tgz",
+  "_shasum": "7c4add3317db6aa4147b04f7e0532e5b0a5860f4",
   "_spec": "@syncfusion/ej2-react-grids@*",
   "_where": "/jenkins/workspace/elease-automation_release_21.1.1/packages/included",
   "author": {
@@ -32,8 +32,8 @@
   "bundleDependencies": false,
   "dependencies": {
     "@syncfusion/ej2-base": "~21.2.3",
-    "@syncfusion/ej2-grids": "21.2.4",
-    "@syncfusion/ej2-react-base": "~21.2.3"
+    "@syncfusion/ej2-grids": "21.2.6",
+    "@syncfusion/ej2-react-base": "~21.2.6"
   },
   "deprecated": false,
   "description": "Feature-rich JavaScript datagrid (datatable) control with built-in support for editing, filtering, grouping, paging, sorting, and exporting to Excel. for React",
@@ -54,6 +54,6 @@
     "type": "git",
     "url": "git+https://github.com/syncfusion/ej2-react-ui-components.git"
   },
-  "version": "21.2.4",
+  "version": "21.2.6",
   "sideEffects": false
 }

package/styles/bootstrap-dark.css

@@ -1300,6 +1300,7 @@ li.e-separator.e-menu-item.e-excel-separator {
   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 {
@@ -1325,7 +1326,6 @@ li.e-separator.e-menu-item.e-excel-separator {
   margin-left: 0;
   margin-right: -10px;
   margin-top: -4px;
-  padding-top: 0;
   padding-left: 8px;
 }
 .e-bigger .e-grid .e-groupcaption,
@@ -1836,6 +1836,7 @@ li.e-separator.e-menu-item.e-excel-separator {
   border-collapse: separate;
   table-layout: fixed;
   width: 100%;
+  border-spacing: 0.25px;
 }
 .e-grid .e-tableborder {
   border-right: 1px solid;
@@ -2277,6 +2278,8 @@ li.e-separator.e-menu-item.e-excel-separator {
   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 {
@@ -2690,7 +2693,8 @@ li.e-separator.e-menu-item.e-excel-separator {
 }
 .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 {
@@ -3266,6 +3270,7 @@ li.e-separator.e-menu-item.e-excel-separator {
 .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;
@@ -3277,7 +3282,7 @@ li.e-separator.e-menu-item.e-excel-separator {
 .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;
@@ -3761,8 +3766,17 @@ li.e-separator.e-menu-item.e-excel-separator {
   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/bootstrap.css

@@ -1301,6 +1301,7 @@ li.e-separator.e-menu-item.e-excel-separator {
   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 {
@@ -1326,7 +1327,6 @@ li.e-separator.e-menu-item.e-excel-separator {
   margin-left: 0;
   margin-right: -10px;
   margin-top: -4px;
-  padding-top: 0;
   padding-left: 8px;
 }
 .e-bigger .e-grid .e-groupcaption,
@@ -1837,6 +1837,7 @@ li.e-separator.e-menu-item.e-excel-separator {
   border-collapse: separate;
   table-layout: fixed;
   width: 100%;
+  border-spacing: 0.25px;
 }
 .e-grid .e-tableborder {
   border-right: 1px solid;
@@ -2278,6 +2279,8 @@ li.e-separator.e-menu-item.e-excel-separator {
   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 {
@@ -2691,7 +2694,8 @@ li.e-separator.e-menu-item.e-excel-separator {
 }
 .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 {
@@ -3267,6 +3271,7 @@ li.e-separator.e-menu-item.e-excel-separator {
 .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;
@@ -3278,7 +3283,7 @@ li.e-separator.e-menu-item.e-excel-separator {
 .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;
@@ -3762,8 +3767,17 @@ li.e-separator.e-menu-item.e-excel-separator {
   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/bootstrap4.css

@@ -1347,11 +1347,12 @@ li.e-separator.e-menu-item.e-excel-separator {
 }
 .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 {
@@ -1382,8 +1383,7 @@ li.e-separator.e-menu-item.e-excel-separator {
 .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,
@@ -1897,6 +1897,7 @@ li.e-separator.e-menu-item.e-excel-separator {
   border-collapse: separate;
   table-layout: fixed;
   width: 100%;
+  border-spacing: 0.25px;
 }
 .e-grid .e-tableborder {
   border-right: 1px solid;
@@ -2338,6 +2339,8 @@ li.e-separator.e-menu-item.e-excel-separator {
   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 {
@@ -2753,8 +2756,8 @@ li.e-separator.e-menu-item.e-excel-separator {
 .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;
@@ -3330,6 +3333,7 @@ li.e-separator.e-menu-item.e-excel-separator {
 .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;
@@ -3826,8 +3830,17 @@ li.e-separator.e-menu-item.e-excel-separator {
   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/bootstrap5-dark.css

@@ -1363,6 +1363,7 @@ li.e-separator.e-menu-item.e-excel-separator {
   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 {
@@ -1388,7 +1389,6 @@ li.e-separator.e-menu-item.e-excel-separator {
   margin-left: -8px;
   margin-right: -12px;
   margin-top: 1px;
-  padding-top: 0;
   padding-left: 8px;
 }
 .e-bigger .e-grid .e-groupcaption,
@@ -1903,6 +1903,7 @@ li.e-separator.e-menu-item.e-excel-separator {
   border-collapse: separate;
   table-layout: fixed;
   width: 100%;
+  border-spacing: 0.25px;
 }
 .e-grid .e-tableborder {
   border-right: 1px solid;
@@ -2344,6 +2345,8 @@ li.e-separator.e-menu-item.e-excel-separator {
   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 {
@@ -2757,7 +2760,8 @@ li.e-separator.e-menu-item.e-excel-separator {
 }
 .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 {
@@ -3333,6 +3337,7 @@ li.e-separator.e-menu-item.e-excel-separator {
 .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;
@@ -3344,7 +3349,7 @@ li.e-separator.e-menu-item.e-excel-separator {
 .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;
@@ -3837,8 +3842,17 @@ li.e-separator.e-menu-item.e-excel-separator {
   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/bootstrap5.css

@@ -1363,6 +1363,7 @@ li.e-separator.e-menu-item.e-excel-separator {
   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 {
@@ -1388,7 +1389,6 @@ li.e-separator.e-menu-item.e-excel-separator {
   margin-left: -8px;
   margin-right: -12px;
   margin-top: 1px;
-  padding-top: 0;
   padding-left: 8px;
 }
 .e-bigger .e-grid .e-groupcaption,
@@ -1903,6 +1903,7 @@ li.e-separator.e-menu-item.e-excel-separator {
   border-collapse: separate;
   table-layout: fixed;
   width: 100%;
+  border-spacing: 0.25px;
 }
 .e-grid .e-tableborder {
   border-right: 1px solid;
@@ -2344,6 +2345,8 @@ li.e-separator.e-menu-item.e-excel-separator {
   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 {
@@ -2757,7 +2760,8 @@ li.e-separator.e-menu-item.e-excel-separator {
 }
 .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 {
@@ -3333,6 +3337,7 @@ li.e-separator.e-menu-item.e-excel-separator {
 .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;
@@ -3344,7 +3349,7 @@ li.e-separator.e-menu-item.e-excel-separator {
 .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;
@@ -3837,8 +3842,17 @@ li.e-separator.e-menu-item.e-excel-separator {
   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/fabric-dark.css

@@ -1274,6 +1274,7 @@ li.e-separator.e-menu-item.e-excel-separator {
   margin-left: 0;
   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 {
@@ -1299,7 +1300,6 @@ li.e-separator.e-menu-item.e-excel-separator {
   margin-left: 0;
   margin-right: 8px;
   margin-top: 0;
-  padding-top: 0;
   padding-left: 0;
 }
 .e-bigger .e-grid .e-groupcaption,
@@ -1810,6 +1810,7 @@ li.e-separator.e-menu-item.e-excel-separator {
   border-collapse: separate;
   table-layout: fixed;
   width: 100%;
+  border-spacing: 0.25px;
 }
 .e-grid .e-tableborder {
   border-right: 1px solid;
@@ -2251,6 +2252,8 @@ li.e-separator.e-menu-item.e-excel-separator {
   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 {
@@ -2665,6 +2668,7 @@ li.e-separator.e-menu-item.e-excel-separator {
 .e-grid span.e-ungroupbutton.e-icons {
   margin-left: 0;
   margin-top: 0;
+  padding-top: 0;
   padding-right: 0;
 }
 .e-grid .e-grptogglebtn {
@@ -3240,6 +3244,7 @@ li.e-separator.e-menu-item.e-excel-separator {
 .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;
@@ -3735,8 +3740,17 @@ li.e-separator.e-menu-item.e-excel-separator {
   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/fabric.css

@@ -1267,6 +1267,7 @@ li.e-separator.e-menu-item.e-excel-separator {
   margin-left: 0;
   margin-top: 0;
   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 {
@@ -1292,7 +1293,6 @@ li.e-separator.e-menu-item.e-excel-separator {
   margin-left: 0;
   margin-right: 8px;
   margin-top: 0;
-  padding-top: 0;
   padding-left: 0;
 }
 .e-bigger .e-grid .e-groupcaption,
@@ -1803,6 +1803,7 @@ li.e-separator.e-menu-item.e-excel-separator {
   border-collapse: separate;
   table-layout: fixed;
   width: 100%;
+  border-spacing: 0.25px;
 }
 .e-grid .e-tableborder {
   border-right: 1px solid;
@@ -2244,6 +2245,8 @@ li.e-separator.e-menu-item.e-excel-separator {
   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 {
@@ -2658,6 +2661,7 @@ li.e-separator.e-menu-item.e-excel-separator {
 .e-grid span.e-ungroupbutton.e-icons {
   margin-left: 0;
   margin-top: 0;
+  padding-top: 0;
   padding-right: 0;
 }
 .e-grid .e-grptogglebtn {
@@ -3233,6 +3237,7 @@ li.e-separator.e-menu-item.e-excel-separator {
 .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;
@@ -3728,8 +3733,17 @@ li.e-separator.e-menu-item.e-excel-separator {
   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/fluent-dark.css

@@ -1353,6 +1353,7 @@ li.e-separator.e-menu-item.e-excel-separator {
   margin-left: 0;
   margin-top: -4px;
   margin-right: 4px;
+  padding-top: 0;
   padding: 0 4px;
 }
 .e-bigger .e-grid.e-device span.e-ungroupbutton.e-icons,
@@ -1386,8 +1387,9 @@ li.e-separator.e-menu-item.e-excel-separator {
   margin-left: -9px;
   margin-right: -6px;
   margin-top: -4px;
-  padding-top: 4px;
   padding-left: 8px;
+  margin-top: 0;
+  padding: 0 4px;
 }
 .e-bigger .e-grid .e-groupcaption,
 .e-grid.e-bigger .e-groupcaption {
@@ -1900,6 +1902,7 @@ li.e-separator.e-menu-item.e-excel-separator {
   border-collapse: separate;
   table-layout: fixed;
   width: 100%;
+  border-spacing: 0.25px;
 }
 .e-grid .e-tableborder {
   border-right: 1px solid;
@@ -2345,6 +2348,8 @@ li.e-separator.e-menu-item.e-excel-separator {
   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 {
@@ -2762,7 +2767,8 @@ li.e-separator.e-menu-item.e-excel-separator {
 }
 .e-grid span.e-ungroupbutton.e-icons {
   margin-left: -13px;
-  margin-top: 1px;
+  margin-top: -3px;
+  padding-top: 8px;
   padding-right: 12px;
 }
 .e-grid .e-grptogglebtn {
@@ -3339,6 +3345,7 @@ li.e-separator.e-menu-item.e-excel-separator {
 .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;
@@ -3350,7 +3357,7 @@ li.e-separator.e-menu-item.e-excel-separator {
 .e-grid.e-rtl span.e-ungroupbutton.e-icons {
   margin-left: 0;
   margin-right: -14px;
-  padding-top: 4px;
+  padding-top: 8px;
 }
 .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;
@@ -3863,8 +3870,17 @@ li.e-separator.e-menu-item.e-excel-separator {
   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] {