2

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' };
DaeYoung
  • 1,161
  • 6
  • 27
  • 59
  • Hi Young, should we give some max width to work the answer you mentioned in update? Thank in advance – Aashiq Dec 14 '21 at 18:58
  • hello @Aashiq, unfortunately I am not equipped well to answer your question. I had very brief adventure with react and no longer working on it +2 years. To be honest I can't remember the exact problem/answer. All I can say is relying on my original post + update. My apology not being able to help you on this. – DaeYoung Dec 15 '21 at 14:27

1 Answers1

2

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

<BootstrapTable data={data} bodyStyle={ {width: 500, maxWidth: 500, wordBreak: 'break-all' } }>
Mohit Arora
  • 102
  • 1
  • 7
  • Aroa, thank you for your suggestion. Unfortunately it didn't make a difference, but you expanded my little understanding on applying css on this table. – DaeYoung Oct 23 '19 at 13:31
  • @DaeYoung any idea how to do for a particular column? tried? – Aashiq Dec 14 '21 at 18:53