Table column header width not auto-sizing with tabbed UI

Tags: #<Tag:0x00007efc6d167338>
#1

Hi all,

I am using Tabs from Reactstrap and in each tab, I have a Handsontable via the React library (HotTable).
The problem I am having is that the column header widths in the tabs besides the first default one are not auto adjusting to fit the whole name of the column header. I do not provide colWidths because I want the headers to auto size based on the text width.

Here is a code sandbox to further show my problem: https://codesandbox.io/s/compassionate-joliot-uonth?fontsize=14&hidenavigation=1&theme=dark

As you can see, on the first tab, the column headers are ok, as in there is enough width to fit the name for Column 1, Column 2, and Column3. However, when you switch to the second tab, the column headers shrink and do not display all the text.

Is there anyway to workaround this fix (some css change, etc)?

Thanks!

#2

Hey @kennyhuynh125

we do not try our solutions with the Reactstrap and can’t guarantee it will work perfectly.

You can try to use render() for the table or setDataAtCell() for any cell in each column as it will repaint the table and recalculate the columns.

#3