Forcetrails: 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.

LWC datatable header wrapping


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

  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.

10 comments:
  1. I get the error: [WrappedHeaderTable is not defined]. Any ideas why?

    ReplyDelete
    Replies
    1. Hi Dear Unknown,

      Seems like I missed to add the import for static resource. You need to import the static resource like this.

      import WrappedHeaderTablefrom '@salesforce/resourceUrl/WrappedHeaderTable';

      Delete
    2. I have updated that code in step 5.

      Delete
  2. Thanks for this hack! I am having an issue though while scrolling vertically, it overlaps the header

    ReplyDelete
    Replies
    1. Hi Priyanka, can you share more details on the issue?may be a screenshot?

      Delete
  3. Hi, I added all code still the table loading as clip text not wrap text.

    ReplyDelete
    Replies
    1. Hi Dear Unknown, Did you follow all the steps correctly? I can help if u share your code on git.

      Delete

Hi there, comments on this site are moderated, you might need to wait until your comment is published. Spam and promotions will be deleted. Sorry for the inconvenience but we have moderated the comments for the safety of this website users. If you have any concern, or if you are not able to comment for some reason, reach email us at rahul@forcetrails.com