{
    "componentChunkName": "component---src-templates-doc-page-jsx",
    "path": "/react-data-grid/massive-row-count/",
    "result": {"data":{"markdownRemark":{"htmlAst":{"type":"root","children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Given the grid uses "},{"type":"element","tagName":"a","properties":{"href":"/archive/29.3.4/dom-virtualisation/#row-virtualisation"},"children":[{"type":"text","value":"Row Virtualisation"}]},{"type":"text","value":" there is no\nfixed limit to the number of rows the grid can display. However browsers do have a fixed limit\non how tall a DOM div element can be. Given the grid renders using the DOM, the div that contains\nthe rows has a fixed max height, and as such puts a limit on number of rows that can be\nrendered using normal techniques."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"To get around this, the grid uses a technique to fit more rows onto a div that can naturally fit.\nThis technique, unique to AG Grid, we call Stretching and is explained below."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"the-problem","style":"position:relative;"},"children":[{"type":"text","value":"The Problem"},{"type":"element","tagName":"a","properties":{"href":"#the-problem","ariaLabel":"the problem permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Each browser has a limit to the maximum height of a div. This limit is not published so can differ\nbetween different browsers as well as different browser versions. At the time of writing, on\nChrome v112 the maximum height was 32,000,000 pixels."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The grid works out the maximum height of a div by testing the DOM as the grid initialises. To see what\nthe grid has determined as the maximum height for a div, set the grid property "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"debug=true"}]},{"type":"text","value":"\nand notice the logging output. One debugger statement will tell the maximum div height\nlike the following:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"AG Grid.RowContainerHeightService: maxDivHeight = 32000000"}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"For example assume each row is 100px high, then this means the maximum number of rows the grid\nwould be able to cater for with a max div height of 32,000,000 is 320,000."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Although the grid uses "},{"type":"element","tagName":"a","properties":{"href":"/archive/29.3.4/dom-virtualisation/#row-virtualisation"},"children":[{"type":"text","value":"Row Virtualisation"}]},{"type":"text","value":" to only render\na subset of rows, it depends on setting the container height correctly to fit all rows such that the\nvertical scroll bar is able to scroll over the entire dataset."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If the grid needs to present more rows than is possible, then the grid does this using a technique\nwe call Stretching."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"stretching-the-div","style":"position:relative;"},"children":[{"type":"text","value":"Stretching the Div"},{"type":"element","tagName":"a","properties":{"href":"#stretching-the-div","ariaLabel":"stretching the div permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"In the example below, note that the row height is 100px and the max div height is 32,000,000px\n(as per tested, however as previously mentioned different browsers had different max heights which\ncan be verified by looking at the grid debug output). This means in theory only 320,000 rows\ncan get displayed. The grid below is configured with 1,000,000 rows with each row 100px high to\nshow this in practice."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Massive Dataset Example","name":"viewport-big-data","type":"generated","options":"{ \"enterprise\": true, \"modules\": [\"viewport\"] }"},"children":[]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The grid achieves this by altering the vertical position of each row dependent on the scroll position.\nHow much each row position is altered by we call the Row Offset."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"ts"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-ts"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-ts"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"// see how many extra pixels we need to show all rows"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"const"}]},{"type":"text","value":" additionalPixelsNeeded "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" combinedRowHeight "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"-"}]},{"type":"text","value":" maxDivHeight"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n\n"},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"// see what % down we have vertically scrolled"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"const"}]},{"type":"text","value":" scrollPercent "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" scrollY "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"/"}]},{"type":"text","value":" maxScrollY"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n\n"},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"// we offset rows by by additionalPixelsNeeded times the scroll %"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"const"}]},{"type":"text","value":" rowOffset "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" scrollPercent "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"*"}]},{"type":"text","value":" additionalPixelsNeeded"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"So in the example above, when the vertical scroll is at the top, the Row Offset is 0. This can\nbe inspected using the DOM inspector for the grid and noting the row positions are normal, eg\nRow Index 0 is at 0px and thus has CSS style "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"transform: translateY(0px)"}]},{"type":"text","value":", Row Index 1 is at 100px\nand thus has CSS style "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"transform: translateY(100px)"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"As the vertical scroll is moved, the positions of the rows are adjusted by the calculated Row Offset.\nThe Row Offset increases linearly as the vertical scroll moves down, until the vertical scroll has\nreached its maximum vertical scroll position. When the maximum vertical scroll position is reached,\nthe Row Offset is equal to the difference between the height needed and the available height."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"In other words, when the rows do not fit, the grid applies an amplifier to the vertical scroll.\nThe grid does this by moving rows up as you scroll down, making the impression of the scrolling moving\nfaster, and allowing the grid to display more rows than would otherwise fit inside a div."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"In the example, because the grid property "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"debug=true"}]},{"type":"text","value":", the grid prints a) what percentage the vertical\nscrollbar has scrolled and b) the resultant Row Offset that is getting applied."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The example also displays in Column Expected Position what the row position would be if the grid\nwas not stretching rows."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"considerations","style":"position:relative;"},"children":[{"type":"text","value":"Considerations"},{"type":"element","tagName":"a","properties":{"href":"#considerations","ariaLabel":"considerations permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"When the grid is applying a Row Offset to fix more rows, the grid will appear to scroll faster.\nFor example if you use a scroll gesture on a scroll pad or use the mouse wheel to scroll down,\nrows will move faster than normal. This is because as the grid scrolls down, it's repositioning\nthe rows up."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The scroll speed will increase at the same ratio as the additional row space required. For example\nif twice the space is required, the rows will appear to move twice when scrolling. If x10\nspace is required, the rows will appear to move x10 when scrolling."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The faster scrolling is a side effect of the implementation to display massive amounts of rows.\nThere is no way around this, as the grid is working within the constraints of the browser and the\nbrowser has a maximum height that a div can have.\nIf this makes your application not usable, then consider not displaying so many rows (question why\ndisplay millions of rows in the first place) or use "},{"type":"element","tagName":"a","properties":{"href":"/archive/29.3.4/row-pagination/"},"children":[{"type":"text","value":"Pagination"}]},{"type":"text","value":"."}]}],"data":{"quirksMode":false}},"frontmatter":{"title":"Massive Row Count","version":null,"enterprise":null,"sideMenu":null,"description":null},"headings":[{"id":"the-problem","depth":2,"value":"The Problem"},{"id":"stretching-the-div","depth":2,"value":"Stretching the Div"},{"id":"considerations","depth":2,"value":"Considerations"}]}},"pageContext":{"frameworks":["javascript","react","angular","vue"],"framework":"react","srcPath":"/massive-row-count","pageName":"massive-row-count"}},
    "staticQueryHashes": ["1766026005","699667431","940729948"]}