function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Jessie ChaiJessie Chai 

Does anyone know how to achieve text wrapping in a grid of the lightning datatable?

Does anyone know how to achieve text wrapping in a grid of the lightning datatable?

User-added image
ANUTEJANUTEJ (Salesforce Developers) 
Hi Jessie,

>> https://forcepanda.wordpress.com/2020/03/24/how-to-set-wrap-text-as-default-for-columns-in-lightningdatatable-spring20delight/

In the above link, as mentioned:
  
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"/>

Let me know if it helps you and close your query by marking it as solved so that it can help others in the future.  

Thanks.
CharuDuttCharuDutt
Hii Jessie Chai
Click On the  Down Arrow As Shown In image below  And Select "Wrap text" Option For Text Wrapping.
User-added image
Please Mark it as best Answer If it helps.
Thank you!
 
Jessie ChaiJessie Chai
@CharuDutt  @ANUTEJ  Sorry,, There are two data before and after <br/>. And I want to display the English address on the top and the Chinese address on the bottom in the same grid.
asaw asgeasaw asge
You can use the CSS code to change the grid size. Try to find some CSS code on Google, See more on Check Iqama (https://checkiqama.info).