Sticky header cell width not same as original table header cell width.

[pangweisan]

Hi Vincjo,

I am not sure if I did something wrong using the component or setting up the css, but the sticky header cells width don't align with the original table columns width. I have tried changing the width by forcing them to be identical in columns.redraw, but they just won't line up. What's the right way to do it ?

rgds Pang

[pangweisan]

I think I understood how to make the sticky header same size as the table cell. Set the box-sizing of 'td' in the actual table to be border-box, the sticky header sizing would be correct.

[pangweisan]

It seemed setting the table box-sizing to border-box alone only helped when Datatable was initially rendered with non-empty data. If Datatable was initially rendered with empty data row and later on fed with new data, the sticky header size didn't get updated automatically. Based on my analysis the problem seemed to be : (1) There was no mechanism in invoking the resize of the table when new data was fed. ResizeObserver was set on the parent element of Datatable, which may not change when new data is fed. (2) I tried adding a ResizeObserver on table->th, and performed a datatable.resize in it, but when the code went through columns.redraw, it didn't pass in the argument required by the function to locate the the data row in the table. The function argument is the id of the Datatable. I added the argument, then the header seemed to be resized correctly.

I apologized if my analysis is wrong.

[vincjo]

Hello Pang, I apologize for the delay in responding.

I don't know exactly what broke. I should have corrected the issue in 0.1.27. It needed a short delay before to draw columns in the sticky header. The time the default table style is computed.

Did'nt test feeding data multiple time for now

[pangweisan]

Hello Vincjo,

Yes, indeed the short delay is needed. My observation was that when the table was fed with new data, the table columns sizes could change to adjust to the new data width, with the current datatable.init() implementation, the resize observer is created for the table parent element, which in my use case the parent element has a fixed size, so it wouldn't trigger the observer resize callback. I had to add resize observers for each of the table header elements in order to make it work.

My analysis could be wrong, or may be it's my use case that needs a different treatment, so if nobody else is having the same problem then it's probably not an issue.

rgds Pang