Column headers go over body rows when headers get updated

Tags: #<Tag:0x00007efc71a87770> #<Tag:0x00007efc71a87608>

Hello,

I’d like to ask for help about auto adjusting the table when the headers are changed.
You see in our project, we have a search control together with the header titles. The search control is a custom multi select dropdown and it is possible for the control to expand down depending on selected values.

The problem is, the headers go over the body and cuts off the first or up to second row.

Here is a sample:
https://jsfiddle.net/815rmsc2/13/

Hi @willardquing

Thank you for contacting us. I’m not sure if I understand your requirements correctly, but from the code I can see that you are expanding column headers by adding new DIV elements with each button click. That breaks the column headers, as they expand over the table and are not designed for such heavy modifications.

The solution I can think of would be to recalculate the table’s dimensions after adding new element to the column header, but as they are added dynamically and recalculation would require re-rendering the table it will be quite complicated to achieve that.

I see. Thanks for the suggestion. I will consider it. :+1: