Column header widths change after render

[L5eoneill]

Table rows render first, with column headers in the wrong widths. Then, they jump to the correct widths to go with the rows. This is especially visible when switching between tabs that each contain their own tables. It takes something like a whole second to settle down the table layouts, which isn't good for the user experience.

When I set all columns but one to fixed width:
<TableHeaderColumn dataField="thefield" dataFormat={theformatter} width="200">
The output is not reflecting the widths I set, and the headers still jump on tab switch.

The column headers aren't even in the same table as the data. I assume that's necessary for other functionality with sorting and such, but it is really breaking the rules of document structure!

[pgiani]

Im having the same issue

[AllenFang]

There seems like two issues in here, for first, your tab is means browser tab?

Two, the width issues exist actually, I've started a new plan for fixing this problem currently, but need some time, here is reference.

The column headers aren't even in the same table as the data. I assume that's necessary for other functionality with sorting and such, but it is really breaking the rules of document structure!

which that means?

[L5eoneill]

By Tabs I mean react-bootstrap tabbed interface, not browser tabs.

And by breaking the rules that a table header goes in the same table with the table body, you're setting up a structurally meaningless table (terrible for ARIA), and giving yourself huge problems in setting column widths. With the table header as part of the same table, then the columns can't -- just can't -- be different widths from each other. And that's a good thing.

[AllenFang]

@L5eoneill, could you please give some example code(repo or gist) for me to reproduce this issues?
Thanks

[L5eoneill]

Here's a gist: https://gist.github.com/L5eoneill/74c96b78a12c3deed464

Don't know though... so much going on in React components, it could be a problem with something elsewhere in the app.

Notice: when I look at the output, that name column... in the gist you see it has width="360"? In the DOM it has this, showing width set at 518px:

<th class=" sort-column" style="text-align: left; width: 518px; max-width: 518px;" data-reactid=".0.1.0.1.$1/=11.0.0.1.0.0.0.0.0.1:$1"><div class="th-inner table-header-column" data-reactid=".0.1.0.1.$1/=11.0.0.1.0.0.0.0.0.1:$1.0" data-field="name"><span data-reactid=".0.1.0.1.$1/=11.0.0.1.0.0.0.0.0.1:$1.0.0">Name</span><span class="order" data-reactid=".0.1.0.1.$1/=11.0.0.1.0.0.0.0.0.1:$1.0.1"><span class="dropdown" data-reactid=".0.1.0.1.$1/=11.0.0.1.0.0.0.0.0.1:$1.0.1.0"><span class="caret" style="margin:10px 0 10px 5px;color:#ccc;" data-reactid=".0.1.0.1.$1/=11.0.0.1.0.0.0.0.0.1:$1.0.1.0.0"></span></span><span class="dropup" data-reactid=".0.1.0.1.$1/=11.0.0.1.0.0.0.0.0.1:$1.0.1.1"><span class="caret" style="margin:10px 0;color:#ccc;" data-reactid=".0.1.0.1.$1/=11.0.0.1.0.0.0.0.0.1:$1.0.1.1.0"></span></span></span></div></th>

And you can see the other columns do not have widths set on them. So, your module is ignoring the width setting for some unknown reason.

[AllenFang]

@L5eoneill, I understand, like I said, I've a new plan for fixing these all problem about resizing and column width. if I completed, I'll post here and just try again on new version, but need more time.
btw, the column width + horizontal scrollbar + vertical scrollbar all together is hard to design, so if any suggestion or PR is welcome :)
Thanks your feedback !

[L5eoneill]

Don't know if it will help you any, but any interaction that re-renders the table fixes the thead alignment problem: switch to another page, select a selectRow check (or radio).

[z-wenlin]

I have the same issue. Is there any solution to solve this problem?@AllenFang
My react-bootstrap-table version is 1.5.4.

[AllenFang]

I'm solving this issue, I think this patch is coming soon.

[z-wenlin]

@AllenFang Ok.That's awesome.Thanks.

[devken-net]

I have the same issue and same scenario with @L5eoneill

on the first render table alignment is very clean and perfect. but every time I re-render table or switch between the tabs (react-tabs) it got dis-align and worst is the table is getting wider and wider.

Currently I'm trying to create my own table width and column width computation and I can say it is quite difficult. I wish I could call the same function that could compute the width like _adjustHeaderWidth.

Thanks in advance @AllenFang for the patch!

[devken-net]

@AllenFang i think adding this._adjustHeaderWidth(); on componentWillReceiveProps will solve the problem.

[AllenFang]

hi all, about the react-bootstrap-table in tab will cause a unalign problem, I've solved it in my new table structure plan and I'll release it in near future. Sorry for a long time to wait ;(

[juan0087]

Awesome Allen! I'm having the same issue here as well. Hope to see the patch soon!

Thanks in advance! =)

[AllenFang]

Dear all, v2.0.0 has been released, you can check #331 for more detail explanation and I'll close this issues, if problem still remain, please tell me on #331 or open an issue

[pgiani]

I did not see any improvement on Ver 2.0.0 regarding the headers in the wrong widths

[RishiAgar]

Issue is still there, Width of table head and columns are not same and not aligning

[AllenFang]

@RishiAgar, what's version you used and have any screenshot? thanks

[RishiAgar]

Version 2.11.2

 <BootstrapTable data={ products } cellEdit={{mode: 'click'}} tableHeaderClass='table-head'>
    <TableHeaderColumn dataField='id' isKey>Product ID</TableHeaderColumn>
    <TableHeaderColumn dataField='name'>Product Name</TableHeaderColumn>
    <TableHeaderColumn dataField='price'>Product Price</TableHeaderColumn>
</BootstrapTable>

[RishiAgar]

Sorry, never mind, my mistake, checked logs, some caching issue.