Local Virtual Scrolling
If the DataGrid component is bound to a large dataset, you can enable the virtual scroll feature to optimize data load times and improve user navigation. The component calculates the overall number of visible rows and displays a scrollbar that allows users to navigate to any section of rows. When users release the scroll thumb, the control loads records to be displayed in the viewport and removes other rows from memory.
To allow users to scroll the DataGrid virtually, set the scrolling.mode to "virtual".
In this demo, the DataGrid is bound to a local dataset of 100,000 records. You can drag the scrollbar on the right to see that records within the viewport are updated immediately.
Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you!
We appreciate your feedback.
We appreciate your feedback.
<template>
<DxDataGrid
id="gridContainer"
:customize-columns="customizeColumns"
:data-source="dataSource"
key-expr="id"
:show-borders="true"
@content-ready="onContentReady"
>
<DxLoadPanel :enabled="true"/>
<DxScrolling mode="virtual"/>
<DxSorting mode="none"/>
</DxDataGrid>
</template>
<script>
import {
DxDataGrid, DxScrolling, DxSorting, DxLoadPanel,
} from 'devextreme-vue/data-grid';
import { generateData } from './data.js';
export default {
components: {
DxDataGrid,
DxScrolling,
DxSorting,
DxLoadPanel,
},
computed: {
dataSource() {
return generateData(100000);
},
},
methods: {
onContentReady(e) {
e.component.option('loadPanel.enabled', false);
},
customizeColumns(columns) {
columns[0].width = 70;
},
},
};
</script>
<style>
#gridContainer {
height: 440px;
}
</style>
import { createApp } from 'vue';
import App from './App.vue';
createApp(App).mount('#app');
<!DOCTYPE html>
<html>
<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.2.3/css/dx.common.css" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/21.2.3/css/dx.light.css" />
<script src="https://unpkg.com/core-js@2.4.1/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.js");
</script>
</head>
<body class="dx-viewport">
<div class="demo-container">
<div id="app"> </div>
</div>
</body>
</html>
let s = 123456789;
const random = function() {
s = (1103515245 * s + 12345) % 2147483647;
return s % (10 - 1);
};
export const generateData = function(count) {
let i;
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 = [];
const startBirthDate = Date.parse('1/1/1975');
const endBirthDate = Date.parse('1/1/1992');
for (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;
};
window.config = {
transpiler: 'plugin-babel',
meta: {
'*.vue': {
loader: 'vue-loader',
},
'devextreme/localization.js': {
'esModule': true,
},
},
paths: {
'npm:': 'https://unpkg.com/',
},
map: {
'vue': 'npm:vue@3.0.0/dist/vue.esm-browser.js',
'vue-loader': 'npm:dx-systemjs-vue-browser@1.0.15/index.js',
'mitt': 'npm:mitt/dist/mitt.umd.js',
'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.2.3/cjs',
'devextreme-vue': 'npm:devextreme-vue@21.2.3',
'jszip': 'npm:jszip@3.7.1/dist/jszip.min.js',
'devextreme-quill': 'npm:devextreme-quill@1.5.5/dist/dx-quill.min.js',
'devexpress-diagram': 'npm:devexpress-diagram@2.1.37/dist/dx-diagram.js',
'devexpress-gantt': 'npm:devexpress-gantt@3.1.24/dist/dx-gantt.js',
'@devextreme/vdom': 'npm:@devextreme/vdom@2.2.3',
'@devextreme/runtime': 'npm:@devextreme/runtime@2.3.8',
'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',
'plugin-babel': 'npm:systemjs-plugin-babel@0.0.25/plugin-babel.js',
'systemjs-babel-build': 'npm:systemjs-plugin-babel@0.0.25/systemjs-babel-browser.js',
},
packages: {
'devextreme-vue': {
main: 'index.js',
},
'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:@devextreme/runtime@2.3.8/inferno/package.json',
],
babelOptions: {
sourceMaps: false,
stage0: true,
},
};
System.config(window.config);