Use invisible header row #1758
Use invisible header row #1758
Conversation
There was a problem hiding this comment.
It kind of works, but it's quite flickery/laggy and sometimes unresponsive when scrolling vertically or resizing the window.
data-table_screencast.mp4
I'm not sure how much work it would take, but maybe it would be worth restructuring the HTML table markup a bit (by joining the header and the body part to one table) to render a semantic table and format it with CSS instead of calculating the column sizes with js.
If not, maybe it's possible to optimize the calculations a bit more.
|
A lower effort solution could be cloning the header row into the table body and make it visually hidden so it would essentially set the min. width of the columns - in theory. |
|
@akksi can you take a look at this PR again? |
|
Looks good to me. :) |
| fixed_rows={{headers: true}} | ||
| row_deletable={true} | ||
| row_selectable='single' | ||
| /> |
There was a problem hiding this comment.
Could we add a test where the columns are as wide as max(header, cell)? In this test case, the table is very wide so we don't see the issue of the narrow headers.
There was a problem hiding this comment.
Perhaps a test with several columns
There was a problem hiding this comment.
Ah well I guess this existing test covers it:
|
This percy diff is odd - Looks like we lost the header border for the row selection column? |
|
Another odd one - custom colors aren't being applied to that border |
|
Looks like this test is missing data now |
|
The widths of these columns changed considerably. Not sure what the "true" width should be for this case though.
|
|
Again not sure what the width "should" be in this case. |
The table percy tests have been flaky for some time now, unfortunately, in exactly this way: some tables just disappear entirely. If we're relying on those tests to validate the changes here, perhaps it's worth spending a little time in a separate PR just getting those tests to be reliable, then rebase this PR on top of that? |
Fixes plotly/dash-table#205 and plotly/dash-table#432