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

29 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
    2. facing same issue, could you please share your mail id so that I can share screenshot with you

      Delete
    3. I am also facing same issue. could you please share your mail id so that i can share screenshot with you?

      Delete
    4. Facing the same issue. Any solution for this?

      Delete
    5. This comment has been removed by the author.

      Delete
    6. This comment has been removed by the author.

      Delete
    7. This comment has been removed by the author.

      Delete
    8. This comment has been removed by the author.

      Delete
    9. Yes, i did this:
      lightning-datatable table > thead > tr > th lightning-primitive-header-factory > span{
      z-index: 2;
      }
      lightning-datatable table thead tr th lightning-primitive-header-factory div{
      z-index: 2;
      }

      Delete
    10. I emailed you Rahul. Kindly look and help me out with the issue.

      Delete
    11. Hello Lucas Serafim, Thank you so much. It worked like wonders.

      Delete
    12. Thank you Lucas for providing a solution, I will give it a try. I could not look into this because I was very busy. I hope your solution will help lots of people!

      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
  4. Thank you Rahul for great piece of work to the lightning data table. I tried following the steps and loaded the css as static resource. It worked all good until business came back and told couple of missing things related to table headers.

    Lightning data table bottom border line was missing after adding the css. Headers worked great by extending the header to the next line.

    I am not sure how to attach screenshot here ,will send it thru email otherwise . please let me know if there is any workaround to fix the missing bottom border.

    ReplyDelete
    Replies
    1. Hi Mohan,

      Thanks for bringing issue to my attentions. You need to add the border style in this selector => ".wrapped-header-datatable .slds-table .slds-th__action".

      So the code will be like this.

      .wrapped-header-datatable .slds-table .slds-th__action {
      height: 5rem;
      border-bottom: 1px solid rgb(206 206 206);
      }

      I have also updated the code in the blog post.

      Thanks,
      Rahul

      Delete
  5. This comment has been removed by the author.

    ReplyDelete
    Replies
    1. Hi Neelam, did you import the loadStyle from step 5?

      Delete
  6. Hi Rahul , I am getting below error :- Error during LWC component connect phase: [loadStyle is not defined] could you please help me

    ReplyDelete
    Replies
    1. Hi Harshit, did you import loadStyle as mentioned in step 5?

      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, email us at rahul@forcetrails.com