search

archfz / vh-sticky-table-header

Vertical and horizontal sticky table header. Framework agnostic.
MIT License
16 stars 3 forks source link

Problem when using a table inside the main table #4

Closed erip2 closed 1 year ago

erip2 commented 1 year ago

In my app, I have a table inside each <tr>. In this use-case there seems to a problem with sticky header functionality. I made a fork from your codesandbox example:

https://codesandbox.io/s/vh-sticky-table-header-demo-forked-wp8tqw

I just putted the main table inside the first row. Notice how the main table header stops at the last <tr> of the inner table.

I opened the source code and I think the reason this happens is because here https://github.com/archfz/vh-sticky-table-header/blob/main/src/StickyTableHeader.ts#L84 the lastElement is getted like this:

.querySelector('tbody tr:last-child')

which if you try it in the console it will return the last <tr> of the first inner table.

A fix for this would to change be the line mentioned above to this:

const lastElement = this.tableContainer.querySelector(':scope > tbody > tr:last-child');

Now we are sure that only the last <tr> of the table that we are making it's header to be sticky would the one selected and all the functionality will work normally.

I'm not sure of the other implications this brings (if it brings), so I thought to open a issue at the moment and not a PR. Thanks!

erip2 commented 1 year ago

Hi there @archfz!

Any chance you can have a look at this? It would be very helpful in our project.

Thanks!

archfz commented 1 year ago

Good find. Added https://github.com/archfz/vh-sticky-table-header/commit/6f41e0b3dac1508d43fe8d834e9708c3fceb4d88 and released in 1.4.2.