Your search did not match any results.
Data Grid

Horizontal Virtual Scrolling

Documentation

Horizontal virtual scrolling improves the widget's rendering performance because the widget only renders columns that are in the viewpoint. To enable this feature, set the scrolling.columnRenderingMode option to "virtual".

Apply
Reset
<template> <dx-data-grid id="gridContainer" :data-source="dataSource" :show-borders="true" :column-width="100" > <dx-paging :enabled="false"/> <dx-scrolling column-rendering-mode="virtual"/> </dx-data-grid> </template> <script> import { DxDataGrid, DxScrolling, DxPaging } from 'devextreme-vue/data-grid'; import { generateData } from './data.js'; export default { components: { DxDataGrid, DxScrolling, DxPaging }, computed: { dataSource() { return generateData(50, 500); } } }; </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.3/css/dx.common.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/19.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"> <span v-if="false">Loading...</span> </div> </div> </body> </html>
export const generateData = function(rowCount, columnCount) { var i, j; var items = []; for (i = 0; i < rowCount; i++) { var item = {}; for (j = 0; j < columnCount; j++) { item[`field${ j + 1}`] = `${i + 1 }-${ j + 1}`; } 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 } });