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)?