Vue Data Grid - Paging

The DevExtreme DataGrid ships with comprehensive data paging support and can load rows in chunks to improve performance when displaying large data sets. This demo allows you to navigate between pages using the DataGrid’s integrated pager.

You can use the controls below the DataGrid to change pager display mode and toggle visibility of individual pager elements. Note: navigation buttons are always visible in compact mode.

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, } from 'devextreme-vue/data-grid'; import type { DxDataGridTypes } from 'devextreme-vue/data-grid'; import DxSelectBox from 'devextreme-vue/select-box'; import DxCheckBox from 'devextreme-vue/check-box'; import type { DisplayMode } from 'devextreme-vue/common'; import type { PagerPageSize } from 'devextreme-vue/common/grids'; import { generateData } from './data.ts'; const dataSource = generateData(100000); const displayModes: { text: string, value: DisplayMode, }[] = [ { text: 'Display Mode \'full\'', value: 'full' }, { text: 'Display Mode \'compact\'', value: 'compact' }, ]; const pageSizes: (number | PagerPageSize)[] = [5, 10, 'all']; const displayMode = ref(displayModes[0].value); 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/25.2.6/css/dx.light.css" /> <link rel="stylesheet" type="text/css" href="styles.css" /> <script type="module"> import * as vueCompilerSFC from "https://cdn.jsdelivr.net/npm/@vue/compiler-sfc@3.4.27/dist/compiler-sfc.esm-browser.js"; window.vueCompilerSFC = vueCompilerSFC; </script> <script src="https://cdn.jsdelivr.net/npm/typescript@5.9.3/lib/typescript.js"></script> <script src="https://cdn.jsdelivr.net/npm/core-js@2.6.12/client/shim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/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 built-in Grid pager contains the following UI elements:

Page navigator
Enables page navigation.
Page size selector
Changes page size. To display this element, enable the showPageSizeSelector property. You can also define allowed page sizes and specify the initial page size.
Page information
Displays current page number and total record count. To display page information, enable the showInfo property. You can customize this information text as needed.

The DevExtreme DataGrid’s built-in pager supports full, compact, and adaptive (default) display modes. In compact mode, the pager uses less screen space. In adaptive mode, the DataGrid automatically selects between full and compact modes based on the component width.

The DevExtreme DataGrid also supports external pagers. You can hide the built-in pager and configure a standalone Pagination component to navigate the DataGrid. For additional information, refer to the following example: DevExtreme DataGrid - Display a Pager Above the Grid.