Main example cannot render after certain number of rows

[hansanghoon]

https://facebook.github.io/fixed-data-table/example-object-data.html

markup of last visible row

<div class="fixedDataTableRowLayout_rowWrapper" style="width: 1093px; height: 50px; z-index: 0; transform: translate3d(0px, 3.35544e+07px, 0px); backface-visibility: hidden;"><div class="fixedDataTableRowLayout_main public_fixedDataTableRow_main public_fixedDataTableRow_highlighted public_fixedDataTableRow_odd public_fixedDataTable_bodyRow" style="width: 1093px; height: 50px;"><div class="fixedDataTableRowLayout_body"><div class="fixedDataTableCellGroupLayout_cellGroupWrapper" style="height: 50px; left: 0px;"><div class="fixedDataTableCellGroupLayout_cellGroup" style="height: 50px; position: absolute; width: 250px; z-index: 2; transform: translate3d(0px, 0px, 0px); backface-visibility: hidden;"><div class="fixedDataTableCellLayout_main public_fixedDataTableCell_main" style="height: 50px; width: 50px; left: 0px;"><div class="exampleImage" style="background-image: url(&quot;https://s3.amazonaws.com/uifaces/faces/twitter/swooshycueb/128.jpg&quot;);"></div></div><div class="fixedDataTableCellLayout_main public_fixedDataTableCell_main" style="height: 50px; width: 100px; left: 50px;"><div class="fixedDataTableCellLayout_wrap1 public_fixedDataTableCell_wrap1" style="height: 50px; width: 100px;"><div class="fixedDataTableCellLayout_wrap2 public_fixedDataTableCell_wrap2"><div class="fixedDataTableCellLayout_wrap3 public_fixedDataTableCell_wrap3"><div class="public_fixedDataTableCell_cellContent"><a href="#">Charles</a></div></div></div></div></div><div class="fixedDataTableCellLayout_main public_fixedDataTableCell_main" style="height: 50px; width: 100px; left: 150px;"><div class="fixedDataTableCellLayout_wrap1 public_fixedDataTableCell_wrap1" style="height: 50px; width: 100px;"><div class="fixedDataTableCellLayout_wrap2 public_fixedDataTableCell_wrap2"><div class="fixedDataTableCellLayout_wrap3 public_fixedDataTableCell_wrap3"><div class="public_fixedDataTableCell_cellContent">Cummerata</div></div></div></div></div></div></div><div class="fixedDataTableCellGroupLayout_cellGroupWrapper" style="height: 50px; left: 250px;"><div class="fixedDataTableCellGroupLayout_cellGroup" style="height: 50px; position: absolute; width: 900px; z-index: 0; transform: translate3d(0px, 0px, 0px); backface-visibility: hidden;"><div class="fixedDataTableCellLayout_main public_fixedDataTableCell_main" style="height: 50px; width: 100px; left: 0px;"><div class="fixedDataTableCellLayout_wrap1 public_fixedDataTableCell_wrap1" style="height: 50px; width: 100px;"><div class="fixedDataTableCellLayout_wrap2 public_fixedDataTableCell_wrap2"><div class="fixedDataTableCellLayout_wrap3 public_fixedDataTableCell_wrap3"><div class="public_fixedDataTableCell_cellContent">Mertzburgh</div></div></div></div></div><div class="fixedDataTableCellLayout_main public_fixedDataTableCell_main" style="height: 50px; width: 200px; left: 100px;"><div class="fixedDataTableCellLayout_wrap1 public_fixedDataTableCell_wrap1" style="height: 50px; width: 200px;"><div class="fixedDataTableCellLayout_wrap2 public_fixedDataTableCell_wrap2"><div class="fixedDataTableCellLayout_wrap3 public_fixedDataTableCell_wrap3"><div class="public_fixedDataTableCell_cellContent">Graham Viaduct</div></div></div></div></div><div class="fixedDataTableCellLayout_main public_fixedDataTableCell_main" style="height: 50px; width: 200px; left: 300px;"><div class="fixedDataTableCellLayout_wrap1 public_fixedDataTableCell_wrap1" style="height: 50px; width: 200px;"><div class="fixedDataTableCellLayout_wrap2 public_fixedDataTableCell_wrap2"><div class="fixedDataTableCellLayout_wrap3 public_fixedDataTableCell_wrap3"><div class="public_fixedDataTableCell_cellContent">24663-7890</div></div></div></div></div><div class="fixedDataTableCellLayout_main public_fixedDataTableCell_main" style="height: 50px; width: 200px; left: 500px;"><div class="fixedDataTableCellLayout_wrap1 public_fixedDataTableCell_wrap1" style="height: 50px; width: 200px;"><div class="fixedDataTableCellLayout_wrap2 public_fixedDataTableCell_wrap2"><div class="fixedDataTableCellLayout_wrap3 public_fixedDataTableCell_wrap3"><div class="public_fixedDataTableCell_cellContent"><a href="#">[email protected]</a></div></div></div></div></div><div class="fixedDataTableCellLayout_main public_fixedDataTableCell_main" style="height: 50px; width: 200px; left: 700px;"><div class="fixedDataTableCellLayout_wrap1 public_fixedDataTableCell_wrap1" style="height: 50px; width: 200px;"><div class="fixedDataTableCellLayout_wrap2 public_fixedDataTableCell_wrap2"><div class="fixedDataTableCellLayout_wrap3 public_fixedDataTableCell_wrap3"><div class="public_fixedDataTableCell_cellContent">6/11/2016, 3:02:21 PM</div></div></div></div></div></div></div><div class="fixedDataTableRowLayout_fixedColumnsDivider public_fixedDataTableRow_fixedColumnsDivider" style="left: 250px; height: 50px;"></div></div></div></div>

and first of invisible row

<div class="fixedDataTableRowLayout_rowWrapper" style="width: 1093px; height: 50px; z-index: 0; transform: translate3d(0px, 3.35545e+07px, 0px); backface-visibility: hidden;"><div class="fixedDataTableRowLayout_main public_fixedDataTableRow_main public_fixedDataTableRow_even public_fixedDataTable_bodyRow" style="width: 1093px; height: 50px;"><div class="fixedDataTableRowLayout_body"><div class="fixedDataTableCellGroupLayout_cellGroupWrapper" style="height: 50px; left: 0px;"><div class="fixedDataTableCellGroupLayout_cellGroup" style="height: 50px; position: absolute; width: 250px; z-index: 2; transform: translate3d(0px, 0px, 0px); backface-visibility: hidden;"><div class="fixedDataTableCellLayout_main public_fixedDataTableCell_main" style="height: 50px; width: 50px; left: 0px;"><div class="exampleImage" style="background-image: url(&quot;https://s3.amazonaws.com/uifaces/faces/twitter/leonfedotov/128.jpg&quot;);"></div></div><div class="fixedDataTableCellLayout_main public_fixedDataTableCell_main" style="height: 50px; width: 100px; left: 50px;"><div class="fixedDataTableCellLayout_wrap1 public_fixedDataTableCell_wrap1" style="height: 50px; width: 100px;"><div class="fixedDataTableCellLayout_wrap2 public_fixedDataTableCell_wrap2"><div class="fixedDataTableCellLayout_wrap3 public_fixedDataTableCell_wrap3"><div class="public_fixedDataTableCell_cellContent"><a href="#">Cynthia</a></div></div></div></div></div><div class="fixedDataTableCellLayout_main public_fixedDataTableCell_main" style="height: 50px; width: 100px; left: 150px;"><div class="fixedDataTableCellLayout_wrap1 public_fixedDataTableCell_wrap1" style="height: 50px; width: 100px;"><div class="fixedDataTableCellLayout_wrap2 public_fixedDataTableCell_wrap2"><div class="fixedDataTableCellLayout_wrap3 public_fixedDataTableCell_wrap3"><div class="public_fixedDataTableCell_cellContent">Davis</div></div></div></div></div></div></div><div class="fixedDataTableCellGroupLayout_cellGroupWrapper" style="height: 50px; left: 250px;"><div class="fixedDataTableCellGroupLayout_cellGroup" style="height: 50px; position: absolute; width: 900px; z-index: 0; transform: translate3d(0px, 0px, 0px); backface-visibility: hidden;"><div class="fixedDataTableCellLayout_main public_fixedDataTableCell_main" style="height: 50px; width: 100px; left: 0px;"><div class="fixedDataTableCellLayout_wrap1 public_fixedDataTableCell_wrap1" style="height: 50px; width: 100px;"><div class="fixedDataTableCellLayout_wrap2 public_fixedDataTableCell_wrap2"><div class="fixedDataTableCellLayout_wrap3 public_fixedDataTableCell_wrap3"><div class="public_fixedDataTableCell_cellContent">Sporertown</div></div></div></div></div><div class="fixedDataTableCellLayout_main public_fixedDataTableCell_main" style="height: 50px; width: 200px; left: 100px;"><div class="fixedDataTableCellLayout_wrap1 public_fixedDataTableCell_wrap1" style="height: 50px; width: 200px;"><div class="fixedDataTableCellLayout_wrap2 public_fixedDataTableCell_wrap2"><div class="fixedDataTableCellLayout_wrap3 public_fixedDataTableCell_wrap3"><div class="public_fixedDataTableCell_cellContent">Turner Burgs</div></div></div></div></div><div class="fixedDataTableCellLayout_main public_fixedDataTableCell_main" style="height: 50px; width: 200px; left: 300px;"><div class="fixedDataTableCellLayout_wrap1 public_fixedDataTableCell_wrap1" style="height: 50px; width: 200px;"><div class="fixedDataTableCellLayout_wrap2 public_fixedDataTableCell_wrap2"><div class="fixedDataTableCellLayout_wrap3 public_fixedDataTableCell_wrap3"><div class="public_fixedDataTableCell_cellContent">63037-0309</div></div></div></div></div><div class="fixedDataTableCellLayout_main public_fixedDataTableCell_main" style="height: 50px; width: 200px; left: 500px;"><div class="fixedDataTableCellLayout_wrap1 public_fixedDataTableCell_wrap1" style="height: 50px; width: 200px;"><div class="fixedDataTableCellLayout_wrap2 public_fixedDataTableCell_wrap2"><div class="fixedDataTableCellLayout_wrap3 public_fixedDataTableCell_wrap3"><div class="public_fixedDataTableCell_cellContent"><a href="#">[email protected]</a></div></div></div></div></div><div class="fixedDataTableCellLayout_main public_fixedDataTableCell_main" style="height: 50px; width: 200px; left: 700px;"><div class="fixedDataTableCellLayout_wrap1 public_fixedDataTableCell_wrap1" style="height: 50px; width: 200px;"><div class="fixedDataTableCellLayout_wrap2 public_fixedDataTableCell_wrap2"><div class="fixedDataTableCellLayout_wrap3 public_fixedDataTableCell_wrap3"><div class="public_fixedDataTableCell_cellContent">12/6/2016, 1:48:21 PM</div></div></div></div></div></div></div><div class="fixedDataTableRowLayout_fixedColumnsDivider public_fixedDataTableRow_fixedColumnsDivider" style="left: 250px; height: 50px;"></div></div></div></div>

looks like its position exceed browser limitation.

macOS 10.12.4
Google Chrome Version 57.0.2987.133 (64-bit)

[jstafford]

I just noticed this myself, and was about to write up an issue, until I saw yours. I dug in a little using the React extension for Chrome developer tools. Things I noticed:

• table has 1,000,000 rows
• each with a row height of 50
• each row has a property called offsetTop, which appears to increase by 50
• the last row to render properly is at index 671,088
• the offsetTop at index 671088 is 33544400 (which is 50 x 671088)
• the offsetTop at index 671089 is 33544450
• in hex 33544400 is 0x1FFFFE0
• in hex 33544450 is 0x2000012

So this does look suspiciously like a limit in the browser. But where and why? I have no idea.

macOS 10.12.4
Google Chrome Version 57.0.2987.133 (64-bit)

[jstafford]

Problem is worse than I thought.

In FireFox the last index to render properly is 178956, with offsetTop 8947800 or 0x888858 in hex
The next one isn't stacked on top of the others, like it is in Chrome, but it just doesn't display.
It's index 178957, offsetTop 8947850 or 0x88888A in hex.

[wcjordan]

I believe this issue has been resolved in FDT2 if you'd like to check. @KamranAsif may be able to give details on the way it was resolved.

[jstafford]

Yes, this is fixed in Fixed-Data-Table-2. I was just discovering that the problem was the incredibly large values going into CSS transform, which really didn't need to be done that way. Glad to know that there is a new project.

When I found Fixed-Data-Table, I thought I was at the right place. I didn't see any big red "DEPRECATED" warnings, or links to FDT2. Oh well.

Thanks for linking me to where I needed to go.

[wcjordan]

Ya unfortunately Facebook has yet to deprecate this repo in-spite of the inactivity. They also softly encourage React-Virtualized over the fork of this as it provides a more general solution for those willing to switch over. In the meantime we're working on hyper optimized performance specifically for interactive grids over on FDT2 and will continue to do so for anyone who has FDT issues.

More discussion on deprecating this repo can be found on #468 and #408