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>

inspect element. go the css class style. you may find code like this ... text-overflow: ellipsis; overflow: hidden; white-space: nowrap; just remove them from css and that's all — anil sidhu
– anil sidhu, Commented Aug 16, 2018 at 13:29

Denys Kotsur · Accepted Answer · 2018-08-16 15:32:49Z

5

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!

answered Aug 16, 2018 at 15:32

Denys Kotsur

2,5992 gold badges17 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

marcus-linmarkson Over a year ago

Thanks, both issue solved. To anyone struggling with second case - we have to use line-height property

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related