search

facebookarchive / fixed-data-table

A React table component designed to allow presenting thousands of rows of data.
http://facebook.github.io/fixed-data-table/
Other
4.3k stars 553 forks source link

Main example cannot render after certain number of rows #486

Open hansanghoon opened 7 years ago

hansanghoon commented 7 years ago

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

image

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="#">Franz_Dicki0@yahoo.com</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="#">Brennon_Crist89@gmail.com</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 commented 7 years ago

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:

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 commented 7 years ago

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 commented 7 years ago

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 commented 7 years ago

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 commented 7 years ago

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