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

Duplicate data on using input within cell #469

Closed robhadfield closed 7 years ago

robhadfield commented 7 years ago

Hi, I couldn't find any mention of this doing a search so I hope it's not been covered.

I have generated a table using FDT 0.6.3 that replicates a spreadsheet-like layout. Each cell (except first column) has an input to record data.

My issue is that if I record data in an input and scroll down, this data is duplicated in a number of cells down the table - and when I return to the top the data is no longer in the original input.

I'm assuming this is something to do with how the table is generated on the fly? Is there a way to force the table to render all cells straight away to avoid this? It's not a long table so I don't need this cloning functionality.

Video : http://quick.as/er5rfb7wr

Cheers! :)

KamranAsif commented 7 years ago

This is because your inputs are being reused. Best way to avoid this is to give each input a unique key using the row index + column key

robhadfield commented 7 years ago

Hey Kamran, thanks for the quick reply :)

I've added unique keys and the it's stopped the duplication but I still lose the value when scrolling?

Video : http://quick.as/yylyuppyp

This is not a controlled component, it's just a HTML input. I wonder if it will retain the value once I actually set a value using react state/props?

robhadfield commented 7 years ago

Hey @KamranAsif I've done some testing and adding the value dynamically seems to resolve this issue 👍

Thanks for your help!