Search code examples
reactjsreact-bootstrapreact-bootstrap-table

Getting a space between header and table with react-bootstrap-table

My code is:

  <Panel>
    <BootstrapTable data={this.state.keys} striped hover condensed>
      <TableHeaderColumn isKey dataField='id' dataAlign='center'>ID</TableHeaderColumn>
      <TableHeaderColumn dataField='key' dataAlign='center'>Key</TableHeaderColumn>
      <TableHeaderColumn dataField='key' dataAlign='center'>&nbsp;</TableHeaderColumn>
    </BootstrapTable>
  </Panel>

This is what it looks like though:

enter image description here

Solution

  • You haven't listed what versions you are using, so it's really difficult to say what the problem is.

    First of all I'd make sure you're using the latest versions.

    There are however a couple of issues I can see in your code:

    1. You've got the attribute isKey without a value. That should be isKey={true}
    2. You've listed dataField=key twice, but only one column is showing, I can't think of why that should happen (when I tried it showed the same data in two columns):

    Your data should be in a format similar to:

    var this.state.keys = [{
  id: 1,
  key: 123
}, {
  id: 2,
  key: 3425
}, {
  id: 3,
  key: 98765
}, {
  id: 4,
  key: 56555
}];

    Here's a Plunker of it working correctly with the latest version of React and React-Bootstrap-Table:
    http://plnkr.co/edit/01OFaXq5X1UtZBW1oZzM?p=preview

    As you can see from the Plunker it seems to work correctly with the latest versions.