How to wrap a long text in table cell (react-bootstrap-table-next)?

Viewed 6372

I am introduced to react/redux/sagas/redux-form web application development. I used react-bootstrap-table-next in order to display data in a table format.

It has two columns as Title, Description however data for Title column is a long string data.

foo1,foo2,foo3,foo4,foo5,foo6,foo7 bar

And the problem I am having is it overflows or occupies cell/row under Description so that data under Description column is masked.

I tried something like this but it didn't make a difference.

const rowStyle = (row, rowIndex) => {
                return { whiteSpace: 'pre-line'; };
};

<BootstrapTable data={ data } columns={ columns } rowStyle={ rowStyle } />

What would be the way to wrap this long string so that it can be contained within fixed width of cell under Title column?

[update]

Found an answer with following css instead.

return { overflowWrap: 'break-word' };
1 Answers

You can do it by providing certain styling in your tag.

<BootstrapTable data={data} bodyStyle={ {width: 500, maxWidth: 500, wordBreak: 'break-all' } }> 
Related