Table Header width and Table Body width mismatch and unaligned

[ashishd751]

I am using "react-bootstrap-table" with version 2.11.0 and i am facing the following issue -

     1] **The header columns width do not match with their corresponding body columns width.
          It looks as if data of one column belongs to some other column.
          All the data is unaligned.**

     2] This is my jsx code : 

          `<div className="container">                
            <BootstrapTable data={this.createRows() } deleteRow={ true } exportCSV={ true } cellEdit={ cellEditProp } striped selectRow={ selectRowProp } pagination={true} options={ options } insertRow>
                <TableHeaderColumn width="31" row="0" rowSpan='3' isKey dataField='id' export={ false } >ID</TableHeaderColumn>
                <TableHeaderColumn width="82" row="0" rowSpan='3' dataField='direct' filter={ { type: 'RegexFilter', placeholder: 'Please enter a value' } }>Direct/HQ</TableHeaderColumn>
                <TableHeaderColumn width="82" row="0" rowSpan='3' dataField='region' filter={ { type: 'RegexFilter', placeholder: 'Please enter a value' } }>Region</TableHeaderColumn>
                <TableHeaderColumn width="96" row="0" rowSpan='3' dataField='country' headerAlign='center' dataAlign='center' filter={ { type: 'RegexFilter', placeholder: 'Please enter a value' } }>Destination Country</TableHeaderColumn>
                <TableHeaderColumn  row="0" rowSpan='3' dataField='operator' headerAlign='center' dataAlign='center' filter={ { type: 'RegexFilter', placeholder: 'Please enter a value' } }>Destination Operator</TableHeaderColumn>
                <TableHeaderColumn row='0' colSpan='5' headerAlign='center'>By Performance</TableHeaderColumn>
                <TableHeaderColumn row="1" rowSpan='2' dataField='coverage' editable={ false } dataSort={true} dataFormat={ ProgressFormatter } filter={ { type: 'NumberFilter' } }>% Coverage</TableHeaderColumn>
                <TableHeaderColumn row="1"  rowSpan='2' dataField='options' filter={ { type: 'RegexFilter', placeholder: 'Please enter a value' } }>Destination Operator Options</TableHeaderColumn>
                <TableHeaderColumn row="1"   rowSpan='2' dataField='smpp' editable={ false } filter={ { type: 'SelectFilter', options: qualityType } } dataFormat={ enumFormatter } formatExtraData={ qualityType }>SMPP/SS7</TableHeaderColumn>
                <TableHeaderColumn row="1"  rowSpan='2' dataField='tpoa' editable={ false } filter={ { type: 'SelectFilter', options: ack } } dataFormat={ enumFormatter } formatExtraData={ ack }>Alphanumeric TPOA Supported</TableHeaderColumn>
                <TableHeaderColumn row="1"  rowSpan='2' dataField='mobile' editable={ false } filter={ { type: 'SelectFilter', options: ack } } dataFormat={ enumFormatter } formatExtraData={ ack }>Mobile Ack</TableHeaderColumn>
                <TableHeaderColumn row='0'  colSpan='4'  headerAlign='center'>By Price</TableHeaderColumn>
                <TableHeaderColumn row='1'  colSpan='4'  headerAlign='center'>Volume Banded SMS MT Fee (Max) </TableHeaderColumn>
                <TableHeaderColumn row="2" dataField='first' dataFormat={ priceFormatter } filter={ { type: 'NumberFilter' } }
                    filterFormatted>1-2, 50, 000</TableHeaderColumn>
                <TableHeaderColumn row="2" dataField='second' dataFormat={ priceFormatter } filter={ { type: 'NumberFilter' } }
                    filterFormatted>2, 50, 001-5, 00, 000</TableHeaderColumn>
                <TableHeaderColumn row="2" dataField='third' dataFormat={ priceFormatter } filter={ { type: 'NumberFilter' } }
                    filterFormatted>5, 00, 001-10, 00, 000</TableHeaderColumn>
                <TableHeaderColumn row="2" dataField='fourth' dataFormat={ priceFormatter } filter={ { type: 'NumberFilter' } }
                    filterFormatted>10, 00, 001-Over</TableHeaderColumn>
            </BootstrapTable>
        </div>`

     3] I've read various other similar issues, but none of the solutions seem to work. 

     4] I have imported the "react-bootstrap-table-all.min.css".

     5] I am using Chrome browser with Version 55.0.2883.87 m

     6] I am attaching a screenshot of the mis-aligned table.

@AllenFang , can you please look into this issue and respond as soon as possible

[AllenFang]

@ashishd751, ok, I'll try to reproduce this issue, but not sure that I can find the root cause. could you help me to do some experiment on you code?

1. configure a height on BootstrapTable(make sure the vertical scrollbar appear), for example height='400'
2. try to resize browser

let me know the result of this two experiments

[dlbrown06]

I am experiencing this as well:

<BootstrapTable
    data={ this.state.templates }
    options={{ noDataText: 'No Templates Found' }}
    pagination
    striped
    hover
    condensed
    exportCSV
>
    <TableHeaderColumn dataField='id' isKey={ true }>ID</TableHeaderColumn>
    <TableHeaderColumn dataField='name'>Name</TableHeaderColumn>
    <TableHeaderColumn dataField='description'>Description</TableHeaderColumn>
</BootstrapTable>

Produces:

Using with Google Chrome (Version 55.0.2883.95 (64-bit) react-bootstrap-table version 2.11.0

[AllenFang]

@dlbrown06, did you have any css or styling which break the align of table, because I thought if you dont configure width, height with a simple table, it is supposed to be rendered as well. BTW, there's any error log in console?

[ashishd751]

1. I configured the height to height='300' which made the vertical scroll bar appear. Please look into the below screenshot for this.

2. I also resized the browser, and am attaching its screenshot below.

@AllenFang Please note that the above results failed to yield the expected layout. Can you please research more into this. And feel free to ask for more experiments if required.

Thank you.

[simonberger]

I am getting the following warning since updating to react 15.3.2

Warning: a `col` tag (owner: `BootstrapTable`) was passed a numeric string value for CSS property `width` (value: `45`) which will be treated as a unitless number in a future version of React.

I don't think thats the cause of this issue but maybe still related. Because you still suggest to declare width without a unit in the docs this should be either changed or the px-unit added as default if missing inside react bootstrap table. At the moment all is still working and the warning is just be displayed in debug build

[AllenFang]

@simonberger, thanks for feedback, I'll fix this warning soon.

@ashishd751, ok, if you can give me a simple and minimal repo for me to reproduce this issue will be best and very appreciated, BTW, could you help me to make the all cells as pure text?? for example, remove the progressbar in coverage column just show the source text and all the price column should display the numeric text without unit icon,

[fgiarritiello]

I'm experiencing the same problem. I'm using 3.0.0-beta.9.

[kimiyang]

I encountered the same header mismatch with rows issues

my code snippet

please help me have a look PS: there's no error in the console, I inspected the component in chrome, seems the header row is rendered as one table, and the 2 rows below are rendered as another table, that's why they are mismatched and separated. So please help to check.

I solved, it's bootstrap css problem, can close this, thanks

[BenoitAverty]

@kimiyang I have the same problem with react-bootstrap-table v3. Can you tell us how you solved the problem ?

[AllenFang]

@BenoitAverty, just forgot to add the react-bootstrap-table.min.css, because there's a gap between the header and body

[kimiyang]

@BenoitAverty @AllenFang That's correct, just add the react-bootstrap-table.min.css, problem solved.

[BenoitAverty]

That was it, thanks.

[fgiarritiello]

Still not working for me. I have this in index.html <link rel="stylesheet" src="https://npmcdn.com/react-bootstrap-table/dist/react-bootstrap-table.min.css"> Any help?

[kimiyang]

@fgiarritiello try to use <link rel="stylesheet" href="https://npmcdn.com/react-bootstrap-table/dist/react-bootstrap-table.min.css">, use "href" not "src"

[fgiarritiello]

that was the problem thanks!

[kzbikowski]

For me including react-bootstrap-table.min.css doesn't work. @AllenFang I've noticed that you reopened this issue. Is it a bug?

[fgiarritiello]

@kzbikowski try to import react-bootstrap-table.min.css in your app.js by using this: import 'react-bootstrap-table/dist/react-bootstrap-table.min.css';

[kzbikowski]

@fgiarritiello I've tried importing in various ways including the one that you proposed. Nothing works.

What I noticed though is that this behavior starts to occur after switching to 2.10.0 which includes " Fix couple unalign column issue".

[tbjerknes]

I've had the same problem after upgrading from 2.9.1. I got rid of the problem by adding 'px' to the width.

So width="100px" instead of width="100". Without px, the colgroup section below would get messed up (ie wrong numbers).

[AllenFang]

I got rid of the problem by adding 'px' to the width.

you means you set width with px on TableHeaderColumn? can solve the unalign issue? BTW, what's browser you used and did you have a screenshot?

Thanks

[tbjerknes]

Correct.

This is how my code used to be:

As you can see the columns are misaligned:

With px:

It's all good:

I tested in both chrome and edge with the same results. This happended after 2.9.1

[AllenFang]

@elmoro666, thanks!

[AllenFang]

it's wired, I test this both condition but it all works...

[tbjerknes]

Yes it's weird, I know. It's pretty hard to replicate actually. I created a test repository to show you, but in the example I made, both 'px' and without worked. So it seems that it breaks under certain conditions only. I'm pretty busy these days, but if I can find some time, I will try to create an example (like the one above) that breaks without 'px'

[AllenFang]

@elmoro666, thanks your help really

[sefkan3]

FYI, I had the same alignment problem show up when I started using this.state to manage the data.

Ex:

In the snippet above, if you change the <BootstrapTable data={ this.state.data } to <BootstrapTable data={ products } without the px, the problem would show up. Using @elmoro666's px solution solved the problem. Hope this helps in debugging.

[AllenFang]

Thanks your feedback @sefkan3, I've update document to mention user use width with px or %

[Infemo]

Adding pixels to width, doesn't solve the problem. Bug appears after display vertical scrollbar.

Solved the problem, i just spread width in % to all columns with sum of 100%.

[achraf-jeday]

Hi guys,

I was having the same issue when a vertical scrollbar shows up in the container element.

I upgraded to version 2.11.0 to be able to use percentages for the table columns width and therefore solve the issue.

  <BootstrapTable trClassName={this.trClassFormat} data={certificates.certificatesList} remote={true} pagination={false}>
    <TableHeaderColumn columnClassName={"collapsed-table-row"} className='bs-table-header' dataField='standard_name' isKey={true} dataFormat={this.showStandards} width='18%'>PRP Standard</TableHeaderColumn>
    <TableHeaderColumn columnClassName={"collapsed-table-row"} className='bs-table-header' dataField='scopes' dataFormat={this.showScopes} width='18%'>Category</TableHeaderColumn>
    <TableHeaderColumn columnClassName={"collapsed-table-row"} className='bs-table-header' dataField='scope_description' dataFormat={this.showScopeDescription} width='24%'>Scope Statement</TableHeaderColumn>
    <TableHeaderColumn columnClassName={"collapsed-table-row"} className='bs-table-header' dataField='accredited' dataFormat={this.formatAccredited} width='6%'>Accredited</TableHeaderColumn>
    <TableHeaderColumn columnClassName={"collapsed-table-row"} className='bs-table-header' dataField='status' dataFormat={this.formatStatus} width='6%'>Status</TableHeaderColumn>
    <TableHeaderColumn columnClassName={"collapsed-table-row"} className='bs-table-header' dataField='initial_date' dataFormat={this.formatDate} width='12%'>Initial Certification Date</TableHeaderColumn>
    <TableHeaderColumn columnClassName={"collapsed-table-row"} className='bs-table-header' dataField='issue_date' dataFormat={this.formatDate} width='6%'>Issue Date</TableHeaderColumn>
    <TableHeaderColumn columnClassName={"collapsed-table-row"} className='bs-table-header' dataField='date_expiry' dataFormat={this.formatExpiryDate}>Expiry Date</TableHeaderColumn>
  </BootstrapTable>

[Infemo]

bodyStyle={{overflow: 'overlay'}}, solves the problem with dynamic data in my table with scrollBars. Works only in Chrome.

[lidaof]

Also having this issue, import 'react-bootstrap-table/dist/react-bootstrap-table.min.css'; works. thanks.

[AllenFang]

@lidaof, I think you can check the above comments and try it if it is work for you. thanks.

[raghavmac]

I just wanted to add something. To make the table scrollbar dynamically enable, just set bodyStyle={{ maxHeight: '64vh', overflow: 'overlay' }} for BootstrapTable and width for all TableHeaderColumn in percentage (%).

PS - No need to set height for the above.

[AllenFang]

@raghavmac, cool thing

[tarim]

same as here. It was working(version 2.11.2) after updated to 3.10.10 has this issue. I have all css classes correctly. Here is my code. need some help.

<BootstrapTable data={Documents} exportCSV striped hover pagination search>
            <TableHeaderColumn isKey hidden dataField='id' />
            <TableHeaderColumn dataField='accountNumber' columnClassName='visible-xs col-xs-2 visible-md col-md-1 visible-lg col-lg-1'
              dataSort >Acct Number</TableHeaderColumn>
            <TableHeaderColumn dataField='account' columnClassName='hidden-xs hidden-sm visible-md col-md-2 visible-lg col-lg-2'
              dataSort >Customer</TableHeaderColumn>
            <TableHeaderColumn dataField='fileName' columnClassName='visible-xs col-xs-3 visible-sm col-sm-4 visible-md col-md-2 visible-lg col-lg-2'
              dataSort>File Name</TableHeaderColumn>
            <TableHeaderColumn dataField='fileTypeDescription' columnClassName='visible-xs col-xs-2 visible-sm col-sm-1 visible-md col-md-1 visible-lg col-lg-1'
              dataSort >File Type</TableHeaderColumn>
             <TableHeaderColumn dataField='description' columnClassName='hidden-xs hidden-sm visible-md col-md-1 visible-lg col-lg-1'
              dataSort={false}>Description</TableHeaderColumn>
            <TableHeaderColumn dataField='fileId' hidden >File Id</TableHeaderColumn>
            <TableHeaderColumn dataField='id' columnClassName='visible-xs col-xs-2 visible-sm col-sm-2 visible-md col-md-1 visible-lg col-lg-1'
              dataAlign='left' dataFormat={this.actionBtns.bind(this)} dataSort={false} />
          </BootstrapTable>

[tarim]

Hi @AllenFang I just updated version 3.2.1. But, it doesn't work for this issue. any idea please?

[AllenFang]

@tarim, Im not sure when apply the col-md-* on column will cause what kind of issue but I may not suggest to do it.

[tarim]

@AllenFang that mean we cannot use bootstrap css style on this? what is your suggestion please?

Thank you

[AllenFang]

you can use it, but not suggest, particular on column with. Actually, react-bootstrap-table is not a flexbox table, I'm trying to improve it as a flexbox, but there's still some issue I need to solve. Anyway, use width currently

[runny-kovanov]

I tried to add column options to show/hide the columns by checkbox. But couldn't find this option in react-bootstrap-table. Please help me

[Ve-Ra]

Hi,

please, I had the same issue of missmatched thead and tbody - adding the into html file helped for matching, but what I find weird is this: when I inspect elements, thead is still in different div and table as tbody - it's not really an issue, but it doesn'T look good... please is there a way how to merge it into 1 table?

Thank you and have a nice day,

Vera

[lovewuyong]

When I didn't set height or maxHeight to BootstrapTable, the render result colgroup as bellow: <colgroup> <col class=">//notice this class is empty string After I set maxHeight="400px" to BootstrapTable and set width="16.6%" to TableHeaderColumn, before the data comes, the position as before will render as <colgroup> <col class="16%">/class value change to 16% and the data comes, the render results will change to <colgroup> <col class="width:211px; min-width:211px">//class value change to fixed px, resize will not change this cause the problem

[Alex-8]

@AllenFang I fixed my problem by adding the below code into index.html <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css"> <link rel="stylesheet" href="http://allenfang.github.io/react-bootstrap-table/css/react-bootstrap-table-all.min.css"> both statements need to be included.

[jamesscaggs]

@Alex-8 Same fix worked for me

[cloud-github]

<BootstrapTable data={(this.state.data)} striped width="25%" <TableHeaderColumn width="25%" if you have 4 columns then each column is of 25% . 100/5 = 25%. You will get the exact size with table header .

[9005]

@AllenFang .I have total of 12 columns.I did import 'react-bootstrap-table/dist/react-bootstrap-table.min.css';The column width got appsalutely aligned with header width but the data gets compressed. I need to display proper header data and table data.I have attatched screen shot how data got compressed.Please let me know how to work on this?

[9005]

@AllenFang . I need to display like the attached screen shot.

[AllenFang]

@9005 https://github.com/AllenFang/react-bootstrap-table/blob/master/examples/js/column/column-style-table.js#L32

[gitsachinkadam]

adding link worked for me.

[gauravagarwal2704]

I am unable to align headers and data, tried adding css files too...any help? @AllenFang