How to set 'Wrap Text' as default for columns in lightning:datatable? #Spring20Delight

Hi there! 😀

Did you ever had to work with the aura base component, lightning:datatable, before Spring ’20 release and you were asked to the set the ‘Wrap Text’ as the default selection?

So what did you do? Did you give up on the solution, or did you override the standard SLDS style class as a workaround?
Not really a satisfying experience, yeah?

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

Link: https://releasenotes.docs.salesforce.com/en-us/spring20/release-notes/rn_aura_components.htm

Meet the ‘wrapText’ property

In Spring ’20, ‘wrapText’ is new property of the ‘columns’ attribute. So, we can directly control the text wrapping by setting the value of this property. For example:

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

Along with this, there is also one more new attribute in the lightning:datatable component called ‘wrapTextMaxLines’.
This value specifies the number of lines after which the content is cut off and hidden. It must be at least 1 or more. The text in the last line is truncated and shown with an ellipsis.

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

And that’s it, no more ugly workarounds! 😀

Hope you find this useful. See you in the next one! ✌

Thank you for being an awesome reader! Subscribe to this blog for receiving all the latest updates straight to your inbox. 🙂

Advertisement