react-bootstrap-table中的多行单元格

Question

我使用react-bootstrap-table以表格式显示我的数据。这是我当前代码的摘录：

   var table = (
            <BootstrapTable ref="table" data={convertedData} deleteRow={false} striped={true} search={false} pagination={true} hover={true} selectRow={selectRowProp}>
                <TableHeaderColumn columnClassName="col-md-1" dataField="field1" isKey={true}>field1</TableHeaderColumn>
                <TableHeaderColumn columnClassName="col-md-2" dataField="field2" >field2</TableHeaderColumn>
                <TableHeaderColumn columnClassName="col-md-2" dataField="field3">field3</TableHeaderColumn>
            </BootstrapTable>
        );
    }

    return (
        <div>
            <h2>{this.props.title}</h2>
            {table}
        </div>
    )
},

从我的css文件中：

.table td.col-md-7 {
  word-wrap: normal;
  overflow: auto;
  text-overflow: clip;
}

我面临的问题是，包含大量文本的单元格会有一个滚动条，而我真正想要的是在单元格中以多行显示文本。

你有什么办法让它工作起来吗？

Answer 1

找到了一种看起来不错的方法：

function multilineCell(cell, row) {
    return "<textarea class='form-control cell' rows='3'>" + cell +"</textarea>";
}    
[...]
<TableHeaderColumn columnClassName="col-md-4" dataFormat={multilineCell} dataField="summary">Summary</TableHeaderColumn>