discussion for v2.0.0 release

[AllenFang]

#321 #300 #285 #267 #254 #227 #237 #268

I thinks these issues will be solved in v2.0.0. The released day will in the 2016/03/13 or 03/14.

The main patch is

1. fixing the column unalign problem in different browser or in tabs(react-bootstrap)
2. fixing a wrong rendering width on column in some case
3. fixing the wrong height on table

btw, for the unalign column in tabs, please check this example. This example is a workaround solution, because I cant actually got the width of column which in hidden tabs(I found a lots of solutions, but did not worked). In addition, if tab do not render hidden tab, will solve this issues, check this thread

if you have any issues or feedback _is related with these topic_, please tell me in this thread.
Sorry for a long time to wait this patch.

---

when upgrade, remember to import(use) newest css file, dont reference legacy one

[AllenFang]

btw, in v2.0.0, for a large column table, the horizontal scrollbar will not display automatically. The solution is set width on some columns to make the total width of table exceed the outer then the scrollbar will display.

[pgiani]

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

[AllenFang]

HI @pgiani, you catch the legacy css file, please make sure you use the newest css file(react-bootstrap-table.min.css or react-bootstrap-table-all.min.css)

[pgiani]

Sorry my bad, work great with the new CSS

[garciasa]

Hi guys,
thanks for that @AllenFang , now it works on a plain tables, but I've another issue when your table has selected rows property enable. First time i render the table (comes from a hidden DIV) the header is not display correctly, once you click in one of the radio button, the header gets the correct width.. any idea?

it happens in Chrome(49) and IE (11)

[AllenFang]

HI @garciasa, The problem is like you said, and the solution is you need to do a foreceUpdate when after tab loaded at first time. Like I said in first thread, check this example.

after tab mounted, please call

afterTabChanged() {
    this.refs.table1.forceUpdate();
}

//...
render() {
  return (
      <BootstrapTable ref="table1" data={products}>
        <TableHeaderColumn dataField="id" isKey={true} >Product ID</TableHeaderColumn>
        //...
      </BootstrapTable>
  );
}

[garciasa]

Sorry man!!! i didn't read your workaround here https://github.com/AllenFang/react-bootstrap-table/tree/master/examples/js/others/table-in-tabs.js

[AllenFang]

@garciasa, that's ok :) feel free to give any feedback after you upgrade to the v2.0.0

[garciasa]

My problem is that my bootstraptable is in a child component, refs, is not directly accesible!!!! I need to find the way to access to the bootstraptable child...

[AllenFang]

could you please show your example codes ? I think it should be work, how about this.refs.your_child_component.refs.table?

[garciasa]

Yes, that is, i was doing my references wrong!!! Thanks again..

[bindiababy]

Hi, I have updated to use v2.0.0 and included the css
@import (inline) '../../node_modules/react-bootstrap-table/css/react-bootstrap-table-all.min.css';
but still get the same issue of header alignment error

[AllenFang]

@bindiababy, is the table in the tabs? or could you please give your example ?

[bindiababy]

@AllenFang the table is not in tabs , but added into an Accordion , so I would still need a force update? I was not sure where to do that though, since I am not handling the onSelect.
<Accordion> <Panel header="Criteria 1" eventKey="1"> <BootstrapTable data={products} selectRow={selectRowProp}> {getTableHeaders()} </BootstrapTable> </Panel> </Accordion>
getTableHeaders --this populates dynamic number of TableHeaderColumn

[AllenFang]

@bindiababy, yes, you need to do a fore update when tab load at first time. Because Accordion is same as tab, there're some div is hidden

[bindiababy]

@AllenFang Thanks that works now

[z-wenlin]

Hi,@AllienFang I have updated to v2.0.0 and add the new react-bootstrap-table-all.min.css and forceUpdate, but my table header still have the alignment error, after some seconds, it will align correct.

Here are my codes.

Is anything wrong?Thanks a lot.

[juan0087]

Hello there Allen,

I'm having a hard time displaying the table and content properly on version 2.0.0. The issue is in line 7 of react-bootstrap-table-all.min.css (Rule: table-layout:fixed). If I remove "fixed" or simply change it for "auto" the table displays perfectly as it should, even on mobile devices, but the header breaks and gets misaligned just like before on the previous version.

Here are two examples with fixed and auto table-layout:

*table-layout:fixed: (Displays fine) *
http://take.ms/VAg0q

table-layout: auto:
http://take.ms/4xckP

Misalignment issue with table-layout auto :
http://take.ms/oMeZj

Is there a way to fix this issue? I would deeply appreciate any help.

Thanks in advance!

[AllenFang]

@geekbosszhang, if your upgrade from older version, make sure your application use the newest react-bootstrap-table-all.min.css and what's browser did your used? btw, any animation on changing between tab?

[AllenFang]

@dannysindra, great job, would you please share what's you did and give some feedback :)

[dannysindra]

@AllenFang Nothing much, really. I have another CSS file which override the table-layout rules. I switched it back to

table-layout: fixed

and then all table heading aligned with the body. Works on Firefox and Safari. Thanks a lot for this awesome module!

[AllenFang]

@dannysindra, thanks your feedback. :)

[lioralt]

Hi,
I'm having a problem with the alignment of the header while having a vertical scrollbar.

can you please assist me on this ?

Thanks.

[AllenFang]

@lioralt, ok, You should let me know the following informations:

1. what's the browser and version
2. the react-bootstrap-table version

There's a known unalign issues when using latest chrome.

Thanks :)

[devken-net]

@lioralt you can also try to set it with css just like what I did. :)

[lioralt]

@AllenFang , I'm using chrome version 52.0.2743.116 m
and react-bootstrap-table 2.0.3

Thanks a lot.

[AllenFang]

@lioralt, you can upgrade react-bootstrap-table and actually like I said, there's some unalign issues in latest Chrome, I'm going to fix it. thanks :)

[cristian-eriomenco]

@AllenFang I've got same behavior on Chrome and Firefox. Works well on IE 11 and Edge.
But there's an interesting thing. It can be programmatically fixed if this.refs.myTable.forceUpdate() is called. Hope this helps with identifying the issue.

Click handler
handleBtnClick = e => { this.refs.myTable.forceUpdate(); }
Button
<button onClick={this.handleBtnClick}>Fix table width</button>
BS Table
<BootstrapTable ref="myTable" data={....

[skrehnbrink]

The column unalign issue also occurs when in print preview from the browser. I using v2.5.6 in Chrome 54

[ryanbartolay]

I am using react-bootstrap-table": "^2.11.1, still occurs on this version, i am using chrome.

[AllenFang]

If you guy got a unalign issue, please open another issue and I'll handle it, thank you

[rodgersk410]

I was on v 2.11.2 and had an issue with the alignment of the column headers and body data. It seems like if in a particular column, the body cell's text length is longer than the header column's text length, then the table becomes misaligned.

I downgraded to version 2.9.2 and the issue was resolved for me. Version 2.10.0 and onward seems to have this issue.

[AllenFang]

@rodgersk410, did you have a screenshot?

[kevinrue]

Hi Allen,

Thanks for the great work!
Here is a screenshot of my situation , and a link to my corresponding GitHub repo.
I am using "react-bootstrap-table": "^3.0.0".

Note also that the filter fields show up under each other in my case, rather than side by side as in your examples. Any advice on that one is welcome too, although I appreciate that this is not the point of this thread.

All the best,
Kevin

[AllenFang]

@kevinrue, I think you forgot to add the css of react-bootstrap-table, please try again and if the problem is still remain, I think this is a known issue and need some time to handle it. Thanks

[kevinrue]

@AllenFang : Flawless! Thanks so much for the lighting-fast spot-on answer !
I don't know for how much longer I will be able to hide under the cover of "I'm new to NodeJS", but in this particular instance, I wasn't aware that I needed to load your CSS. All fixed now.
Cheers!

[ghost]

Hey @AllenFang , I couldn't find a way to keep the horizontal scrollbar visible everywhere without having to scroll to the bottom of the table to find it.

Let's say my table has a max-height of 300, I would like for it to have both the vertical and horizontal scrollbars shown even though I'm not at the bottom of my table (so I don't have to scroll down to move left-right).

Do you think it's a feature you would add soon?

[AllenFang]

@vincentpageau, There is one restriction when you want to make a large column table with horizontal scrollbar: You need set the width on some column to make the total width of table exceed the width of outer.

[ghost]

@AllenFang Worked like a charm!

I was also wondering if react-bootstrap was supporting window resizing. I couldn't find docs for when I want to resize only the height of my table when I resize my window.
Thanks

[AllenFang]

@vincentpageau, sorry, we dont support the resize currently :P

[ghost]

@AllenFang Oh ok.
Do you think it's a feature you would add in the near future?

[AllenFang]

I dont think so in near future, but I can try to support it in the future. There's a PR already support the resize column width, but need more test, thanks

[tzarger]

@AllenFang Mind if I ask with all the alignment problems above, what was the motivation to create two tables instead of one? Just curious, thanks.. I am having this problem too...

[AllenFang]

@tzarger, it's a loong story ;P The most issue is support the horizon & vertical scroll on bootstrap table.

[ghost]

How to make the table container horizontal scroll without window bottom scroll in react-bootstrap-table.
containerStyle={{width: '200%',overflowX: 'scroll'}}
I have use above property, but both of scrolls are appear. and table scroll is not like normal table container scroll, hope kindly response. Regards.