Columns of column headers "reaction-bootstrap-table"

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's what it looks like:

Why are the header columns for the table offset? Also, 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 correctly aligned with the headers. Did I miss something?

Answer 1

I had the same problem and found that I was importing the wrong CSS file. Make sure you use one of the CSS files listed in here .

I also used table-layout: fixed and set a specific width for each component of the TableHeaderColumn .

Not the perfect solution, but this is the only thing I found that works.