реагировать-самозагрузки-таблица двойной заголовок

Question

Использование react-bootstrap-table, я создал таблицу следующим образом:

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

Однако, это дает мне некоторые смешные результаты. Это то, что таблица выглядит для меня (таблицы находится в пределах Tab от react-bootstrap:

Что я сделал не так Странная частью является то, что заголовок сверху работает, но заголовок фактически присоединен? к столу ничего не делает

Edit:. таблицу после повторного импорта CSS в моей index.html теперь у меня есть:

Howev er, в то время как это исправляет проблему с двойным заголовком, он сохраняет проблему несогласованных столбцов заголовка. Теперь таблица выглядит так:

Я также попробовал файл react-bootstrap-table-all.min.css но получил те же результаты.

Обновление: Использование одного из заголовков для выполнения сортировки устраняет проблему выравнивания. Но с чего бы это было сломано?

Answer 1

От их GitHub Issues

Вам необходимо повторно импортировать файл CSS :)

Вы можете увидеть эту работу в этом codepen. Проблема возникает, если вы удаляете файл css с расширенной таблицей из меню настроек.

https://rawgit.com/AllenFang/react-bootstrap-table/master/css/react-bootstrap-table.min.css