search

pupudu / window-table

Windowing Table for React based on React Window
https://window-table.netlify.com/
170 stars 13 forks source link

why there is a duplication of table ? #41

Open realdreamer opened 4 years ago

realdreamer commented 4 years ago

I tried to using the HTML5 Table. But, it's appending a duplication of table header and table body. It makes sense for having the below one table-header and table-body within a separate table. But, I didn't understand the point of the first one. Thats creating an unnecessary issues if I pass ref to header and body. because sometimes it's returns the below table-body and sometimes above one. Even though I'm interested in the table-body (below) with the actual values.

image

Is there any way, I can avoid rendering the first table`?

pupudu commented 4 years ago

Hi @realdreamer Sorry for taking a bit too long to respond to the issues. I was away for a while. ... The first table is there to measure the table content. React-window(the base library by Brain Vaughn) is based on fixed-size rows and columns by default. Hence we have to use the react-virtualized-autosizer package to measure the table dimensions. For example, if we didn't use this, we can't make the table use 100% width of a component, and will have to specify the width explicitly everytime. In fact, needing to do this is one of the primary reasons I decided to build window-table.

So chances are, the two tables will have to stay. However, if you are facing problems because of the additional table, it's likely a missing feature or a bug in window-table. It could be an issue with the way we forward refs internally. Could you explain the issue you are facing please? Then I can see what's going wrong.

realdreamer commented 4 years ago

HI @pupudu, Thank you for reverting back.

image

I'm trying to pass ref like mentioned in the screenshot. But the problem with this issue is, when I try to access the ref element of the tableBody to measure the height, it returns the first tableBody (which is dummy for the reference purpose what you use). So, for Example if I need to get the actual height of the tableBody => tableBodyEl?.getBoundingClientRect().height it returns me the height of the first tableBody height not the actual one what I need.

Hope this helps.

Thanks in advance :)