DevExtreme v25.1 is now available.

Explore our newest features/capabilities and share your thoughts with us.

Your search did not match any results.

JavaScript/jQuery 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
$(() => { const columnCount = 500; const rowCount = 50; $('#grid').dxDataGrid({ dataSource: generateData(rowCount, columnCount), keyExpr: 'field1', columnWidth: 100, showBorders: true, scrolling: { columnRenderingMode: 'virtual', }, paging: { enabled: false, }, }); });
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" 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" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script>window.jQuery || document.write(decodeURIComponent('%3Cscript src="js/jquery.min.js"%3E%3C/script%3E'))</script> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/25.1.3/css/dx.light.css" /> <script src="js/dx.all.js"></script> <script src="data.js"></script> <script src="index.js"></script> <link rel="stylesheet" type="text/css" href="styles.css" /> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="grid"></div> </div> </body> </html>
#grid { max-height: 440px; }
const generateData = function (rowCount, columnCount) { let i; let j; const items = []; for (i = 0; i < rowCount; i += 1) { const item = {}; for (j = 0; j < columnCount; j += 1) { item[`field${j + 1}`] = `${i + 1}-${j + 1}`; } items.push(item); } return items; };

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.