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. `

{getTableHeaders()}

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

[z-wenlin]

@AllenFang yes, we are using the newest react-bootstrap-table-all.min.css. The browser is Chrome, and there is no animation between tab.

[AllenFang]

@juan0087, maybe be a horizontal scroll is your solution, try to set width on your columns. The reason I explain at before.

BTW, I thinks there are a lot of unalign issues when you set auto on table-layout. that's why I spend a lots of time to upgrade to v2.0.0 and change to a new table structure

[AllenFang]

@geekbosszhang, ok. Could you please give me a examples or a repo is better :)

[z-wenlin]

@AllenFang I'm sorry our repo is private, but I can show you some pics and code, if that can help, Thanks a lot. This is the queryDataGrid.js This is the query/index.js This is the main.js

[AllenFang]

I've no idea about that. I think the problem "maybe" is about the async call when you change to tab 2. Maybe you can try to move this async call this.props.actions.fetchQueryDetails() to the initialization stage or componentDidMount on your Main Component

[AllenFang]

@geekbosszhang, btw, there's must have some delay(enforceUpdate) on change to tab which contain react-bootstrap-table at first time, so how many seconds did you observer?

[juan0087]

@AllenFang , how about setting a min-width:800px for example. It would work kinda like the bootstrap table-responsive class and this adds the scroll bar automatically and it's fully responsive.

.react-bs-table table { margin-bottom: 0; table-layout: fixed; \ min-width:800px;** }

http://take.ms/xYRo2

I've tried what you said about but it didn't turn out well.

What do you think about the min-width on the table it self?

[AllenFang]

@juan0087, sounds like good, maybe I can add this as a new feature after some testing!

[juan0087]

To remove the default bootstrap scroll bar, what I did was I wrapped the table-resposive class inside another class and that left me only with one scroll bar.

CSS .hidden-scrollbar .table-responsive { overflow:hidden!important; }

Not the best way, but it's a quick fix for the mean time.

[AllenFang]

@juan0087, just a question, so you use a div.table-responsive to wrap a react-bootstrap-table?

[juan0087]

Correct Allen, here is a screenshot: http://take.ms/MPAmx

I didn't want to remove the bootstrap table-responsive class since it shirks and expands the column.

What I'm trying to figure out now is if I should leave the white-space:wrap or normal on .react-bs-table table td, .react-bs-table table th

[AllenFang]

ok, I understand, I thinks you can just overwrite the white-space. BTW, go back to my first answer for your, this is an example. What I mean is, horizontal scroll can't display auto, so the solution is you need to set widths on some column to make the total widths of table exceed the outer then the scrollbar will display. The example is a extremely example, no need to set all column width, it's depend on how large of your table width actuallly in different screen size. And this solution is not good, so if have any awesome solution, feel free to open a PR and give an nice explanation. :)

[juan0087]

Great! I will try it out in the morning and see how it comes out.

I will keep playing around with it and if I find a better solution I'll post it up.

Thanks a million again for the support Allen!

[AllenFang]

Also thanks your solution, I'll keep to explore it and maybe add it as a react-bootstral-table examples

[z-wenlin]

@AllenFang I have tried your solution, but still have that problem, about 2-3 seconds it will align correctly.Does that make sense? BTW, thanks for your suggestion.

[AllenFang]

@geekbosszhang, I thinks you can record the timestamp on tab changing and the first line on render method of queryDataGrid.js. i want to know the gap between this two timestamp. btw, the data in the table is very large?

[z-wenlin]

@AllenFang I think our data in the table is not very large by now. Is this the timestamp you want to see?

[AllenFang]

@geekbosszhang, sorry for my unclear descriptions, you can just use console.log(new Date().getTime()) to get timestamp and diff it.

[z-wenlin]

@AllenFang we added animation={false} on our SimpleTabs component, and used forceupdate() as you suggested, then it worked now ;)

However, I'm not sure why this can work? Can you throw me a hint ? thanks !!

[AllenFang]

@geekbosszhang, As I guess, because animation is true by default on tab of react-bootstrap. btw, I'm not sure why, but if you disable animation, there will no any async operation when tab changing, so that no delay and no need to do any settimeout. But as I know, if enable animation, you can call forceupdate after you fetched your data back to client, it's more better than calling forceupdate immeditality when tab changing.

[dannysindra]

Hey @AllenFang . Is the table header alignment fixed only for chrome? When I checked on Safari and Firefox, the headers are still unaligned with the data.

I already updated to v2, and including the new css.

[AllenFang]

I'm sure the problem has been fixed on all browser. could you please show your examples? and table in tabs? did you assign column width? What's version of Safari and Firefox?

[dannysindra]

The table is not in tabs, I have tried assigning column widths; but did not work. Safari v9, Firefox v31.

[madeinfree]

Hi, @dannysindra may I have your detail information like dependencies version or source code for this sample ? this version is work quite well by my safari v9.

[AllenFang]

@dannysindra, did you enable selectRow?. And maybe an examples code for me to reproduce it is more better. Thanks :)

[devken-net]

Hi,

I experience table header misaligned on IE9.

I call this.refs.rsTable.forceUpdate() on componentDidMount and it works perfectly fine and all columns are aligned.

But when I resize the window or sort the table it will misaligned and looks like this:

It looks like it add 2px per column

[AllenFang]

@markortiz, I'll check this out on IE, Thanks :)

[devken-net]

Hi @AllenFang,

I just saw this now. By default my table was sorted by name in ascending order and when I sort it by code or other columns it will sort properly.

But when the table is been updated it will sort again by the default column name.

By default i have an options inside my render:

render() {
    let options = {
      sortName: 'name',
      sortOrder: 'asc'
    }
    return (
      <BootstrapTable data={ items} options={ options } striped={true} hover={true} ref='rbsTable'>
      ...
      </BootstrapTable>
    )

[AllenFang]

@markortiz, so there's no any unalign issues? if sure, I think you can open another issue to describe your problems. Because I hope this discussion is all about the issues which solved in v2.0.0.

Thanks :)

BTW, you can tell me what happend when user click the gear icon(Answer it in new issues page)?

[devken-net]

Alright. I move it to a new ticket #372

Thanks!

[AllenFang]

@markortiz, could you confirm there's no error if a table is not in tabs and resizing the window? Because I try to resize window on IE9, but got nothing