Your search did not match any results.
Data Grid

Local Virtual Scrolling

Documentation

The DataGrid widget supports virtual record scrolling, allowing end users to navigate the contents of the widget by using its vertical scrollbar. In this demo, the DataGrid is connected to 100,000 records and virtual scroll mode has been enabled to simplify record navigation and eliminate the use of data pagers.

Copy to CodeSandBox
Apply
Reset
<template> <dx-data-grid id="gridContainer" :customize-columns="customizeColumns" :data-source="dataSource" :show-borders="true" @content-ready="onContentReady" > <dx-load-panel :enabled="true"/> <dx-scrolling mode="virtual"/> <dx-sorting mode="none"/> </dx-data-grid> </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 Vue from 'vue'; import App from './App.vue'; new Vue({ el: '#app', components: { App }, template: '<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/19.2.4/css/dx.common.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/19.2.4/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) { var i; var surnames = ['Smith', 'Johnson', 'Brown', 'Taylor', 'Anderson', 'Harris', 'Clark', 'Allen', 'Scott', 'Carter']; var names = ['James', 'John', 'Robert', 'Christopher', 'George', 'Mary', 'Nancy', 'Sandra', 'Michelle', 'Betty']; var gender = ['Male', 'Female']; var items = [], startBirthDate = Date.parse('1/1/1975'), endBirthDate = Date.parse('1/1/1992'); for (i = 0; i < count; i++) { var birthDate = new Date(startBirthDate + Math.floor( random() * (endBirthDate - startBirthDate) / 10)); birthDate.setHours(12); var nameIndex = random(); var item = { id: i + 1, firstName: names[nameIndex], lastName: surnames[random()], gender: gender[Math.floor(nameIndex / 5)], birthDate: birthDate }; items.push(item); } return items; };
System.config({ transpiler: 'plugin-babel', paths: { 'npm:': 'https://unpkg.com/' }, map: { vue: 'npm:vue@2.6.3/dist/vue.esm.browser.js', 'vue-loader': 'npm:dx-systemjs-vue-browser@latest/index.js', 'devextreme': 'npm:devextreme@19.2', 'devextreme-vue': 'npm:devextreme-vue@19.2', jszip: 'npm:jszip@3.1.3/dist/jszip.min.js', 'quill': 'npm:quill@1.3.7/dist/quill.js', 'devexpress-diagram': 'npm:devexpress-diagram', 'devexpress-gantt': 'npm:devexpress-gantt', 'plugin-babel': 'npm:systemjs-plugin-babel@0/plugin-babel.js', 'systemjs-babel-build': 'npm:systemjs-plugin-babel@0/systemjs-babel-browser.js' }, meta: { '*.vue': { loader: 'vue-loader' } }, packages: { 'devextreme-vue': { main: 'index.js' }, 'devextreme': { defaultExtension: 'js' } }, babelOptions: { sourceMaps: false, stage0: true } });