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.)
Answer (1)
In Salesforce Lightning Web Components (LWC), if you want to remove the header actions from a lightning-datatable, you can do this by customizing the datatable columns and not including any header actions. The headerActions property is used to add actions in the column headers, so by omitting this property, you effectively remove the header actions.
Here is an example of how you can define a lightning-datatable without header actions:
Example
key-field="id"
data={data}
columns={columns}
hide-checkbox-column
>
JavaScript
import { LightningElement, track } from 'lwc';
import getAccountData from '@salesforce/apex/AccountController.getAccountData';
export default class AccountDataTable extends LightningElement {
@track data;
@track columns = [
{ label: 'Name', fieldName: 'Name', type: 'text' },
{ label: 'Industry', fieldName: 'Industry', type: 'text' },
{ label: 'Annual Revenue', fieldName: 'AnnualRevenue', type: 'currency' }
];
connectedCallback() {
this.loadData();
}
loadData() {
getAccountData()
.then(result => {
this.data = result;
}) .catch(error => {
console.error('Error fetching account data', error);
});
}
}Apex Controller (if needed)
public with sharing class AccountController {
@AuraEnabled(cacheable=true)
public static List getAccountData() {
return [SELECT Id, Name, Industry, AnnualRevenue FROM Account LIMIT 100];
}
}Explanation
- Template File (accountDataTable.html): Defines the lightning-datatable without any header actions. The hide-checkbox-column attribute is used to hide the checkbox column if not needed.
- JavaScript File (accountDataTable.js): Sets up the columns for the datatable without the headerActions property. Fetches data from the Apex controller and populates the datatable.
- Apex Controller (AccountController.cls): Provides the data to the LWC component if needed. This part of the code is only necessary if you're fetching data from the Salesforce backend.
By following this approach, you can have a lightning-datatable without any header actions. If you want more advanced customization (such as removing certain header actions but keeping others), you would need to handle that within the column definition, ensuring you only include the necessary properties and exclude any actions you don't want.