React Data Grid - Infinite Scrolling

If the DataGrid component is bound to a large dataset, you can enable infinite scroll mode to optimize data load times and improve user navigation. The component initially displays one page of rows. When users scroll to the end of the view, the DataGrid loads an additional page. Users can only load pages sequentially and cannot skip to arbitrary positions within the dataset.

To enable infinite scroll mode, set the scrolling.mode to "infinite".

In this demo, the DataGrid is bound to a dataset of 100,000 records. Scroll to the last record to load the next page of records.

Was this demo helpful?

Thank you!

Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.

Thank you for the feedback!

TS JS

Backend API

​x
 
import React from 'react';
import DataGrid, {  Scrolling, Sorting, LoadPanel, type DataGridTypes,} from 'devextreme-react/data-grid';import { generateData } from './data.ts';​const dataSource = generateData(100000);​const customizeColumns = (columns: DataGridTypes.Column[]) => {  columns[0].width = 70;};​const App = () => (  <DataGrid    height={440}    dataSource={dataSource}    keyExpr="id"    showBorders={true}    customizeColumns={customizeColumns}  >    <Sorting mode="none" />    <Scrolling mode="infinite" />    <LoadPanel enabled={false} />  </DataGrid>);​export default App;​

xxxxxxxxxx
 
import React from 'react';
import DataGrid, { Scrolling, Sorting, LoadPanel } from 'devextreme-react/data-grid';import { generateData } from './data.js';​const dataSource = generateData(100000);const customizeColumns = (columns) => {  columns[0].width = 70;};const App = () => (  <DataGrid    height={440}    dataSource={dataSource}    keyExpr="id"    showBorders={true}    customizeColumns={customizeColumns}  >    <Sorting mode="none" />    <Scrolling mode="infinite" />    <LoadPanel enabled={false} />  </DataGrid>);export default App;​

xxxxxxxxxx
 
import React from 'react';
import ReactDOM from 'react-dom';​import App from './App.tsx';​ReactDOM.render(  <App />,  document.getElementById('app'),);​

xxxxxxxxxx
 
let s = 123456789;
function random() {  s = (1103515245 * s + 12345) % 2147483647;  return s % (10 - 1);}​export function generateData(count: number) {  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: ({ id: number; firstName: string; lastName: string; gender: string; birthDate: Date; })[] = [];  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;}​

xxxxxxxxxx
 
window.exports = window.exports || {};
window.config = {  transpiler: 'ts',  typescriptOptions: {    module: 'system',    emitDecoratorMetadata: true,    experimentalDecorators: true,    jsx: 'react',  },  meta: {    'react': {      'esModule': true,    },    'typescript': {      'exports': 'ts',    },    'devextreme/time_zone_utils.js': {      'esModule': true,    },    'devextreme/localization.js': {      'esModule': true,    },    'devextreme/viz/palette.js': {      'esModule': true,    },    'openai': {      'esModule': true,    },  },  paths: {    'npm:': 'https://unpkg.com/',    'bundles:': 'bundles/',    'externals:': 'bundles/externals/',  },  defaultExtension: 'js',  map: {    'ts': 'npm:plugin-typescript@8.0.0/lib/plugin.js',    'typescript': 'npm:typescript@4.2.4/lib/typescript.js',    'jszip': 'npm:jszip@3.10.1/dist/jszip.min.js',    'react': 'npm:react@17.0.2/umd/react.development.js',    'react-dom': 'npm:react-dom@17.0.2/umd/react-dom.development.js',    'prop-types': 'npm:prop-types/prop-types.js',    'rrule': 'npm:rrule@2.6.4/dist/es5/rrule.js',    'luxon': 'npm:luxon@3.4.4/build/global/luxon.min.js',    'es6-object-assign': 'npm:es6-object-assign',    'devextreme': 'npm:devextreme@24.2.6/cjs',    'devextreme-react': 'npm:devextreme-react@24.2.6/cjs',    'devextreme-quill': 'npm:devextreme-quill@1.7.1/dist/dx-quill.min.js',    'devexpress-diagram': 'npm:devexpress-diagram@2.2.15/dist/dx-diagram.js',    'devexpress-gantt': 'npm:devexpress-gantt@4.1.60/dist/dx-gantt.js',    '@devextreme/runtime': 'npm:@devextreme/runtime@3.0.12',    'inferno': 'npm:inferno@7.4.11/dist/inferno.min.js',    'inferno-compat': 'npm:inferno-compat/dist/inferno-compat.min.js',    'inferno-create-element': 'npm:inferno-create-element@7.4.11/dist/inferno-create-element.min.js',    'inferno-dom': 'npm:inferno-dom/dist/inferno-dom.min.js',    'inferno-hydrate': 'npm:inferno-hydrate/dist/inferno-hydrate.min.js',    'inferno-clone-vnode': 'npm:inferno-clone-vnode/dist/inferno-clone-vnode.min.js',    'inferno-create-class': 'npm:inferno-create-class/dist/inferno-create-class.min.js',    'inferno-extras': 'npm:inferno-extras/dist/inferno-extras.min.js',    'devextreme-cldr-data': 'npm:devextreme-cldr-data@1.0.3',    // SystemJS plugins    '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',    // Prettier    'prettier/standalone': 'npm:prettier@2.8.8/standalone.js',    'prettier/parser-html': 'npm:prettier@2.8.8/parser-html.js',  },  packages: {    'devextreme': {      defaultExtension: 'js',    },    'devextreme-react': {      main: 'index.js',    },    'devextreme/events/utils': {      main: 'index',    },    'devextreme/common/core/events/utils': {      main: 'index',    },    'devextreme/localization/messages': {      format: 'json',      defaultExtension: 'json',    },    'devextreme/events': {      main: 'index',    },    'es6-object-assign': {      main: './index.js',      defaultExtension: 'js',    },  },  packageConfigPaths: [    'npm:@devextreme/*/package.json',    'npm:@devextreme/runtime@3.0.12/inferno/package.json',  ],  babelOptions: {    sourceMaps: false,    stage0: true,    react: true,  },};System.config(window.config);​

xxxxxxxxxx
 
import React from 'react';
import ReactDOM from 'react-dom';import App from './App.js';​ReactDOM.render(<App />, document.getElementById('app'));​

xxxxxxxxxx
 
let s = 123456789;
function random() {  s = (1103515245 * s + 12345) % 2147483647;  return s % (10 - 1);}export function generateData(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;}​

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">  <head>↔</head>​  <body class="dx-viewport">    <div class="demo-container">      <div id="app"></div>    </div>  </body></html>​

xxxxxxxxxx