Can I define a lightning:datatable column to default to "Wrap Text"?

Question

Is it possible to have a column in the lightning:datatable component default to "Wrap Text"? Or is there a way to programmatically set this so I can do this in the init function of the parent component?

Answer 1

In lightning:datatable there is no attribute to set "text wrapping". So, you can only set wrapping by clicking from the drop-down menu on the column header. Content is clipped by default if the number of characters is more than what the column width can hold. As per latest release Notes, it is not possible.

Answer 2

With the Spring 2020 release, we can now use an attribute called wrapText.

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

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

Then to get rid of the column header where the user chooses between clipped or wrapped text, use CSS:

.THIS .tableHeader thead th button {
visibility: hidden;
display: none;
}

Component markup:

<lightning:datatable
                         class="tableHeader"
                         aura:id="tableIdExample"
                         columns="{! v.columns }"
                         data="{! v.data }"
                         keyField="Id"
                         onsave ="{!c.onSave}"
                         hideCheckboxColumn="true"
                         onrowaction="{! c.handleRowAction }" />

Answer 3

To hide drop-down box:

.THIS .slds-button_icon-bare{
display: none;
}

To set default 'wrap text' logic:

.THIS .slds-truncate {
    text-overflow: inherit;
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word; 
}

Of course it's not most sophisticated way but what else we can do..

Answer 4

I found a way to get around this.. Turn your text into a button, but make your button act like text! This will force your data table to wrap the column, but you won't have the option to truncate the text like normal text fields

Here's the column definition, the variate:"base" uses the slds-button that doesn't look like a button:

{label: 'Template', fieldName: 'Template', type: 'button', typeAttributes: {label: { fieldName: 'templateTitle'}, title: {fieldName: 'templateTitle' }, variant: "base", class:"notLink"}},

and the CSS:

.THIS .notLink{
cursor:text;
text-decoration:none;
pointer-events:none;
}
.THIS .notLink button{
color: rgb(62, 62, 60) !important;
}