8

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 Oct 6, 2020 at 15:11
  • @JulienSouchi please check my answer, it might help you. Mar 18, 2021 at 7:54

2 Answers 2

10

Update

Spring 2024 and later releases support Header Wrapping Natively. Set the wrap-table-header property of datatable as true to wrap the headers. This will work if your org is in Spring 2024 or later release versions.


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

3
  • Good blog. Unfortunately not working for me. Is that hack still working? Nov 24, 2022 at 17:23
  • @SergioAndresPedrazaJerez yes it is still working. Nov 25, 2022 at 6:59
  • 1
    Thank you @rahul-gawale. If the static resource is private, the solution does not work. I set it to public and it worked. Thank you! Nov 29, 2022 at 15:49
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. Apr 7, 2020 at 11:53

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .