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!

Melloware · Accepted Answer · 2022-06-06 15:33:28Z

4

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 "...".

answered Jun 6, 2022 at 15:33

Melloware

12.3k2 gold badges40 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

justin.m.chase Over a year ago

now how do you do it without setting a maxWidth?

Collectives™ on Stack Overflow

How to handle text overflow using Primreact and Primeflex

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related