Vue Data Grid - Horizontal Virtual Scrolling

Horizontal virtual scrolling improves performance by rendering only displayed columns. To enable this feature, set scrolling.columnRenderingMode to "virtual".

Backend API

<template> <DxDataGrid id="gridContainer" :data-source="dataSource" key-expr="field1" :show-borders="true" :column-width="100" > <DxPaging :enabled="false"/> <DxScrolling column-rendering-mode="virtual"/> </DxDataGrid> </template> <script setup lang="ts"> import { DxDataGrid, DxScrolling, DxPaging } from 'devextreme-vue/data-grid'; import { generateData } from './data.ts'; const dataSource = generateData(50, 500); </script> <style> #gridContainer { height: 440px; } </style>

export const generateData = function (rowCount: number, columnCount: number) { let i; let j; const items = []; for (i = 0; i < rowCount; i += 1) { const item: Record<string, string> = {}; for (j = 0; j < columnCount; j += 1) { item[`field${j + 1}`] = `${i + 1}-${j + 1}`; } items.push(item); } return items; };

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

<!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/26.1.5/css/dx.light.css" /> <link rel="stylesheet" type="text/css" href="./bundle.css" /> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"> </div> </div> <script src="bundles/vendor/vue.vendor.js"></script> <script src="./bundle.js"></script> </body> </html>

You can scroll the component's data horizontally using Shift + Scroll Wheel. Utilize the Home/End keys to jump to the focused row's first/last cells, and Ctrl + Home/Ctrl + End to jump to the first cell of the first row/last cell of the last row.