Your search did not match any results.
Data Grid

Record Paging

The DataGrid splits records into multiple pages. This technique helps optimize control performance: the client only needs to load and render one page at a time. Users can use a scroll bar or a pager to navigate between pages. This demo shows how to enable and customize the pager.

The pager is configured in the pager object and contains the following elements:

  • Page navigator
    Enables page navigation.

  • Page size selector
    Changes the page size. To display this element, enable the showPageSizeSelector property. You can also define the allowedPageSizes and specify the initial pageSize in the paging object.

  • Page information
    Displays the current page number and total record count. To display page information, enable the showInfo property. You can also use the infoText property to customize the information text string.

The pager supports full, compact, and adaptive (default) display modes. In compact mode, the pager hides page information and changes the appearance of other elements to use screen space more efficiently. In adaptive mode, the pager automatically chooses between the full and compact modes based on the DataGrid's width. Use the displayMode property to switch between modes.

In this demo, you can use the drop-down Display Mode menu to switch between full and compact display modes. You can also use the checkboxes to hide or display different pager elements. Note that when the pager is in compact mode, navigation buttons are always visible but page information is hidden.

Backend API
Copy to CodeSandBox
Apply
Reset
<dx-data-grid id="gridContainer" [customizeColumns]="customizeColumns" [dataSource]="dataSource" keyExpr="id" [showBorders]="true"> <dxo-scrolling rowRenderingMode="virtual"> </dxo-scrolling> <dxo-paging [pageSize]="10"> </dxo-paging> <dxo-pager [visible]="true" [allowedPageSizes]="allowedPageSizes" [displayMode]="displayMode" [showPageSizeSelector]="showPageSizeSelector" [showInfo]="showInfo" [showNavigationButtons]="showNavButtons"> </dxo-pager> </dx-data-grid> <div class="options"> <div class="caption">Options</div> <div class="option-container"> <div class="option"> <dx-select-box id="displayModes" displayExpr="text" valueExpr="value" [items]="displayModes" [(value)]="displayMode"> </dx-select-box> </div> <div class="option"> <dx-check-box id="showPageSizes" text="Show Page Size Selector" [(value)]="showPageSizeSelector"> </dx-check-box> </div> <div class="option"> <dx-check-box id="showInfo" text="Show Info Text" [disabled]="isCompactMode" [(value)]="showInfo"> </dx-check-box> </div> <div class="option"> <dx-check-box id="showNavButtons" text="Show Navigation Buttons" [disabled]="isCompactMode" [(value)]="showNavButtons"> </dx-check-box> </div> </div> </div>
import { NgModule, Component, enableProdMode } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { DxDataGridModule, DxCheckBoxModule, DxSelectBoxModule } from 'devextreme-angular'; import { Service, Employee } from './app.service'; if(!/localhost/.test(document.location.host)) { enableProdMode(); } @Component({ selector: 'demo-app', templateUrl: 'app/app.component.html', providers: [Service], styleUrls: ['app/app.component.css'] }) export class AppComponent { dataSource: Employee[]; readonly allowedPageSizes = [5, 10, 'all']; readonly displayModes = [{ text: "Display Mode 'full'", value: "full" }, { text: "Display Mode 'compact'", value: "compact" }]; displayMode = "full"; showPageSizeSelector = true; showInfo = true; showNavButtons = true; customizeColumns(columns) { columns[0].width = 70; } get isCompactMode() { return this.displayMode === "compact"; } constructor(service: Service) { this.dataSource = service.generateData(100000); } } @NgModule({ imports: [ BrowserModule, DxDataGridModule,DxCheckBoxModule, DxSelectBoxModule ], declarations: [AppComponent], bootstrap: [AppComponent] }) export class AppModule { } platformBrowserDynamic().bootstrapModule(AppModule);
#gridContainer { max-height: 800px; } .options { margin-top: 20px; padding: 20px; background-color: rgba(191, 191, 191, 0.15); position: relative; } .caption { font-size: 18px; font-weight: 500; } .option-container { display: flex; margin: 0 auto; justify-content: space-between; } .option { margin-top: 10px; display: flex; align-items: center; } .option-caption { white-space: nowrap; margin: 0 8px; }
import { Injectable } from '@angular/core'; export class Employee { id: number; firstName: string; lastName: string; gender: string; birthDate: Date; } const employees: Employee[] = []; const surnames: string[] = [ "Smith", "Johnson", "Brown", "Taylor", "Anderson", "Harris", "Clark", "Allen", "Scott", "Carter"]; const names: string[] = [ "James", "John", "Robert", "Christopher", "George", "Mary", "Nancy", "Sandra", "Michelle", "Betty"]; const gender: string[] = ["Male", "Female"]; let s: number = 123456789; @Injectable() export class Service { random() { s = (1103515245 * s + 12345) % 2147483647; return s % (10 - 1); } generateData(count: number) { let i: number, startBirthDate = Date.parse("1/1/1975"), endBirthDate = Date.parse("1/1/1992"); for (i = 0; i < count; i++) { let birthDate = new Date(startBirthDate + Math.floor( this.random() * (endBirthDate - startBirthDate) / 10)); birthDate.setHours(12); let nameIndex = this.random(); let item = { id: i + 1, firstName: names[nameIndex], lastName: surnames[this.random()], gender: gender[Math.floor(nameIndex / 5)], birthDate: birthDate }; employees.push(item); } return employees; } }
// In real applications, you should not transpile code in the browser. You can see how to create your own application with Angular and DevExtreme here: // https://js.devexpress.com/Documentation/Guide/Angular_Components/Getting_Started/Create_a_DevExtreme_Application/ window.config = { transpiler: 'ts', typescriptOptions: { module: "system", emitDecoratorMetadata: true, experimentalDecorators: true }, meta: { 'typescript': { "exports": "ts" }, 'devextreme/localization.js': { "esModule": true }, }, paths: { 'npm:': 'https://unpkg.com/' }, map: { 'ts': 'npm:plugin-typescript@8.0.0/lib/plugin.js', 'typescript': 'npm:typescript@3.5.3/lib/typescript.js', '@angular': 'npm:@angular', 'tslib': 'npm:tslib@2.3.1/tslib.js', 'rxjs': 'npm:rxjs@6.4.0', 'rrule': 'npm:rrule@2.6.6/dist/es5/rrule.js', 'luxon': 'npm:luxon@1.28.0/build/global/luxon.min.js', 'es6-object-assign': 'npm:es6-object-assign@1.1.0', 'devextreme': 'npm:devextreme@21.1.6/cjs', 'devextreme/bundles/dx.all': 'npm:devextreme@21.1.6/bundles/dx.all.js', 'jszip': 'npm:jszip@3.7.1/dist/jszip.min.js', 'devextreme-quill': 'npm:devextreme-quill@1.4.2/dist/dx-quill.min.js', 'devexpress-diagram': 'npm:devexpress-diagram@2.1.32', 'devexpress-gantt': 'npm:devexpress-gantt@3.0.14', 'devextreme-angular': 'npm:devextreme-angular@21.1.6', '@devextreme/vdom': 'npm:@devextreme/vdom@1.2.2', 'inferno': 'npm:inferno@7.4.10/dist/inferno.min.js', 'inferno-compat': 'npm:inferno-compat@7.4.10/dist/inferno-compat.min.js', 'inferno-create-element': 'npm:inferno-create-element@7.4.10/dist/inferno-create-element.min.js', 'inferno-dom': 'npm:inferno-dom@1.0.7/dist/inferno-dom.min.js', 'inferno-hydrate': 'npm:inferno-hydrate@7.4.10/dist/inferno-hydrate.min.js', 'inferno-clone-vnode': 'npm:inferno-clone-vnode@7.4.10/dist/inferno-clone-vnode.min.js', 'inferno-create-class': 'npm:inferno-create-class@7.4.10/dist/inferno-create-class.min.js', 'inferno-extras': 'npm:inferno-extras@7.4.10/dist/inferno-extras.min.js' }, packages: { 'app': { main: './app.component.ts', defaultExtension: 'ts' }, 'devextreme': { defaultExtension: 'js' }, '@devextreme/vdom': { defaultExtension: 'js' }, 'devextreme/events/utils': { main: 'index' }, 'devextreme/events': { main: 'index' }, 'es6-object-assign': { main: './index.js', defaultExtension: 'js' } }, packageConfigPaths: [ "npm:@devextreme/*/package.json", "npm:@angular/*/package.json", "npm:@angular/common/*/package.json", "npm:rxjs/package.json", "npm:rxjs/operators/package.json", "npm:devextreme-angular/*/package.json", "npm:devextreme-angular/ui/*/package.json", "npm:devextreme-angular/package.json", "npm:devexpress-diagram/package.json", "npm:devexpress-gantt/package.json", ] }; System.config(window.config);
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/21.1.6/css/dx.common.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/21.1.6/css/dx.light.css" /> <script src="https://unpkg.com/core-js@2.4.1/client/shim.min.js"></script> <script src="https://unpkg.com/zone.js@0.10.3/dist/zone.js"></script> <script src="https://unpkg.com/reflect-metadata@0.1.3/Reflect.js"></script> <script src="https://unpkg.com/systemjs@0.21.3/dist/system.js"></script> <script src="config.js"></script> <script> System.import('app').catch(console.error.bind(console)); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <demo-app>Loading...</demo-app> </div> </body> </html>