Fluent UI DetailsList resize column text on ColumnResize

Question

I have a details list with document data and i want the same behavior as the FileName column in a regular document Library. In a Document Library, on resizing the FileName column, the FileName text shows... when the filename is larger that the column width.

How can we do this in a DetailsList column? Right now i am using a custom react compont to renderthe Cell values for the FileName column where a Label control renders the filename text. I am capturing the column resize event and passing the column width to that custom react component as an rxjs event. The event is being captured inside each cell but how to resize a Label control?

Is there a better way than using RxJS event?

All of this is inside an SPFx React WebPart component.

Answer 1

According to the document, when you define the column, you inherit the IColumn interface. IColumn interface has calculatedWidth , currentWidth , maxWidth , minWidth properties could be used.
IColumn interface for your reference.