react-bootstrap-table misaligned header columns - css

Question

I have the following:
Node.jsx
import React from 'react';
import {Col, Row, Tab, Tabs} from 'react-bootstrap';
import Alerts from './Alerts';
import Details from './Details';
import Family from './Family';
import Instances from './Instances';
module.exports = React.createClass({
displayName: 'Node',
render () {
return (
<Row>
<Col md={12}>
<Tabs defaultActiveKey={1}>
<Tab eventKey={1} title={'Details'}>
<Details />
</Tab>
<Tab eventKey={2} title={'Alerts'}>
<Alerts />
</Tab>
<Tab eventKey={3} title={'Family'}>
<Family />
</Tab>
<Tab eventKey={4} title={'Instances'}>
<Instances instances={this.props.nodeInstances}/>
</Tab>
</Tabs>
</Col>
</Row>
);
}
});
Instances.jsx
import React from 'react';
import {BootstrapTable, TableHeaderColumn} from 'react-bootstrap-table';
module.exports = React.createClass({
displayName: 'NodeInstances',
getDefaultProps () {
return {
selectRowOpts: {
mode: "radio",
clickToSelect: true,
hideSelectColumn: true,
bgColor: "rgb(238, 193, 213)",
onSelect: (row, isSelected) => { console.log(row, isSelected); }
}
};
},
render () {
var props = this.props;
return (
<BootstrapTable data={props.instances} hover condensed selectRow={props.selectRowOpts}>
<TableHeaderColumn dataField={'interval_value'} dataSort>{'Interval'}</TableHeaderColumn>
<TableHeaderColumn dataField={'status_name'} dataSort>{'Status'}</TableHeaderColumn>
<TableHeaderColumn dataField={'started_ts'} dataSort>{'Started'}</TableHeaderColumn>
<TableHeaderColumn dataField={'completed_ts'} dataSort>{'Completed'}</TableHeaderColumn>
<TableHeaderColumn dataField={'last_runtime'} dataSort>{'RT'}</TableHeaderColumn>
<TableHeaderColumn dataField={'attempts'} dataSort>{'Attempts'}</TableHeaderColumn>
<TableHeaderColumn dataField={'pid'} dataSort>{'PID'}</TableHeaderColumn>
<TableHeaderColumn dataField={'node_instance_id'} dataSort isKey>{'ID'}</TableHeaderColumn>
</BootstrapTable>
);
}
});
Here is what all that looks like:
Why are the header columns for the table misaligned? Further, when I select one of the headers to sort the table, or when I select one of the rows in the table, the columns become properly aligned with the headers. Did I miss something?

Answer 1

I was having the same issue, and I ended up discovering that I was importing the wrong CSS file. Make sure you're using one of the CSS files listed in here.
I also used table-layout: fixed and set a specific width on each TableHeaderColumn component.
Not the most ideal solution, but it's the only thing I've found that works.

Answer 2

I had same issue . This below import in the app.js solved my problem
import 'react-bootstrap-table/dist/react-bootstrap-table.min.css';

Answer 3

I had same issues, I tried adding fixed width to all rows but it is not a perfect solution. So finally I have created a dynamic width for each row's based on its text string length.
So my suggestion to make the width of every row dynamically(based on string length and also restricted that to 24).
In my below program I have done for loop to get the length of a string in that array and assigning max value as the width of that column(in your case its row)
for (let i = 0; i < (totalElementsinArray); i++) {
if(((obj[i]["Title"]).length)> ((obj[i]["1_Content"]).length) & ((obj[i]["Title"]).length) > 24 ){
heightlength=((obj[i]["Title"]).length)-5
} else {
if(((obj[i]["1_Content"]).length) > 24){
heightlength=((obj[i]["1_Content"]).length)-5
} else {
heightlength=24;
}
}

Answer 4

I've created a javascript function to get the widths of the real table headers and set them to the fixed table headers (wich actually is in another table) :
function fixTableCols(table) {
var _length = [];
var $table = $(table);
$table.find('th').each(function (index, headerCol) {
_length[index] = $(headerCol).width();
});
$table.parent().parent().find('.fixed-table-header').find('th').each(function (index, headerCol) {
$(headerCol).find('.th-inner ').css('width', _length[index]);
});
}
So, you can call this function after applying the bootstrapTable(), like this:
var $table = $('table');
$table.bootstrapTable();
fixTableCols($table);