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

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