Misaligned header when using React Boostrap Tabs

[heptapod42]

The table header gets misaligned with the column data when switching tabs (React Boostrap Tabs) similar to the one given in the below link.
http://stackoverflow.com/questions/34054567/react-bootstrap-table-misaligned-header-columns

[AllenFang]

@Meera613, I've started to re-design the dom of react-bootstrap-table for fixing width and unalign problem. It will coming soon.

btw, could you please give me a available example for me to test on my new design? Thanks

[AllenFang]

duplicate with #285

[MatthewHerbst]

@AllenFang

Hey, I'm OP on that SO post. I've actually spent all day today working on it.

Some things to know:
My data load is async.
react v0.14.2
react-bootstrap v0.28.1
react-bootstrap-table v1.5.3

My current diagnoses:

When I open the tab containing the table before the data has loaded, then when the data loads the table looks correct. If I am in a different tab when the data loads and then switch to the tab with the table, the headers are misaligned. Specifically:

Good header

<th class=" sort-column" style="text-align: left; width: 54px; max-width: 54px;">
  <div class="th-inner table-header-column" data-field="pid">
    <span>PID</span>
    <span class="order">
      <span class="dropdown">
        <span class="caret" style="margin:10px 0 10px 5px;color:#ccc;"></span>
      </span>
      <span class="dropup">
        <span class="caret" style="margin:10px 0;color:#ccc;"></span>
      </span>
    </span>
  </div>
</th>

Bad Header

<th class=" sort-column" style="text-align: left; width: 0px; max-width: 0px;">
  <div class="th-inner table-header-column" data-field="pid">
    <span>PID</span>
    <span class="order">
      <span class="dropdown">
        <span class="caret" style="margin:10px 0 10px 5px;color:#ccc;"></span>
      </span>
      <span class="dropup">
        <span class="caret" style="margin:10px 0;color:#ccc;"></span>
      </span>
    </span>
  </div>
</th>

You can see that the only difference is that the width is 0 in the bad example. I've been trying to go through the code and find the problem but haven't seen anything obvious yet. My guess is it has something to do with one of the lifecycle methods but again, not sure yet.

Do you already know what the problem is?

[AllenFang]

@MatthewHerbst, I thinks your guess is right. But I've not started to solve this issues yet. Like I said, I am design a new structure currently, if any example can reproduce this issues, I think I can solve it on new design. :)

Thanks your feedback!