--- title: "Build Fast, Scalable React Data Grids for Large Datasets Using Virtualization [Webinar Show Notes]" published_at: "2026-09-30T15:46:36+00:00" modified_at: "2026-09-30T15:46:37+00:00" url: "https://www.syncfusion.com/blogs/post/react-data-grid-virtualization" excerpt: "Explore webinar show notes on building React Data Grids for large datasets using virtual scrolling, paging, and DOM virtualization with Syncfusion React Data Grid." taxonomy_category: - "Data Grid" - "Large Datasets" - "Performance" - "React" - "Virtualization" - "Webinar" taxonomy_post_tag: - "DataManager" - "DOM virtualization" - "Large datasets" - "Paging" - "performance" - "React Data Grid" - "Remote Data Binding" - "Syncfusion" - "UrlAdaptor" - "Virtual scrolling" - "Virtualization" - "Webinar" --- # Build Fast, Scalable React Data Grids for Large Datasets Using Virtualization [Webinar Show Notes] [Prabhavathi Kannan](https://www.syncfusion.com/blogs/author/prabhavathi-kannan) ![How to Handle Large Datasets in React Data Grid with Virtualization \[Webinar Show Notes\]](https://www.syncfusion.com/blogs/wp-content/uploads/2026/09/How-to-Handle-Large-Datasets-in-React-Data-Grid-with-Virtualization-Webinar-Show-Notes.webp) What happens when a React Data Grid needs to display 100,000 records? The challenge isn’t always the amount of data itself. Rendering thousands of rows and cells in the browser can create unnecessary DOM work, especially when users can see only a small portion of the dataset at a time. This is where virtualization and paging strategies become important. Virtual scrolling, paging, and DOM virtualization address different parts of the large-data problem, and they can also work together to keep data-intensive applications responsive. In this webinar, Syncfusion® Software Engineer Prabhavathi Kannan demonstrates these approaches using local and remote datasets, including a 100,000-record example. This blog summarizes the key concepts, demos, and guidance from the session. ## What you’ll learn In this webinar, you’ll learn how to: - Distinguish data size from rendered DOM size**.** - Use DOM virtualization to render only the rows needed for the current viewport and buffer. - Combine virtual scrolling or paging with DOM virtualization. - Separate remote data operations from browser rendering concerns. - Choose an appropriate approach based on how users need to explore large datasets. ## How do virtual scrolling, paging, and DOM virtualization differ? These approaches solve different problems when working with large datasets. - **Virtual scrolling** provides continuous scrolling through a large dataset. - **Paging** divides data into smaller pages for structured navigation. - **DOM virtualization** limits the number of row elements rendered in the browser at a time. These approaches can also work together. For example, a grid can use paging to retrieve a portion of a remote dataset while DOM virtualization limits how many rows from that page are rendered. ## Watch the webinar Want to see these techniques in action? Watch the full webinar below to follow the local- and remote-data demos. ## Timestamps [[00:00](https://www.youtube.com/watch?v=zGMGSf2AoB4&list=PLDzXQPWT8wEBkrOWdR705OlUbAsBGGvZQ&index=136) ] Introduction [[01:32](https://www.youtube.com/watch?v=zGMGSf2AoB4&list=PLDzXQPWT8wEBkrOWdR705OlUbAsBGGvZQ&index=136&t=92s) ] Large dataset rendering challenges [[02:14](https://www.youtube.com/watch?v=zGMGSf2AoB4&list=PLDzXQPWT8wEBkrOWdR705OlUbAsBGGvZQ&index=136&t=134s) ]: DOM size vs. data size [[03:04](https://www.youtube.com/watch?v=zGMGSf2AoB4&list=PLDzXQPWT8wEBkrOWdR705OlUbAsBGGvZQ&index=136&t=184s) ] Understanding DOM virtualization [[03:38](https://www.youtube.com/watch?v=zGMGSf2AoB4&list=PLDzXQPWT8wEBkrOWdR705OlUbAsBGGvZQ&index=136&t=218s) ] Virtual scrolling vs. paging [[06:26](https://www.youtube.com/watch?v=zGMGSf2AoB4&list=PLDzXQPWT8wEBkrOWdR705OlUbAsBGGvZQ&index=136&t=386s) ] Local-data demo [[09:49](https://www.youtube.com/watch?v=zGMGSf2AoB4&list=PLDzXQPWT8wEBkrOWdR705OlUbAsBGGvZQ&index=136&t=589s) ] Configuring virtualization [[13:36](https://www.youtube.com/watch?v=zGMGSf2AoB4&list=PLDzXQPWT8wEBkrOWdR705OlUbAsBGGvZQ&index=136&t=816s) ] Scaling to 100,000 records [[16:53](https://www.youtube.com/watch?v=zGMGSf2AoB4&list=PLDzXQPWT8wEBkrOWdR705OlUbAsBGGvZQ&index=136&t=1013s) ] Remote-data demo [[19:21](https://www.youtube.com/watch?v=zGMGSf2AoB4&list=PLDzXQPWT8wEBkrOWdR705OlUbAsBGGvZQ&index=136&t=1161s) ] DataManager and UrlAdaptor [[20:44](https://www.youtube.com/watch?v=zGMGSf2AoB4&list=PLDzXQPWT8wEBkrOWdR705OlUbAsBGGvZQ&index=136&t=1244s) ] DOM virtualization with remote data [[25:36](https://www.youtube.com/watch?v=zGMGSf2AoB4&list=PLDzXQPWT8wEBkrOWdR705OlUbAsBGGvZQ&index=136&t=1536s) ] Paging vs. DOM virtualization [[26:06](https://www.youtube.com/watch?v=zGMGSf2AoB4&list=PLDzXQPWT8wEBkrOWdR705OlUbAsBGGvZQ&index=136&t=1566s) ] Choosing an approach [[27:05](https://www.youtube.com/watch?v=zGMGSf2AoB4&list=PLDzXQPWT8wEBkrOWdR705OlUbAsBGGvZQ&index=136&t=1625s) ] Key takeaways [[28:34](https://www.youtube.com/watch?v=zGMGSf2AoB4&list=PLDzXQPWT8wEBkrOWdR705OlUbAsBGGvZQ&index=136&t=1714s) ] Q&A ## Demo highlights ### Local data with virtual scrolling The first demo starts with **100,000 locally generated order records**. Instead of rendering every row in the DOM, the React Data Grid uses virtual scrolling and DOM virtualization to render the content needed for the current view. The demo also shows how row reuse and virtualization work as the dataset size changes. Additional grid features demonstrated include: - Custom templates - Frozen columns - Sorting - Filtering - Dialog editing Learn more about [virtual scrolling](https://ej2.syncfusion.com/react/documentation/grid/scrolling/virtual-scrolling) and [DOM virtualization](https://ej2.syncfusion.com/react/documentation/grid/scrolling/dom-virtualization) in React Data Grid. ### Remote data with paging The second demo moves from local data to a remote API. The React Data Grid connects to the API using DataManager and [UrlAdaptor](https://ej2.syncfusion.com/react/documentation/grid/connecting-to-adaptors/url-adaptor) . The demo shows how remote paging, sorting, and filtering work with 100,000 records. It also demonstrates DOM virtualization within a page, showing how data retrieval and browser rendering can be handled separately. ### Which approach should you use? There isn’t one approach for every large-data scenario. The right choice depends on how users need to explore the data and how the application retrieves it. | Approach | Useful when | Example scenarios | | --- | --- | --- | | Virtual scrolling | Users need continuous exploration of a large dataset | Logs, activity feeds, transaction histories | | Paging | Users need defined pages and predictable navigation | Reports, audit views, reference data | | DOM virtualization | The grid could render more rows than users can see at once | Large local or paged datasets | DOM virtualization is not necessarily an alternative to virtual scrolling or paging. It can complement either approach by limiting the number of row elements rendered in the browser. ## Frequently Asked Questions What is the difference between virtual scrolling and DOM virtualization in a React Data Grid?Virtual scrolling provides continuous scrolling through a large dataset, while DOM virtualization limits the number of row elements rendered in the browser at a time. They address different aspects of large-data handling and can be used together. When should I use paging instead of virtual scrolling for large datasets?Paging is useful when users need clear page boundaries, predictable navigation, or report-style browsing. Virtual scrolling is useful when users need continuous exploration of a large dataset. How does Syncfusion React Data Grid handle local and remote large datasets?The webinar demonstrates a 100,000-record local dataset using virtual scrolling and DOM virtualization. For remote data, the React Data Grid can connect to APIs using DataManager and UrlAdaptor to support operations such as paging, sorting, and filtering. ## Key takeaway Large datasets do not always require rendering large numbers of DOM elements at the same time. Virtual scrolling and paging address different data-navigation needs, while DOM virtualization limits the amount of content rendered in the browser. Choosing the right combination can help keep React Data Grid interactions responsive as dataset size grows. ## Related resources - Syncfusion [React Data Grid](https://www.syncfusion.com/react-components/react-data-grid) - [Virtual Scrolling](https://ej2.syncfusion.com/react/documentation/grid/scrolling/virtual-scrolling) in React Data Grid - [DOM Virtualization](https://ej2.syncfusion.com/react/documentation/grid/scrolling/dom-virtualization) in React Data Grid - [Paging](https://ej2.syncfusion.com/react/documentation/grid/paging) in React Data Grid - Remote Data Binding Using [UrlAdaptor](https://ej2.syncfusion.com/react/documentation/grid/connecting-to-adaptors/url-adaptor) - React Data Grid DOM Virtualization [Demo](https://ej2.syncfusion.com/react/demos/#/tailwind3/grid/dom-virtualization) ## Related Blogs [Integrating HTMX into a React Data Grid for Real‑Time Updates in Next.js](https://www.syncfusion.com/blogs/post/update-react-grid-with-htmx-nextjs) [How to Keep Important Rows Visible in Angular and React Data Grids](https://www.syncfusion.com/blogs/post/react-angular-data-grid-row-pinning) [Merge Rows and Columns in React Data Grid to Enhance Data Clarity](https://www.syncfusion.com/blogs/post/merge-rows-columns-in-react-data-grid) [Introducing the Pure React Data Grid: Built with Hooks for Faster, Leaner UIs](https://www.syncfusion.com/blogs/post/pure-react-data-grid)