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


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

    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.

  • 1
    can you provide code snippet? – Oleksandr Berehovskyi Feb 15 '19 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 Feb 15 '19 at 9:40

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
    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. – Anshul Agrawal Mar 15 '19 at 10:09
  • nice hack, Anshul! – binaryLady May 1 '19 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 May 1 '19 at 18:15

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.