14

Is it possible to remove the header (column) actions completely from lightning-datatable?

It seems that no matter what I do I'm still stuck with Wrap Text and Clip Text actions.

enter image description here


UPDATE

Adding more details as I see that my original question is about to be closed.

I've seen some solutions that worked with lightning:datatable aura component that served the same purpose. However, in lightning web components, the parent component cannot affect the style of inner elements of its child components (see documentation here). Nonetheless, I tried to apply the aura approach to the web component and failed (see my playground and the below code snippet from basic.css file in the playground).

.myTable .slds-th__action .slds-th__action-button { display: none; }

.slds-button_icon-bare{
    display: none;
}

I also went through the component documentation, but I cannot see any obvious way to hide these actions. Even tried setting the actions attribute on columns but that just adds additional actions below the Wrap Text and Clip Text:

const columns = [
    { label: 'Label', fieldName: 'name', 
        actions: [{ label: 'Dummy', checked: true, name:'all' }] }
];

enter image description here

Any help would be appreciated.

2
  • 1
    can you provide code snippet? Commented Feb 15, 2019 at 9:35
  • 1
    There's really no special code to provide. If you follow the link to the component the code for it is there.
    – smukov
    Commented Feb 15, 2019 at 9:40

6 Answers 6

11

You can use hideDefaultActions. I tried and it worked for me.

enter image description here

Please refer Working with Column Properties in documentation.

Proof below

enter image description here

2
  • 1
    It works for Summer'20 orgs. Commented Jul 13, 2020 at 7:11
  • If we use hideDefaultActions: true, then wrapping column text is not working. Commented Dec 4, 2020 at 14:46
8

sadly this isn't currently available in the LWC version, as you've already discovered, due to web components not allowing you to reach into custom elements. In fact, you shouldn't do it in the Aura version either, as our DOM (markup) structure can change and/or the SLDS rules, which can change and thereby breaking your component.

We will be providing a way to remove the header column actions (and even remove the entire header row itself) in an upcoming release. (Forward looking statement, blah, blah, blah.)

3
  • 3
    I have been able to hide header actions. The key is have the css to hide loaded from separate css style sheet from loadScript. If you keep it in component css (self) then it doesn't work. Commented Mar 15, 2019 at 10:09
  • nice hack, Anshul!
    – binaryLady
    Commented May 1, 2019 at 18:00
  • 1
    Anshul, I love this solution. I am sorry that SFDC gives us components that we cannot modify and then tells us we shouldn't but seriously, in the docs for the LWC datatable it says you can hide the number column by omitting the call for it, and you cannot! So custom CSS bundle is perfect, just saved me on that! Thanks again.
    – binaryLady
    Commented May 1, 2019 at 18:15
8

You can do this in LWC you just need to add hideDefaultActions: true to each column when you declare those in the .js file, not to the attributes in the .html file.

const columns = [
    { label: 'Name', fieldName: 'Name', wrapText: true, hideDefaultActions: true }
];
2
  • This isn't substantially different from 2 of the existing answers, so this answer may end up being deleted by the community.
    – Derek F
    Commented Nov 6, 2020 at 19:53
  • this worked for me! Commented Dec 29, 2023 at 4:56
2

There's a hideDefaultActions property in documentation now, but doesn't seem to work.

4
  • I tried that, didn't work.
    – bksfdc
    Commented May 20, 2020 at 5:34
  • Not working for me either. Commented May 22, 2020 at 9:01
  • It worked for me. Commented Jul 2, 2020 at 13:50
  • It works for Summer'20 orgs. Commented Jul 13, 2020 at 7:11
0

I've discovered a possible solution with appending style element. It's not ideal, but helps. This is a part of myComponent.js

// Rendered callback adds style element that hides standard action buttons
renderedCallback() {
    if (!this.hasRendered) {
        const style = document.createElement("style");

        // CSS rule. You have to replace "c-my-component" with your component name that contains lightning-datatable
        style.innerText =
            "c-my-component lightning-datatable .slds-th__action-button {display: none;}";
        this.template
            .querySelector("lightning-datatable")
            .appendChild(style);

        this.hasRendered = true;
    }
}
5
  • I am facing the same problem and tried renderedCallback but getting error 'Cannot read property 'appendChild' of null'
    – bksfdc
    Commented May 19, 2020 at 11:41
  • @bksfdc, did you query a component that directly uses lightning-datatable? Commented May 19, 2020 at 11:48
  • yes, I did. I replaced c-my-component with my component containing the data table but no luck
    – bksfdc
    Commented May 20, 2020 at 4:55
  • @bksfdc, sounds strange, because I have some projects with the same solution and it still work. Could you share the code? Commented May 20, 2020 at 16:11
  • 1
    For this to work, You have to replace 'c-my-component' with your component name. Commented May 22, 2020 at 9:11
-2

const COLUMNS = [{label : 'Account Name', fieldName : NAME_FIELD.fieldApiName, wrapText:true, hideDefaultActions:true, sortable:true}, {label : 'Rating', fieldName : RATING_FIELD.fieldApiName, wrapText:true, hideDefaultActions:true, sortable : true}];

Refer above code.

You can add hideDefaultActions:true to hide the dropdown on your column. And you can also wrapText from here only.

1
  • This appears to have already been covered in a few answers from ~3 years ago, just with less information.
    – Derek F
    Commented Apr 5, 2023 at 11:33

You must log in to answer this question.

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