LWC datatable header wrapping hack

Hello Developers! In this post, I will show you how you can wrap the header row of the standard lightning-datatable. First of all, let me tell you that we can't directly override CSS of the standard components because of the Shadow-DOM. So to overcome this we are going to load the CSS from the static resource.

Spring 2024 and later release supports Header Wrapping Natively. Set the wrap-table-header property of datatable as true to wrap the headers.

Steps to do

So here are the steps to add text wrapping to lightning-datatable headers.

1. Copy the below CSS code and save it into a .css file with the name wrapped-header-table.
   
   

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

   .wrapped-header-datatable .slds-table .slds-th__action .slds-truncate{ max-width: 100%; overflow: hidden; text-overflow: unset; white-space: pre-line; /* uncomment this if you want break the words further */ /* word-wrap: break-word;*/ } .wrapped-header-datatable .slds-table .slds-th__action { height: 5rem; border-bottom: 1px solid rgb(206 206 206); } .wrapped-header-datatable .slds-table .slds-line-height_reset{ height: 3rem; }

   
   
2. Go to your salesforce org setup -> static resources -> new and enter the name as WrappedHeaderTable and upload the file you created in the first step. 
   
   
3. Now open the Lightning web component in which you want to add text-wrapping to lightning-datatable header.
   
   
4. In the markup file (.html) of your component, add this class wrapped-header-datatable to the lightning-datable as mentioned below.
   
   

   1 2 3 4 5 6 7

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

   
   
5. Now in the JS controller of your component and import the loadStyle method and the WrappedHeaderTable in your component like below.
   
   

   import { loadStyle } from "lightning/platformResourceLoader";
   import WrappedHeaderTable from "@salesforce/resourceUrl/WrappedHeaderTable";
   

   
   
6. Add the below code in the renderedCallback method.
   
   

   1 2 3 4 5 6 7 8 9 10

   if (!this.stylesLoaded) { Promise.all([loadStyle(this, WrappedHeaderTable)]) .then(() => { console.log("Custom styles loaded"); this.stylesLoaded = true; }) .catch((error) => { console.error("Error loading custom styles"); }); }

   
   
7. Deploy your component and you are done.

Pros of this approach

• It does not hamper any standard functionality of lightning-datatable.
• You can also break the words if required, just uncomment line number 6 from the CSS code shared above.
• The users get better visibility of the header text.
• You can tweak the CSS as per your requirements if required.

Cons of this approach

• The only disadvantage of this approach I see is that if your component does not have a large number of columns then the height of the column header is more than required.