react-bootstrap-table auto column width

Question

I'm using "react-bootstrap-table" for rendering table. Some of column has long text where getting elipsis. I have set width="some numbers". I want to set width as dynamic or column should take with as per text's length. Is theren any way to set width auto without calculating text length or can we wrap the text and remove the elipsis ?

Here is my code

<BootstrapTable
          data={products}
          pagination
          options={options}
          striped
          hover
          search
        >


          <TableHeaderColumn width="170" dataField="a1" dataSort columnTitle>some text</TableHeaderColumn>

          // Here i have set widht manually as '  width="160" '
          <TableHeaderColumn width="160" dataField="a2" dataSort columnTitle>some text</TableHeaderColumn>

          <TableHeaderColumn width="140" dataField="a3" dataSort>some text</TableHeaderColumn>


        </BootstrapTable>

there is a way to set fixed value in react-table. no idea is it work for you. npm library "react-table-hoc-fixed-columns"; OR you can add tooltip for such issue — Oshini
@Oshini thanks, but i don't want to set fixed width it should dynamic — Shivprsad Sammbhare
@Oshini I checked this tdStyle={{ whiteSpace: 'normal', wordWrap: 'break-word' }} and it's working correctly — Shivprsad Sammbhare

Muhammad Zeeshan Muhammad Zeeshan · Accepted Answer · 2020-02-12T09:33:56

You can just specify some width and use tdStyle to achieve what you want:

<TableHeaderColumn 
  dataField='name'
  width="200" 
  tdStyle={{ whiteSpace: 'normal', wordWrap: 'break-word' }}
>
    Product Name
</TableHeaderColumn>

react-bootstrap-table auto column width

1 Answers