react-bootstrap-table 自动列宽

Question

我正在使用 "react-bootstrap-table" 进行渲染 table。一些专栏有很长的文字，其中有省略号。我设置了宽度="some numbers"。我想将宽度设置为动态的，或者列应该根据文本的长度来设置。有什么方法可以在不计算文本长度的情况下自动设置宽度，或者我们可以换行文本并删除省略号吗？

这是我的代码

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

react-bootstrap-table 自动列宽

react-bootstrap-table auto column width

css

reactjs

bootstrap-table

react-bootstrap-table