Vue 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.

Was this demo helpful?

Thank you!

Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.

Thank you for the feedback!

Backend API

<template> <div> <DxDataGrid id="gridContainer" :customize-columns="customizeColumns" :data-source="dataSource" key-expr="id" :show-borders="true" > <DxScrolling row-rendering-mode="virtual"/> <DxPaging :page-size="10"/> <DxPager :visible="true" :allowed-page-sizes="pageSizes" :display-mode="displayMode" :show-page-size-selector="showPageSizeSelector" :show-info="showInfo" :show-navigation-buttons="showNavButtons" /> </DxDataGrid> <div class="options"> <div class="caption">Options</div> <div class="option-container"> <div class="option"> <DxSelectBox id="dispalyModes" :items="displayModes" :input-attr="{ 'aria-label': 'Display Mode' }" display-expr="text" value-expr="value" v-model:value="displayMode" /> </div> <div class="option"> <DxCheckBox id="showPageSizes" text="Show Page Size Selector" v-model:value="showPageSizeSelector" /> </div> <div class="option"> <DxCheckBox id="showInfo" text="Show Info Text" v-model:value="showInfo" /> </div> <div class="option"> <DxCheckBox id="showNavButtons" text="Show Navigation Buttons" :disabled="isCompactMode" v-model:value="showNavButtons" /> </div> </div> </div> </div> </template> <script setup lang="ts"> import { computed, ref } from 'vue'; import { DxDataGrid, DxScrolling, DxPager, DxPaging, DxDataGridTypes, } from 'devextreme-vue/data-grid'; import DxSelectBox from 'devextreme-vue/select-box'; import DxCheckBox from 'devextreme-vue/check-box'; import { generateData } from './data.ts'; const dataSource = generateData(100000); const displayModes = [ { text: 'Display Mode \'full\'', value: 'full' }, { text: 'Display Mode \'compact\'', value: 'compact' }, ]; const pageSizes = [5, 10, 'all']; const displayMode = ref('full'); const showPageSizeSelector = ref(true); const showInfo = ref(true); const showNavButtons = ref(true); const isCompactMode = computed(() => displayMode.value === 'compact'); const customizeColumns = (columns: DxDataGridTypes.Column[]) => { columns[0].width = 70; }; </script>

export type Employee = { id: number; firstName: string; lastName: string; gender: string; birthDate: Date; }; let s = 123456789; function random() { s = (1103515245 * s + 12345) % 2147483647; return s % (10 - 1); } export function generateData(count: number) { const surnames = ['Smith', 'Johnson', 'Brown', 'Taylor', 'Anderson', 'Harris', 'Clark', 'Allen', 'Scott', 'Carter']; const names = ['James', 'John', 'Robert', 'Christopher', 'George', 'Mary', 'Nancy', 'Sandra', 'Michelle', 'Betty']; const gender = ['Male', 'Female']; const items: Employee[] = []; const startBirthDate = Date.parse('1/1/1975'); const endBirthDate = Date.parse('1/1/1992'); for (let i = 0; i < count; i += 1) { const birthDate = new Date(startBirthDate + Math.floor( (random() * (endBirthDate - startBirthDate)) / 10, )); birthDate.setHours(12); const nameIndex = random(); const item = { id: i + 1, firstName: names[nameIndex], lastName: surnames[random()], gender: gender[Math.floor(nameIndex / 5)], birthDate, }; items.push(item); } return items; }

import { createApp } from 'vue'; import App from './App.vue'; createApp(App).mount('#app');

#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; }

<!DOCTYPE html> <html lang="en"> <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=5.0" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/24.1.5/css/dx.light.css" /> <link rel="stylesheet" type="text/css" href="styles.css" /> <script type="module"> import * as vueCompilerSFC from "https://unpkg.com/@vue/compiler-sfc@3.4.16/dist/compiler-sfc.esm-browser.js"; window.vueCompilerSFC = vueCompilerSFC; </script> <script src="https://unpkg.com/typescript@4.9.5/lib/typescript.js"></script> <script src="https://unpkg.com/core-js@2.6.12/client/shim.min.js"></script> <script src="https://unpkg.com/systemjs@0.21.3/dist/system.js"></script> <script type="text/javascript" src="config.js"></script> <script type="text/javascript"> System.import("./index.ts"); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"> </div> </div> </body> </html>

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 changes the appearance of the page navigator and page selector 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.