@syncfusion/ej2-react-grids 20.3.61 → 20.4.38

package/CHANGELOG.md

@@ -4,115 +4,21 @@
 
 ### Grid
 
-#### Bug Fixes
-
-- `#I408271` - The reference link for the `checkBoxChange` event arguments has been updated in the documentation.
-- `#I420019` - script error for focusing the content after deleting all the records has been fixed.
-
-## 20.3.60 (2022-12-06)
-
-### Grid
-
-#### Bug Fixes
-
-- `#I397543` - Issue with custom toolbar template item in grid has been resolved.
-- `#I418069` - Searching issue when clicking search icon in adaptive mode has been fixed.
-- `#I417934` - Column Reordering was not working properly after hiding the column has been fixed.
-- `#I415585` - When JAWS is running, go to first page and last page buttons are working properly when enter key is pressed after focusing.
-
-## 20.3.59 (2022-11-29)
-
-### Grid
-
-#### Bug Fixes
-
-- `#I397894` - When pressing Tab Key, the first focusable element in the grid is need to be focused, instead of grid container issue has been fixed.
-
-## 20.3.58 (2022-11-22)
-
-### Grid
-
-#### Bug Fixes
-
-- `#I413206` - Unsaved batch changes gets deleted when grouping enabled and perform show/hide column using column chooser has been fixed.
-- `#I413517` - column menu is now rendering properly with sticky header.
-- `#I414774` - Grid checkbox filter issue while pasting text and search has been resolved.
-- `#I415399` - Row Template issue while using react states to set grid datasource has been resolved.
-
-## 20.3.57 (2022-11-15)
-
-### Grid
-
-#### Bug Fixes
-
-- `#I413480` - Enter and shift enter key functionalities are working fine with template columns.
-- `#F178089` - Script error with virtual scroll and frozen columns has been resolved.
-- `#I414874` - Column chooser checkbox state is now reading properly by JAWS screen reader.
-- `#I379911` - Now, the selected page will be read as current page by JAWS screen reader.
-- `#I408692` - Tooltip Issue while using fancy characters in grid has been fixed.
-- `#F38295` - Incorrect Ellipsis with narrow checkbox column in grid has been fixed.
-- `#I413202` - Issue with rendering dropdown component in grid cell with batch editing has been fixed.
-
-## 20.3.56 (2022-11-08)
-
-### Grid
-
-#### Bug Fixes
-
-- `#I388098` - Editing issue in grouping with `virtualization` has been fixed.
-- `#I406671` - Edit element not maintained when executing `setRowData` method is fixed.
-- `#I413403` - Script error with toolbar template has been resolved.
-- `#I408977` - Infinite Scrolling with row grouping and checkbox selection is now working fine.
-- `#F177783` - Sort icon Alignment issue with header text right align when using autofit has been fixed.
-
-## 20.3.52 (2022-10-26)
-
-### Grid
-
-#### Bug Fixes
-
-- `#I400775` - `DataStateChange` event argument type is not matched with the original argument list has been fixed.
-- `#I411026` - Expanding child grid throws script while adding data dynamically to the child has been resolved.
-- `#I412478` - `SetCellValue` is working fine with `virtualization`.
-- `#I411780` - German translation for the word search has been changed.
-- `#I367158` - While rendering the grid in the template column the script error thrown with resizing the frozen column has been fixed.
-
-## 20.3.50 (2022-10-18)
-
-### Grid
-
-#### Bug Fixes
-
-- `#F176739` - CSS problem occurs when drag and drop between child grid and other grid issue has been fixed.
-- `#I389344` - PDF Exporting issue with Hierarchy grid and  grouping in parent grid has been fixed.
-- `#F177682` - Validation message is not showing properly in movable columns with empty records has been fixed.
-
-## 20.3.49 (2022-10-11)
-
-### Grid
-
-#### Bug Fixes
-
-- `#F177034` - Grid editing after removing frozen column throws script error has been fixed.
-- `#I409787` - Checkbox selection is not working properly on down arrow key navigation has been fixed.
-- `#F177722` - Save action of command column is not working when Grid having both left and right frozen has been fixed.
-- `#FB37591` - Frozen rows are not emptied even if filtering returns no record when `virtualization` enabled has been fixed.
-- `#F177810` - Provided localization support for sort buttons in Adaptive Grid.
-- `#I405703` - `CellSelected` event not triggered with custom span element in row cells has been fixed.
-- `#I394025` - Memory leak issue with Command column has been fixed.
-- `#FB32003`, `#FB38052` - Ellipsis is not showing in the Firefox browser has been fixed.
-- `#I407497` - Focus issue while render multiple inputs in the column template issue has been fixed.
+#### New Features
 
-## 20.3.48 (2022-10-05)
+- `#I395531` - Improved the template rendering performance in React.
+- `#I396818` - Provided support to add current selection to the filter.
+- Provided support to skip the focus in non-editable columns while pressing tab/shift-tab in batch edit.
+- Provided the lazy load group support for virtual scroll enabled grid.
+- Provided support to refresh the aggregate values with lazy load grouping.
 
-### Grid
+- `F26767` - Provided the Shimmer effect for grid while loading, refreshing and data processing.
+- Provided the lazy load group support for infinite scrolling enabled grid.
+- `I388050`, `I388052`, `I375590`, `I370773`, `I375590` - Grid features and icons have been enhanced to meet web accessibility standards and enabled localization support for aria-labels.
 
-#### Bug Fixes
+#### Breaking Changes
 
-- `#I397183` - checkbox issue when enabling the persistence has been fixed.
-- `#I399882` - `rowIndexes` in `RowSelectEventArgs` becomes undefined when single row is selected has been fixed.
-- `#I402071` - Column chooser with frozen columns and wrap mode as header throws script error has been fixed.
-- `#I404733` - `SetRowData` method is not working properly used inside the `childGrid` is fixed.
+- `#I374913` - Prevented the group collapse action in infinite scrolling with cache mode by hiding the icons.
 
 ## 20.3.47 (2022-09-29)
 
@@ -128,14 +34,6 @@
 
 - `#I374913` - Prevented the group collapse action in infinite scrolling with cache mode by hiding the icons.
 
-#### Bug Fixes
-
-- `#I397430` - Script error while hiding the Sticky Header Grid using `ngIf` property has been fixed.
-- `#I407127` - Custom command buttons not working with infinite scrolling is fixed.
-- `#I401295` - Group by fails for 1 record on collapse issue has been fixed.
-- `#I401412` - Script error after destroying the Grid with sticky header has been fixed.
-- `#F176953` - Filtering issue with Frozen column and Row drag and drop feature has been resolved.
-
 ## 20.2.38 (2022-07-12)
 
 ### Grid

package/README.md

@@ -1,11 +1,11 @@
-# React Grid Component
+# React Data Grid Component
 
-The [React Data Grid](https://www.syncfusion.com/react-ui-components/react-grid?utm_source=npm&utm_medium=listing&utm_campaign=react-grid-npm) component is used to display and manipulate tabular data with configuration options to control the way the data is presented and manipulated. It will pull data from a data source, such as array of JSON objects, `OData web services`, or DataManager binding data fields to columns. Also displaying a column header to identify the field with support for grouped records.
+The [React Data Grid](https://www.syncfusion.com/react-ui-components/react-grid?utm_source=npm&utm_medium=listing&utm_campaign=react-grid-npm) component is a powerful and flexible tool for displaying and manipulating tabular data. React Data Grid component is its ability to bind to a wide range of data sources, including arrays of JSON objects, `OData web services`, and the Syncfusion [DataManager](https://ej2.syncfusion.com/react/documentation/data/data-binding/?utm_source=npm&utm_medium=listing&utm_campaign=react-grid-npm). This makes it easy to integrate the grid into your application and display data from a variety of sources. In addition to its data binding capabilities, the React Data Grid also offers support for features such as sorting, filtering, paging, grouping, editing, frozen rows and columns, virtualization, and more. These features allow you to easily manipulate and present large datasets in an efficient and user-friendly way.
 
 <p align="center">
-  <a href="https://ej2.syncfusion.com/react/documentation/grid/getting-started/?utm_source=npm&utm_medium=listing&utm_campaign=react-grid-npm">Getting Started</a>.
-  <a href="https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-grid-npm#/bootstrap5/grid/overview">Online demos</a>.
-  <a href="https://www.syncfusion.com/react-components/react-grid?utm_source=npm&utm_medium=listing&utm_campaign=react-grid-npm">Learn more</a>.
+  <a href="https://ej2.syncfusion.com/react/documentation/grid/getting-started/?utm_source=npm&utm_medium=listing&utm_campaign=react-grid-npm">Getting Started</a> . 
+  <a href="https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-grid-npm#/bootstrap5/grid/overview">Online demos</a> . 
+  <a href="https://www.syncfusion.com/react-components/react-grid?utm_source=npm&utm_medium=listing&utm_campaign=react-grid-npm">Learn more</a>
 </p>
 
 ![React Grid Component](https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/react/react-datagrid.png)
@@ -21,27 +21,17 @@ Trusted by the world's leading companies
 
 ### Create a React Application
 
-You can use [`create-react-app`](https://github.com/facebookincubator/create-react-app) to setup the applications.
-To install **create-react-app** run the following command.
+You can use [`create-react-app`](https://github.com/facebookincubator/create-react-app) to setup applications. To create React app use the following command.
 
 ```bash
-npm install -g create-react-app
-```
-
-To setup basic **React** sample, use following commands.
-
-```bash
-create-react-app quickstart --scripts-version=react-scripts-ts
-
-cd quickstart
-
-npm install
-
+npx create-react-app my-app --template typescript
+cd my-app
+npm start
 ```
 
 ### Adding Syncfusion Grid package
 
-All Syncfusion react packages are published in [`npmjs.com`](https://www.npmjs.com/~syncfusionorg) registry. To install react grid package, use the following command.
+All Syncfusion react packages are published in the [npmjs.com](https://www.npmjs.com/~syncfusionorg) registry. To install the react grid package, use the following command.
 
 ```bash
 npm install @syncfusion/ej2-react-grids --save
@@ -49,7 +39,7 @@ npm install @syncfusion/ej2-react-grids --save
 
 ### Adding CSS references for Grid
 
-Add CSS references needed for Grid in **src/App.css** from **../node_modules/@syncfusion** package folder.
+Add CSS references needed for a Grid in **src/App.css** from the **../node_modules/@syncfusion** package folder.
 
 ```css
 @import '../node_modules/@syncfusion/ej2-base/styles/material.css';  
@@ -63,9 +53,9 @@ Add CSS references needed for Grid in **src/App.css** from **../node_modules/@sy
 @import "../node_modules/@syncfusion/ej2-react-grids/styles/material.css";
 ```
 
-### Add Grid Component
+### Add Grid component
 
-In **src/App.tsx** file, use the following code snippet to render the Syncfusion React Grid control and import **App.css** to apply styles to the grid:
+In the **src/App.tsx** file, use the following code snippet to render the Syncfusion React Grid component and import **App.css** to apply styles to the grid:
 
 ```typescript
 import { ColumnDirective, ColumnsDirective, GridComponent } from '@syncfusion/ej2-react-grids';
@@ -93,7 +83,7 @@ export default App;
 
 ## Supported frameworks
 
-Grid component is also offered in following list of frameworks.
+Grid component is also offered in the following list of frameworks.
 
 | [<img src="https://ej2.syncfusion.com/github/images/js.svg" height="50" />](https://www.syncfusion.com/javascript-ui-controls?utm_medium=listing&utm_source=github)<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[JavaScript](https://www.syncfusion.com/javascript-ui-controls?utm_medium=listing&utm_source=github)&nbsp;&nbsp;&nbsp;&nbsp; | [<img src="https://ej2.syncfusion.com/github/images/angular.svg"  height="50" />](https://www.syncfusion.com/angular-components/?utm_medium=listing&utm_source=github)<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[Angular](https://www.syncfusion.com/angular-components/?utm_medium=listing&utm_source=github)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; | [<img src="https://ej2.syncfusion.com/github/images/vue.svg" height="50" />](https://www.syncfusion.com/vue-ui-components?utm_medium=listing&utm_source=github)<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[Vue](https://www.syncfusion.com/vue-ui-components?utm_medium=listing&utm_source=github)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; | [<img src="https://ej2.syncfusion.com/github/images/netcore.svg" height="50" />](https://www.syncfusion.com/aspnet-core-ui-controls?utm_medium=listing&utm_source=github)<br/>&nbsp;&nbsp;[ASP.NET&nbsp;Core](https://www.syncfusion.com/aspnet-core-ui-controls?utm_medium=listing&utm_source=github)&nbsp;&nbsp; | [<img src="https://ej2.syncfusion.com/github/images/netmvc.svg" height="50" />](https://www.syncfusion.com/aspnet-mvc-ui-controls?utm_medium=listing&utm_source=github)<br/>&nbsp;&nbsp;[ASP.NET&nbsp;MVC](https://www.syncfusion.com/aspnet-mvc-ui-controls?utm_medium=listing&utm_source=github)&nbsp;&nbsp; | 
 | :-----: | :-----: | :-----: | :-----: | :-----: |
@@ -104,31 +94,35 @@ Grid component is also offered in following list of frameworks.
 
 ## Key features
 
-* [Data sources](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-grid-npm#/material/grid/local-binding) - Bind the Grid component with an array of JSON objects or DataManager.
-* [Sorting and grouping](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-grid-npm#/material/grid/grouping) - Supports n levels of sorting and grouping.
-* [Filtering](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-grid-npm#/material/grid/filtering) - Offers filter UI such as filter bar, menu, excel and checkbox at each column to filter data.
-* [Paging](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-grid-npm#/material/grid/paging) - Provides the option to easily switch between pages using the pager bar.
-* [Editing](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_campaign=grid#/material/grid/normaledit) - provides the options for create, read, update, and delete operations.
-* Columns - The column definitions are used as the dataSource schema in the Grid. This plays a vital role in rendering column values in the required format.
-  * [Reordering](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-grid-npm#/material/grid/reorder) - Allows you to drag any column and drop it at any position in the Grid’s column header row, allowing columns to be repositioned.
-  * [Column chooser](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-grid-npm#/material/grid/column-chooser) - The column chooser provides a list of column names paired with check boxes that allow the visibility to be toggled on the fly.
-  * [Resizing](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-grid-npm#/material/grid/column-resizing) - Resizing allows changing column width on the fly by simply dragging the right corner of the column header.
-  * [Freeze](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-grid-npm#/material/grid/frozen-rows) - Columns and rows can be frozen to allow scrolling and comparing cell values.
-  * [Cell spanning](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-grid-npm#/material/grid/column-spanning) - Grid cells can be spanned based on the preferred criteria.
-  * [Foreign data source](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-grid-npm#/material/grid/foreign-key) - This provides the option to show values from external or lookup data sources in a column based on foreign key/value mapping.
-  * [Cell styling](https://ej2.syncfusion.com/react/documentation/grid/how-to/?utm_source=npm&utm_medium=listing&utm_campaign=react-grid-npm#customize-column-styles) - Grid cell styles can be customized either by using CSS or programmatically.
-* [Selection](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-grid-npm#/material/grid/selection) - Rows or cells can be selected in the grid. One or more rows or cells can also be selected by holding Ctrl or Command, or programmatically.
-* [Templates](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-grid-npm#/material/grid/column-template) - Templates can be used to create custom user experiences in the grid.
-* [Aggregation](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-grid-npm#/material/grid/aggregate-default) - Provides the option to easily visualized the Aggregates for column values.
-* [Context menu](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-grid-npm#/material/grid/context-menu) -The context menu provides a list of actions to be performed in the grid. It appears when a cell, header, or the pager is right-clicked.
-* [Clipboard](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-grid-npm#/material/grid/clipboard) - Selected rows and cells can be copied from the grid
-* [Export](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-grid-npm#/material/grid/default-exporting) - Provides the options to Export the grid data to Excel, PDF, and CSV formats.
-* [RTL support](https://ej2.syncfusion.com/react/documentation/grid/global-local/?utm_source=npm&utm_medium=listing&utm_campaign=react-grid-npm#right-to-left---rtl) - Provides a full-fledged right-to-left mode which aligns content in the Grid component from right to left.
-* [Localization](https://ej2.syncfusion.com/react/documentation/grid/global-local/?utm_source=npm&utm_medium=listing&utm_campaign=react-grid-npm#localization)) - Provides inherent support to localize the UI.
+* [Data sources](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-grid-npm#/material/grid/local-binding): Bind data seamlessly with various local and remote data sources such as JSON, OData, WCF, and RESTful web services with the help of [DataManager](https://ej2.syncfusion.com/react/documentation/data/data-binding/?utm_source=npm&utm_medium=listing&utm_campaign=react-grid-npm).
+* [High performance](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-grid-npm#/material/grid/virtualization): Well thought out efforts, and focuses mainly on fast paced performance to load millions of records. Grid renders only the rows within the viewport, and loads additional data as the user scrolls vertically.
+* [Adaptive UI layout](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-grid-npm#/material/grid/adaptive-layout): UI is customized and redesigned for great views and usability on small screens. Filter, sort, search, and edit dialogs adaptive to the screen size and render row elements in a vertical direction.
+* [Sorting and grouping](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-grid-npm#/material/grid/grouping): Supporting N level of sorting and grouping can be useful for more complex data sets that have a deeper hierarchical structure or that need to be organized and analyzed in more detailed ways.
+* [Aggregation](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-grid-npm#/material/grid/aggregate-default): Easily visualize the aggregates for column values by calculating and displaying summary statistics such as sums, averages, counts, etc. By default, the aggregate value can be displayed in the footer, group footer, or group caption of the grid.
+* [Filtering](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-grid-npm#/material/grid/filtering): The filter UIs, including the filter bar, menu, excel, and checkbox, are available at each column to filter data.
+* [Paging](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-grid-npm#/material/grid/paging): Paging is used to view a segment of data from the assigned data source. It requests data on-demand when navigating to another page also allows to change the page size on the fly by using the page size dropdown in the pager. 
+* [Editing](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-grid-npm#/material/grid/normaledit): Grid supports create, read, update, and delete operations (CRUD). Also provides various edit modes such as inline, dialog, and batch edit (cell editing).
+* [Selection](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-grid-npm#/material/grid/selection): Select rows or cells either by using checkbox or by simply clicking them. Select more than one row or cell by holding Ctrl or Shift or Command, or simply dragging the pointer over the cells, or programmatically.
+* [Hierarchical binding](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-grid-npm#/material/grid/hierarchy): Allows you to display table data in a hierarchical structure, allowing you to visualize the relationships between parent and child records in a clear and organized way.
+* [Templates](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-grid-npm#/material/grid/column-template): Using templates, users can create custom UI. It provides various template options to create custom headers, custom cell contents, custom rows, detail rows, toolbars, and custom editors for edit action.
+* [Row drag and drop](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-grid-npm#/material/grid/row-drag-and-drop.html): The Grid rows can be reordered while drag and drop the rows within the grid. Also allows to drop the dragged rows another Grid or custom component.
+* Columns: The column definitions are used as the dataSource schema in the Grid. This plays a vital role in rendering column values in the required format.
+  * [Reordering](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-grid-npm#/material/grid/reorder): Allows you to rearrange the columns in the grid by dragging and dropping them to a new position in the column header row.
+  * [Column chooser](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-grid-npm#/material/grid/column-chooser): It provides a list of column names paired with check boxes that allow the visibility to be toggled on the fly.
+  * [Resizing](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-grid-npm#/material/grid/column-resizing): Resizing allows changing column width on the fly by simply dragging the right corner of the column header.
+  * [Frozen rows and columns](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-grid-npm#/material/grid/frozen-rows): Provides the ability to freeze columns and rows to allow for easy scrolling and comparison of cell values. It also offers the option to freeze columns on either the left or right side, or on both sides, of the grid.
+  * [Cell spanning](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-grid-npm#/material/grid/column-spanning): Grid cells can be spanned across multiple columns or rows in a grid layout to create a larger cell that takes up more space in the grid.
+  * [Foreign key column binding](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-grid-npm#/material/grid/foreign-key): A column can display values from external or lookup data sources using foreign key/value mapping.
+* [Context menu](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-grid-npm#/material/grid/context-menu): The context menu provides a list of actions to be performed in the grid. It appears when a grid cell, header, or the pager is right-clicked.
+* [Clipboard](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-grid-npm#/material/grid/clipboard): Selected rows and cells can be copied from the grid without header using Ctrl + C or with header using Ctrl + Shift + H shortcut. This allows you to easily transfer data from the grid to other applications or documents as needed.
+* [Export to Excel and PDF](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-grid-npm#/material/grid/default-exporting): Provides the options to Export the grid data to Excel, PDF, and CSV formats.
+* [RTL support](https://ej2.syncfusion.com/react/documentation/grid/global-local/?utm_source=npm&utm_medium=listing&utm_campaign=react-grid-npm#right-to-left---rtl): Provides a full-fledged right-to-left mode which aligns content in the Grid component from right to left.
+* [Accessibility](https://ej2.syncfusion.com/react/documentation/grid/accessibility/?utm_source=npm&utm_medium=listing&utm_campaign=react-grid-npm#wai-aria): Designed to be accessible to users with disabilities, with features such as WAI-ARIA standard compliance and keyboard navigation to ensure that the grid can be effectively used with assistive technologies such as screen readers.
+* [Localization](https://ej2.syncfusion.com/react/documentation/grid/global-local/?utm_source=npm&utm_medium=listing&utm_campaign=react-grid-npm#localization): The Localization library enables you to adapt the default text content of the grid to fit the language and cultural preferences of your target audience.
 
 ## Support
 
-Product support is available through following mediums.
+Product support is available through the following mediums.
 
 * [Support ticket](https://support.syncfusion.com/support/tickets/create) - Guaranteed Response in 24 hours | Unlimited tickets | Holiday support
 * [Community forum](https://www.syncfusion.com/forums/react-js2?utm_source=npm&utm_medium=listing&utm_campaign=react-grid-npm)
@@ -142,10 +136,10 @@ Check the changelog [here](https://github.com/syncfusion/ej2-react-ui-components
 
 ## License and copyright
 
-> This is a commercial product and requires a paid license for possession or use. Syncfusion’s licensed software, including this component, is subject to the terms and conditions of Syncfusion's [EULA](https://www.syncfusion.com/eula/es/). To acquire a license for 80+ [React UI controls](https://www.syncfusion.com/react-components), you can [purchase](https://www.syncfusion.com/sales/products) or [start a free 30-day trial](https://www.syncfusion.com/account/manage-trials/start-trials).
+> This is a commercial product and requires a paid license for possession or use. Syncfusion’s licensed software, including this component, is subject to the terms and conditions of Syncfusion's [EULA](https://www.syncfusion.com/eula/es/). To acquire a license for 80+ [React UI components](https://www.syncfusion.com/react-components), you can [purchase](https://www.syncfusion.com/sales/products) or [start a free 30-day trial](https://www.syncfusion.com/account/manage-trials/start-trials).
 
 > A free community [license](https://www.syncfusion.com/products/communitylicense) is also available for companies and individuals whose organizations have less than $1 million USD in annual gross revenue and five or fewer developers.
 
 See [LICENSE FILE](https://github.com/syncfusion/ej2-react-ui-components/blob/master/license?utm_source=npm&utm_medium=listing&utm_campaign=react-grid-npm) for more info.
 
-© Copyright 2022 Syncfusion, Inc. All Rights Reserved. The Syncfusion Essential Studio license and copyright applies to this distribution.
+© Copyright 2022 Syncfusion, Inc. All Rights Reserved. The Syncfusion Essential Studio license and copyright applies to this distribution.

package/diConfig.json

@@ -538,6 +538,7 @@
             "baseClass": "Pager",
             "directoryName": "pager",
             "type": "simple",
+            "twoWays": ["currentPage", "pageSize", "pageCount", "pageSizes"],
             "comment": [
                 "/**",
                 " * `ejs-pager` represents the Angular Pager Component.",

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

@@ -1,6 +1,6 @@
 /*!
 *  filename: ej2-react-grids.min.js
-*  version : 20.3.61
+*  version : 20.4.38
 *  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 : 20.3.61
+*  version : 20.4.38
 *  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@20.3.60",
+  "_id": "@syncfusion/ej2-react-grids@1.138.21",
   "_inBundle": false,
-  "_integrity": "sha512-0AqypOoEm+fabJHnZ4sWnJv99DIJfymkBWES9V8nKWgtERJF/rqy6DfnZuB15+qXueu0dQCytmlGL5fC6XkY9g==",
+  "_integrity": "sha512-awslV6BtEnFBwwKgbt6SjAbIqWx+NxUmDGpLCShUBFiBu/Amyzc4uHYjZLyGkRRe7BktH9FHY75VCpWel+DuuQ==",
   "_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-20.3.60.tgz",
-  "_shasum": "de8e2f8af5af4eba04f8e7d7e6a5905b9c87d766",
+  "_resolved": "https://nexus.syncfusion.com/repository/ej2-release/@syncfusion/ej2-react-grids/-/ej2-react-grids-1.138.21.tgz",
+  "_shasum": "6aa115c1ff05e610b501498756b22dbd593ec9c7",
   "_spec": "@syncfusion/ej2-react-grids@*",
   "_where": "/jenkins/workspace/ease-automation_release_19.1.0.1/packages/included",
   "author": {
@@ -31,9 +31,9 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~20.3.56",
-    "@syncfusion/ej2-grids": "20.3.61",
-    "@syncfusion/ej2-react-base": "~20.3.56"
+    "@syncfusion/ej2-base": "~20.4.38",
+    "@syncfusion/ej2-grids": "20.4.38",
+    "@syncfusion/ej2-react-base": "~20.4.38"
   },
   "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",
@@ -65,6 +65,6 @@
     "type": "git",
     "url": "git+https://github.com/syncfusion/ej2-react-ui-components.git"
   },
-  "version": "20.3.61",
+  "version": "20.4.38",
   "sideEffects": false
 }

package/styles/bootstrap-dark.css

@@ -3503,7 +3503,6 @@ li.e-separator.e-menu-item.e-excel-separator {
 .e-grid.sf-grid .e-frozencontent {
   border-bottom-style: solid;
   height: inherit;
-  overflow: hidden;
 }
 .e-grid.sf-grid .e-gridcontent .e-content,
 .e-grid.sf-grid .e-gridcontent .e-content .e-movablecontent {

package/styles/bootstrap.css

@@ -3504,7 +3504,6 @@ li.e-separator.e-menu-item.e-excel-separator {
 .e-grid.sf-grid .e-frozencontent {
   border-bottom-style: solid;
   height: inherit;
-  overflow: hidden;
 }
 .e-grid.sf-grid .e-gridcontent .e-content,
 .e-grid.sf-grid .e-gridcontent .e-content .e-movablecontent {

package/styles/bootstrap4.css

@@ -1617,6 +1617,9 @@ li.e-separator.e-menu-item.e-excel-separator {
 .e-grid .e-res-toolbar .e-toolbar-items .e-tbar-btn:hover, .e-grid .e-res-toolbar .e-toolbar-items .e-tbar-btn:active, .e-grid .e-res-toolbar .e-toolbar-items .e-tbar-btn:focus, .e-grid .e-res-toolbar .e-toolbar-items .e-search-icon:hover, .e-grid .e-res-toolbar .e-toolbar-items .e-search-icon:active, .e-grid .e-res-toolbar .e-toolbar-items .e-search-icon:focus, .e-grid .e-res-toolbar .e-toolbar-items .e-sicon.e-clear-icon:hover, .e-grid .e-res-toolbar .e-toolbar-items .e-sicon.e-clear-icon:active, .e-grid .e-res-toolbar .e-toolbar-items .e-sicon.e-clear-icon:focus {
   background: none;
 }
+.e-grid .e-res-toolbar .e-toolbar-items .e-tbar-btn:hover .e-icons, .e-grid .e-res-toolbar .e-toolbar-items .e-tbar-btn:active .e-icons, .e-grid .e-res-toolbar .e-toolbar-items .e-tbar-btn:focus .e-icons, .e-grid .e-res-toolbar .e-toolbar-items .e-search-icon:hover .e-icons, .e-grid .e-res-toolbar .e-toolbar-items .e-search-icon:active .e-icons, .e-grid .e-res-toolbar .e-toolbar-items .e-search-icon:focus .e-icons, .e-grid .e-res-toolbar .e-toolbar-items .e-sicon.e-clear-icon:hover .e-icons, .e-grid .e-res-toolbar .e-toolbar-items .e-sicon.e-clear-icon:active .e-icons, .e-grid .e-res-toolbar .e-toolbar-items .e-sicon.e-clear-icon:focus .e-icons {
+  color: #495057;
+}
 .e-grid .e-res-toolbar .e-toolbar-items .e-icons {
   color: #495057;
 }
@@ -3563,7 +3566,6 @@ li.e-separator.e-menu-item.e-excel-separator {
 .e-grid.sf-grid .e-frozencontent {
   border-bottom-style: solid;
   height: inherit;
-  overflow: hidden;
 }
 .e-grid.sf-grid .e-gridcontent .e-content,
 .e-grid.sf-grid .e-gridcontent .e-content .e-movablecontent {
@@ -3738,6 +3740,7 @@ li.e-separator.e-menu-item.e-excel-separator {
 .e-bigger.e-grid.e-row-responsive .e-toolbar .e-tbar-btn:active .e-icons,
 .e-bigger.e-grid.e-row-responsive .e-toolbar .e-tbar-btn:focus .e-icons {
   padding-bottom: 0;
+  color: #495057;
 }
 .e-bigger .e-grid.e-row-responsive .e-toolbar .e-search-icon,
 .e-bigger.e-grid.e-row-responsive .e-toolbar .e-search-icon {

package/styles/bootstrap5-dark.css

@@ -1623,6 +1623,9 @@ li.e-separator.e-menu-item.e-excel-separator {
 .e-grid .e-res-toolbar .e-toolbar-items .e-tbar-btn:hover, .e-grid .e-res-toolbar .e-toolbar-items .e-tbar-btn:active, .e-grid .e-res-toolbar .e-toolbar-items .e-tbar-btn:focus, .e-grid .e-res-toolbar .e-toolbar-items .e-search-icon:hover, .e-grid .e-res-toolbar .e-toolbar-items .e-search-icon:active, .e-grid .e-res-toolbar .e-toolbar-items .e-search-icon:focus, .e-grid .e-res-toolbar .e-toolbar-items .e-sicon.e-clear-icon:hover, .e-grid .e-res-toolbar .e-toolbar-items .e-sicon.e-clear-icon:active, .e-grid .e-res-toolbar .e-toolbar-items .e-sicon.e-clear-icon:focus {
   background: none;
 }
+.e-grid .e-res-toolbar .e-toolbar-items .e-tbar-btn:hover .e-icons, .e-grid .e-res-toolbar .e-toolbar-items .e-tbar-btn:active .e-icons, .e-grid .e-res-toolbar .e-toolbar-items .e-tbar-btn:focus .e-icons, .e-grid .e-res-toolbar .e-toolbar-items .e-search-icon:hover .e-icons, .e-grid .e-res-toolbar .e-toolbar-items .e-search-icon:active .e-icons, .e-grid .e-res-toolbar .e-toolbar-items .e-search-icon:focus .e-icons, .e-grid .e-res-toolbar .e-toolbar-items .e-sicon.e-clear-icon:hover .e-icons, .e-grid .e-res-toolbar .e-toolbar-items .e-sicon.e-clear-icon:active .e-icons, .e-grid .e-res-toolbar .e-toolbar-items .e-sicon.e-clear-icon:focus .e-icons {
+  color: #adb5bd;
+}
 .e-grid .e-res-toolbar .e-toolbar-items .e-icons {
   color: #adb5bd;
 }
@@ -3567,7 +3570,6 @@ li.e-separator.e-menu-item.e-excel-separator {
 .e-grid.sf-grid .e-frozencontent {
   border-bottom-style: solid;
   height: inherit;
-  overflow: hidden;
 }
 .e-grid.sf-grid .e-gridcontent .e-content,
 .e-grid.sf-grid .e-gridcontent .e-content .e-movablecontent {
@@ -3750,6 +3752,7 @@ li.e-separator.e-menu-item.e-excel-separator {
 .e-bigger.e-grid.e-row-responsive .e-toolbar .e-tbar-btn:active .e-icons,
 .e-bigger.e-grid.e-row-responsive .e-toolbar .e-tbar-btn:focus .e-icons {
   padding-bottom: 4px;
+  color: #adb5bd;
 }
 .e-bigger .e-grid.e-row-responsive .e-toolbar .e-search-icon,
 .e-bigger.e-grid.e-row-responsive .e-toolbar .e-search-icon {

package/styles/bootstrap5.css

@@ -1623,6 +1623,9 @@ li.e-separator.e-menu-item.e-excel-separator {
 .e-grid .e-res-toolbar .e-toolbar-items .e-tbar-btn:hover, .e-grid .e-res-toolbar .e-toolbar-items .e-tbar-btn:active, .e-grid .e-res-toolbar .e-toolbar-items .e-tbar-btn:focus, .e-grid .e-res-toolbar .e-toolbar-items .e-search-icon:hover, .e-grid .e-res-toolbar .e-toolbar-items .e-search-icon:active, .e-grid .e-res-toolbar .e-toolbar-items .e-search-icon:focus, .e-grid .e-res-toolbar .e-toolbar-items .e-sicon.e-clear-icon:hover, .e-grid .e-res-toolbar .e-toolbar-items .e-sicon.e-clear-icon:active, .e-grid .e-res-toolbar .e-toolbar-items .e-sicon.e-clear-icon:focus {
   background: none;
 }
+.e-grid .e-res-toolbar .e-toolbar-items .e-tbar-btn:hover .e-icons, .e-grid .e-res-toolbar .e-toolbar-items .e-tbar-btn:active .e-icons, .e-grid .e-res-toolbar .e-toolbar-items .e-tbar-btn:focus .e-icons, .e-grid .e-res-toolbar .e-toolbar-items .e-search-icon:hover .e-icons, .e-grid .e-res-toolbar .e-toolbar-items .e-search-icon:active .e-icons, .e-grid .e-res-toolbar .e-toolbar-items .e-search-icon:focus .e-icons, .e-grid .e-res-toolbar .e-toolbar-items .e-sicon.e-clear-icon:hover .e-icons, .e-grid .e-res-toolbar .e-toolbar-items .e-sicon.e-clear-icon:active .e-icons, .e-grid .e-res-toolbar .e-toolbar-items .e-sicon.e-clear-icon:focus .e-icons {
+  color: #6c757d;
+}
 .e-grid .e-res-toolbar .e-toolbar-items .e-icons {
   color: #6c757d;
 }
@@ -3567,7 +3570,6 @@ li.e-separator.e-menu-item.e-excel-separator {
 .e-grid.sf-grid .e-frozencontent {
   border-bottom-style: solid;
   height: inherit;
-  overflow: hidden;
 }
 .e-grid.sf-grid .e-gridcontent .e-content,
 .e-grid.sf-grid .e-gridcontent .e-content .e-movablecontent {
@@ -3750,6 +3752,7 @@ li.e-separator.e-menu-item.e-excel-separator {
 .e-bigger.e-grid.e-row-responsive .e-toolbar .e-tbar-btn:active .e-icons,
 .e-bigger.e-grid.e-row-responsive .e-toolbar .e-tbar-btn:focus .e-icons {
   padding-bottom: 4px;
+  color: #6c757d;
 }
 .e-bigger .e-grid.e-row-responsive .e-toolbar .e-search-icon,
 .e-bigger.e-grid.e-row-responsive .e-toolbar .e-search-icon {

package/styles/fabric-dark.css

@@ -3477,7 +3477,6 @@ li.e-separator.e-menu-item.e-excel-separator {
 .e-grid.sf-grid .e-frozencontent {
   border-bottom-style: solid;
   height: inherit;
-  overflow: hidden;
 }
 .e-grid.sf-grid .e-gridcontent .e-content,
 .e-grid.sf-grid .e-gridcontent .e-content .e-movablecontent {

package/styles/fabric.css

@@ -3470,7 +3470,6 @@ li.e-separator.e-menu-item.e-excel-separator {
 .e-grid.sf-grid .e-frozencontent {
   border-bottom-style: solid;
   height: inherit;
-  overflow: hidden;
 }
 .e-grid.sf-grid .e-gridcontent .e-content,
 .e-grid.sf-grid .e-gridcontent .e-content .e-movablecontent {

package/styles/fluent-dark.css

@@ -3583,7 +3583,6 @@ li.e-separator.e-menu-item.e-excel-separator {
 .e-grid.sf-grid .e-frozencontent {
   border-bottom-style: solid;
   height: inherit;
-  overflow: hidden;
 }
 .e-grid.sf-grid .e-gridcontent .e-content,
 .e-grid.sf-grid .e-gridcontent .e-content .e-movablecontent {

package/styles/fluent.css

@@ -3583,7 +3583,6 @@ li.e-separator.e-menu-item.e-excel-separator {
 .e-grid.sf-grid .e-frozencontent {
   border-bottom-style: solid;
   height: inherit;
-  overflow: hidden;
 }
 .e-grid.sf-grid .e-gridcontent .e-content,
 .e-grid.sf-grid .e-gridcontent .e-content .e-movablecontent {

package/styles/grid/bootstrap-dark.css

@@ -3091,7 +3091,6 @@
 .e-grid.sf-grid .e-frozencontent {
   border-bottom-style: solid;
   height: inherit;
-  overflow: hidden;
 }
 .e-grid.sf-grid .e-gridcontent .e-content,
 .e-grid.sf-grid .e-gridcontent .e-content .e-movablecontent {

package/styles/grid/bootstrap.css

@@ -3092,7 +3092,6 @@
 .e-grid.sf-grid .e-frozencontent {
   border-bottom-style: solid;
   height: inherit;
-  overflow: hidden;
 }
 .e-grid.sf-grid .e-gridcontent .e-content,
 .e-grid.sf-grid .e-gridcontent .e-content .e-movablecontent {

package/styles/grid/bootstrap4.css

@@ -1194,6 +1194,9 @@
 .e-grid .e-res-toolbar .e-toolbar-items .e-tbar-btn:hover, .e-grid .e-res-toolbar .e-toolbar-items .e-tbar-btn:active, .e-grid .e-res-toolbar .e-toolbar-items .e-tbar-btn:focus, .e-grid .e-res-toolbar .e-toolbar-items .e-search-icon:hover, .e-grid .e-res-toolbar .e-toolbar-items .e-search-icon:active, .e-grid .e-res-toolbar .e-toolbar-items .e-search-icon:focus, .e-grid .e-res-toolbar .e-toolbar-items .e-sicon.e-clear-icon:hover, .e-grid .e-res-toolbar .e-toolbar-items .e-sicon.e-clear-icon:active, .e-grid .e-res-toolbar .e-toolbar-items .e-sicon.e-clear-icon:focus {
   background: none;
 }
+.e-grid .e-res-toolbar .e-toolbar-items .e-tbar-btn:hover .e-icons, .e-grid .e-res-toolbar .e-toolbar-items .e-tbar-btn:active .e-icons, .e-grid .e-res-toolbar .e-toolbar-items .e-tbar-btn:focus .e-icons, .e-grid .e-res-toolbar .e-toolbar-items .e-search-icon:hover .e-icons, .e-grid .e-res-toolbar .e-toolbar-items .e-search-icon:active .e-icons, .e-grid .e-res-toolbar .e-toolbar-items .e-search-icon:focus .e-icons, .e-grid .e-res-toolbar .e-toolbar-items .e-sicon.e-clear-icon:hover .e-icons, .e-grid .e-res-toolbar .e-toolbar-items .e-sicon.e-clear-icon:active .e-icons, .e-grid .e-res-toolbar .e-toolbar-items .e-sicon.e-clear-icon:focus .e-icons {
+  color: #495057;
+}
 .e-grid .e-res-toolbar .e-toolbar-items .e-icons {
   color: #495057;
 }
@@ -3140,7 +3143,6 @@
 .e-grid.sf-grid .e-frozencontent {
   border-bottom-style: solid;
   height: inherit;
-  overflow: hidden;
 }
 .e-grid.sf-grid .e-gridcontent .e-content,
 .e-grid.sf-grid .e-gridcontent .e-content .e-movablecontent {
@@ -3315,6 +3317,7 @@
 .e-bigger.e-grid.e-row-responsive .e-toolbar .e-tbar-btn:active .e-icons,
 .e-bigger.e-grid.e-row-responsive .e-toolbar .e-tbar-btn:focus .e-icons {
   padding-bottom: 0;
+  color: #495057;
 }
 .e-bigger .e-grid.e-row-responsive .e-toolbar .e-search-icon,
 .e-bigger.e-grid.e-row-responsive .e-toolbar .e-search-icon {

package/styles/grid/bootstrap5-dark.css

@@ -1208,6 +1208,9 @@
 .e-grid .e-res-toolbar .e-toolbar-items .e-tbar-btn:hover, .e-grid .e-res-toolbar .e-toolbar-items .e-tbar-btn:active, .e-grid .e-res-toolbar .e-toolbar-items .e-tbar-btn:focus, .e-grid .e-res-toolbar .e-toolbar-items .e-search-icon:hover, .e-grid .e-res-toolbar .e-toolbar-items .e-search-icon:active, .e-grid .e-res-toolbar .e-toolbar-items .e-search-icon:focus, .e-grid .e-res-toolbar .e-toolbar-items .e-sicon.e-clear-icon:hover, .e-grid .e-res-toolbar .e-toolbar-items .e-sicon.e-clear-icon:active, .e-grid .e-res-toolbar .e-toolbar-items .e-sicon.e-clear-icon:focus {
   background: none;
 }
+.e-grid .e-res-toolbar .e-toolbar-items .e-tbar-btn:hover .e-icons, .e-grid .e-res-toolbar .e-toolbar-items .e-tbar-btn:active .e-icons, .e-grid .e-res-toolbar .e-toolbar-items .e-tbar-btn:focus .e-icons, .e-grid .e-res-toolbar .e-toolbar-items .e-search-icon:hover .e-icons, .e-grid .e-res-toolbar .e-toolbar-items .e-search-icon:active .e-icons, .e-grid .e-res-toolbar .e-toolbar-items .e-search-icon:focus .e-icons, .e-grid .e-res-toolbar .e-toolbar-items .e-sicon.e-clear-icon:hover .e-icons, .e-grid .e-res-toolbar .e-toolbar-items .e-sicon.e-clear-icon:active .e-icons, .e-grid .e-res-toolbar .e-toolbar-items .e-sicon.e-clear-icon:focus .e-icons {
+  color: #adb5bd;
+}
 .e-grid .e-res-toolbar .e-toolbar-items .e-icons {
   color: #adb5bd;
 }
@@ -3152,7 +3155,6 @@
 .e-grid.sf-grid .e-frozencontent {
   border-bottom-style: solid;
   height: inherit;
-  overflow: hidden;
 }
 .e-grid.sf-grid .e-gridcontent .e-content,
 .e-grid.sf-grid .e-gridcontent .e-content .e-movablecontent {
@@ -3335,6 +3337,7 @@
 .e-bigger.e-grid.e-row-responsive .e-toolbar .e-tbar-btn:active .e-icons,
 .e-bigger.e-grid.e-row-responsive .e-toolbar .e-tbar-btn:focus .e-icons {
   padding-bottom: 4px;
+  color: #adb5bd;
 }
 .e-bigger .e-grid.e-row-responsive .e-toolbar .e-search-icon,
 .e-bigger.e-grid.e-row-responsive .e-toolbar .e-search-icon {

package/styles/grid/bootstrap5.css

@@ -1208,6 +1208,9 @@
 .e-grid .e-res-toolbar .e-toolbar-items .e-tbar-btn:hover, .e-grid .e-res-toolbar .e-toolbar-items .e-tbar-btn:active, .e-grid .e-res-toolbar .e-toolbar-items .e-tbar-btn:focus, .e-grid .e-res-toolbar .e-toolbar-items .e-search-icon:hover, .e-grid .e-res-toolbar .e-toolbar-items .e-search-icon:active, .e-grid .e-res-toolbar .e-toolbar-items .e-search-icon:focus, .e-grid .e-res-toolbar .e-toolbar-items .e-sicon.e-clear-icon:hover, .e-grid .e-res-toolbar .e-toolbar-items .e-sicon.e-clear-icon:active, .e-grid .e-res-toolbar .e-toolbar-items .e-sicon.e-clear-icon:focus {
   background: none;
 }
+.e-grid .e-res-toolbar .e-toolbar-items .e-tbar-btn:hover .e-icons, .e-grid .e-res-toolbar .e-toolbar-items .e-tbar-btn:active .e-icons, .e-grid .e-res-toolbar .e-toolbar-items .e-tbar-btn:focus .e-icons, .e-grid .e-res-toolbar .e-toolbar-items .e-search-icon:hover .e-icons, .e-grid .e-res-toolbar .e-toolbar-items .e-search-icon:active .e-icons, .e-grid .e-res-toolbar .e-toolbar-items .e-search-icon:focus .e-icons, .e-grid .e-res-toolbar .e-toolbar-items .e-sicon.e-clear-icon:hover .e-icons, .e-grid .e-res-toolbar .e-toolbar-items .e-sicon.e-clear-icon:active .e-icons, .e-grid .e-res-toolbar .e-toolbar-items .e-sicon.e-clear-icon:focus .e-icons {
+  color: #6c757d;
+}
 .e-grid .e-res-toolbar .e-toolbar-items .e-icons {
   color: #6c757d;
 }
@@ -3152,7 +3155,6 @@
 .e-grid.sf-grid .e-frozencontent {
   border-bottom-style: solid;
   height: inherit;
-  overflow: hidden;
 }
 .e-grid.sf-grid .e-gridcontent .e-content,
 .e-grid.sf-grid .e-gridcontent .e-content .e-movablecontent {
@@ -3335,6 +3337,7 @@
 .e-bigger.e-grid.e-row-responsive .e-toolbar .e-tbar-btn:active .e-icons,
 .e-bigger.e-grid.e-row-responsive .e-toolbar .e-tbar-btn:focus .e-icons {
   padding-bottom: 4px;
+  color: #6c757d;
 }
 .e-bigger .e-grid.e-row-responsive .e-toolbar .e-search-icon,
 .e-bigger.e-grid.e-row-responsive .e-toolbar .e-search-icon {

package/styles/grid/fabric-dark.css

@@ -3065,7 +3065,6 @@
 .e-grid.sf-grid .e-frozencontent {
   border-bottom-style: solid;
   height: inherit;
-  overflow: hidden;
 }
 .e-grid.sf-grid .e-gridcontent .e-content,
 .e-grid.sf-grid .e-gridcontent .e-content .e-movablecontent {

package/styles/grid/fabric.css

@@ -3058,7 +3058,6 @@
 .e-grid.sf-grid .e-frozencontent {
   border-bottom-style: solid;
   height: inherit;
-  overflow: hidden;
 }
 .e-grid.sf-grid .e-gridcontent .e-content,
 .e-grid.sf-grid .e-gridcontent .e-content .e-movablecontent {

package/styles/grid/fluent-dark.css

@@ -3168,7 +3168,6 @@
 .e-grid.sf-grid .e-frozencontent {
   border-bottom-style: solid;
   height: inherit;
-  overflow: hidden;
 }
 .e-grid.sf-grid .e-gridcontent .e-content,
 .e-grid.sf-grid .e-gridcontent .e-content .e-movablecontent {

package/styles/grid/fluent.css

@@ -3168,7 +3168,6 @@
 .e-grid.sf-grid .e-frozencontent {
   border-bottom-style: solid;
   height: inherit;
-  overflow: hidden;
 }
 .e-grid.sf-grid .e-gridcontent .e-content,
 .e-grid.sf-grid .e-gridcontent .e-content .e-movablecontent {

package/styles/grid/highcontrast-light.css

@@ -3062,7 +3062,6 @@
 .e-grid.sf-grid .e-frozencontent {
   border-bottom-style: solid;
   height: inherit;
-  overflow: hidden;
 }
 .e-grid.sf-grid .e-gridcontent .e-content,
 .e-grid.sf-grid .e-gridcontent .e-content .e-movablecontent {

package/styles/grid/highcontrast.css

@@ -3062,7 +3062,6 @@
 .e-grid.sf-grid .e-frozencontent {
   border-bottom-style: solid;
   height: inherit;
-  overflow: hidden;
 }
 .e-grid.sf-grid .e-gridcontent .e-content,
 .e-grid.sf-grid .e-gridcontent .e-content .e-movablecontent {

package/styles/grid/material-dark.css

@@ -3106,7 +3106,6 @@
 .e-grid.sf-grid .e-frozencontent {
   border-bottom-style: solid;
   height: inherit;
-  overflow: hidden;
 }
 .e-grid.sf-grid .e-gridcontent .e-content,
 .e-grid.sf-grid .e-gridcontent .e-content .e-movablecontent {

package/styles/grid/material.css

@@ -3140,7 +3140,6 @@
 .e-grid.sf-grid .e-frozencontent {
   border-bottom-style: solid;
   height: inherit;
-  overflow: hidden;
 }
 .e-grid.sf-grid .e-gridcontent .e-content,
 .e-grid.sf-grid .e-gridcontent .e-content .e-movablecontent {

package/styles/grid/tailwind-dark.css

@@ -3176,7 +3176,6 @@
 .e-grid.sf-grid .e-frozencontent {
   border-bottom-style: solid;
   height: inherit;
-  overflow: hidden;
 }
 .e-grid.sf-grid .e-gridcontent .e-content,
 .e-grid.sf-grid .e-gridcontent .e-content .e-movablecontent {

package/styles/grid/tailwind.css

@@ -3176,7 +3176,6 @@
 .e-grid.sf-grid .e-frozencontent {
   border-bottom-style: solid;
   height: inherit;
-  overflow: hidden;
 }
 .e-grid.sf-grid .e-gridcontent .e-content,
 .e-grid.sf-grid .e-gridcontent .e-content .e-movablecontent {

package/styles/highcontrast-light.css

@@ -3474,7 +3474,6 @@ li.e-separator.e-menu-item.e-excel-separator {
 .e-grid.sf-grid .e-frozencontent {
   border-bottom-style: solid;
   height: inherit;
-  overflow: hidden;
 }
 .e-grid.sf-grid .e-gridcontent .e-content,
 .e-grid.sf-grid .e-gridcontent .e-content .e-movablecontent {

package/styles/highcontrast.css

@@ -3474,7 +3474,6 @@ li.e-separator.e-menu-item.e-excel-separator {
 .e-grid.sf-grid .e-frozencontent {
   border-bottom-style: solid;
   height: inherit;
-  overflow: hidden;
 }
 .e-grid.sf-grid .e-gridcontent .e-content,
 .e-grid.sf-grid .e-gridcontent .e-content .e-movablecontent {

package/styles/material-dark.css

@@ -3524,7 +3524,6 @@ li.e-separator.e-menu-item.e-excel-separator {
 .e-grid.sf-grid .e-frozencontent {
   border-bottom-style: solid;
   height: inherit;
-  overflow: hidden;
 }
 .e-grid.sf-grid .e-gridcontent .e-content,
 .e-grid.sf-grid .e-gridcontent .e-content .e-movablecontent {

package/styles/material.css

@@ -3566,7 +3566,6 @@ li.e-separator.e-menu-item.e-excel-separator {
 .e-grid.sf-grid .e-frozencontent {
   border-bottom-style: solid;
   height: inherit;
-  overflow: hidden;
 }
 .e-grid.sf-grid .e-gridcontent .e-content,
 .e-grid.sf-grid .e-gridcontent .e-content .e-movablecontent {

package/styles/tailwind-dark.css

@@ -3592,7 +3592,6 @@ li.e-separator.e-menu-item.e-excel-separator {
 .e-grid.sf-grid .e-frozencontent {
   border-bottom-style: solid;
   height: inherit;
-  overflow: hidden;
 }
 .e-grid.sf-grid .e-gridcontent .e-content,
 .e-grid.sf-grid .e-gridcontent .e-content .e-movablecontent {

package/styles/tailwind.css

@@ -3592,7 +3592,6 @@ li.e-separator.e-menu-item.e-excel-separator {
 .e-grid.sf-grid .e-frozencontent {
   border-bottom-style: solid;
   height: inherit;
-  overflow: hidden;
 }
 .e-grid.sf-grid .e-gridcontent .e-content,
 .e-grid.sf-grid .e-gridcontent .e-content .e-movablecontent {