How to handle text overflow using Primreact and Primeflex

Question

In my application I have a DataTable component, one column, namely "Note" can contain very long texts.

I have defined the column as follows:

<Column style={{maxWidth: 220}} className={"text-overflow-ellipsis"} field={col.field}
                               key={col.field} header={col.header}/>;

I thought that I could possibly help myself here with the "text-overflow-ellipsis" class from PrimeFlex, unfortunately without success.

I have also used 3rd party libraries like react-clamp-lines or react-clamp, but these result in exactly the same result.

My DataTable looks like this:

I also tried to render a <ClampLine/> element using the body property of a column, which should add ellipsis to the text, unfortunately without success.

Thanks in advance!

Answer 1

No problem you have to switch to use body template like this...

const bodyTemplate = (rowData) => {
  return 
  <div className="white-space-nowrap overflow-hidden text-overflow-ellipsis">
    {rowData.field}
  </div>
}

<Column 
style={{maxWidth: 220}} 
field={col.field} 
key={col.field} 
header={col.header} 
body={bodyTemplate}/>;

You can see in my screenshot it clipped it with "...".