How to Make ‘Wrap Text’ The Default Setting For Columns In lightning:Datatable? #Spring20Delight

/ apex, Salesforce / By

Have you ever worked with the aura-based component, lightning:datatable, prior to the Spring ’20 release and been tasked with setting ‘Wrap Text’ as the default selection?

So, what approach did you take? Did you abandon the solution, or did you resort to overriding the standard SLDS style class as a workaround? Not the most satisfying experience, right?

Well, I have some good news for you. With the Spring ’20 release, lightning:datatable now officially supports this feature.

Introducing the ‘wrapText’ property.


In Spring ’20, ‘wrapText’ is a new property within the ‘columns’ attribute. This allows us to have direct control over text wrapping by configuring the value of this property. For instance:

var columns = [
    { label: 'Description', fieldName: 'description', type: 'text', wrapText: true },
    //other column data
];

Additionally, a new attribute has been introduced in the lightning:datatable component called ‘wrapTextMaxLines’. This attribute specifies the number of lines, after which the content gets truncated and hidden. The value must be at least 1 or more, with the text in the last line being truncated and displayed with an ellipsis.

<lightning:datatable 
       data={data} 
       columns={columns} 
       keyField="id" 
       wrapTextMaxLines="3"/>

And that concludes it—no more need for cumbersome workarounds!

I trust you find this information helpful. Catch you in the next one!

A big thank you for being an amazing reader! Subscribe to this blog to receive all the latest updates directly in your inbox.

Related Posts