discussion for v2.0.0 release

Question

discussion for v2.0.0 release

AllenFang opened this issue 8 years ago · 87 comments

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

fixing the column unalign problem in different browser or in tabs(react-bootstrap)
fixing a wrong rendering width on column in some case
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

Answer 1 · 2016-03-13T15:41:00.000Z

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.

Answer 2 · 2016-03-14T00:56:23.000Z

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

Answer 3 · 2016-03-14T01:35:33.000Z

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)

Answer 4 · 2016-03-14T01:54:46.000Z

Sorry my bad, work great with the new CSS

Answer 5 · 2016-03-14T14:36:14.000Z

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)

Answer 6 · 2016-03-14T15:06:42.000Z

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>
  );
}

Answer 7 · 2016-03-14T15:10:00.000Z

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

Answer 8 · 2016-03-14T15:11:57.000Z

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

Answer 9 · 2016-03-14T15:23:58.000Z

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

Answer 10 · 2016-03-14T15:33:00.000Z

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

Answer 11 · 2016-03-14T17:30:28.000Z

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

Answer 12 · 2016-03-14T20:20:58.000Z

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

Answer 13 · 2016-03-15T01:40:48.000Z

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

Answer 14 · 2016-03-15T01:56:39.000Z

@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

Answer 15 · 2016-03-15T01:59:41.000Z

@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

Answer 16 · 2016-03-15T12:57:42.000Z

@AllenFang Thanks that works now

Answer 17 · 2016-03-17T05:00:19.000Z

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.

Answer 18 · 2016-03-17T05:25:50.000Z

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!

Answer 19 · 2016-03-17T05:46:20.000Z

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

Answer 20 · 2016-03-17T05:52:33.000Z

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

Answer 21 · 2016-03-17T05:53:02.000Z

@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

Answer 22 · 2016-03-17T05:53:59.000Z

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

Answer 23 · 2016-03-17T06:12:51.000Z

@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

Answer 24 · 2016-03-17T06:22:40.000Z

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

Answer 25 · 2016-03-17T06:30:29.000Z

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

Answer 26 · 2016-03-17T06:39:58.000Z

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

Answer 27 · 2016-03-17T06:41:52.000Z

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

Answer 28 · 2016-03-17T07:17:44.000Z

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.

Answer 29 · 2016-03-17T07:23:25.000Z

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

Answer 30 · 2016-03-17T07:27:25.000Z

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

Answer 31 · 2016-03-17T07:44:50.000Z

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. :)

Answer 32 · 2016-03-17T07:49:48.000Z

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!

Answer 33 · 2016-03-17T07:52:24.000Z

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

Answer 34 · 2016-03-17T08:17:25.000Z

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

Answer 35 · 2016-03-17T08:26:55.000Z

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

Answer 36 · 2016-03-17T09:29:59.000Z

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

Answer 37 · 2016-03-17T10:26:35.000Z

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

Answer 38 · 2016-03-21T03:38:43.000Z

@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 !!

Answer 39 · 2016-03-21T06:03:47.000Z

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

Answer 40 · 2016-03-23T23:08:11.000Z

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.

Answer 41 · 2016-03-24T01:50:45.000Z

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?

Answer 42 · 2016-03-25T03:01:37.000Z

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

Answer 43 · 2016-03-25T03:17:59.000Z

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.

Answer 44 · 2016-03-25T03:19:37.000Z

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

Answer 45 · 2016-03-28T04:45:44.000Z

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

Answer 46 · 2016-03-28T12:28:17.000Z

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

Answer 47 · 2016-03-30T03:40:50.000Z

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>
    )

Answer 48 · 2016-03-30T03:46:05.000Z

@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)?

Answer 49 · 2016-03-30T03:58:54.000Z

Alright. I move it to a new ticket #372

Thanks!

Answer 50 · 2016-03-30T10:59:00.000Z

@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

Answer 51 · 2016-03-30T11:25:09.000Z

@AllenFang I have not try it yet if the misaligned header also occurs if it is outside the tabs.
So far I only encounter it inside the tabs.

[Update]
It is being aligned when I click on sort. ( in emulation not yet tested it on vm )

Answer 52 · 2016-03-30T11:41:18.000Z

@Markortiz, got it, I'll try to find the problem, btw, did you enable selectRow and there's any vertical or horizontal scrollbar on table?

Answer 53 · 2016-03-31T05:08:53.000Z

Hi @AllenFang,

I don't have selectRow on my table. And I don't have horizontal scrollbar as well.
As you can see on my screenshot below, my table is inside a container and I dynamically compute the height (onload and on window resize) of that container so it will fit on the users screen and when the table is longer than the container height it will add scrollbars ( by css, overflow: auto;).

I was able to replicate this also on IE11.

(sample on ie11.):

On my sample dashboard and operators tabs have resizeHeight and on providers I remove resizeHeight.

I think it has something to do with my container height, padding and scrollbars since it works perfectly fine when I remove my script on calculating container's height.

my code:

componentDidMount() {
   this.resizeHeight({ id : container })

    var repeat = 0
    var interval = setInterval( () => {
      let x = document.querySelector( 'div.react-bs-table-container' )
      if( x != '' ) {
        try { // lets put it inside the try and catch to avoid error on componentWillUnmount
          this.refs.operatorsTable.forceUpdate()
          if(repeat > 1) {
            clearInterval( interval )
          } else {
            repeat++
          }
        } catch(err) {
          // console.warn('Table is undefined')
        }
      }
    }, 1000)
}

As you can see I'm calling the resizeHeight height first on componentDidMount and then I will call forceUpdate().

Then when I navigate on tabs and go back again to tab with resizeHeight the table header is misaligned. As you can see also on my sample GIF, the effect of forceUpdate() on misaligned header it don't fix the alignment. But when I sort the table it will align perfectly again.

It also have a weird behavior if you will look closely. Every time when I hover and move my mouse on the table during or before it calls the second forceUpdate() it is being aligned perfectly.

Answer 54 · 2016-03-31T16:15:06.000Z

@Markortiz, I'll try to figure out what happen on IE, BTW, did you have a repo can let me reproduce it?

Answer 55 · 2016-03-31T17:21:18.000Z

@AllenFang @madeinfree
Hi, sorry for late respond; I was working on different project. So like Allen said, I enabled selectRow property in the table. If I remove it, the table gets aligned - but I want to use that property because my users need it for deletion. Is there any fix for this?

Sorry I cannot share the private repo :( Here is my project's dependencies:

"devDependencies": {
"babel-core": "^6.6.4",
"babel-loader": "^6.2.4",
"babel-preset-es2015": "^6.6.0",
"babel-preset-react": "^6.5.0",
"babel-preset-react-hmre": "^1.1.0",
"css-loader": "^0.23.1",
"file-loader": "^0.8.5",
"style-loader": "^0.13.0",
"url-loader": "^0.5.7",
"webpack": "^1.12.14",
"webpack-dev-server": "^1.14.1",
"webpack-merge": "^0.8.3"
},
"dependencies": {
"react": "^0.14.7",
"react-bootstrap-table": "^2.0.2",
"react-dom": "^0.14.7"
}

Answer 56 · 2016-03-31T17:26:37.000Z

@dannysindra, thanks, I'll try this out. Anyway, if you can give me a repo or a example which can reproduce this issue on safari or firefox, I think I can debug more easy. Because the hardest problem is I can't reproduce it sometime ;(

Anyway, I'll try to figure out 👍

Answer 57 · 2016-04-01T01:47:23.000Z

@AllenFang is it possible to set a min-width and max-width per column?
(I'll try to make a test repo for ie misaligned)

Answer 58 · 2016-04-02T04:01:46.000Z

@Markortiz, sorry, react-bootstrap-table does not support min/max width currently. However, we can support in the future :)

@dannysindra, I just write a example and test it on Firefox@31.0, but I cant reproduce your issue, so I really need your examples. BTW, there's any vertical or horizontal scrollbar on table?

Thanks :)

Answer 59 · 2016-04-04T06:35:25.000Z

@AllenFang I have a simple fix for the IE browser misaligned by using css.

First, I remove all inline width on the TableHeaderColumn. Then control every column width in css by putting !important on every width and min-width I could also control min-width as well but now max-width.

Now everything is working perfectly, except if the table have srollbars. I was able to solve this by creating a script that will check of there are any scrollbars then get the scrollbars-width then add a padding to table header that same as scrollbars-width.

I might have an isolated case, but I think the problem is on computation of table-headercolumn width is different on IE since it also put decimal points on px and I think it will be also easier or accurate if we will put the same column width and min-width on table-header and table-body then add padding if necessary. :)

Answer 60 · 2016-04-05T05:49:27.000Z

@Markortiz, great job, for your solution, it only work on IE 9? did you try on different browsers?

BTW, according your said, I actually calculate the scrollbars size and give a padding on header, and I always use parseFloat to get the each width. But I can't figure out why this bug happened ;( However, it's better for me to reproduce this issues by a example or maybe you can give our PR to fix this particular issues on IE :)

Thanks

Answer 61 · 2016-04-07T18:36:49.000Z

@AllenFang
I cannot reproduce the bug when I made a new project and create similar table, it was so confusing... Can you please tell me how did you fix the unaligned column bug from the previous version?

Yep, my table has lots of columns, so it has a horizontal scrollbar.

EDIT:
Nevermind! I fixed the header unaligned problem by changing some CSS. I had some modification to the code that override some rules. Thanks for your help!

Answer 62 · 2016-04-08T01:49:21.000Z

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

Answer 63 · 2016-04-13T20:41:37.000Z

@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!

Answer 64 · 2016-04-14T06:09:45.000Z

@dannysindra, thanks your feedback. :)

Answer 65 · 2016-08-10T05:07:10.000Z

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.

Answer 66 · 2016-08-10T15:17:48.000Z

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

what's the browser and version
the react-bootstrap-table version

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

Thanks :)

Answer 67 · 2016-08-11T00:07:54.000Z

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

Answer 68 · 2016-08-11T05:03:44.000Z

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

Thanks a lot.

Answer 69 · 2016-08-12T01:15:48.000Z

@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 :)

Answer 70 · 2016-09-19T12:34:30.000Z

@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={....

Answer 71 · 2016-12-02T21:42:20.000Z

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

Answer 72 · 2017-02-07T01:50:49.000Z

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

Answer 73 · 2017-02-07T13:07:52.000Z

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

Answer 74 · 2017-02-08T18:37:15.000Z

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.

Answer 75 · 2017-02-10T09:35:05.000Z

@rodgersk410, did you have a screenshot?

Answer 76 · 2017-03-03T15:03:15.000Z

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

Answer 77 · 2017-03-03T15:05:53.000Z

@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

Answer 78 · 2017-03-03T15:38:09.000Z

@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!

Answer 79 · 2017-06-12T14:29:06.000Z

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?

Answer 80 · 2017-06-14T12:31:39.000Z

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

Answer 81 · 2017-06-14T19:43:09.000Z

@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

Answer 82 · 2017-06-16T15:42:55.000Z

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

Answer 83 · 2017-06-16T19:48:27.000Z

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

Answer 84 · 2017-06-19T08:13:46.000Z

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

Answer 85 · 2017-06-19T20:23:13.000Z

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

Answer 86 · 2017-06-21T15:56:52.000Z

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

Answer 87 · 2017-09-15T20:40:59.000Z

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.