3

I am working on a LWC component where in a lightning datatable I have more than 7-8 columns. When I add the component into detail section of a record page, the headers of the table is getting truncated. While I used wrapText: true, seems it only works on the data but not on the headers. Is there any way I can wrap the column names ? Thanks in advance. HTML:

 <lightning-datatable
key-field="Id"
data={allConsdata}
columns={columnsCon}
hide-checkbox-column="true">

JS:

@track columnsCon = [
    {
    label: 'Contact/rep',
    fieldName: 'nameUrl',
    type: 'url',
    typeAttributes: {label: { fieldName: 'Name' }, 
    target: '_self'},
    sortable: true,
    wrapText: true
    },
    {
        label: 'Title',
        fieldName: 'Title',
        type: 'text',
        sortable: true,
        wrapText: true
    },....

This is the screenshot of my LWC where the column names higlighted in yeloow are getting truncated

Want something like this: enter image description here

2
  • hello @arita, Did you find a solution on this issue? I would be interested if you have one – Julien Souchi Oct 6 '20 at 15:11
  • @JulienSouchi please check my answer, it might help you. – Rahul Gawale Mar 18 at 7:54
1

why not use min-column-width attribute where you can set the minimum column width for the table and you will get the scroller along x-axis which you can use to scroll through rest of the columns

  <lightning-datatable
                key-field="id"
                data={data}
                columns={columns}
                min-column-width="100"
                >
        </lightning-datatable>

it will look something like this https://developer.salesforce.com/docs/component-library/tools/playground/6PhM9grWA/1/edit

1
  • Thank you for your suggestion @User6670. I have already tried this before and you mentioned, it gives a horizontal scrollbar which I don't want but wrapped column names. – Aritra Palit Apr 7 '20 at 11:53
0

I had come across the same problem I solved it by using custom styles loaded from the static resource. Put the below code in the static resource and load that using loadStyle in the Lightning web component.

.wrapped-header-datatable .slds-table .slds-th__action .slds-truncate{
    max-width: 100%;
    overflow: hidden;
    text-overflow: unset;
    white-space: pre-line;
    /* word-wrap: break-word; */
}

.wrapped-header-datatable .slds-table .slds-th__action {
    height: 5rem;
}

.wrapped-header-datatable .slds-table .slds-line-height_reset{
    height: 3rem;
}

And then add class wrapped-header-datatable to your lightning-datatable.

Please note that you might need to tweak the heights a little bit.

I have written a detailed blog about this -> LWC datatable header wrapping hack

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.