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' };