Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Column header widths change after render

See original GitHub issue

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!

Issue Analytics

State:
Created 8 years ago
Comments:20 (7 by maintainers)

Top GitHub Comments

3reactions

RishiAgarcommented, Feb 10, 2017

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

2reactions

AllenFangcommented, Mar 11, 2016

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 😭

Top Results From Across the Web

Changing column width in react-table - Stack Overflow

By default width is 150, given in docs. Since width is an int property, don't use single quotes. columns: [ { Header: "First...

Best way to prevent column widths from changing after sort

I'm using the Responsive extension so my column resize and play nicely at different resolutions.

Matrix Column Width keeps changing with different Filters

I already deactivated "Auto-size column width" under "Column headers", activated word wrap and dragged the column borders around to have it nice fitting,...

Setting column width under Basic Table and Render

Hello, I have a report that when the column headers are reviewed under the Browse tool all the column names reflect completely but...

column-width - CSS: Cascading Style Sheets - MDN Web Docs

Indicates the optimal column width. The actual column width may differ from the specified value: it may be wider when necessary to fill ......