--- title: Build Fast, Scalable React Data Grids for Large Datasets... description: Show notes from a Syncfusion webinar covering strategies for rendering large datasets in a React Data Grid, including virtual scrolling, paging, and DOM... canonical: https://daily.dev/posts/build-fast-scalable-react-data-grids-for-large-datasets-using-virtualization-webinar-show-notes--grkoxcqia twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: Build Fast, Scalable React Data Grids for Large Datasets Using Virtualization [Webinar Show Notes] | daily.dev og:description: Show notes from a Syncfusion webinar covering strategies for rendering large datasets in a React Data Grid, including virtual scrolling, paging, and DOM... og:url: https://daily.dev/posts/build-fast-scalable-react-data-grids-for-large-datasets-using-virtualization-webinar-show-notes--grkoxcqia og:image: https://api.daily.dev/og/posts/gRKOxCQia.png og:image:alt: Build Fast, Scalable React Data Grids for Large Datasets Using Virtualization [Webinar Show Notes] og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # Build Fast, Scalable React Data Grids for Large Datasets Using Virtualization [Webinar Show Notes] **[Syncfusion](https://daily.dev/sources/syncfusion)** · 5 min read · 1 upvotes · 0 comments ## Summary Show notes from a Syncfusion webinar covering strategies for rendering large datasets in a React Data Grid, including virtual scrolling, paging, and DOM virtualization. Demonstrations cover a 100,000-record local dataset and a remote API dataset using DataManager and UrlAdaptor, plus a comparison table for when to use each approach and an FAQ section. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Questions this post answers ### What's the difference between virtual scrolling and DOM virtualization in a data grid? Virtual scrolling provides continuous scrolling through a large dataset by loading data as the user scrolls, while DOM virtualization limits how many row elements are actually rendered in the browser at any given time, regardless of scrolling method. They solve different problems and can be combined: a grid can page or scroll through data while DOM virtualization keeps only the visible rows plus a buffer in the DOM. _Comparing rendering strategies for large data tables is easier with daily.dev's developer feed._ ### Should I use paging or virtual scrolling for a large dataset in my app? Use paging when users need defined page boundaries and predictable navigation, such as reports, audit views, or reference data. Use virtual scrolling when users need continuous exploration of a dataset, such as logs, activity feeds, or transaction histories. Both can be paired with DOM virtualization to limit rendered rows within a page or scroll view. _Developers weighing paging against virtual scrolling can find more real-world comparisons on daily.dev._ ### How can a React grid handle 100,000 remote records without freezing the UI? By separating remote data operations from browser rendering: a DataManager combined with a UrlAdaptor fetches paged, sorted, or filtered slices of data from a remote API, while DOM virtualization renders only the rows needed for the current viewport within that page. This keeps the amount of data retrieved and the amount of DOM content rendered independent of each other. _daily.dev surfaces practical patterns for scaling data-heavy React UIs like this one._ ## Similar posts on daily.dev - [How to build a sales dashboard on a million real rows in React DataGrid](https://daily.dev/posts/how-to-build-a-sales-dashboard-on-a-million-real-rows-in-react-datagrid-omh9sxwju) · DEV · 1 upvotes · 0 comments - [Angular Grid at Scale: How Kendo UI Handles Millions of Rows](https://daily.dev/posts/angular-grid-at-scale-how-kendo-ui-handles-millions-of-rows-nmfctge80) · Telerik · 0 upvotes · 0 comments - [Join Our Exclusive Webinar: Build Blazing-Fast Financial Dashboards in Blazor: Unlock Insights from Raw Data](https://daily.dev/posts/join-our-exclusive-webinar-build-blazing-fast-financial-dashboards-in-blazor-unlock-insights-from--p0mvm6qod) · Syncfusion · 1 upvotes · 0 comments - [How to speed up long lists with TanStack Virtual](https://daily.dev/posts/how-to-speed-up-long-lists-with-tanstack-virtual-6gnyf4lae) · LogRocket · 1 upvotes · 0 comments - [The Definitive Guide to JavaScript Datagrids](https://daily.dev/posts/the-definitive-guide-to-javascript-datagrids-34uz61jvw) · Medium · 6 upvotes · 0 comments --- Tags: [#react](https://daily.dev/tags/react), [#performance](https://daily.dev/tags/performance), [#infrastructure](https://daily.dev/tags/infrastructure) [View this post on daily.dev](https://daily.dev/posts/build-fast-scalable-react-data-grids-for-large-datasets-using-virtualization-webinar-show-notes--grkoxcqia) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"Build Fast, Scalable React Data Grids for Large Datasets Using Virtualization [Webinar Show Notes]","url":"https://daily.dev/posts/build-fast-scalable-react-data-grids-for-large-datasets-using-virtualization-webinar-show-notes--grkoxcqia","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/build-fast-scalable-react-data-grids-for-large-datasets-using-virtualization-webinar-show-notes--grkoxcqia"},"datePublished":"2026-09-30T15:50:29.243Z","dateModified":"2026-09-30T15:50:54.153Z","description":"Show notes from a Syncfusion webinar covering strategies for rendering large datasets in a React Data Grid, including virtual scrolling, paging, and DOM...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/99a95fe66f890c6ec7d100972b3c39ea?_a=AQAEuop","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/99a95fe66f890c6ec7d100972b3c39ea?_a=AQAEuop","isAccessibleForFree":true,"articleSection":"Syncfusion","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"Syncfusion","logo":"https://media.daily.dev/image/upload/t_logo,f_auto/v1/logos/064efc4834bd43b987bcda02e8ad6709","url":"https://daily.dev/sources/syncfusion"},"commentCount":0,"discussionUrl":"https://daily.dev/posts/build-fast-scalable-react-data-grids-for-large-datasets-using-virtualization-webinar-show-notes--grkoxcqia","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":1},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":0}],"keywords":"react,performance,infrastructure","timeRequired":"PT5M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Syncfusion","item":"https://daily.dev/sources/syncfusion"},{"@type":"ListItem","position":3,"name":"Build Fast, Scalable React Data Grids for Large Datasets Using Virtualization [Webinar Show Notes]"}]} {"@context":"https://schema.org","@type":"FAQPage","@id":"https://daily.dev/posts/build-fast-scalable-react-data-grids-for-large-datasets-using-virtualization-webinar-show-notes--grkoxcqia#faq","mainEntity":[{"@type":"Question","name":"What's the difference between virtual scrolling and DOM virtualization in a data grid?","acceptedAnswer":{"@type":"Answer","text":"Virtual scrolling provides continuous scrolling through a large dataset by loading data as the user scrolls, while DOM virtualization limits how many row elements are actually rendered in the browser at any given time, regardless of scrolling method. They solve different problems and can be combined: a grid can page or scroll through data while DOM virtualization keeps only the visible rows plus a buffer in the DOM. Comparing rendering strategies for large data tables is easier with daily.dev's developer feed."}},{"@type":"Question","name":"Should I use paging or virtual scrolling for a large dataset in my app?","acceptedAnswer":{"@type":"Answer","text":"Use paging when users need defined page boundaries and predictable navigation, such as reports, audit views, or reference data. Use virtual scrolling when users need continuous exploration of a dataset, such as logs, activity feeds, or transaction histories. Both can be paired with DOM virtualization to limit rendered rows within a page or scroll view. Developers weighing paging against virtual scrolling can find more real-world comparisons on daily.dev."}},{"@type":"Question","name":"How can a React grid handle 100,000 remote records without freezing the UI?","acceptedAnswer":{"@type":"Answer","text":"By separating remote data operations from browser rendering: a DataManager combined with a UrlAdaptor fetches paged, sorted, or filtered slices of data from a remote API, while DOM virtualization renders only the rows needed for the current viewport within that page. This keeps the amount of data retrieved and the amount of DOM content rendered independent of each other. daily.dev surfaces practical patterns for scaling data-heavy React UIs like this one."}}]} ```