Lightning-datatable - remove header actions
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.
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' }] } ];
Any help would be appreciated.
This feature 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.)