+ Start a Discussion
Sisodia SaurabhSisodia Saurabh 

lightning datatable columns name getting truncated, need to define fix length to columns and horizontal scroll bar

Hi All,

I have created a component to should contact column on account. I have to show records in lightning: datatable with 17 columns. When I increase the number of columns, component truncate the headers and try to fit all the columns in component default width.

Expected output: component should not trim and wrap the header and should all 17 columns with scroll bar.

Below is the screen shot. highlited column is: LEADSOURCE (component wrapped it)

screen shot
Thanks.
Raj VakatiRaj Vakati
Use this css and try 
 
.THIS .slds-truncate {
    text-overflow: inherit;
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word; 
}

 
Sisodia SaurabhSisodia Saurabh
Hi Raj,
Thanks for your reply. I tried above CSS. It is not truncating the text in columns. but I want to fix the column size and if total length of all the columns increases or orveflows then I should get scroll to right. below is the example screen shot of expected output, highlighted in yelow and red.

expected
Thanks!
Raj VakatiRaj Vakati
I know its possible but please refer this link .. and can u share the code pls .. 




https://github.com/salesforce-ux/design-system/issues/396
https://stackoverflow.com/questions/7410784/how-can-i-limit-table-column-width
https://developer.salesforce.com/forums/?id=9060G0000005V16QAE
https://rajvakati.com/2018/04/02/width-aware-lightning-page-components/