反应引导表自动列宽

Question

我正在使用“react-bootstrap-table”来渲染表格。某些列有很长的文本，其中有省略号。我已经设置了宽度=“一些数字”。我想将宽度设置为动态或列应根据文本的长度进行设置。有没有办法在不计算文本长度的情况下设置自动宽度，或者我们可以包装文本并删除省略号？

这是我的代码

<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>

Answer 1

您可以指定一些宽度并用于tdStyle实现您想要的：

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