Using react-bootstrap-table, I created the table as follows:
<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>
However, this gives me some funny results. This is what the table looks to me (the table is in the range Tabfrom react-bootstrap:
What did I do wrong? The strangest part is that the heading above works, but the heading actually attached to the table does nothing.
Edit: table after re-importing css
In mine index.html, I now have:
However, although this fixes the double-header problem, it retains the problem of inconsistent header columns. Now the table looks like this:
I also tried the file react-bootstrap-table-all.min.css, but got the same results.
Update:
. ?