search

primefaces / primereact

The Most Complete React UI Component Library
https://primereact.org
MIT License
6.91k stars 1.05k forks source link

Scrollable DataTable in Expand mode has table header column miss-align with table body column #1642

Closed tom-son closed 3 years ago

tom-son commented 4 years ago

There is no guarantee in receiving an immediate response in GitHub Issue Tracker, If you'd like to secure our response, you may consider PrimeReact PRO Support where support is provided within 4 business hours

I'm submitting a ... (check one with "x")

[x ] bug report
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://forum.primefaces.org/viewforum.php?f=57

Codesandbox Case (Bug Reports) Please fork the codesandbox below and create a case demonstrating your bug report. Issues without a codesandbox have much less possibility to be reviewed.

https://codesandbox.io/s/primereact-test-forked-7s9t7?file=/src/index.js

Current behavior When expanding a row in an expandable and scrollable DataTable that asynchronously render between loading and loaded content. The table columns header do not align with the table column body, after the loading content is replace by the loaded content.

It seems like the issue occurs when the first render of the loading content has a height smaller than the loaded content. e.g. when setting a height equals or greater than the loaded content height. The table column header will not missalign. (This is noted in the codesandbox on line 23)

Expected behavior Table column header should align with table column body.

Minimal reproduction of the problem with instructions

https://codesandbox.io/s/primereact-test-forked-7s9t7?file=/src/index.js

1). In the first column click on the expander icon (Note: expander icon is not displaying properly) 2). Wait 2 seconds for the loading content to switch to loaded content.

Please tell us about your environment:

mcandu commented 3 years ago

I’m unable to replicate with the latest PrimeReact. If the issue still persists with the new version please create a new issue with our code sandbox template. https://codesandbox.io/s/qjx332qq4