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

Added hack for properly rendering new dynamic row heights #483

Closed bdasbach closed 7 years ago

bdasbach commented 7 years ago

This repo seems abandoned, but I figured I'd leave this here in case it helps someone else with a similar issue. The problem this fix is for is the table not resizing correctly when new data is sent in, which would cause the row heights from rowHeightGetter to return different heights for the same rows.

The problem is basically that fixed-data-table keeps a cache of row heights internally (inside of the helper class FixedDataTableScrollHelper), and it calculates the table height values using a stale cache once you start filtering the table. The fixed-data-table component gives you the hook for getRowHeight, but only expects you to use it for initially variable row heights not for row heights that change over time. The height for the table is calculated and set before the render call, and the proper row heights are only calculated during the render call of a child component (FixedDataTableBufferedRows).

I got around this problem by adding a loop around line 1506 that runs through every row and uses the FixedDataTableScrollHelper function getRowPosition to get the position of every row. Calling this function also has the side-effect of updating the row height cache, so having this loop before the table height gets calculated means that it will use up-to-date values and size the table correctly. Since this adds the cost of an extra run through each row in the table, I also added a prop to FixedDataTable called hasDynamicRowHeight so it will only loop if you tell it to. It could be smarter to figure this out on its own or not loop through this again later, but since my use case for dynamic rows has n =< 5 I didn't investigate further.

facebook-github-bot commented 7 years ago

Thank you for your pull request and welcome to our community. We require contributors to sign our Contributor License Agreement, and we don't seem to have you on file. In order for us to review and merge your code, please sign up at https://code.facebook.com/cla - and if you have received this in error or have any questions, please drop us a line at cla@fb.com. Thanks!

If you are contributing on behalf of someone else (eg your employer): the individual CLA is not sufficient - use https://developers.facebook.com/opensource/cla?type=company instead. Contact cla@fb.com if you have any questions.

zpao commented 7 years ago

Thanks for your pull request. I apologize for leaving this project in limbo and not addressing your concerns. I have archived this project after doing a final release to make it compatible with React v16.