LWC datatable Header wrapping

Question

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
    },....

Want something like this:

Answer 1

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

Answer 2

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