diff --git a/apps/demos/Demos/DataGrid/AdvancedMasterDetailView/Angular/app/app.component.html b/apps/demos/Demos/DataGrid/AdvancedMasterDetailView/Angular/app/app.component.html
index 1ba99e52261e..1a8259bc4d84 100644
--- a/apps/demos/Demos/DataGrid/AdvancedMasterDetailView/Angular/app/app.component.html
+++ b/apps/demos/Demos/DataGrid/AdvancedMasterDetailView/Angular/app/app.component.html
@@ -5,6 +5,7 @@
   [showBorders]="true"
 >
   <dxo-paging [pageSize]="15"></dxo-paging>
+  <dxo-pager [visible]="true"></dxo-pager>
   <dxi-column dataField="ContactName"></dxi-column>
   <dxi-column dataField="ContactTitle"></dxi-column>
   <dxi-column dataField="CompanyName"></dxi-column>
diff --git a/apps/demos/Demos/DataGrid/AdvancedMasterDetailView/React/App.tsx b/apps/demos/Demos/DataGrid/AdvancedMasterDetailView/React/App.tsx
index acdeb083a308..9c9fc208a934 100644
--- a/apps/demos/Demos/DataGrid/AdvancedMasterDetailView/React/App.tsx
+++ b/apps/demos/Demos/DataGrid/AdvancedMasterDetailView/React/App.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 
 import {
-  Column, DataGrid, MasterDetail, Paging,
+  Column, DataGrid, MasterDetail, Paging, Pager,
 } from 'devextreme-react/data-grid';
 import { createStore } from 'devextreme-aspnet-data-nojquery';
 import MasterDetailView from './MasterDetailView.tsx';
@@ -25,6 +25,7 @@ const App = () => (
       component={MasterDetailView}
     />
     <Paging defaultPageSize={15} />
+    <Pager visible={true} />
 
     <Column dataField="ContactName" />
     <Column dataField="ContactTitle" />
diff --git a/apps/demos/Demos/DataGrid/AdvancedMasterDetailView/ReactJs/App.js b/apps/demos/Demos/DataGrid/AdvancedMasterDetailView/ReactJs/App.js
index 5c6f56658210..847738e0210e 100644
--- a/apps/demos/Demos/DataGrid/AdvancedMasterDetailView/ReactJs/App.js
+++ b/apps/demos/Demos/DataGrid/AdvancedMasterDetailView/ReactJs/App.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import {
-  Column, DataGrid, MasterDetail, Paging,
+  Column, DataGrid, MasterDetail, Paging, Pager,
 } from 'devextreme-react/data-grid';
 import { createStore } from 'devextreme-aspnet-data-nojquery';
 import MasterDetailView from './MasterDetailView.js';
@@ -22,6 +22,7 @@ const App = () => (
       component={MasterDetailView}
     />
     <Paging defaultPageSize={15} />
+    <Pager visible={true} />
 
     <Column dataField="ContactName" />
     <Column dataField="ContactTitle" />
diff --git a/apps/demos/Demos/DataGrid/AdvancedMasterDetailView/Vue/App.vue b/apps/demos/Demos/DataGrid/AdvancedMasterDetailView/Vue/App.vue
index aab9149fd857..068c45556825 100644
--- a/apps/demos/Demos/DataGrid/AdvancedMasterDetailView/Vue/App.vue
+++ b/apps/demos/Demos/DataGrid/AdvancedMasterDetailView/Vue/App.vue
@@ -6,6 +6,7 @@
     :show-borders="true"
   >
     <DxPaging :page-size="15"/>
+    <DxPager :visible="true"/>
 
     <DxColumn data-field="ContactName"/>
     <DxColumn data-field="ContactTitle"/>
@@ -27,6 +28,7 @@ import {
   DxDataGrid,
   DxColumn,
   DxPaging,
+  DxPager,
   DxMasterDetail,
 } from 'devextreme-vue/data-grid';
 
diff --git a/apps/demos/Demos/DataGrid/AdvancedMasterDetailView/jQuery/index.js b/apps/demos/Demos/DataGrid/AdvancedMasterDetailView/jQuery/index.js
index ff37b921e5c7..080faa506792 100644
--- a/apps/demos/Demos/DataGrid/AdvancedMasterDetailView/jQuery/index.js
+++ b/apps/demos/Demos/DataGrid/AdvancedMasterDetailView/jQuery/index.js
@@ -10,6 +10,9 @@ $(() => {
     paging: {
       pageSize: 15,
     },
+    pager: {
+      visible: true,
+    },
     remoteOperations: true,
     columns: [
       'ContactName',
diff --git a/apps/demos/Demos/DataGrid/BatchUpdateRequest/Angular/app/app.component.html b/apps/demos/Demos/DataGrid/BatchUpdateRequest/Angular/app/app.component.html
index bf6640e52fc2..df6aa57bdf91 100644
--- a/apps/demos/Demos/DataGrid/BatchUpdateRequest/Angular/app/app.component.html
+++ b/apps/demos/Demos/DataGrid/BatchUpdateRequest/Angular/app/app.component.html
@@ -12,7 +12,7 @@
     [allowDeleting]="true"
     [allowUpdating]="true"
   ></dxo-editing>
-
+  <dxo-pager [visible]="true"></dxo-pager>
   <dxi-column dataField="OrderID" [allowEditing]="false"></dxi-column>
   <dxi-column dataField="ShipName"></dxi-column>
   <dxi-column dataField="ShipCountry"></dxi-column>
diff --git a/apps/demos/Demos/DataGrid/BatchUpdateRequest/React/App.tsx b/apps/demos/Demos/DataGrid/BatchUpdateRequest/React/App.tsx
index b48a0e81cca4..c1f16e2f08cb 100644
--- a/apps/demos/Demos/DataGrid/BatchUpdateRequest/React/App.tsx
+++ b/apps/demos/Demos/DataGrid/BatchUpdateRequest/React/App.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import DataGrid, { DataGridRef, Column, DataGridTypes, Editing } from 'devextreme-react/data-grid';
+import DataGrid, { DataGridRef, Column, DataGridTypes, Editing, Pager, } from 'devextreme-react/data-grid';
 import { createStore } from 'devextreme-aspnet-data-nojquery';
 import 'whatwg-fetch';
 
@@ -58,6 +58,7 @@ const App = () => (
       allowDeleting={true}
       allowUpdating={true}
     />
+    <Pager visible={true} />
     <Column dataField="OrderID" allowEditing={false}></Column>
     <Column dataField="ShipName"></Column>
     <Column dataField="ShipCountry"></Column>
diff --git a/apps/demos/Demos/DataGrid/BatchUpdateRequest/ReactJs/App.js b/apps/demos/Demos/DataGrid/BatchUpdateRequest/ReactJs/App.js
index 524f3ff3c10f..d1fe7063121e 100644
--- a/apps/demos/Demos/DataGrid/BatchUpdateRequest/ReactJs/App.js
+++ b/apps/demos/Demos/DataGrid/BatchUpdateRequest/ReactJs/App.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import DataGrid, { Column, Editing } from 'devextreme-react/data-grid';
+import DataGrid, { Column, Editing, Pager } from 'devextreme-react/data-grid';
 import { createStore } from 'devextreme-aspnet-data-nojquery';
 import 'whatwg-fetch';
 
@@ -51,6 +51,7 @@ const App = () => (
       allowDeleting={true}
       allowUpdating={true}
     />
+    <Pager visible={true} />
     <Column
       dataField="OrderID"
       allowEditing={false}
diff --git a/apps/demos/Demos/DataGrid/BatchUpdateRequest/Vue/App.vue b/apps/demos/Demos/DataGrid/BatchUpdateRequest/Vue/App.vue
index 8268b425bf0a..b00055af7a0c 100644
--- a/apps/demos/Demos/DataGrid/BatchUpdateRequest/Vue/App.vue
+++ b/apps/demos/Demos/DataGrid/BatchUpdateRequest/Vue/App.vue
@@ -13,6 +13,7 @@
       :allow-deleting="true"
       :allow-updating="true"
     />
+    <DxPager :visible="true"/>
     <DxColumn
       data-field="OrderID"
       :allow-editing="false"
@@ -30,7 +31,7 @@
 </template>
 <script setup lang="ts">
 import {
-  DxDataGrid, DxColumn, DxEditing, DxDataGridTypes,
+  DxDataGrid, DxColumn, DxEditing, DxDataGridTypes, DxPager,
 } from 'devextreme-vue/data-grid';
 import { createStore } from 'devextreme-aspnet-data-nojquery';
 import 'whatwg-fetch';
diff --git a/apps/demos/Demos/DataGrid/BatchUpdateRequest/jQuery/index.js b/apps/demos/Demos/DataGrid/BatchUpdateRequest/jQuery/index.js
index 3ef365b12f19..d5828036fc6c 100644
--- a/apps/demos/Demos/DataGrid/BatchUpdateRequest/jQuery/index.js
+++ b/apps/demos/Demos/DataGrid/BatchUpdateRequest/jQuery/index.js
@@ -9,6 +9,9 @@ $(() => {
         ajaxOptions.xhrFields = { withCredentials: true };
       },
     }),
+    pager: {
+      visible: true,
+    },
     showBorders: true,
     editing: {
       mode: 'batch',
diff --git a/apps/demos/Demos/DataGrid/CellCustomization/Angular/app/app.component.html b/apps/demos/Demos/DataGrid/CellCustomization/Angular/app/app.component.html
index 111a42275254..f59baf5f801e 100644
--- a/apps/demos/Demos/DataGrid/CellCustomization/Angular/app/app.component.html
+++ b/apps/demos/Demos/DataGrid/CellCustomization/Angular/app/app.component.html
@@ -7,8 +7,8 @@
   [showBorders]="true"
 >
   <dxo-sorting mode="none"></dxo-sorting>
+  <dxo-pager [visible]="true"></dxo-pager>
   <dxo-paging [pageSize]="10"></dxo-paging>
-
   <dxi-column dataField="date" [width]="110" dataType="date"></dxi-column>
   <dxi-column caption="Open" cellTemplate="diffCellTemplate"></dxi-column>
   <dxi-column caption="Close" cellTemplate="diffCellTemplate"></dxi-column>
diff --git a/apps/demos/Demos/DataGrid/CellCustomization/React/App.tsx b/apps/demos/Demos/DataGrid/CellCustomization/React/App.tsx
index 9228538e082c..2d960fe21a9b 100644
--- a/apps/demos/Demos/DataGrid/CellCustomization/React/App.tsx
+++ b/apps/demos/Demos/DataGrid/CellCustomization/React/App.tsx
@@ -3,6 +3,7 @@ import DataGrid, {
   Column,
   Sorting,
   Paging,
+  Pager,
 } from 'devextreme-react/data-grid';
 import { weekData } from './data.ts';
 import DiffCell from './DiffCell.tsx';
@@ -17,6 +18,7 @@ const App = () => (
     showBorders={true}>
     <Sorting mode="none" />
     <Paging defaultPageSize={10} />
+    <Pager visible={true} />
     <Column dataField="date" width={110} dataType="date" />
     <Column caption="Open" cellRender={DiffCell} />
     <Column caption="Close" cellRender={DiffCell} />
diff --git a/apps/demos/Demos/DataGrid/CellCustomization/ReactJs/App.js b/apps/demos/Demos/DataGrid/CellCustomization/ReactJs/App.js
index efc0a8db7d22..c5ca8fe9ab05 100644
--- a/apps/demos/Demos/DataGrid/CellCustomization/ReactJs/App.js
+++ b/apps/demos/Demos/DataGrid/CellCustomization/ReactJs/App.js
@@ -1,5 +1,7 @@
 import React from 'react';
-import DataGrid, { Column, Sorting, Paging } from 'devextreme-react/data-grid';
+import DataGrid, {
+  Column, Sorting, Paging, Pager,
+} from 'devextreme-react/data-grid';
 import { weekData } from './data.js';
 import DiffCell from './DiffCell.js';
 import ChartCell from './ChartCell.js';
@@ -15,6 +17,7 @@ const App = () => (
   >
     <Sorting mode="none" />
     <Paging defaultPageSize={10} />
+    <Pager visible={true} />
     <Column
       dataField="date"
       width={110}
diff --git a/apps/demos/Demos/DataGrid/CellCustomization/Vue/App.vue b/apps/demos/Demos/DataGrid/CellCustomization/Vue/App.vue
index 69cad0d6d90e..fae12cd46804 100644
--- a/apps/demos/Demos/DataGrid/CellCustomization/Vue/App.vue
+++ b/apps/demos/Demos/DataGrid/CellCustomization/Vue/App.vue
@@ -10,6 +10,7 @@
     >
       <DxSorting mode="none"/>
       <DxPaging :page-size="10"/>
+      <DxPager :visible="true"/>
       <DxColumn
         :width="110"
         data-field="date"
@@ -50,7 +51,7 @@
 </template>
 <script setup lang="ts">
 import {
-  DxDataGrid, DxColumn, DxSorting, DxPaging,
+  DxDataGrid, DxColumn, DxSorting, DxPaging, DxPager,
 } from 'devextreme-vue/data-grid';
 
 import DiffCell from './DiffCell.vue';
diff --git a/apps/demos/Demos/DataGrid/CellCustomization/jQuery/index.js b/apps/demos/Demos/DataGrid/CellCustomization/jQuery/index.js
index 358999902f1d..897db61bdfe4 100644
--- a/apps/demos/Demos/DataGrid/CellCustomization/jQuery/index.js
+++ b/apps/demos/Demos/DataGrid/CellCustomization/jQuery/index.js
@@ -11,6 +11,9 @@ $(() => {
     paging: {
       pageSize: 10,
     },
+    pager: {
+      visible: true,
+    },
     onCellPrepared(options) {
       const fieldData = options.value;
       let fieldHtml = '';
diff --git a/apps/demos/Demos/DataGrid/ColumnsBasedOnADataSource/Angular/app/app.component.html b/apps/demos/Demos/DataGrid/ColumnsBasedOnADataSource/Angular/app/app.component.html
index 6d0b811373e3..3bc36fa5fc40 100644
--- a/apps/demos/Demos/DataGrid/ColumnsBasedOnADataSource/Angular/app/app.component.html
+++ b/apps/demos/Demos/DataGrid/ColumnsBasedOnADataSource/Angular/app/app.component.html
@@ -3,4 +3,6 @@
   [dataSource]="orders"
   keyExpr="OrderNumber"
   [showBorders]="true"
-></dx-data-grid>
+>
+  <dxo-pager [visible]="true"></dxo-pager>
+</dx-data-grid>
diff --git a/apps/demos/Demos/DataGrid/ColumnsBasedOnADataSource/React/App.tsx b/apps/demos/Demos/DataGrid/ColumnsBasedOnADataSource/React/App.tsx
index b5a7254ba8f5..00c7cd00f87e 100644
--- a/apps/demos/Demos/DataGrid/ColumnsBasedOnADataSource/React/App.tsx
+++ b/apps/demos/Demos/DataGrid/ColumnsBasedOnADataSource/React/App.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import DataGrid from 'devextreme-react/data-grid';
+import DataGrid, { Pager } from 'devextreme-react/data-grid';
 import { orders } from './data.ts';
 
 const App = () => (
@@ -8,7 +8,9 @@ const App = () => (
     dataSource={orders}
     keyExpr="OrderNumber"
     showBorders={true}
-  />
+  >
+    <Pager visible={true} />
+  </DataGrid>
 );
 
 export default App;
diff --git a/apps/demos/Demos/DataGrid/ColumnsBasedOnADataSource/ReactJs/App.js b/apps/demos/Demos/DataGrid/ColumnsBasedOnADataSource/ReactJs/App.js
index 2abe5053022f..98acb5da3ab9 100644
--- a/apps/demos/Demos/DataGrid/ColumnsBasedOnADataSource/ReactJs/App.js
+++ b/apps/demos/Demos/DataGrid/ColumnsBasedOnADataSource/ReactJs/App.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import DataGrid from 'devextreme-react/data-grid';
+import DataGrid, { Pager } from 'devextreme-react/data-grid';
 import { orders } from './data.js';
 
 const App = () => (
@@ -8,6 +8,8 @@ const App = () => (
     dataSource={orders}
     keyExpr="OrderNumber"
     showBorders={true}
-  />
+  >
+    <Pager visible={true} />
+  </DataGrid>
 );
 export default App;
diff --git a/apps/demos/Demos/DataGrid/ColumnsBasedOnADataSource/Vue/App.vue b/apps/demos/Demos/DataGrid/ColumnsBasedOnADataSource/Vue/App.vue
index 189172e3e0f1..1264dec5d208 100644
--- a/apps/demos/Demos/DataGrid/ColumnsBasedOnADataSource/Vue/App.vue
+++ b/apps/demos/Demos/DataGrid/ColumnsBasedOnADataSource/Vue/App.vue
@@ -4,10 +4,12 @@
     :data-source="orders"
     key-expr="OrderNumber"
     :show-borders="true"
-  />
+  >
+    <DxPager :visible="true"/>
+  </DxDataGrid>
 </template>
 <script setup lang="ts">
-import DxDataGrid from 'devextreme-vue/data-grid';
+import { DxDataGrid, DxPager } from 'devextreme-vue/data-grid';
 import { orders } from './data.ts';
 
 </script>
diff --git a/apps/demos/Demos/DataGrid/ColumnsBasedOnADataSource/jQuery/index.js b/apps/demos/Demos/DataGrid/ColumnsBasedOnADataSource/jQuery/index.js
index 45747ffa1b98..4ac8d2257371 100644
--- a/apps/demos/Demos/DataGrid/ColumnsBasedOnADataSource/jQuery/index.js
+++ b/apps/demos/Demos/DataGrid/ColumnsBasedOnADataSource/jQuery/index.js
@@ -3,5 +3,8 @@ $(() => {
     dataSource: orders,
     keyExpr: 'OrderNumber',
     showBorders: true,
+    pager: {
+      visible: true,
+    }
   });
 });
diff --git a/apps/demos/Demos/DataGrid/CustomDataSource/Angular/app/app.component.html b/apps/demos/Demos/DataGrid/CustomDataSource/Angular/app/app.component.html
index 3cb11a98d84c..2b5ef4da8461 100644
--- a/apps/demos/Demos/DataGrid/CustomDataSource/Angular/app/app.component.html
+++ b/apps/demos/Demos/DataGrid/CustomDataSource/Angular/app/app.component.html
@@ -13,6 +13,7 @@
   </dxi-column>
   <dxo-paging [pageSize]="12"></dxo-paging>
   <dxo-pager
+    [visible]="true"
     [showPageSizeSelector]="true"
     [allowedPageSizes]="[8, 12, 20]"
   ></dxo-pager>
diff --git a/apps/demos/Demos/DataGrid/CustomDataSource/React/App.tsx b/apps/demos/Demos/DataGrid/CustomDataSource/React/App.tsx
index c30007eee83a..b1227dd81398 100644
--- a/apps/demos/Demos/DataGrid/CustomDataSource/React/App.tsx
+++ b/apps/demos/Demos/DataGrid/CustomDataSource/React/App.tsx
@@ -73,6 +73,7 @@ const App = () => (
     />
     <Paging defaultPageSize={12} />
     <Pager
+      visible={true}
       showPageSizeSelector={true}
       allowedPageSizes={allowedPageSizes}
     />
diff --git a/apps/demos/Demos/DataGrid/CustomDataSource/ReactJs/App.js b/apps/demos/Demos/DataGrid/CustomDataSource/ReactJs/App.js
index 8c95ea2449ae..050474c6af31 100644
--- a/apps/demos/Demos/DataGrid/CustomDataSource/ReactJs/App.js
+++ b/apps/demos/Demos/DataGrid/CustomDataSource/ReactJs/App.js
@@ -75,6 +75,7 @@ const App = () => (
     />
     <Paging defaultPageSize={12} />
     <Pager
+      visible={true}
       showPageSizeSelector={true}
       allowedPageSizes={allowedPageSizes}
     />
diff --git a/apps/demos/Demos/DataGrid/CustomDataSource/Vue/App.vue b/apps/demos/Demos/DataGrid/CustomDataSource/Vue/App.vue
index 35e5bd92f97a..1ec6cd5b4ebe 100644
--- a/apps/demos/Demos/DataGrid/CustomDataSource/Vue/App.vue
+++ b/apps/demos/Demos/DataGrid/CustomDataSource/Vue/App.vue
@@ -31,6 +31,7 @@
     />
     <DxPaging :page-size="12"/>
     <DxPager
+      :visible="true"
       :show-page-size-selector="true"
       :allowed-page-sizes="[8, 12, 20]"
     />
diff --git a/apps/demos/Demos/DataGrid/CustomDataSource/jQuery/index.js b/apps/demos/Demos/DataGrid/CustomDataSource/jQuery/index.js
index fea28da9fede..d75c7856d104 100644
--- a/apps/demos/Demos/DataGrid/CustomDataSource/jQuery/index.js
+++ b/apps/demos/Demos/DataGrid/CustomDataSource/jQuery/index.js
@@ -47,6 +47,7 @@ $(() => {
       pageSize: 12,
     },
     pager: {
+      visible: true,
       showPageSizeSelector: true,
       allowedPageSizes: [8, 12, 20],
     },
diff --git a/apps/demos/Demos/DataGrid/CustomEditors/Angular/app/app.component.html b/apps/demos/Demos/DataGrid/CustomEditors/Angular/app/app.component.html
index 02e82892f754..62cbee9eb408 100644
--- a/apps/demos/Demos/DataGrid/CustomEditors/Angular/app/app.component.html
+++ b/apps/demos/Demos/DataGrid/CustomEditors/Angular/app/app.component.html
@@ -5,6 +5,7 @@
   (onRowInserted)="$event.component.navigateToRow($event.key)"
 >
   <dxo-paging [enabled]="true" [pageSize]="15"></dxo-paging>
+  <dxo-pager [visible]="true"></dxo-pager>
   <dxo-header-filter [visible]="true"></dxo-header-filter>
   <dxo-search-panel [visible]="true"></dxo-search-panel>
   <dxo-editing mode="cell" [allowUpdating]="true" [allowAdding]="true">
diff --git a/apps/demos/Demos/DataGrid/CustomEditors/React/App.tsx b/apps/demos/Demos/DataGrid/CustomEditors/React/App.tsx
index c565313b3805..cab38dc0abee 100644
--- a/apps/demos/Demos/DataGrid/CustomEditors/React/App.tsx
+++ b/apps/demos/Demos/DataGrid/CustomEditors/React/App.tsx
@@ -8,6 +8,7 @@ import DataGrid, {
   Lookup,
   RequiredRule,
   DataGridTypes,
+  Pager,
 } from 'devextreme-react/data-grid';
 import { createStore } from 'devextreme-aspnet-data-nojquery';
 import SelectBox, { SelectBoxTypes } from 'devextreme-react/select-box';
@@ -94,6 +95,7 @@ const App = () => (
       onRowInserted={onRowInserted}
     >
       <Paging enabled={true} defaultPageSize={15} />
+      <Pager visible={true} />
       <HeaderFilter visible={true} />
       <SearchPanel visible={true} />
       <Editing
diff --git a/apps/demos/Demos/DataGrid/CustomEditors/ReactJs/App.js b/apps/demos/Demos/DataGrid/CustomEditors/ReactJs/App.js
index e67edb448887..305febbaf422 100644
--- a/apps/demos/Demos/DataGrid/CustomEditors/ReactJs/App.js
+++ b/apps/demos/Demos/DataGrid/CustomEditors/ReactJs/App.js
@@ -7,6 +7,7 @@ import DataGrid, {
   Column,
   Lookup,
   RequiredRule,
+  Pager,
 } from 'devextreme-react/data-grid';
 import { createStore } from 'devextreme-aspnet-data-nojquery';
 import SelectBox from 'devextreme-react/select-box';
@@ -85,6 +86,7 @@ const App = () => (
         enabled={true}
         defaultPageSize={15}
       />
+      <Pager visible={true} />
       <HeaderFilter visible={true} />
       <SearchPanel visible={true} />
       <Editing
diff --git a/apps/demos/Demos/DataGrid/CustomEditors/Vue/App.vue b/apps/demos/Demos/DataGrid/CustomEditors/Vue/App.vue
index 1b0eae180d44..947f3c1416ab 100644
--- a/apps/demos/Demos/DataGrid/CustomEditors/Vue/App.vue
+++ b/apps/demos/Demos/DataGrid/CustomEditors/Vue/App.vue
@@ -8,6 +8,7 @@
       :enabled="true"
       :page-size="15"
     />
+    <DxPager :visible="true"/>
     <DxHeaderFilter :visible="true"/>
     <DxSearchPanel :visible="true"/>
     <DxEditing
@@ -99,6 +100,7 @@ import {
   DxLookup,
   DxRequiredRule,
   DxDataGridTypes,
+  DxPager,
 } from 'devextreme-vue/data-grid';
 import { createStore } from 'devextreme-aspnet-data-nojquery';
 import EmployeeDropDownBoxComponent from './EmployeeDropDownBoxComponent.vue';
diff --git a/apps/demos/Demos/DataGrid/CustomEditors/jQuery/index.js b/apps/demos/Demos/DataGrid/CustomEditors/jQuery/index.js
index 0341be6c7c11..c0f7b4b82553 100644
--- a/apps/demos/Demos/DataGrid/CustomEditors/jQuery/index.js
+++ b/apps/demos/Demos/DataGrid/CustomEditors/jQuery/index.js
@@ -14,6 +14,9 @@ $(() => {
       enabled: true,
       pageSize: 15,
     },
+    pager:{
+      visible: true,
+    },
     headerFilter: {
       visible: true,
     },
diff --git a/apps/demos/Demos/DataGrid/CustomNewRecordPosition/Angular/app/app.component.html b/apps/demos/Demos/DataGrid/CustomNewRecordPosition/Angular/app/app.component.html
index 3d8ff1da2b52..3164106976d2 100644
--- a/apps/demos/Demos/DataGrid/CustomNewRecordPosition/Angular/app/app.component.html
+++ b/apps/demos/Demos/DataGrid/CustomNewRecordPosition/Angular/app/app.component.html
@@ -18,6 +18,7 @@
     [changes]="changes"
     [(editRowKey)]="editRowKey"
   ></dxo-editing>
+  <dxo-pager [visible]="true"></dxo-pager>
 
   <dxi-column dataField="OrderID" [allowEditing]="false"></dxi-column>
   <dxi-column dataField="OrderDate" dataType="date">
diff --git a/apps/demos/Demos/DataGrid/CustomNewRecordPosition/React/App.tsx b/apps/demos/Demos/DataGrid/CustomNewRecordPosition/React/App.tsx
index 917200db5681..83acbf595494 100644
--- a/apps/demos/Demos/DataGrid/CustomNewRecordPosition/React/App.tsx
+++ b/apps/demos/Demos/DataGrid/CustomNewRecordPosition/React/App.tsx
@@ -1,6 +1,6 @@
 import React, { useCallback, useState } from 'react';
 import DataGrid, {
-  Column, Editing, ValidationRule, Button, IButtonProps, Toolbar, Item, Scrolling, DataGridTypes,
+  Column, Editing, ValidationRule, Button, IButtonProps, Toolbar, Item, Scrolling, DataGridTypes, Pager,
 } from 'devextreme-react/data-grid';
 import SelectBox from 'devextreme-react/select-box';
 import Guid from 'devextreme/core/guid';
@@ -56,6 +56,7 @@ const App = () => {
           editRowKey={editRowKey}
           onEditRowKeyChange={setEditRowKey}
         />
+        <Pager visible={true} />
 
         <Column dataField='OrderID' allowEditing={false} />
         <Column dataField='OrderDate' dataType='date'>
diff --git a/apps/demos/Demos/DataGrid/CustomNewRecordPosition/ReactJs/App.js b/apps/demos/Demos/DataGrid/CustomNewRecordPosition/ReactJs/App.js
index e62696dbdd07..50c4f5257e66 100644
--- a/apps/demos/Demos/DataGrid/CustomNewRecordPosition/ReactJs/App.js
+++ b/apps/demos/Demos/DataGrid/CustomNewRecordPosition/ReactJs/App.js
@@ -7,6 +7,7 @@ import DataGrid, {
   Toolbar,
   Item,
   Scrolling,
+  Pager,
 } from 'devextreme-react/data-grid';
 import SelectBox from 'devextreme-react/select-box';
 import Guid from 'devextreme/core/guid';
@@ -66,6 +67,7 @@ const App = () => {
           editRowKey={editRowKey}
           onEditRowKeyChange={setEditRowKey}
         />
+        <Pager visible={true} />
 
         <Column
           dataField="OrderID"
diff --git a/apps/demos/Demos/DataGrid/CustomNewRecordPosition/Vue/App.vue b/apps/demos/Demos/DataGrid/CustomNewRecordPosition/Vue/App.vue
index 4749b707da6f..6afd009b7dab 100644
--- a/apps/demos/Demos/DataGrid/CustomNewRecordPosition/Vue/App.vue
+++ b/apps/demos/Demos/DataGrid/CustomNewRecordPosition/Vue/App.vue
@@ -11,6 +11,7 @@
       <DxScrolling
         :mode="scrollingMode"
       />
+      <DxPager :visible="true"/>
       <DxEditing
         mode="row"
         :allow-adding="true"
@@ -86,7 +87,7 @@
 <script setup lang="ts">
 import { ref } from 'vue';
 import DxDataGrid, {
-  DxColumn, DxEditing, DxValidationRule, DxButton, DxToolbar, DxItem, DxScrolling, DxDataGridTypes,
+  DxColumn, DxEditing, DxValidationRule, DxButton, DxToolbar, DxItem, DxScrolling, DxDataGridTypes, DxPager,
 } from 'devextreme-vue/data-grid';
 import DxSelectBox from 'devextreme-vue/select-box';
 import Guid from 'devextreme/core/guid';
diff --git a/apps/demos/Demos/DataGrid/CustomNewRecordPosition/jQuery/index.js b/apps/demos/Demos/DataGrid/CustomNewRecordPosition/jQuery/index.js
index 2a3219f2f202..1fd904f941ac 100644
--- a/apps/demos/Demos/DataGrid/CustomNewRecordPosition/jQuery/index.js
+++ b/apps/demos/Demos/DataGrid/CustomNewRecordPosition/jQuery/index.js
@@ -15,6 +15,9 @@ $(() => {
       useIcons: true,
       newRowPosition: 'viewportTop',
     },
+    pager: {
+      visible: true,
+    },
     remoteOperations: true,
     columns: [
       {
diff --git a/apps/demos/Demos/DataGrid/DeferredSelection/Angular/app/app.component.html b/apps/demos/Demos/DataGrid/DeferredSelection/Angular/app/app.component.html
index b3b74913e0c3..a384313b651e 100644
--- a/apps/demos/Demos/DataGrid/DeferredSelection/Angular/app/app.component.html
+++ b/apps/demos/Demos/DataGrid/DeferredSelection/Angular/app/app.component.html
@@ -6,6 +6,7 @@
 >
   <dxo-selection mode="multiple" [deferred]="true"></dxo-selection>
   <dxo-filter-row [visible]="true"></dxo-filter-row>
+  <dxo-pager [visible]="true"></dxo-pager>
   <dxi-column caption="Subject" dataField="Task_Subject"></dxi-column>
   <dxi-column
     caption="Start Date"
diff --git a/apps/demos/Demos/DataGrid/DeferredSelection/React/App.tsx b/apps/demos/Demos/DataGrid/DeferredSelection/React/App.tsx
index 91374de843ba..05bc3fe266a4 100644
--- a/apps/demos/Demos/DataGrid/DeferredSelection/React/App.tsx
+++ b/apps/demos/Demos/DataGrid/DeferredSelection/React/App.tsx
@@ -1,6 +1,6 @@
 import React, { useCallback, useState } from 'react';
 import DataGrid, {
-  Column, DataGridTypes, FilterRow, Selection,
+  Column, DataGridTypes, FilterRow, Selection, Pager,
 } from 'devextreme-react/data-grid';
 import Button from 'devextreme-react/button';
 import query from 'devextreme/data/query';
@@ -69,6 +69,7 @@ const App = () => {
       >
         <Selection mode="multiple" deferred={true} />
         <FilterRow visible={true} />
+        <Pager visible={true} />
         <Column caption="Subject" dataField="Task_Subject" />
         <Column
           caption="Start Date"
diff --git a/apps/demos/Demos/DataGrid/DeferredSelection/ReactJs/App.js b/apps/demos/Demos/DataGrid/DeferredSelection/ReactJs/App.js
index 61a9d1d3a022..43dcfeedeb56 100644
--- a/apps/demos/Demos/DataGrid/DeferredSelection/ReactJs/App.js
+++ b/apps/demos/Demos/DataGrid/DeferredSelection/ReactJs/App.js
@@ -1,5 +1,7 @@
 import React, { useCallback, useState } from 'react';
-import DataGrid, { Column, FilterRow, Selection } from 'devextreme-react/data-grid';
+import DataGrid, {
+  Column, FilterRow, Selection, Pager,
+} from 'devextreme-react/data-grid';
 import Button from 'devextreme-react/button';
 import query from 'devextreme/data/query';
 import 'devextreme/data/odata/store';
@@ -63,6 +65,7 @@ const App = () => {
           deferred={true}
         />
         <FilterRow visible={true} />
+        <Pager visible={true} />
         <Column
           caption="Subject"
           dataField="Task_Subject"
diff --git a/apps/demos/Demos/DataGrid/DeferredSelection/Vue/App.vue b/apps/demos/Demos/DataGrid/DeferredSelection/Vue/App.vue
index e6e7c5b2ecbc..9280a91e43c6 100644
--- a/apps/demos/Demos/DataGrid/DeferredSelection/Vue/App.vue
+++ b/apps/demos/Demos/DataGrid/DeferredSelection/Vue/App.vue
@@ -11,6 +11,7 @@
         :deferred="true"
         mode="multiple"
       />
+      <DxPager :visible="true"/>
       <DxFilterRow :visible="true"/>
       <DxColumn
         caption="Subject"
@@ -67,7 +68,7 @@
 <script setup lang="ts">
 import { ref } from 'vue';
 import {
-  DxDataGrid, DxColumn, DxFilterRow, DxSelection, DxDataGridTypes,
+  DxDataGrid, DxColumn, DxFilterRow, DxSelection, DxDataGridTypes, DxPager,
 } from 'devextreme-vue/data-grid';
 import DxButton from 'devextreme-vue/button';
 import { Options as DataSourceOptions } from 'devextreme/data/data_source';
diff --git a/apps/demos/Demos/DataGrid/DeferredSelection/jQuery/index.js b/apps/demos/Demos/DataGrid/DeferredSelection/jQuery/index.js
index 431cf6353bd1..c25732045e21 100644
--- a/apps/demos/Demos/DataGrid/DeferredSelection/jQuery/index.js
+++ b/apps/demos/Demos/DataGrid/DeferredSelection/jQuery/index.js
@@ -20,6 +20,9 @@ $(() => {
         'ResponsibleEmployee/Employee_Full_Name',
       ],
     },
+    pager: {
+      visible: true,
+    },
     selection: {
       mode: 'multiple',
       deferred: true,
diff --git a/apps/demos/Demos/DataGrid/EditStateManagement/Angular/app/app.component.html b/apps/demos/Demos/DataGrid/EditStateManagement/Angular/app/app.component.html
index a1cbb10d8181..6a7ddb500200 100644
--- a/apps/demos/Demos/DataGrid/EditStateManagement/Angular/app/app.component.html
+++ b/apps/demos/Demos/DataGrid/EditStateManagement/Angular/app/app.component.html
@@ -16,6 +16,7 @@
     [(changes)]="changes"
     [(editRowKey)]="editRowKey"
   ></dxo-editing>
+  <dxo-pager [visible]="true"></dxo-pager>
 
   <dxi-column dataField="OrderID" [allowEditing]="false"></dxi-column>
   <dxi-column dataField="ShipName"></dxi-column>
diff --git a/apps/demos/Demos/DataGrid/EditStateManagement/React/App.tsx b/apps/demos/Demos/DataGrid/EditStateManagement/React/App.tsx
index 9840c1eb93ef..5c8ffc2d5b86 100644
--- a/apps/demos/Demos/DataGrid/EditStateManagement/React/App.tsx
+++ b/apps/demos/Demos/DataGrid/EditStateManagement/React/App.tsx
@@ -2,7 +2,7 @@ import React, {
   useCallback, useEffect, useMemo, useReducer,
 } from 'react';
 import DataGrid, {
-  Column, DataGridTypes, Editing,
+  Column, DataGridTypes, Editing, Pager,
 } from 'devextreme-react/data-grid';
 import { LoadPanel } from 'devextreme-react/load-panel';
 import 'whatwg-fetch';
@@ -70,6 +70,7 @@ const App = () => {
           editRowKey={state.editRowKey}
           onEditRowKeyChange={onEditRowKeyChange}
         />
+        <Pager visible={true} />
         <Column dataField="OrderID" allowEditing={false}></Column>
         <Column dataField="ShipName"></Column>
         <Column dataField="ShipCountry"></Column>
diff --git a/apps/demos/Demos/DataGrid/EditStateManagement/ReactJs/App.js b/apps/demos/Demos/DataGrid/EditStateManagement/ReactJs/App.js
index 6434f0b06278..5311baee77fd 100644
--- a/apps/demos/Demos/DataGrid/EditStateManagement/ReactJs/App.js
+++ b/apps/demos/Demos/DataGrid/EditStateManagement/ReactJs/App.js
@@ -1,7 +1,7 @@
 import React, {
   useCallback, useEffect, useMemo, useReducer,
 } from 'react';
-import DataGrid, { Column, Editing } from 'devextreme-react/data-grid';
+import DataGrid, { Column, Editing, Pager } from 'devextreme-react/data-grid';
 import { LoadPanel } from 'devextreme-react/load-panel';
 import 'whatwg-fetch';
 import reducer from './reducer.js';
@@ -68,6 +68,7 @@ const App = () => {
           editRowKey={state.editRowKey}
           onEditRowKeyChange={onEditRowKeyChange}
         />
+        <Pager visible={true} />
         <Column
           dataField="OrderID"
           allowEditing={false}
diff --git a/apps/demos/Demos/DataGrid/EditStateManagement/Vue/App.vue b/apps/demos/Demos/DataGrid/EditStateManagement/Vue/App.vue
index defe69893912..090e0ce0e246 100644
--- a/apps/demos/Demos/DataGrid/EditStateManagement/Vue/App.vue
+++ b/apps/demos/Demos/DataGrid/EditStateManagement/Vue/App.vue
@@ -20,6 +20,7 @@
         v-model:changes="changes"
         v-model:edit-row-key="editRowKey"
       />
+      <DxPager :visible="true"/>
       <DxColumn
         data-field="OrderID"
         :allow-editing="false"
@@ -51,7 +52,7 @@
 import { computed } from 'vue';
 import { useStore } from 'vuex';
 import {
-  DxDataGrid, DxColumn, DxEditing, DxDataGridTypes,
+  DxDataGrid, DxColumn, DxEditing, DxDataGridTypes, DxPager,
 } from 'devextreme-vue/data-grid';
 import { DxLoadPanel } from 'devextreme-vue/load-panel';
 import { State } from './store.ts';
diff --git a/apps/demos/Demos/DataGrid/EditStateManagement/jQuery/index.js b/apps/demos/Demos/DataGrid/EditStateManagement/jQuery/index.js
index 3079792c33b9..118a9b47dec2 100644
--- a/apps/demos/Demos/DataGrid/EditStateManagement/jQuery/index.js
+++ b/apps/demos/Demos/DataGrid/EditStateManagement/jQuery/index.js
@@ -25,6 +25,9 @@ $(() => {
       allowUpdating: true,
       allowDeleting: true,
     },
+    pager: {
+      visible: true,
+    },
     repaintChangesOnly: true,
     onOptionChanged(e) {
       if (e.name === 'editing') {
diff --git a/apps/demos/Demos/DataGrid/Filtering/Angular/app/app.component.html b/apps/demos/Demos/DataGrid/Filtering/Angular/app/app.component.html
index 66d1cb27c49d..74dd478ecdaa 100644
--- a/apps/demos/Demos/DataGrid/Filtering/Angular/app/app.component.html
+++ b/apps/demos/Demos/DataGrid/Filtering/Angular/app/app.component.html
@@ -14,6 +14,7 @@
     [width]="240"
     placeholder="Search..."
   ></dxo-search-panel>
+  <dxo-pager [visible]="true"></dxo-pager>
   <dxi-column dataField="OrderNumber" [width]="140" caption="Invoice Number">
     <dxo-header-filter [groupInterval]="10000"></dxo-header-filter>
   </dxi-column>
diff --git a/apps/demos/Demos/DataGrid/Filtering/React/App.tsx b/apps/demos/Demos/DataGrid/Filtering/React/App.tsx
index 3be9156dda48..9e524bc5f5b3 100644
--- a/apps/demos/Demos/DataGrid/Filtering/React/App.tsx
+++ b/apps/demos/Demos/DataGrid/Filtering/React/App.tsx
@@ -1,6 +1,6 @@
 import React, { useCallback, useRef, useState } from 'react';
 import DataGrid, {
-  Column, FilterRow, HeaderFilter, Search, SearchPanel,
+  Column, FilterRow, HeaderFilter, Search, SearchPanel, Pager,
 } from 'devextreme-react/data-grid';
 import SelectBox, { SelectBoxTypes } from 'devextreme-react/select-box';
 import CheckBox, { CheckBoxTypes } from 'devextreme-react/check-box';
@@ -113,6 +113,7 @@ const App = () => {
           visible={true}
           width={240}
           placeholder="Search..." />
+        <Pager visible={true} />
         <Column
           dataField="OrderNumber"
           width={140}
diff --git a/apps/demos/Demos/DataGrid/Filtering/ReactJs/App.js b/apps/demos/Demos/DataGrid/Filtering/ReactJs/App.js
index 8ff01176948a..f29dbe2d6eea 100644
--- a/apps/demos/Demos/DataGrid/Filtering/ReactJs/App.js
+++ b/apps/demos/Demos/DataGrid/Filtering/ReactJs/App.js
@@ -5,6 +5,7 @@ import DataGrid, {
   HeaderFilter,
   Search,
   SearchPanel,
+  Pager,
 } from 'devextreme-react/data-grid';
 import SelectBox from 'devextreme-react/select-box';
 import CheckBox from 'devextreme-react/check-box';
@@ -120,6 +121,7 @@ const App = () => {
           width={240}
           placeholder="Search..."
         />
+        <Pager visible={true} />
         <Column
           dataField="OrderNumber"
           width={140}
diff --git a/apps/demos/Demos/DataGrid/Filtering/Vue/App.vue b/apps/demos/Demos/DataGrid/Filtering/Vue/App.vue
index 881108247e85..7a60d4a2e2be 100644
--- a/apps/demos/Demos/DataGrid/Filtering/Vue/App.vue
+++ b/apps/demos/Demos/DataGrid/Filtering/Vue/App.vue
@@ -19,6 +19,7 @@
         :width="240"
         placeholder="Search..."
       />
+      <DxPager :visible="true"/>
       <DxColumn
         :width="140"
         data-field="OrderNumber"
@@ -101,6 +102,7 @@ import {
   DxSearchPanel,
   DxFilterRow,
   DxDataGridTypes,
+  DxPager,
 } from 'devextreme-vue/data-grid';
 import DxSelectBox from 'devextreme-vue/select-box';
 import DxCheckBox from 'devextreme-vue/check-box';
diff --git a/apps/demos/Demos/DataGrid/Filtering/jQuery/index.js b/apps/demos/Demos/DataGrid/Filtering/jQuery/index.js
index d0a0533ff836..8f002bb2a9a0 100644
--- a/apps/demos/Demos/DataGrid/Filtering/jQuery/index.js
+++ b/apps/demos/Demos/DataGrid/Filtering/jQuery/index.js
@@ -16,6 +16,9 @@ $(() => {
     headerFilter: {
       visible: true,
     },
+    pager: {
+      visible: true,
+    },
     columns: [{
       dataField: 'OrderNumber',
       caption: 'Invoice Number',
diff --git a/apps/demos/Demos/DataGrid/FilteringAPI/Angular/app/app.component.html b/apps/demos/Demos/DataGrid/FilteringAPI/Angular/app/app.component.html
index 95a9b589c870..e3829ae1d80e 100644
--- a/apps/demos/Demos/DataGrid/FilteringAPI/Angular/app/app.component.html
+++ b/apps/demos/Demos/DataGrid/FilteringAPI/Angular/app/app.component.html
@@ -18,6 +18,7 @@
   [dataSource]="tasks"
   [showBorders]="true"
 >
+  <dxo-pager [visible]="true"></dxo-pager>
   <dxi-column dataField="Task_ID" [width]="80" dataType="number"></dxi-column>
   <dxi-column
     dataField="Task_Start_Date"
diff --git a/apps/demos/Demos/DataGrid/FilteringAPI/React/App.tsx b/apps/demos/Demos/DataGrid/FilteringAPI/React/App.tsx
index 1dd5d8edf9f8..2453f5c2b0b2 100644
--- a/apps/demos/Demos/DataGrid/FilteringAPI/React/App.tsx
+++ b/apps/demos/Demos/DataGrid/FilteringAPI/React/App.tsx
@@ -1,5 +1,5 @@
 import React, { useCallback, useRef, useState } from 'react';
-import DataGrid, { Column, DataGridRef } from 'devextreme-react/data-grid';
+import DataGrid, { Column, DataGridRef, Pager, } from 'devextreme-react/data-grid';
 import SelectBox from 'devextreme-react/select-box';
 import 'devextreme/data/odata/store';
 
@@ -63,6 +63,7 @@ const App = () => {
         columnAutoWidth={true}
         showBorders={true}
       >
+        <Pager visible={true} />
         <Column
           dataField="Task_ID"
           width={80} />
diff --git a/apps/demos/Demos/DataGrid/FilteringAPI/ReactJs/App.js b/apps/demos/Demos/DataGrid/FilteringAPI/ReactJs/App.js
index c27450704bb4..d2724b74bc78 100644
--- a/apps/demos/Demos/DataGrid/FilteringAPI/ReactJs/App.js
+++ b/apps/demos/Demos/DataGrid/FilteringAPI/ReactJs/App.js
@@ -1,5 +1,5 @@
 import React, { useCallback, useRef, useState } from 'react';
-import DataGrid, { Column } from 'devextreme-react/data-grid';
+import DataGrid, { Column, Pager } from 'devextreme-react/data-grid';
 import SelectBox from 'devextreme-react/select-box';
 import 'devextreme/data/odata/store';
 
@@ -64,6 +64,7 @@ const App = () => {
         columnAutoWidth={true}
         showBorders={true}
       >
+        <Pager visible={true} />
         <Column
           dataField="Task_ID"
           width={80}
diff --git a/apps/demos/Demos/DataGrid/FilteringAPI/Vue/App.vue b/apps/demos/Demos/DataGrid/FilteringAPI/Vue/App.vue
index 04be682df18c..c056f824f861 100644
--- a/apps/demos/Demos/DataGrid/FilteringAPI/Vue/App.vue
+++ b/apps/demos/Demos/DataGrid/FilteringAPI/Vue/App.vue
@@ -22,6 +22,7 @@
       :column-auto-width="true"
       :show-borders="true"
     >
+      <DxPager :visible="true"/>
       <DxColumn
         :width="80"
         data-field="Task_ID"
@@ -54,6 +55,7 @@ import { ref } from 'vue';
 import {
   DxColumn,
   DxDataGrid,
+  DxPager,
 } from 'devextreme-vue/data-grid';
 import DxSelectBox, { DxSelectBoxTypes } from 'devextreme-vue/select-box';
 import 'devextreme/data/odata/store';
diff --git a/apps/demos/Demos/DataGrid/FilteringAPI/jQuery/index.js b/apps/demos/Demos/DataGrid/FilteringAPI/jQuery/index.js
index f21a1b547a79..f8941ee1dcee 100644
--- a/apps/demos/Demos/DataGrid/FilteringAPI/jQuery/index.js
+++ b/apps/demos/Demos/DataGrid/FilteringAPI/jQuery/index.js
@@ -27,6 +27,9 @@ $(() => {
         'ResponsibleEmployee/Employee_Full_Name',
       ],
     },
+    pager: {
+      visible: true,
+    },
     columnAutoWidth: true,
     showBorders: true,
     columns: [
diff --git a/apps/demos/Demos/DataGrid/FocusedRow/Angular/app/app.component.html b/apps/demos/Demos/DataGrid/FocusedRow/Angular/app/app.component.html
index bf0b7142c0fb..859da16ebb8a 100644
--- a/apps/demos/Demos/DataGrid/FocusedRow/Angular/app/app.component.html
+++ b/apps/demos/Demos/DataGrid/FocusedRow/Angular/app/app.component.html
@@ -10,6 +10,7 @@
   (onFocusedRowChanged)="onFocusedRowChanged($event)"
 >
   <dxo-paging [pageSize]="10"> </dxo-paging>
+  <dxo-pager [visible]="true"></dxo-pager>
 </dx-data-grid>
 
 <div class="task-info">
diff --git a/apps/demos/Demos/DataGrid/FocusedRow/React/App.tsx b/apps/demos/Demos/DataGrid/FocusedRow/React/App.tsx
index eec0edd029e9..8327989badc2 100644
--- a/apps/demos/Demos/DataGrid/FocusedRow/React/App.tsx
+++ b/apps/demos/Demos/DataGrid/FocusedRow/React/App.tsx
@@ -1,6 +1,6 @@
 import React, { useCallback, useState } from 'react';
 import {
-  DataGrid, Column, Paging, DataGridTypes,
+  DataGrid, Column, Paging, DataGridTypes, Pager,
 } from 'devextreme-react/data-grid';
 import { NumberBox, NumberBoxTypes } from 'devextreme-react/number-box';
 import { CheckBox, CheckBoxTypes } from 'devextreme-react/check-box';
@@ -88,6 +88,7 @@ const App = () => {
         showBorders={true}
       >
         <Paging defaultPageSize={10} />
+        <Pager visible={true} />
         <Column
           dataField="Task_ID"
           width={80} />
diff --git a/apps/demos/Demos/DataGrid/FocusedRow/ReactJs/App.js b/apps/demos/Demos/DataGrid/FocusedRow/ReactJs/App.js
index 27d539776fe6..f43631c8bf4b 100644
--- a/apps/demos/Demos/DataGrid/FocusedRow/ReactJs/App.js
+++ b/apps/demos/Demos/DataGrid/FocusedRow/ReactJs/App.js
@@ -1,5 +1,7 @@
 import React, { useCallback, useState } from 'react';
-import { DataGrid, Column, Paging } from 'devextreme-react/data-grid';
+import {
+  DataGrid, Column, Paging, Pager,
+} from 'devextreme-react/data-grid';
 import { NumberBox } from 'devextreme-react/number-box';
 import { CheckBox } from 'devextreme-react/check-box';
 import 'devextreme/data/odata/store';
@@ -77,6 +79,7 @@ const App = () => {
         showBorders={true}
       >
         <Paging defaultPageSize={10} />
+        <Pager visible={true} />
         <Column
           dataField="Task_ID"
           width={80}
diff --git a/apps/demos/Demos/DataGrid/FocusedRow/Vue/App.vue b/apps/demos/Demos/DataGrid/FocusedRow/Vue/App.vue
index b37911348b5a..af6a3a0761e5 100644
--- a/apps/demos/Demos/DataGrid/FocusedRow/Vue/App.vue
+++ b/apps/demos/Demos/DataGrid/FocusedRow/Vue/App.vue
@@ -36,6 +36,7 @@
       />
 
       <DxPaging :page-size="10"/>
+      <DxPager :visible="true"/>
     </DxDataGrid>
 
     <div class="task-info">
@@ -80,7 +81,7 @@
 <script setup lang="ts">
 import { ref } from 'vue';
 import {
-  DxDataGrid, DxColumn, DxPaging, DxDataGridTypes,
+  DxDataGrid, DxColumn, DxPaging, DxDataGridTypes, DxPager,
 } from 'devextreme-vue/data-grid';
 import DxNumberBox from 'devextreme-vue/number-box';
 import DxCheckBox from 'devextreme-vue/check-box';
diff --git a/apps/demos/Demos/DataGrid/FocusedRow/jQuery/index.js b/apps/demos/Demos/DataGrid/FocusedRow/jQuery/index.js
index a09a1e336bf7..9bd1bde9352d 100644
--- a/apps/demos/Demos/DataGrid/FocusedRow/jQuery/index.js
+++ b/apps/demos/Demos/DataGrid/FocusedRow/jQuery/index.js
@@ -45,6 +45,9 @@ $(() => {
     paging: {
       pageSize: 10,
     },
+    pager: {
+      visible: true,
+    },
     onFocusedRowChanging(e) {
       const rowsCount = e.component.getVisibleRows().length;
       const pageCount = e.component.pageCount();
diff --git a/apps/demos/Demos/DataGrid/GridSummaries/Angular/app/app.component.html b/apps/demos/Demos/DataGrid/GridSummaries/Angular/app/app.component.html
index 75263511850f..318710cd7c32 100644
--- a/apps/demos/Demos/DataGrid/GridSummaries/Angular/app/app.component.html
+++ b/apps/demos/Demos/DataGrid/GridSummaries/Angular/app/app.component.html
@@ -5,6 +5,7 @@
   [showBorders]="true"
 >
   <dxo-selection mode="single"></dxo-selection>
+  <dxo-pager [visible]="true"></dxo-pager>
 
   <dxi-column
     dataField="OrderNumber"
diff --git a/apps/demos/Demos/DataGrid/GridSummaries/React/App.tsx b/apps/demos/Demos/DataGrid/GridSummaries/React/App.tsx
index 6af81b16a6e8..50794017744f 100644
--- a/apps/demos/Demos/DataGrid/GridSummaries/React/App.tsx
+++ b/apps/demos/Demos/DataGrid/GridSummaries/React/App.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import DataGrid, {
-  Column, Selection, Summary, TotalItem,
+  Column, Selection, Summary, TotalItem, Pager,
 } from 'devextreme-react/data-grid';
 import { formatDate } from 'devextreme/localization';
 import { orders } from './data.ts';
@@ -14,6 +14,7 @@ const App = () => (
     keyExpr="ID"
     showBorders={true}>
     <Selection mode="single" />
+    <Pager visible={true} />
     <Column dataField="OrderNumber" width={130} caption="Invoice Number" />
     <Column dataField="OrderDate" dataType="date" />
     <Column dataField="Employee" />
diff --git a/apps/demos/Demos/DataGrid/GridSummaries/ReactJs/App.js b/apps/demos/Demos/DataGrid/GridSummaries/ReactJs/App.js
index d6ecb9a455ac..c0309b9228a9 100644
--- a/apps/demos/Demos/DataGrid/GridSummaries/ReactJs/App.js
+++ b/apps/demos/Demos/DataGrid/GridSummaries/ReactJs/App.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import DataGrid, {
-  Column, Selection, Summary, TotalItem,
+  Column, Selection, Summary, TotalItem, Pager,
 } from 'devextreme-react/data-grid';
 import { formatDate } from 'devextreme/localization';
 import { orders } from './data.js';
@@ -14,6 +14,7 @@ const App = () => (
     showBorders={true}
   >
     <Selection mode="single" />
+    <Pager visible={true} />
     <Column
       dataField="OrderNumber"
       width={130}
diff --git a/apps/demos/Demos/DataGrid/GridSummaries/Vue/App.vue b/apps/demos/Demos/DataGrid/GridSummaries/Vue/App.vue
index 3e55d2c779f1..b047f4958e3b 100644
--- a/apps/demos/Demos/DataGrid/GridSummaries/Vue/App.vue
+++ b/apps/demos/Demos/DataGrid/GridSummaries/Vue/App.vue
@@ -7,6 +7,7 @@
       key-expr="ID"
     >
       <DxSelection mode="single"/>
+      <DxPager :visible="true"/>
       <DxColumn
         :width="130"
         data-field="OrderNumber"
@@ -57,6 +58,7 @@ import {
   DxSelection,
   DxSummary,
   DxTotalItem, DxDataGridTypes,
+  DxPager,
 } from 'devextreme-vue/data-grid';
 import { formatDate } from 'devextreme/localization';
 import { orders } from './data.ts';
diff --git a/apps/demos/Demos/DataGrid/GridSummaries/jQuery/index.js b/apps/demos/Demos/DataGrid/GridSummaries/jQuery/index.js
index c0d29384ad61..6d8018075edf 100644
--- a/apps/demos/Demos/DataGrid/GridSummaries/jQuery/index.js
+++ b/apps/demos/Demos/DataGrid/GridSummaries/jQuery/index.js
@@ -6,6 +6,9 @@ $(() => {
     selection: {
       mode: 'single',
     },
+    pager: {
+      visible: true,
+    },
     columns: [{
       dataField: 'OrderNumber',
       width: 130,
diff --git a/apps/demos/Demos/DataGrid/GroupSummaries/Angular/app/app.component.html b/apps/demos/Demos/DataGrid/GroupSummaries/Angular/app/app.component.html
index 8c16d204bbe6..bde4915d7ab6 100644
--- a/apps/demos/Demos/DataGrid/GroupSummaries/Angular/app/app.component.html
+++ b/apps/demos/Demos/DataGrid/GroupSummaries/Angular/app/app.component.html
@@ -5,6 +5,7 @@
   [showBorders]="true"
 >
   <dxo-selection mode="single"></dxo-selection>
+  <dxo-pager [visible]="true"></dxo-pager>
 
   <dxi-column
     dataField="OrderNumber"
diff --git a/apps/demos/Demos/DataGrid/GroupSummaries/React/App.tsx b/apps/demos/Demos/DataGrid/GroupSummaries/React/App.tsx
index 80f3b06f75dc..c0ad5660b9b7 100644
--- a/apps/demos/Demos/DataGrid/GroupSummaries/React/App.tsx
+++ b/apps/demos/Demos/DataGrid/GroupSummaries/React/App.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import DataGrid, {
-  Column, Selection, Summary, GroupItem, SortByGroupSummaryInfo,
+  Column, Selection, Summary, GroupItem, SortByGroupSummaryInfo, Pager,
 } from 'devextreme-react/data-grid';
 import { orders } from './data.ts';
 
@@ -12,6 +12,7 @@ const App = () => (
     showBorders={true}
   >
     <Selection mode="single" />
+    <Pager visible={true} />
     <Column dataField="OrderNumber" width={130} caption="Invoice Number" />
     <Column dataField="OrderDate" dataType="date" />
     <Column dataField="Employee" groupIndex={0} />
diff --git a/apps/demos/Demos/DataGrid/GroupSummaries/ReactJs/App.js b/apps/demos/Demos/DataGrid/GroupSummaries/ReactJs/App.js
index 41e6063dc3bc..e7f76d1fb55d 100644
--- a/apps/demos/Demos/DataGrid/GroupSummaries/ReactJs/App.js
+++ b/apps/demos/Demos/DataGrid/GroupSummaries/ReactJs/App.js
@@ -5,6 +5,7 @@ import DataGrid, {
   Summary,
   GroupItem,
   SortByGroupSummaryInfo,
+  Pager,
 } from 'devextreme-react/data-grid';
 import { orders } from './data.js';
 
@@ -16,6 +17,7 @@ const App = () => (
     showBorders={true}
   >
     <Selection mode="single" />
+    <Pager visible={true} />
     <Column
       dataField="OrderNumber"
       width={130}
diff --git a/apps/demos/Demos/DataGrid/GroupSummaries/Vue/App.vue b/apps/demos/Demos/DataGrid/GroupSummaries/Vue/App.vue
index f7dc624ba393..30082052081b 100644
--- a/apps/demos/Demos/DataGrid/GroupSummaries/Vue/App.vue
+++ b/apps/demos/Demos/DataGrid/GroupSummaries/Vue/App.vue
@@ -7,6 +7,7 @@
       key-expr="ID"
     >
       <DxSelection mode="single"/>
+      <DxPager :visible="true"/>
       <DxColumn
         :width="130"
         data-field="OrderNumber"
@@ -81,6 +82,7 @@ import {
   DxSummary,
   DxGroupItem,
   DxSortByGroupSummaryInfo,
+  DxPager,
 } from 'devextreme-vue/data-grid';
 import { orders } from './data.ts';
 
diff --git a/apps/demos/Demos/DataGrid/GroupSummaries/jQuery/index.js b/apps/demos/Demos/DataGrid/GroupSummaries/jQuery/index.js
index ee5830d20d73..8ca9d2ee397f 100644
--- a/apps/demos/Demos/DataGrid/GroupSummaries/jQuery/index.js
+++ b/apps/demos/Demos/DataGrid/GroupSummaries/jQuery/index.js
@@ -6,6 +6,9 @@ $(() => {
     selection: {
       mode: 'single',
     },
+    pager: {
+      visible: true,
+    },
     columns: [{
       dataField: 'OrderNumber',
       width: 130,
diff --git a/apps/demos/Demos/DataGrid/KeyboardNavigation/Angular/app/app.component.html b/apps/demos/Demos/DataGrid/KeyboardNavigation/Angular/app/app.component.html
index 3efe9ff789cf..816d39f351c0 100644
--- a/apps/demos/Demos/DataGrid/KeyboardNavigation/Angular/app/app.component.html
+++ b/apps/demos/Demos/DataGrid/KeyboardNavigation/Angular/app/app.component.html
@@ -28,6 +28,7 @@
     [showNavigationButtons]="true"
   >
   </dxo-pager>
+  <dxo-pager [visible]="true"></dxo-pager>
 
   <dxi-column dataField="FirstName"> </dxi-column>
 
diff --git a/apps/demos/Demos/DataGrid/KeyboardNavigation/React/App.tsx b/apps/demos/Demos/DataGrid/KeyboardNavigation/React/App.tsx
index 4b14165350a8..b5706d638317 100644
--- a/apps/demos/Demos/DataGrid/KeyboardNavigation/React/App.tsx
+++ b/apps/demos/Demos/DataGrid/KeyboardNavigation/React/App.tsx
@@ -32,6 +32,7 @@ const App = () => (
     <FilterPanel visible={true} />
     <FilterRow visible={true} />
     <Pager
+      visible={true}
       allowedPageSizes={allowedPageSizes}
       showPageSizeSelector={true}
       showNavigationButtons={true}
diff --git a/apps/demos/Demos/DataGrid/KeyboardNavigation/ReactJs/App.js b/apps/demos/Demos/DataGrid/KeyboardNavigation/ReactJs/App.js
index 159f98e231f3..27de63346d78 100644
--- a/apps/demos/Demos/DataGrid/KeyboardNavigation/ReactJs/App.js
+++ b/apps/demos/Demos/DataGrid/KeyboardNavigation/ReactJs/App.js
@@ -33,6 +33,7 @@ const App = () => (
       <FilterPanel visible={true} />
       <FilterRow visible={true} />
       <Pager
+        visible={true}
         allowedPageSizes={allowedPageSizes}
         showPageSizeSelector={true}
         showNavigationButtons={true}
diff --git a/apps/demos/Demos/DataGrid/KeyboardNavigation/Vue/App.vue b/apps/demos/Demos/DataGrid/KeyboardNavigation/Vue/App.vue
index 478b2660800d..026151a431f1 100644
--- a/apps/demos/Demos/DataGrid/KeyboardNavigation/Vue/App.vue
+++ b/apps/demos/Demos/DataGrid/KeyboardNavigation/Vue/App.vue
@@ -16,6 +16,7 @@
     <DxFilterRow :visible="true"/>
     <DxFilterPanel :visible="true"/>
     <DxPager
+      :visible="true"
       :allowed-page-sizes="[5, 10]"
       :show-page-size-selector="true"
       :show-navigation-buttons="true"
diff --git a/apps/demos/Demos/DataGrid/KeyboardNavigation/jQuery/index.js b/apps/demos/Demos/DataGrid/KeyboardNavigation/jQuery/index.js
index 086be9c417fb..472fa056b378 100644
--- a/apps/demos/Demos/DataGrid/KeyboardNavigation/jQuery/index.js
+++ b/apps/demos/Demos/DataGrid/KeyboardNavigation/jQuery/index.js
@@ -19,6 +19,7 @@ $(() => {
       visible: true,
     },
     pager: {
+      visible: true,
       allowedPageSizes: [5, 10],
       showPageSizeSelector: true,
       showNavigationButtons: true,
diff --git a/apps/demos/Demos/DataGrid/MultipleRecordSelectionModes/Angular/app/app.component.html b/apps/demos/Demos/DataGrid/MultipleRecordSelectionModes/Angular/app/app.component.html
index ac9feceab840..80af095f432a 100644
--- a/apps/demos/Demos/DataGrid/MultipleRecordSelectionModes/Angular/app/app.component.html
+++ b/apps/demos/Demos/DataGrid/MultipleRecordSelectionModes/Angular/app/app.component.html
@@ -11,6 +11,7 @@
       mode="multiple"
     ></dxo-selection>
     <dxo-paging [pageSize]="10"></dxo-paging>
+    <dxo-pager [visible]="true"></dxo-pager>
     <dxo-filter-row [visible]="true"></dxo-filter-row>
     <dxi-column
       dataField="orderId"
diff --git a/apps/demos/Demos/DataGrid/MultipleRecordSelectionModes/React/App.tsx b/apps/demos/Demos/DataGrid/MultipleRecordSelectionModes/React/App.tsx
index 579ca27ba5e8..59d09dc5c1b6 100644
--- a/apps/demos/Demos/DataGrid/MultipleRecordSelectionModes/React/App.tsx
+++ b/apps/demos/Demos/DataGrid/MultipleRecordSelectionModes/React/App.tsx
@@ -5,6 +5,7 @@ import DataGrid, {
   FilterRow,
   Paging,
   DataGridTypes,
+  Pager,
 } from 'devextreme-react/data-grid';
 import { SelectBox } from 'devextreme-react/select-box';
 import themes from 'devextreme/ui/themes';
@@ -40,6 +41,7 @@ const App = () => {
         />
         <FilterRow visible={true} />
         <Paging defaultPageSize={10} />
+        <Pager visible={true} />
 
         <Column dataField="orderId" caption="Order ID" width={90} />
         <Column dataField="city" />
diff --git a/apps/demos/Demos/DataGrid/MultipleRecordSelectionModes/ReactJs/App.js b/apps/demos/Demos/DataGrid/MultipleRecordSelectionModes/ReactJs/App.js
index b34e05758281..20a60b9825ba 100644
--- a/apps/demos/Demos/DataGrid/MultipleRecordSelectionModes/ReactJs/App.js
+++ b/apps/demos/Demos/DataGrid/MultipleRecordSelectionModes/ReactJs/App.js
@@ -1,6 +1,6 @@
 import React, { useCallback, useState } from 'react';
 import DataGrid, {
-  Column, Selection, FilterRow, Paging,
+  Column, Selection, FilterRow, Paging, Pager,
 } from 'devextreme-react/data-grid';
 import { SelectBox } from 'devextreme-react/select-box';
 import themes from 'devextreme/ui/themes';
@@ -35,6 +35,7 @@ const App = () => {
         />
         <FilterRow visible={true} />
         <Paging defaultPageSize={10} />
+        <Pager visible={true} />
 
         <Column
           dataField="orderId"
diff --git a/apps/demos/Demos/DataGrid/MultipleRecordSelectionModes/Vue/App.vue b/apps/demos/Demos/DataGrid/MultipleRecordSelectionModes/Vue/App.vue
index 080bf779f3c7..6cae8ebaf8ad 100644
--- a/apps/demos/Demos/DataGrid/MultipleRecordSelectionModes/Vue/App.vue
+++ b/apps/demos/Demos/DataGrid/MultipleRecordSelectionModes/Vue/App.vue
@@ -27,6 +27,7 @@
       />
 
       <DxPaging :page-size="10"/>
+      <DxPager :visible="true"/>
       <DxSelection
         :select-all-mode="allMode"
         :show-check-boxes-mode="checkBoxesMode"
@@ -68,6 +69,7 @@ import {
   DxPaging,
   DxSelection,
   DxFilterRow,
+  DxPager,
 } from 'devextreme-vue/data-grid';
 import themes from 'devextreme/ui/themes';
 import { sales } from './data.ts';
diff --git a/apps/demos/Demos/DataGrid/MultipleRecordSelectionModes/jQuery/index.js b/apps/demos/Demos/DataGrid/MultipleRecordSelectionModes/jQuery/index.js
index b8e293ba86a8..7c141d45fbe8 100644
--- a/apps/demos/Demos/DataGrid/MultipleRecordSelectionModes/jQuery/index.js
+++ b/apps/demos/Demos/DataGrid/MultipleRecordSelectionModes/jQuery/index.js
@@ -9,6 +9,9 @@ $(() => {
     paging: {
       pageSize: 10,
     },
+    pager: {
+      visible: true,
+    },
     filterRow: {
       visible: true,
     },
diff --git a/apps/demos/Demos/DataGrid/Overview/Angular/app/app.component.html b/apps/demos/Demos/DataGrid/Overview/Angular/app/app.component.html
index 80d0f5aabcc2..0a795d23a6de 100644
--- a/apps/demos/Demos/DataGrid/Overview/Angular/app/app.component.html
+++ b/apps/demos/Demos/DataGrid/Overview/Angular/app/app.component.html
@@ -10,6 +10,7 @@
 >
   <dxo-paging [pageSize]="10"></dxo-paging>
   <dxo-pager
+    [visible]="true"
     [showPageSizeSelector]="true"
     [allowedPageSizes]="[10, 25, 50, 100]"
   ></dxo-pager>
diff --git a/apps/demos/Demos/DataGrid/Overview/React/App.tsx b/apps/demos/Demos/DataGrid/Overview/React/App.tsx
index 1efc348eced2..ccb9fef2bbe9 100644
--- a/apps/demos/Demos/DataGrid/Overview/React/App.tsx
+++ b/apps/demos/Demos/DataGrid/Overview/React/App.tsx
@@ -73,7 +73,11 @@ const App = () => {
       <Column dataField="Channel" dataType="string" />
       <Column dataField="Customer" dataType="string" width={150} />
 
-      <Pager allowedPageSizes={pageSizes} showPageSizeSelector={true} />
+      <Pager
+        visible={true}
+        allowedPageSizes={pageSizes}
+        showPageSizeSelector={true}
+      />
       <Paging defaultPageSize={10} />
     </DataGrid>
   );
diff --git a/apps/demos/Demos/DataGrid/Overview/ReactJs/App.js b/apps/demos/Demos/DataGrid/Overview/ReactJs/App.js
index 7537886c9dbd..6126ac41649e 100644
--- a/apps/demos/Demos/DataGrid/Overview/ReactJs/App.js
+++ b/apps/demos/Demos/DataGrid/Overview/ReactJs/App.js
@@ -94,6 +94,7 @@ const App = () => {
       />
 
       <Pager
+        visible={true}
         allowedPageSizes={pageSizes}
         showPageSizeSelector={true}
       />
diff --git a/apps/demos/Demos/DataGrid/Overview/Vue/App.vue b/apps/demos/Demos/DataGrid/Overview/Vue/App.vue
index 58271146484d..8f7599c85bbf 100644
--- a/apps/demos/Demos/DataGrid/Overview/Vue/App.vue
+++ b/apps/demos/Demos/DataGrid/Overview/Vue/App.vue
@@ -58,6 +58,7 @@
     />
     <DxGrouping :auto-expand-all="false"/>
     <DxPager
+      :visible="true"
       :allowed-page-sizes="pageSizes"
       :show-page-size-selector="true"
     />
diff --git a/apps/demos/Demos/DataGrid/Overview/jQuery/index.js b/apps/demos/Demos/DataGrid/Overview/jQuery/index.js
index f248e707a8f4..a2d25f49c448 100644
--- a/apps/demos/Demos/DataGrid/Overview/jQuery/index.js
+++ b/apps/demos/Demos/DataGrid/Overview/jQuery/index.js
@@ -17,6 +17,7 @@ $(() => {
       pageSize: 10,
     },
     pager: {
+      visible: true,
       showPageSizeSelector: true,
       allowedPageSizes: [10, 25, 50, 100],
     },
diff --git a/apps/demos/Demos/DataGrid/PDFOverview/Angular/app/app.component.html b/apps/demos/Demos/DataGrid/PDFOverview/Angular/app/app.component.html
index 3c0e91689eba..e3cb481c2004 100644
--- a/apps/demos/Demos/DataGrid/PDFOverview/Angular/app/app.component.html
+++ b/apps/demos/Demos/DataGrid/PDFOverview/Angular/app/app.component.html
@@ -13,6 +13,7 @@
 
   <dxo-selection mode="multiple"></dxo-selection>
   <dxo-paging [pageSize]="10"></dxo-paging>
+  <dxo-pager [visible]="true"></dxo-pager>
   <dxo-grouping [autoExpandAll]="true"></dxo-grouping>
   <dxo-export
     [enabled]="true"
diff --git a/apps/demos/Demos/DataGrid/PDFOverview/React/App.tsx b/apps/demos/Demos/DataGrid/PDFOverview/React/App.tsx
index 2ce3ac23dfd7..977d1be15b75 100644
--- a/apps/demos/Demos/DataGrid/PDFOverview/React/App.tsx
+++ b/apps/demos/Demos/DataGrid/PDFOverview/React/App.tsx
@@ -6,6 +6,7 @@ import DataGrid, {
   Selection,
   Paging,
   DataGridTypes,
+  Pager,
 } from 'devextreme-react/data-grid';
 import { jsPDF } from 'jspdf';
 import { exportDataGrid } from 'devextreme/pdf_exporter';
@@ -37,6 +38,7 @@ const App = () => (
     <Selection mode="multiple" />
     <Grouping autoExpandAll={true} />
     <Paging defaultPageSize={10} />
+    <Pager visible={true} />
     <Export enabled={true} formats={exportFormats} allowExportSelectedData={true} />
 
     <Column dataField="CompanyName" dataType="string" />
diff --git a/apps/demos/Demos/DataGrid/PDFOverview/ReactJs/App.js b/apps/demos/Demos/DataGrid/PDFOverview/ReactJs/App.js
index 970fb45515fc..5eccb8833500 100644
--- a/apps/demos/Demos/DataGrid/PDFOverview/ReactJs/App.js
+++ b/apps/demos/Demos/DataGrid/PDFOverview/ReactJs/App.js
@@ -1,6 +1,11 @@
 import React from 'react';
 import DataGrid, {
-  Column, Grouping, Export, Selection, Paging,
+  Column,
+  Grouping,
+  Export,
+  Selection,
+  Paging,
+  Pager,
 } from 'devextreme-react/data-grid';
 import { jsPDF } from 'jspdf';
 import { exportDataGrid } from 'devextreme/pdf_exporter';
@@ -29,6 +34,7 @@ const App = () => (
     <Selection mode="multiple" />
     <Grouping autoExpandAll={true} />
     <Paging defaultPageSize={10} />
+    <Pager visible={true} />
     <Export
       enabled={true}
       formats={exportFormats}
diff --git a/apps/demos/Demos/DataGrid/PDFOverview/Vue/App.vue b/apps/demos/Demos/DataGrid/PDFOverview/Vue/App.vue
index b5403418d407..6b076aac66ad 100644
--- a/apps/demos/Demos/DataGrid/PDFOverview/Vue/App.vue
+++ b/apps/demos/Demos/DataGrid/PDFOverview/Vue/App.vue
@@ -18,6 +18,7 @@
 
       <DxGrouping :auto-expand-all="true"/>
       <DxPaging :page-size="10"/>
+      <DxPager :visible="true"/>
       <DxSelection mode="multiple"/>
       <DxExport
         :enabled="true"
@@ -36,6 +37,7 @@ import {
   DxSelection,
   DxPaging,
   DxDataGridTypes,
+  DxPager,
 } from 'devextreme-vue/data-grid';
 import { jsPDF } from 'jspdf';
 import { exportDataGrid } from 'devextreme/pdf_exporter';
diff --git a/apps/demos/Demos/DataGrid/PDFOverview/jQuery/index.js b/apps/demos/Demos/DataGrid/PDFOverview/jQuery/index.js
index ea84c6920e68..2ae08ef1c3d5 100644
--- a/apps/demos/Demos/DataGrid/PDFOverview/jQuery/index.js
+++ b/apps/demos/Demos/DataGrid/PDFOverview/jQuery/index.js
@@ -17,6 +17,9 @@ $(() => {
     paging: {
       pageSize: 10,
     },
+    pager: {
+      visible: true,
+    },
     columns: [
       'CompanyName',
       'Phone',
diff --git a/apps/demos/Demos/DataGrid/RecalculateWhileEditing/Angular/app/app.component.html b/apps/demos/Demos/DataGrid/RecalculateWhileEditing/Angular/app/app.component.html
index 96386d34223f..3f3fea541ddc 100644
--- a/apps/demos/Demos/DataGrid/RecalculateWhileEditing/Angular/app/app.component.html
+++ b/apps/demos/Demos/DataGrid/RecalculateWhileEditing/Angular/app/app.component.html
@@ -12,6 +12,7 @@
     [allowDeleting]="true"
   >
   </dxo-editing>
+  <dxo-pager [visible]="true"></dxo-pager>
 
   <dxi-column
     dataField="OrderNumber"
diff --git a/apps/demos/Demos/DataGrid/RecalculateWhileEditing/React/App.tsx b/apps/demos/Demos/DataGrid/RecalculateWhileEditing/React/App.tsx
index 856c89f48a2e..c1c01cb376ce 100644
--- a/apps/demos/Demos/DataGrid/RecalculateWhileEditing/React/App.tsx
+++ b/apps/demos/Demos/DataGrid/RecalculateWhileEditing/React/App.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import DataGrid, {
-  Column, Editing, Summary, TotalItem,
+  Column, Editing, Summary, TotalItem, Pager,
 } from 'devextreme-react/data-grid';
 import { orders } from './data.ts';
 
@@ -19,6 +19,7 @@ const App = () => (
       allowUpdating={true}
       allowDeleting={true}>
     </Editing>
+    <Pager visible={true} />
     <Column dataField="OrderNumber" width={130} caption="Invoice Number" />
     <Column dataField="OrderDate" dataType="date" />
     <Column dataField="Employee" />
diff --git a/apps/demos/Demos/DataGrid/RecalculateWhileEditing/ReactJs/App.js b/apps/demos/Demos/DataGrid/RecalculateWhileEditing/ReactJs/App.js
index 42bb52538f22..d536595699bc 100644
--- a/apps/demos/Demos/DataGrid/RecalculateWhileEditing/ReactJs/App.js
+++ b/apps/demos/Demos/DataGrid/RecalculateWhileEditing/ReactJs/App.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import DataGrid, {
-  Column, Editing, Summary, TotalItem,
+  Column, Editing, Summary, TotalItem, Pager,
 } from 'devextreme-react/data-grid';
 import { orders } from './data.js';
 
@@ -19,6 +19,7 @@ const App = () => (
       allowUpdating={true}
       allowDeleting={true}
     ></Editing>
+    <Pager visible={true} />
     <Column
       dataField="OrderNumber"
       width={130}
diff --git a/apps/demos/Demos/DataGrid/RecalculateWhileEditing/Vue/App.vue b/apps/demos/Demos/DataGrid/RecalculateWhileEditing/Vue/App.vue
index 72f908a33380..6d4c6f5d67c3 100644
--- a/apps/demos/Demos/DataGrid/RecalculateWhileEditing/Vue/App.vue
+++ b/apps/demos/Demos/DataGrid/RecalculateWhileEditing/Vue/App.vue
@@ -13,6 +13,7 @@
         :allow-deleting="true"
         mode="batch"
       />
+      <DxPager :visible="true"/>
 
       <DxColumn
         :width="130"
@@ -60,6 +61,7 @@ import {
   DxEditing,
   DxSummary,
   DxTotalItem,
+  DxPager,
 } from 'devextreme-vue/data-grid';
 import { orders } from './data.ts';
 
diff --git a/apps/demos/Demos/DataGrid/RecalculateWhileEditing/jQuery/index.js b/apps/demos/Demos/DataGrid/RecalculateWhileEditing/jQuery/index.js
index ffc1daf11fff..50f02470e4e1 100644
--- a/apps/demos/Demos/DataGrid/RecalculateWhileEditing/jQuery/index.js
+++ b/apps/demos/Demos/DataGrid/RecalculateWhileEditing/jQuery/index.js
@@ -10,6 +10,9 @@ $(() => {
       allowUpdating: true,
       allowDeleting: true,
     },
+    pager: {
+      visible: true,
+    },
     columns: [{
       dataField: 'OrderNumber',
       width: 130,
diff --git a/apps/demos/Demos/DataGrid/RecordGrouping/Angular/app/app.component.html b/apps/demos/Demos/DataGrid/RecordGrouping/Angular/app/app.component.html
index 048fd1c0517e..b96d67dfeaf3 100644
--- a/apps/demos/Demos/DataGrid/RecordGrouping/Angular/app/app.component.html
+++ b/apps/demos/Demos/DataGrid/RecordGrouping/Angular/app/app.component.html
@@ -14,6 +14,7 @@
 
   <dxo-search-panel [visible]="true"></dxo-search-panel>
   <dxo-paging [pageSize]="10"></dxo-paging>
+  <dxo-pager [visible]="true"></dxo-pager>
   <dxo-group-panel [visible]="true"></dxo-group-panel>
   <dxo-grouping #expand [autoExpandAll]="true"></dxo-grouping>
 </dx-data-grid>
diff --git a/apps/demos/Demos/DataGrid/RecordGrouping/React/App.tsx b/apps/demos/Demos/DataGrid/RecordGrouping/React/App.tsx
index 6f0779e7520c..b08d4f87eba0 100644
--- a/apps/demos/Demos/DataGrid/RecordGrouping/React/App.tsx
+++ b/apps/demos/Demos/DataGrid/RecordGrouping/React/App.tsx
@@ -5,6 +5,7 @@ import DataGrid, {
   GroupPanel,
   Paging,
   SearchPanel,
+  Pager,
 } from 'devextreme-react/data-grid';
 import CheckBox from 'devextreme-react/check-box';
 import { customers } from './data.ts';
@@ -29,6 +30,7 @@ const App = () => {
         <SearchPanel visible={true} />
         <Grouping autoExpandAll={autoExpandAll} />
         <Paging defaultPageSize={10} />
+        <Pager visible={true} />
 
         <Column dataField="CompanyName" dataType="string" />
         <Column dataField="Phone" dataType="string" />
diff --git a/apps/demos/Demos/DataGrid/RecordGrouping/ReactJs/App.js b/apps/demos/Demos/DataGrid/RecordGrouping/ReactJs/App.js
index 5fbe17b79936..eeb69ba0b7af 100644
--- a/apps/demos/Demos/DataGrid/RecordGrouping/ReactJs/App.js
+++ b/apps/demos/Demos/DataGrid/RecordGrouping/ReactJs/App.js
@@ -5,6 +5,7 @@ import DataGrid, {
   GroupPanel,
   Paging,
   SearchPanel,
+  Pager,
 } from 'devextreme-react/data-grid';
 import CheckBox from 'devextreme-react/check-box';
 import { customers } from './data.js';
@@ -27,6 +28,7 @@ const App = () => {
         <SearchPanel visible={true} />
         <Grouping autoExpandAll={autoExpandAll} />
         <Paging defaultPageSize={10} />
+        <Pager visible={true} />
 
         <Column
           dataField="CompanyName"
diff --git a/apps/demos/Demos/DataGrid/RecordGrouping/Vue/App.vue b/apps/demos/Demos/DataGrid/RecordGrouping/Vue/App.vue
index 30122829c557..a189cb8bf4ea 100644
--- a/apps/demos/Demos/DataGrid/RecordGrouping/Vue/App.vue
+++ b/apps/demos/Demos/DataGrid/RecordGrouping/Vue/App.vue
@@ -20,6 +20,7 @@
       <DxGroupPanel :visible="true"/>
       <DxGrouping :auto-expand-all="autoExpandAll"/>
       <DxPaging :page-size="10"/>
+      <DxPager :visible="true"/>
       <DxSearchPanel :visible="true"/>
     </DxDataGrid>
 
@@ -45,6 +46,7 @@ import {
   DxGroupPanel,
   DxSearchPanel,
   DxPaging,
+  DxPager,
 } from 'devextreme-vue/data-grid';
 import { customers } from './data.ts';
 
diff --git a/apps/demos/Demos/DataGrid/RecordGrouping/jQuery/index.js b/apps/demos/Demos/DataGrid/RecordGrouping/jQuery/index.js
index d67de9b8a637..fad1dc6a6a50 100644
--- a/apps/demos/Demos/DataGrid/RecordGrouping/jQuery/index.js
+++ b/apps/demos/Demos/DataGrid/RecordGrouping/jQuery/index.js
@@ -14,6 +14,9 @@ $(() => {
     paging: {
       pageSize: 10,
     },
+    pager: {
+      visible: true,
+    },
     groupPanel: {
       visible: true,
     },
diff --git a/apps/demos/Demos/DataGrid/RightToLeftSupport/Angular/app/app.component.html b/apps/demos/Demos/DataGrid/RightToLeftSupport/Angular/app/app.component.html
index 4555345749d4..c8792e079cce 100644
--- a/apps/demos/Demos/DataGrid/RightToLeftSupport/Angular/app/app.component.html
+++ b/apps/demos/Demos/DataGrid/RightToLeftSupport/Angular/app/app.component.html
@@ -6,6 +6,7 @@
   [showBorders]="true"
 >
   <dxo-paging [pageSize]="15"></dxo-paging>
+  <dxo-pager [visible]="true"></dxo-pager>
   <dxo-search-panel
     [visible]="true"
     [placeholder]="placeholder"
diff --git a/apps/demos/Demos/DataGrid/RightToLeftSupport/React/App.tsx b/apps/demos/Demos/DataGrid/RightToLeftSupport/React/App.tsx
index 23a89391688b..f918dc0baee7 100644
--- a/apps/demos/Demos/DataGrid/RightToLeftSupport/React/App.tsx
+++ b/apps/demos/Demos/DataGrid/RightToLeftSupport/React/App.tsx
@@ -1,5 +1,5 @@
 import React, { useCallback, useState } from 'react';
-import DataGrid, { Column, Paging, SearchPanel } from 'devextreme-react/data-grid';
+import DataGrid, { Column, Paging, SearchPanel, Pager, } from 'devextreme-react/data-grid';
 import SelectBox, { SelectBoxTypes } from 'devextreme-react/select-box';
 
 import { europeanUnion } from './data.ts';
@@ -40,6 +40,7 @@ const App = () => {
         rtlEnabled={rtlEnabled}
         showBorders={true}>
         <Paging defaultPageSize={15} />
+        <Pager visible={true} />
         <SearchPanel visible={true} placeholder={placeholder} />
         <Column dataField={rtlEnabled ? 'nameAr' : 'nameEn'}
           caption={rtlEnabled ? 'الدولة' : 'Name'} />
diff --git a/apps/demos/Demos/DataGrid/RightToLeftSupport/ReactJs/App.js b/apps/demos/Demos/DataGrid/RightToLeftSupport/ReactJs/App.js
index 56a1fcecda3c..4d661cbc7cca 100644
--- a/apps/demos/Demos/DataGrid/RightToLeftSupport/ReactJs/App.js
+++ b/apps/demos/Demos/DataGrid/RightToLeftSupport/ReactJs/App.js
@@ -1,5 +1,7 @@
 import React, { useCallback, useState } from 'react';
-import DataGrid, { Column, Paging, SearchPanel } from 'devextreme-react/data-grid';
+import DataGrid, {
+  Column, Paging, SearchPanel, Pager,
+} from 'devextreme-react/data-grid';
 import SelectBox from 'devextreme-react/select-box';
 import { europeanUnion } from './data.js';
 
@@ -43,6 +45,7 @@ const App = () => {
         showBorders={true}
       >
         <Paging defaultPageSize={15} />
+        <Pager visible={true} />
         <SearchPanel
           visible={true}
           placeholder={placeholder}
diff --git a/apps/demos/Demos/DataGrid/RightToLeftSupport/Vue/App.vue b/apps/demos/Demos/DataGrid/RightToLeftSupport/Vue/App.vue
index 0057c3d6886e..3978d1e6668a 100644
--- a/apps/demos/Demos/DataGrid/RightToLeftSupport/Vue/App.vue
+++ b/apps/demos/Demos/DataGrid/RightToLeftSupport/Vue/App.vue
@@ -8,6 +8,7 @@
       :show-borders="true"
     >
       <DxPaging :page-size="15"/>
+      <DxPager :visible="true"/>
       <DxSearchPanel
         :visible="true"
         :placeholder="placeholder"
@@ -64,6 +65,7 @@ import {
   DxColumn,
   DxPaging,
   DxSearchPanel,
+  DxPager,
 } from 'devextreme-vue/data-grid';
 import DxSelectBox, { DxSelectBoxTypes } from 'devextreme-vue/select-box';
 import { europeanUnion } from './data.ts';
diff --git a/apps/demos/Demos/DataGrid/RightToLeftSupport/jQuery/index.js b/apps/demos/Demos/DataGrid/RightToLeftSupport/jQuery/index.js
index ce934f22b55f..365e5dd1fbe9 100644
--- a/apps/demos/Demos/DataGrid/RightToLeftSupport/jQuery/index.js
+++ b/apps/demos/Demos/DataGrid/RightToLeftSupport/jQuery/index.js
@@ -61,6 +61,9 @@ $(() => {
     paging: {
       pageSize: 15,
     },
+    pager: {
+      visible: true,
+    },
     columns: englishColumns,
   }).dxDataGrid('instance');
 
diff --git a/apps/demos/Demos/DataGrid/StatePersistence/Angular/app/app.component.html b/apps/demos/Demos/DataGrid/StatePersistence/Angular/app/app.component.html
index c44b4db99981..f6b577060cc7 100644
--- a/apps/demos/Demos/DataGrid/StatePersistence/Angular/app/app.component.html
+++ b/apps/demos/Demos/DataGrid/StatePersistence/Angular/app/app.component.html
@@ -24,6 +24,7 @@
     storageKey="storage"
   ></dxo-state-storing>
   <dxo-pager
+    [visible]="true"
     [showPageSizeSelector]="true"
     [allowedPageSizes]="[5, 10, 20]"
   ></dxo-pager>
diff --git a/apps/demos/Demos/DataGrid/StatePersistence/React/App.tsx b/apps/demos/Demos/DataGrid/StatePersistence/React/App.tsx
index 970ce73d0846..803fd1d67ac7 100644
--- a/apps/demos/Demos/DataGrid/StatePersistence/React/App.tsx
+++ b/apps/demos/Demos/DataGrid/StatePersistence/React/App.tsx
@@ -33,7 +33,7 @@ const App = () => {
         <FilterRow visible={true} />
         <GroupPanel visible={true} />
         <StateStoring enabled={true} type="localStorage" storageKey="storage" />
-        <Pager showPageSizeSelector={true} allowedPageSizes={allowedPageSizes} />
+        <Pager visible={true} showPageSizeSelector={true} allowedPageSizes={allowedPageSizes} />
         <Column dataField="OrderNumber" caption="Invoice Number" width={130} />
         <Column dataField="OrderDate" sortOrder="desc" dataType="date" />
         <Column dataField="SaleAmount" alignment="right" format="currency" />
diff --git a/apps/demos/Demos/DataGrid/StatePersistence/ReactJs/App.js b/apps/demos/Demos/DataGrid/StatePersistence/ReactJs/App.js
index 9bec42c19406..793a2104b682 100644
--- a/apps/demos/Demos/DataGrid/StatePersistence/ReactJs/App.js
+++ b/apps/demos/Demos/DataGrid/StatePersistence/ReactJs/App.js
@@ -45,6 +45,7 @@ const App = () => {
           storageKey="storage"
         />
         <Pager
+          visible={true}
           showPageSizeSelector={true}
           allowedPageSizes={allowedPageSizes}
         />
diff --git a/apps/demos/Demos/DataGrid/StatePersistence/Vue/App.vue b/apps/demos/Demos/DataGrid/StatePersistence/Vue/App.vue
index 3b8b5fee252e..a27ce2e5b789 100644
--- a/apps/demos/Demos/DataGrid/StatePersistence/Vue/App.vue
+++ b/apps/demos/Demos/DataGrid/StatePersistence/Vue/App.vue
@@ -24,6 +24,7 @@
         storage-key="storage"
       />
       <DxPager
+        :visible="true"
         :show-page-size-selector="true"
         :allowed-page-sizes="[5, 10, 20]"
       />
diff --git a/apps/demos/Demos/DataGrid/StatePersistence/jQuery/index.js b/apps/demos/Demos/DataGrid/StatePersistence/jQuery/index.js
index 2b89c188553d..c2ff6826aea9 100644
--- a/apps/demos/Demos/DataGrid/StatePersistence/jQuery/index.js
+++ b/apps/demos/Demos/DataGrid/StatePersistence/jQuery/index.js
@@ -21,6 +21,7 @@ $(() => {
       storageKey: 'storage',
     },
     pager: {
+      visible: true,
       showPageSizeSelector: true,
       allowedPageSizes: [5, 10, 20],
     },
diff --git a/apps/demos/testing/widgets/datagrid/etalons/datagrid_edit_state_management_update_row_1_desktop.png b/apps/demos/testing/widgets/datagrid/etalons/datagrid_edit_state_management_update_row_1_desktop.png
index d4c2294fcbcb..a62d331c5d7e 100644
Binary files a/apps/demos/testing/widgets/datagrid/etalons/datagrid_edit_state_management_update_row_1_desktop.png and b/apps/demos/testing/widgets/datagrid/etalons/datagrid_edit_state_management_update_row_1_desktop.png differ
diff --git a/apps/demos/testing/widgets/datagrid/etalons/datagrid_edit_state_management_update_row_4_desktop.png b/apps/demos/testing/widgets/datagrid/etalons/datagrid_edit_state_management_update_row_4_desktop.png
index e7a9f6e283f8..86d93f79e90f 100644
Binary files a/apps/demos/testing/widgets/datagrid/etalons/datagrid_edit_state_management_update_row_4_desktop.png and b/apps/demos/testing/widgets/datagrid/etalons/datagrid_edit_state_management_update_row_4_desktop.png differ
diff --git a/apps/demos/testing/widgets/datagrid/etalons/datagrid_filtering_2_desktop (fluent.blue.light).png b/apps/demos/testing/widgets/datagrid/etalons/datagrid_filtering_2_desktop (fluent.blue.light).png
index 8141f60a6f45..45235dcf252e 100644
Binary files a/apps/demos/testing/widgets/datagrid/etalons/datagrid_filtering_2_desktop (fluent.blue.light).png and b/apps/demos/testing/widgets/datagrid/etalons/datagrid_filtering_2_desktop (fluent.blue.light).png differ
diff --git a/apps/demos/testing/widgets/datagrid/etalons/datagrid_filtering_2_desktop (material.blue.light).png b/apps/demos/testing/widgets/datagrid/etalons/datagrid_filtering_2_desktop (material.blue.light).png
index 02d7e88a4c48..59a517a4b64a 100644
Binary files a/apps/demos/testing/widgets/datagrid/etalons/datagrid_filtering_2_desktop (material.blue.light).png and b/apps/demos/testing/widgets/datagrid/etalons/datagrid_filtering_2_desktop (material.blue.light).png differ
diff --git a/apps/demos/testing/widgets/datagrid/etalons/datagrid_filtering_2_desktop.png b/apps/demos/testing/widgets/datagrid/etalons/datagrid_filtering_2_desktop.png
index c5b6c052f97b..85b51205c19d 100644
Binary files a/apps/demos/testing/widgets/datagrid/etalons/datagrid_filtering_2_desktop.png and b/apps/demos/testing/widgets/datagrid/etalons/datagrid_filtering_2_desktop.png differ
diff --git a/apps/demos/testing/widgets/datagrid/etalons/datagrid_filtering_3_desktop (fluent.blue.light).png b/apps/demos/testing/widgets/datagrid/etalons/datagrid_filtering_3_desktop (fluent.blue.light).png
index 98de5297087f..2121aed4d45c 100644
Binary files a/apps/demos/testing/widgets/datagrid/etalons/datagrid_filtering_3_desktop (fluent.blue.light).png and b/apps/demos/testing/widgets/datagrid/etalons/datagrid_filtering_3_desktop (fluent.blue.light).png differ
diff --git a/apps/demos/testing/widgets/datagrid/etalons/datagrid_filtering_3_desktop (material.blue.light).png b/apps/demos/testing/widgets/datagrid/etalons/datagrid_filtering_3_desktop (material.blue.light).png
index 7598dbdf84ce..07a0a23e00af 100644
Binary files a/apps/demos/testing/widgets/datagrid/etalons/datagrid_filtering_3_desktop (material.blue.light).png and b/apps/demos/testing/widgets/datagrid/etalons/datagrid_filtering_3_desktop (material.blue.light).png differ
diff --git a/apps/demos/testing/widgets/datagrid/etalons/datagrid_filtering_3_desktop.png b/apps/demos/testing/widgets/datagrid/etalons/datagrid_filtering_3_desktop.png
index 8f1a258492c2..964a9e5f7567 100644
Binary files a/apps/demos/testing/widgets/datagrid/etalons/datagrid_filtering_3_desktop.png and b/apps/demos/testing/widgets/datagrid/etalons/datagrid_filtering_3_desktop.png differ
diff --git a/apps/demos/testing/widgets/datagrid/etalons/datagrid_filtering_4_desktop (fluent.blue.light).png b/apps/demos/testing/widgets/datagrid/etalons/datagrid_filtering_4_desktop (fluent.blue.light).png
index c28370593f9a..031dc665307a 100644
Binary files a/apps/demos/testing/widgets/datagrid/etalons/datagrid_filtering_4_desktop (fluent.blue.light).png and b/apps/demos/testing/widgets/datagrid/etalons/datagrid_filtering_4_desktop (fluent.blue.light).png differ
diff --git a/apps/demos/testing/widgets/datagrid/etalons/datagrid_filtering_4_desktop (material.blue.light).png b/apps/demos/testing/widgets/datagrid/etalons/datagrid_filtering_4_desktop (material.blue.light).png
index 18e5dd21fe4e..3ad5409fca83 100644
Binary files a/apps/demos/testing/widgets/datagrid/etalons/datagrid_filtering_4_desktop (material.blue.light).png and b/apps/demos/testing/widgets/datagrid/etalons/datagrid_filtering_4_desktop (material.blue.light).png differ
diff --git a/apps/demos/testing/widgets/datagrid/etalons/datagrid_filtering_4_desktop.png b/apps/demos/testing/widgets/datagrid/etalons/datagrid_filtering_4_desktop.png
index 0ff57b3ffc8f..6e2e8c55c749 100644
Binary files a/apps/demos/testing/widgets/datagrid/etalons/datagrid_filtering_4_desktop.png and b/apps/demos/testing/widgets/datagrid/etalons/datagrid_filtering_4_desktop.png differ
diff --git a/apps/demos/testing/widgets/datagrid/etalons/datagrid_filtering_5_desktop (fluent.blue.light).png b/apps/demos/testing/widgets/datagrid/etalons/datagrid_filtering_5_desktop (fluent.blue.light).png
index f674d5cd60d1..95323f2f8d7c 100644
Binary files a/apps/demos/testing/widgets/datagrid/etalons/datagrid_filtering_5_desktop (fluent.blue.light).png and b/apps/demos/testing/widgets/datagrid/etalons/datagrid_filtering_5_desktop (fluent.blue.light).png differ
diff --git a/apps/demos/testing/widgets/datagrid/etalons/datagrid_filtering_5_desktop (material.blue.light).png b/apps/demos/testing/widgets/datagrid/etalons/datagrid_filtering_5_desktop (material.blue.light).png
index eb97a84e0828..94fe4198352c 100644
Binary files a/apps/demos/testing/widgets/datagrid/etalons/datagrid_filtering_5_desktop (material.blue.light).png and b/apps/demos/testing/widgets/datagrid/etalons/datagrid_filtering_5_desktop (material.blue.light).png differ
diff --git a/apps/demos/testing/widgets/datagrid/etalons/datagrid_filtering_5_desktop.png b/apps/demos/testing/widgets/datagrid/etalons/datagrid_filtering_5_desktop.png
index 2f63455a5ad1..4850360e749e 100644
Binary files a/apps/demos/testing/widgets/datagrid/etalons/datagrid_filtering_5_desktop.png and b/apps/demos/testing/widgets/datagrid/etalons/datagrid_filtering_5_desktop.png differ
diff --git a/apps/demos/testing/widgets/datagrid/etalons/datagrid_filtering_7_desktop (material.blue.light).png b/apps/demos/testing/widgets/datagrid/etalons/datagrid_filtering_7_desktop (material.blue.light).png
index 701f78aa7ac0..b6b9c9d0a931 100644
Binary files a/apps/demos/testing/widgets/datagrid/etalons/datagrid_filtering_7_desktop (material.blue.light).png and b/apps/demos/testing/widgets/datagrid/etalons/datagrid_filtering_7_desktop (material.blue.light).png differ
diff --git a/apps/demos/testing/widgets/datagrid/etalons/datagrid_filtering_7_desktop.png b/apps/demos/testing/widgets/datagrid/etalons/datagrid_filtering_7_desktop.png
index e3e1001ebc30..fa9c1dfd3837 100644
Binary files a/apps/demos/testing/widgets/datagrid/etalons/datagrid_filtering_7_desktop.png and b/apps/demos/testing/widgets/datagrid/etalons/datagrid_filtering_7_desktop.png differ
diff --git a/apps/demos/testing/widgets/datagrid/etalons/datagrid_filtering_8_desktop (fluent.blue.light).png b/apps/demos/testing/widgets/datagrid/etalons/datagrid_filtering_8_desktop (fluent.blue.light).png
index 32efcda9db3a..da8927dcac96 100644
Binary files a/apps/demos/testing/widgets/datagrid/etalons/datagrid_filtering_8_desktop (fluent.blue.light).png and b/apps/demos/testing/widgets/datagrid/etalons/datagrid_filtering_8_desktop (fluent.blue.light).png differ
diff --git a/apps/demos/testing/widgets/datagrid/etalons/datagrid_filtering_8_desktop (material.blue.light).png b/apps/demos/testing/widgets/datagrid/etalons/datagrid_filtering_8_desktop (material.blue.light).png
index 259c6533ac4c..6e25ceccb670 100644
Binary files a/apps/demos/testing/widgets/datagrid/etalons/datagrid_filtering_8_desktop (material.blue.light).png and b/apps/demos/testing/widgets/datagrid/etalons/datagrid_filtering_8_desktop (material.blue.light).png differ
diff --git a/apps/demos/testing/widgets/datagrid/etalons/datagrid_filtering_8_desktop.png b/apps/demos/testing/widgets/datagrid/etalons/datagrid_filtering_8_desktop.png
index ab74df8d126b..6820b504123f 100644
Binary files a/apps/demos/testing/widgets/datagrid/etalons/datagrid_filtering_8_desktop.png and b/apps/demos/testing/widgets/datagrid/etalons/datagrid_filtering_8_desktop.png differ
diff --git a/apps/demos/testing/widgets/datagrid/etalons/datagrid_filtering_API_2_desktop (fluent.blue.light).png b/apps/demos/testing/widgets/datagrid/etalons/datagrid_filtering_API_2_desktop (fluent.blue.light).png
index be3b24c385fb..9c10159a77bb 100644
Binary files a/apps/demos/testing/widgets/datagrid/etalons/datagrid_filtering_API_2_desktop (fluent.blue.light).png and b/apps/demos/testing/widgets/datagrid/etalons/datagrid_filtering_API_2_desktop (fluent.blue.light).png differ
diff --git a/apps/demos/testing/widgets/datagrid/etalons/datagrid_filtering_API_2_desktop (material.blue.light).png b/apps/demos/testing/widgets/datagrid/etalons/datagrid_filtering_API_2_desktop (material.blue.light).png
index 3a47f03f565d..848bc023fb80 100644
Binary files a/apps/demos/testing/widgets/datagrid/etalons/datagrid_filtering_API_2_desktop (material.blue.light).png and b/apps/demos/testing/widgets/datagrid/etalons/datagrid_filtering_API_2_desktop (material.blue.light).png differ
diff --git a/apps/demos/testing/widgets/datagrid/etalons/datagrid_filtering_API_2_desktop.png b/apps/demos/testing/widgets/datagrid/etalons/datagrid_filtering_API_2_desktop.png
index 0499687b1c12..0932c6e38d0a 100644
Binary files a/apps/demos/testing/widgets/datagrid/etalons/datagrid_filtering_API_2_desktop.png and b/apps/demos/testing/widgets/datagrid/etalons/datagrid_filtering_API_2_desktop.png differ
diff --git a/apps/demos/testing/widgets/datagrid/etalons/datagrid_filtering_by_range_3_desktop (material.blue.light).png b/apps/demos/testing/widgets/datagrid/etalons/datagrid_filtering_by_range_3_desktop (material.blue.light).png
index fdcb39ec0aee..212fd08f7ad2 100644
Binary files a/apps/demos/testing/widgets/datagrid/etalons/datagrid_filtering_by_range_3_desktop (material.blue.light).png and b/apps/demos/testing/widgets/datagrid/etalons/datagrid_filtering_by_range_3_desktop (material.blue.light).png differ
diff --git a/apps/demos/testing/widgets/datagrid/etalons/datagrid_filtering_by_range_3_desktop.png b/apps/demos/testing/widgets/datagrid/etalons/datagrid_filtering_by_range_3_desktop.png
index 74e10fa06b31..8522219796eb 100644
Binary files a/apps/demos/testing/widgets/datagrid/etalons/datagrid_filtering_by_range_3_desktop.png and b/apps/demos/testing/widgets/datagrid/etalons/datagrid_filtering_by_range_3_desktop.png differ
diff --git a/apps/demos/testing/widgets/datagrid/etalons/datagrid_filtering_by_range_4_desktop (fluent.blue.light).png b/apps/demos/testing/widgets/datagrid/etalons/datagrid_filtering_by_range_4_desktop (fluent.blue.light).png
index 30af4e778f98..a21d598997c9 100644
Binary files a/apps/demos/testing/widgets/datagrid/etalons/datagrid_filtering_by_range_4_desktop (fluent.blue.light).png and b/apps/demos/testing/widgets/datagrid/etalons/datagrid_filtering_by_range_4_desktop (fluent.blue.light).png differ
diff --git a/apps/demos/testing/widgets/datagrid/etalons/datagrid_filtering_by_range_4_desktop (material.blue.light).png b/apps/demos/testing/widgets/datagrid/etalons/datagrid_filtering_by_range_4_desktop (material.blue.light).png
index 80a1c237e70e..c45d0abe07a5 100644
Binary files a/apps/demos/testing/widgets/datagrid/etalons/datagrid_filtering_by_range_4_desktop (material.blue.light).png and b/apps/demos/testing/widgets/datagrid/etalons/datagrid_filtering_by_range_4_desktop (material.blue.light).png differ
diff --git a/apps/demos/testing/widgets/datagrid/etalons/datagrid_filtering_by_range_4_desktop.png b/apps/demos/testing/widgets/datagrid/etalons/datagrid_filtering_by_range_4_desktop.png
index b39da3627924..33eb26dfbc74 100644
Binary files a/apps/demos/testing/widgets/datagrid/etalons/datagrid_filtering_by_range_4_desktop.png and b/apps/demos/testing/widgets/datagrid/etalons/datagrid_filtering_by_range_4_desktop.png differ
diff --git a/apps/demos/testing/widgets/datagrid/etalons/datagrid_focus_on_filter_1_desktop (fluent.blue.light).png b/apps/demos/testing/widgets/datagrid/etalons/datagrid_focus_on_filter_1_desktop (fluent.blue.light).png
index 653a6a8a019e..b05c206f2223 100644
Binary files a/apps/demos/testing/widgets/datagrid/etalons/datagrid_focus_on_filter_1_desktop (fluent.blue.light).png and b/apps/demos/testing/widgets/datagrid/etalons/datagrid_focus_on_filter_1_desktop (fluent.blue.light).png differ
diff --git a/apps/demos/testing/widgets/datagrid/etalons/datagrid_focus_on_filter_1_desktop (material.blue.light).png b/apps/demos/testing/widgets/datagrid/etalons/datagrid_focus_on_filter_1_desktop (material.blue.light).png
index c6e2f4bb34cd..f48d2515a770 100644
Binary files a/apps/demos/testing/widgets/datagrid/etalons/datagrid_focus_on_filter_1_desktop (material.blue.light).png and b/apps/demos/testing/widgets/datagrid/etalons/datagrid_focus_on_filter_1_desktop (material.blue.light).png differ
diff --git a/apps/demos/testing/widgets/datagrid/etalons/datagrid_focus_on_filter_1_desktop.png b/apps/demos/testing/widgets/datagrid/etalons/datagrid_focus_on_filter_1_desktop.png
index 1227300608e9..8c6c3f4163d0 100644
Binary files a/apps/demos/testing/widgets/datagrid/etalons/datagrid_focus_on_filter_1_desktop.png and b/apps/demos/testing/widgets/datagrid/etalons/datagrid_focus_on_filter_1_desktop.png differ
diff --git a/apps/demos/testing/widgets/datagrid/etalons/datagrid_focus_on_filter_2_desktop (fluent.blue.light).png b/apps/demos/testing/widgets/datagrid/etalons/datagrid_focus_on_filter_2_desktop (fluent.blue.light).png
index 77447b86f476..6edad1dfa2ec 100644
Binary files a/apps/demos/testing/widgets/datagrid/etalons/datagrid_focus_on_filter_2_desktop (fluent.blue.light).png and b/apps/demos/testing/widgets/datagrid/etalons/datagrid_focus_on_filter_2_desktop (fluent.blue.light).png differ
diff --git a/apps/demos/testing/widgets/datagrid/etalons/datagrid_focus_on_filter_2_desktop (material.blue.light).png b/apps/demos/testing/widgets/datagrid/etalons/datagrid_focus_on_filter_2_desktop (material.blue.light).png
index 561c26f0fa03..851bca2a2c27 100644
Binary files a/apps/demos/testing/widgets/datagrid/etalons/datagrid_focus_on_filter_2_desktop (material.blue.light).png and b/apps/demos/testing/widgets/datagrid/etalons/datagrid_focus_on_filter_2_desktop (material.blue.light).png differ
diff --git a/apps/demos/testing/widgets/datagrid/etalons/datagrid_focus_on_filter_2_desktop.png b/apps/demos/testing/widgets/datagrid/etalons/datagrid_focus_on_filter_2_desktop.png
index dd13de408cfb..4b52b6064642 100644
Binary files a/apps/demos/testing/widgets/datagrid/etalons/datagrid_focus_on_filter_2_desktop.png and b/apps/demos/testing/widgets/datagrid/etalons/datagrid_focus_on_filter_2_desktop.png differ
diff --git a/apps/demos/testing/widgets/datagrid/etalons/datagrid_focus_on_filter_3_desktop (fluent.blue.light).png b/apps/demos/testing/widgets/datagrid/etalons/datagrid_focus_on_filter_3_desktop (fluent.blue.light).png
index b9d74433e504..886c9913f56b 100644
Binary files a/apps/demos/testing/widgets/datagrid/etalons/datagrid_focus_on_filter_3_desktop (fluent.blue.light).png and b/apps/demos/testing/widgets/datagrid/etalons/datagrid_focus_on_filter_3_desktop (fluent.blue.light).png differ
diff --git a/apps/demos/testing/widgets/datagrid/etalons/datagrid_focus_on_filter_3_desktop (material.blue.light).png b/apps/demos/testing/widgets/datagrid/etalons/datagrid_focus_on_filter_3_desktop (material.blue.light).png
index d4c0f4eccf57..bc7cd644c61a 100644
Binary files a/apps/demos/testing/widgets/datagrid/etalons/datagrid_focus_on_filter_3_desktop (material.blue.light).png and b/apps/demos/testing/widgets/datagrid/etalons/datagrid_focus_on_filter_3_desktop (material.blue.light).png differ
diff --git a/apps/demos/testing/widgets/datagrid/etalons/datagrid_focus_on_filter_3_desktop.png b/apps/demos/testing/widgets/datagrid/etalons/datagrid_focus_on_filter_3_desktop.png
index 0243f319763a..09ae17d49491 100644
Binary files a/apps/demos/testing/widgets/datagrid/etalons/datagrid_focus_on_filter_3_desktop.png and b/apps/demos/testing/widgets/datagrid/etalons/datagrid_focus_on_filter_3_desktop.png differ
diff --git a/apps/demos/testing/widgets/datagrid/etalons/datagrid_record_grouping_2_desktop (fluent.blue.light).png b/apps/demos/testing/widgets/datagrid/etalons/datagrid_record_grouping_2_desktop (fluent.blue.light).png
index 11dc8232a65e..bcc1c7620959 100644
Binary files a/apps/demos/testing/widgets/datagrid/etalons/datagrid_record_grouping_2_desktop (fluent.blue.light).png and b/apps/demos/testing/widgets/datagrid/etalons/datagrid_record_grouping_2_desktop (fluent.blue.light).png differ
diff --git a/apps/demos/testing/widgets/datagrid/etalons/datagrid_record_grouping_2_desktop (material.blue.light).png b/apps/demos/testing/widgets/datagrid/etalons/datagrid_record_grouping_2_desktop (material.blue.light).png
index 050a06c8b22b..378a8111813b 100644
Binary files a/apps/demos/testing/widgets/datagrid/etalons/datagrid_record_grouping_2_desktop (material.blue.light).png and b/apps/demos/testing/widgets/datagrid/etalons/datagrid_record_grouping_2_desktop (material.blue.light).png differ
diff --git a/apps/demos/testing/widgets/datagrid/etalons/datagrid_record_grouping_2_desktop.png b/apps/demos/testing/widgets/datagrid/etalons/datagrid_record_grouping_2_desktop.png
index d446d9fcce6f..9c720da8e18d 100644
Binary files a/apps/demos/testing/widgets/datagrid/etalons/datagrid_record_grouping_2_desktop.png and b/apps/demos/testing/widgets/datagrid/etalons/datagrid_record_grouping_2_desktop.png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/headerFilter/etalons/T1251768-header-filter-double-quotes.png b/e2e/testcafe-devextreme/tests/dataGrid/headerFilter/etalons/T1251768-header-filter-double-quotes.png
new file mode 100644
index 000000000000..17c107d1bf7b
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/headerFilter/etalons/T1251768-header-filter-double-quotes.png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/headerFilter/headerFilter.ts b/e2e/testcafe-devextreme/tests/dataGrid/headerFilter/headerFilter.ts
index f39dd302b65e..15fd2fd294f2 100644
--- a/e2e/testcafe-devextreme/tests/dataGrid/headerFilter/headerFilter.ts
+++ b/e2e/testcafe-devextreme/tests/dataGrid/headerFilter/headerFilter.ts
@@ -168,3 +168,28 @@ test('Header filter should support string height and width', async (t) => {
     width: '330px',
   },
 }));
+
+test('DataGrid - Column Header filter does not properly work if the column caption contains double quotes (T1251768)', async (t) => {
+  const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+  const dataGrid = new DataGrid(GRID_CONTAINER);
+  const filterIconElement = dataGrid.getHeaders().getHeaderRow(0).getHeaderCell(0).getFilterIcon();
+
+  await t
+    .click(filterIconElement)
+    .expect(await takeScreenshot('T1251768-header-filter-double-quotes.png', dataGrid.element))
+    .ok()
+    .expect(compareResults.isValid())
+    .ok(compareResults.errorMessages());
+}).before(async () => createWidget('dxDataGrid', {
+  dataSource: getData(5, 1),
+  headerFilter: {
+    visible: true,
+  },
+  columns: [
+    {
+      dataField: 'Position',
+      caption: '"סה"כ שולם"',
+    },
+    'FirstName',
+  ],
+}));
diff --git a/packages/devextreme/js/__internal/core/license/license_validation.server.test.ts b/packages/devextreme/js/__internal/core/license/license_validation.server.test.ts
index 7e094d24d219..ec1b314f7387 100644
--- a/packages/devextreme/js/__internal/core/license/license_validation.server.test.ts
+++ b/packages/devextreme/js/__internal/core/license/license_validation.server.test.ts
@@ -18,4 +18,19 @@ describe('license token', () => {
   test('API inside trial_panel should not be triggered on the server', () => {
     expect(() => validateLicense('', '1.0.4')).not.toThrow();
   });
+
+  test('API inside trial_panel should not be triggered in Angular, where HTMLElement is mocked', () => {
+    if (global.HTMLElement) {
+      throw Error('Wrong environment for this test!');
+    }
+
+    try {
+      // @ts-expect-error mocking HTMLElement with a symbol
+      global.HTMLElement = Symbol('HTMLElement mock');
+      expect(() => validateLicense('', '1.0.4')).not.toThrow();
+    } finally {
+      // @ts-expect-error removing the mock
+      delete global.HTMLElement;
+    }
+  });
 });
diff --git a/packages/devextreme/js/__internal/core/license/trial_panel.client.ts b/packages/devextreme/js/__internal/core/license/trial_panel.client.ts
index 9bd6b5c53bc1..5bf9446dc882 100644
--- a/packages/devextreme/js/__internal/core/license/trial_panel.client.ts
+++ b/packages/devextreme/js/__internal/core/license/trial_panel.client.ts
@@ -14,7 +14,7 @@ export interface CustomTrialPanelStyles {
   buttonStyles?: StylesMap;
 }
 
-export const isClient = (): boolean => typeof HTMLElement !== 'undefined';
+export const isClient = (): boolean => typeof HTMLElement !== 'undefined' && typeof customElements !== 'undefined';
 
 const SafeHTMLElement = isClient()
   ? HTMLElement
diff --git a/packages/devextreme/js/core/errors.js b/packages/devextreme/js/core/errors.js
index 7b26f9e54c85..28b58e4fe1fb 100644
--- a/packages/devextreme/js/core/errors.js
+++ b/packages/devextreme/js/core/errors.js
@@ -254,6 +254,7 @@ export default errorUtils({
     * @name ErrorsCore.W0019
     */
     W0019: 'DevExtreme: Unable to Locate a Valid License Key.\n\n' +
+        'Detailed license/registration related information and instructions: https://js.devexpress.com/Documentation/Licensing/.\n\n' +
         'If you are using a 30-day trial version of DevExtreme, you must uninstall all copies of DevExtreme once your 30-day trial period expires. For terms and conditions that govern use of DevExtreme UI components/libraries, please refer to the DevExtreme End User License Agreement: https://js.devexpress.com/EULAs/DevExtremeComplete.\n\n' +
         'To use DevExtreme in a commercial project, you must purchase a license. For pricing/licensing options, please visit: https://js.devexpress.com/Buy.\n\n' +
         'If you have licensing-related questions or need help with a purchase, please email clientservices@devexpress.com.\n\n',
@@ -261,6 +262,7 @@ export default errorUtils({
      * @name ErrorsCore.W0020
      */
     W0020: 'DevExtreme: License Key Has Expired.\n\n' +
+        'Detailed license/registration related information and instructions: https://js.devexpress.com/Documentation/Licensing/.\n\n' +
         'A mismatch exists between the license key used and the DevExtreme version referenced in this project.\n\n' +
         'To proceed, you can:\n' +
         '• use a version of DevExtreme linked to your license key: https://www.devexpress.com/ClientCenter/DownloadManager\n' +
@@ -270,12 +272,14 @@ export default errorUtils({
      * @name ErrorsCore.W0021
      */
     W0021: 'DevExtreme: License Key Verification Has Failed.\n\n' +
+        'Detailed license/registration related information and instructions: https://js.devexpress.com/Documentation/Licensing/.\n\n' +
         'To verify your DevExtreme license, make certain to specify a correct key in the GlobalConfig. If you continue to encounter this error, please visit https://www.devexpress.com/ClientCenter/DownloadManager to obtain a valid license key.\n\n' +
         'If you have a valid license and this problem persists, please submit a support ticket via the DevExpress Support Center. We will be happy to follow-up: https://supportcenter.devexpress.com/ticket/create.\n\n',
     /**
      * @name ErrorsCore.W0022
      */
     W0022: 'DevExtreme: Pre-release software. Not suitable for commercial use.\n\n' +
+        'Detailed license/registration related information and instructions: https://js.devexpress.com/Documentation/Licensing/.\n\n' +
         'Pre-release software may contain deficiencies and as such, should not be considered for use or integrated in any mission critical application.\n\n',
     /**
      * @name ErrorsCore.W0023
diff --git a/packages/devextreme/js/ui/shared/accessibility.js b/packages/devextreme/js/ui/shared/accessibility.js
index 404c53922995..ea60e4a209a1 100644
--- a/packages/devextreme/js/ui/shared/accessibility.js
+++ b/packages/devextreme/js/ui/shared/accessibility.js
@@ -71,7 +71,8 @@ function getActiveAccessibleElements(ariaLabel, viewElement) {
     let $activeElements;
 
     if(ariaLabel) {
-        $activeElements = $viewElement.find(`[aria-label="${ariaLabel}"][tabindex]`);
+        const escapedAriaLabel = ariaLabel?.replace(/"/g, '\\"');
+        $activeElements = $viewElement.find(`[aria-label="${escapedAriaLabel}"][tabindex]`);
     } else {
         $activeElements = $viewElement.find('[tabindex]');
     }