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.


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.


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


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

  1. Pingback: cannot view the entire text in Case comment

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.