CODEWITHSUNDEEP
cssreactjsbootstrap-tablereact-bootstrap-table
Shivprsad Sammbhare
Shivprsad Sammbhare

Reputation: 430

react-bootstrap-table auto column width

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>

react-bootstrap-table some column has long text showing elipsis

Upvotes: 0

Views: 20169

Answers (1)

Muhammad Zeeshan
Muhammad Zeeshan

Reputation: 4748

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>

Upvotes: 7

Related Questions