[{"data":1,"prerenderedAt":399},["ShallowReactive",2],{"blog-en-reogrid-large-data-lazy-loading":3},{"id":4,"title":5,"author":6,"body":7,"date":381,"description":382,"extension":383,"meta":384,"navigation":126,"path":385,"seo":386,"stem":388,"tags":389,"thumbnail":397,"__hash__":398},"blog_en/blog/en/reogrid-large-data-lazy-loading.md","How to Display Large-Scale Data at Lightning Speed with ReoGrid",null,{"type":8,"value":9,"toc":374},"minimark",[10,14,17,26,34,41,46,49,56,62,69,75,78,86,170,177,183,192,328,334,343,349,355,361,364,370],[11,12,13],"p",{},"ReoGrid is a spreadsheet component for .NET applications. With no dependency on Excel itself, a single DLL gives your application Excel-equivalent capabilities.",[11,15,16],{},"In this article, we introduce how to load and display large-scale data — on the order of hundreds of thousands of rows — at lightning speed using ReoGrid.",[11,18,19,20],{},"Video demo 👉 ",[21,22,23],"a",{"href":23,"rel":24},"https://youtu.be/PospG1jddFw",[25],"nofollow",[27,28,30],"h2",{"id":29},"why-its-so-fast",[31,32,33],"strong",{},"Why It's So Fast",[11,35,36,37,40],{},"ReoGrid version 4 introduces a new technology called ",[31,38,39],{},"Lazy Loading",".",[11,42,43],{},[31,44,45],{},"Lazy loading doesn't pull all the data in at once. It loads only the minimum necessary slices, on demand.",[11,47,48],{},"Conventional approaches load every row up front, which means high memory pressure and slow time-to-display. Lazy loading instead reads only what's actually needed at the moment, making the initial render dramatically faster.",[11,50,51,52,55],{},"Other grid components offer similar techniques such as virtual mode, but they typically require the developer to implement and manage that control themselves.",[53,54],"br",{},"ReoGrid, by contrast, smartly manages internally when each cell should be loaded. As you scroll, zoom, or change the worksheet's visible area, ReoGrid automatically loads the cells it needs.",[11,57,58,59,61],{},"It also handles cells referenced by formulas and cells consumed by your application — managing every access pattern and triggering the load when required.",[53,60],{},"This sophisticated approach is what lets ReoGrid 4 handle very large datasets without lag and render them at high speed.",[11,63,64],{},[65,66],"img",{"alt":67,"src":68},"1760961789-kbTGt4CYq8vwIiSW63AumlDQ.png","/images/articles/1760961789-kbTGt4CYq8vwIiSW63AumlDQ.png.webp",[27,70,72],{"id":71},"the-implementation-is-surprisingly-simple",[31,73,74],{},"The Implementation Is Surprisingly Simple",[11,76,77],{},"As above, ReoGrid 4 manages cell state automatically — your application just needs to prepare the data.",[11,79,80,81,85],{},"First, implement ReoGrid's data-loading interface, ",[82,83,84],"code",{},"DataSource",", and pass your own data through it to ReoGrid.",[87,88,93],"pre",{"className":89,"code":90,"language":91,"meta":92,"style":92},"language-csharp shiki shiki-themes github-light github-dark","private void button1_Click(object sender, EventArgs e)\n{\n    // Set the worksheet row count\n    worksheet.SetRows(logs.Count);\n\n    // Configure the data source in lazy-loading mode\n    worksheet.AddDataSource(\n        new RangePosition(0, 0, logs.Count, COLUMN_COUNT),\n        new FlightLogDataSource(logs),\n        // Enable lazy loading\n        DataSourceLoadMode.LazyLoading);\n}\n","csharp","",[82,94,95,103,109,115,121,128,134,140,146,152,158,164],{"__ignoreMap":92},[96,97,100],"span",{"class":98,"line":99},"line",1,[96,101,102],{},"private void button1_Click(object sender, EventArgs e)\n",[96,104,106],{"class":98,"line":105},2,[96,107,108],{},"{\n",[96,110,112],{"class":98,"line":111},3,[96,113,114],{},"    // Set the worksheet row count\n",[96,116,118],{"class":98,"line":117},4,[96,119,120],{},"    worksheet.SetRows(logs.Count);\n",[96,122,124],{"class":98,"line":123},5,[96,125,127],{"emptyLinePlaceholder":126},true,"\n",[96,129,131],{"class":98,"line":130},6,[96,132,133],{},"    // Configure the data source in lazy-loading mode\n",[96,135,137],{"class":98,"line":136},7,[96,138,139],{},"    worksheet.AddDataSource(\n",[96,141,143],{"class":98,"line":142},8,[96,144,145],{},"        new RangePosition(0, 0, logs.Count, COLUMN_COUNT),\n",[96,147,149],{"class":98,"line":148},9,[96,150,151],{},"        new FlightLogDataSource(logs),\n",[96,153,155],{"class":98,"line":154},10,[96,156,157],{},"        // Enable lazy loading\n",[96,159,161],{"class":98,"line":160},11,[96,162,163],{},"        DataSourceLoadMode.LazyLoading);\n",[96,165,167],{"class":98,"line":166},12,[96,168,169],{},"}\n",[11,171,172,173,176],{},"That's it — simply specify the data source's load mode as lazy loading (",[82,174,175],{},"DataSourceLoadMode.LazyLoading",").",[27,178,180],{"id":179},"borders-cell-formatting-and-cell-styles-are-supported-too",[31,181,182],{},"Borders, Cell Formatting, and Cell Styles Are Supported Too",[11,184,185,186,188,189,191],{},"You can apply borders and cell formatting from inside the ",[82,187,84],{}," interface as well, not just data values. This makes worksheet initialization even faster and gives your app a smoother experience.",[53,190],{},"The sample below shows how to set borders for every cell.",[87,193,195],{"className":89,"code":194,"language":91,"meta":92,"style":92},"public class FlightLogDataSource : IDataSource\u003CFlightlogDataRecord>\n{    \n    ...\n\n    // Modify the GetRecord method as follows\n    public FlightlogDataRecord GetRecord(int row)\n    {\n        FlightlogDataRecord record = initedRecords[row];\n\n        if (record == null)\n        {\n          record = new FlightlogDataRecord(this, row, Logs[row]);\n          initedRecords[row] = record;\n\n          // Apply row borders the first time the row is accessed\n          Worksheet.SetRangeBorders(row, 0, 1, ColumnCount, BorderPositions.Outside, RangeBorderStyle.BlackSolid);\n          Worksheet.SetRangeBorders(row, 0, 1, ColumnCount, BorderPositions.InsideVertical, RangeBorderStyle.GrayDotted);\n        }\n\n        // Return the row data\n        return record;\n    }\n\n    ...\n}\n",[82,196,197,202,207,212,216,221,226,231,236,240,245,250,255,261,266,272,278,284,290,295,301,307,313,318,323],{"__ignoreMap":92},[96,198,199],{"class":98,"line":99},[96,200,201],{},"public class FlightLogDataSource : IDataSource\u003CFlightlogDataRecord>\n",[96,203,204],{"class":98,"line":105},[96,205,206],{},"{    \n",[96,208,209],{"class":98,"line":111},[96,210,211],{},"    ...\n",[96,213,214],{"class":98,"line":117},[96,215,127],{"emptyLinePlaceholder":126},[96,217,218],{"class":98,"line":123},[96,219,220],{},"    // Modify the GetRecord method as follows\n",[96,222,223],{"class":98,"line":130},[96,224,225],{},"    public FlightlogDataRecord GetRecord(int row)\n",[96,227,228],{"class":98,"line":136},[96,229,230],{},"    {\n",[96,232,233],{"class":98,"line":142},[96,234,235],{},"        FlightlogDataRecord record = initedRecords[row];\n",[96,237,238],{"class":98,"line":148},[96,239,127],{"emptyLinePlaceholder":126},[96,241,242],{"class":98,"line":154},[96,243,244],{},"        if (record == null)\n",[96,246,247],{"class":98,"line":160},[96,248,249],{},"        {\n",[96,251,252],{"class":98,"line":166},[96,253,254],{},"          record = new FlightlogDataRecord(this, row, Logs[row]);\n",[96,256,258],{"class":98,"line":257},13,[96,259,260],{},"          initedRecords[row] = record;\n",[96,262,264],{"class":98,"line":263},14,[96,265,127],{"emptyLinePlaceholder":126},[96,267,269],{"class":98,"line":268},15,[96,270,271],{},"          // Apply row borders the first time the row is accessed\n",[96,273,275],{"class":98,"line":274},16,[96,276,277],{},"          Worksheet.SetRangeBorders(row, 0, 1, ColumnCount, BorderPositions.Outside, RangeBorderStyle.BlackSolid);\n",[96,279,281],{"class":98,"line":280},17,[96,282,283],{},"          Worksheet.SetRangeBorders(row, 0, 1, ColumnCount, BorderPositions.InsideVertical, RangeBorderStyle.GrayDotted);\n",[96,285,287],{"class":98,"line":286},18,[96,288,289],{},"        }\n",[96,291,293],{"class":98,"line":292},19,[96,294,127],{"emptyLinePlaceholder":126},[96,296,298],{"class":98,"line":297},20,[96,299,300],{},"        // Return the row data\n",[96,302,304],{"class":98,"line":303},21,[96,305,306],{},"        return record;\n",[96,308,310],{"class":98,"line":309},22,[96,311,312],{},"    }\n",[96,314,316],{"class":98,"line":315},23,[96,317,127],{"emptyLinePlaceholder":126},[96,319,321],{"class":98,"line":320},24,[96,322,211],{},[96,324,326],{"class":98,"line":325},25,[96,327,169],{},[27,329,331],{"id":330},"learn-more",[31,332,333],{},"Learn More",[11,335,336,337,342],{},"The official ReoGrid site has more in-depth documentation and sample code. See the ",[21,338,341],{"href":339,"rel":340},"https://reogrid.net/document/how-to/fast-load-large-data-with-lazy-load-mode/",[25],"documentation page"," for details.",[27,344,346],{"id":345},"about-reogrid-version-4",[31,347,348],{},"About ReoGrid Version 4",[11,350,351,352,354],{},"ReoGrid has been adopted in many systems by companies in Japan and around the world — particularly in financial systems, manufacturing, and public infrastructure where large datasets are part of daily operations.",[53,353],{},"Version 4 builds on the experience gained from those deployments and on direct user feedback, delivering significant improvements in both performance and functionality.",[11,356,357,358,360],{},"Since the release of ReoGrid 4, multiple companies have already adopted it and given strong feedback on its speed, stability, and usability.",[53,359],{},"We will continue pushing performance higher and providing reliable support for our users.",[11,362,363],{},"▼ ReoGrid — details and purchase",[11,365,366],{},[21,367,368],{"href":368,"rel":369},"https://reogrid.net/",[25],[371,372,373],"style",{},"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":92,"searchDepth":105,"depth":105,"links":375},[376,377,378,379,380],{"id":29,"depth":105,"text":33},{"id":71,"depth":105,"text":74},{"id":179,"depth":105,"text":182},{"id":330,"depth":105,"text":333},{"id":345,"depth":105,"text":348},"2025-10-21","With ReoGrid's Lazy Loading feature, you can display hundreds of thousands of rows at lightning speed. Here's how it works and how to implement it.","md",{},"/blog/en/reogrid-large-data-lazy-loading",{"title":5,"description":387},"ReoGrid, a .NET spreadsheet component, can render hundreds of thousands of rows in milliseconds thanks to its Lazy Loading feature. Learn how it achieves high-speed display of large datasets.","blog/en/reogrid-large-data-lazy-loading",[390,391,392,393,394,395,396],"reogrid","spreadsheet",".net","excel","performance","lazy-loading","c#","/images/articles/a5ed9da817f9b19571529b7e62d7248c.webp","U0Oqy6it-2ft2ouif5npE9j2KmbZc_6M1ijEc0uTpTc",1777394491754]