react-bootstrap-table - formatting - row height, text wrap

Question

I am working with react-bootstrap-table and I am facing problems with formatting it. Main issues are:

• the headers with long names should be presented with 2 lines of text, instead there is one and "..." like in the picture below:

• Moreover in no way I could set the height of a single row of a table. Each text has big padding therefore the table is not too condensed:

And the code goes here:

<BootstrapTable
   data={this.props.sales}
   version="4"
   striped
   hover
   pagination
   keyField="Type"
>
  {tableHeaders.map((header, index) => (
     <TableHeaderColumn key={index} dataField={header.id} style={{ height: 10 }}>
        {header.name}
     </TableHeaderColumn>
  ))}
</BootstrapTable>

Answer 1

According to docs you can do all of the customizations you need.

First issue: To remove dots you can use thStyle property which you can pass to TableHeaderColumn component and override CSS white-space property.

<TableHeaderColumn thStyle={{ whiteSpace: 'normal' }} {...anotherProps} />

Second issue: You can handle height of your row using trClassName property. You can either pass string or function to handle each or make conditional class depends on row. See more here.

For example:

<BootstrapTable trClassName="customClass" {...anotherProps} />

And define your customClass:

.customClass {
    // override padding or height whatever you want 
    padding: 3px;
}

Good luck and have fun!