lightning datatable header level actions
Header-level actions helps to perform data manipulations like filtering/ manipulating table data. You can perform actions on a column header and handle them using the onheaderaction event handler.
![lightning datatable header level actions](/content/images/size/w1200/2020/04/hedaer-post.jpg)
Header-level actions helps to perform data manipulations like filtering/ manipulating table data. You can perform actions on a column header and handle them using the onheaderaction
event handler.
In this post we're going build Cases LWC which can be filtered by Status
and Priority
as shown below
![](https://www.thephani.com/content/images/2020/03/Header-actions.gif)
Note In the above exampleStatus
andPriority
filter works independently
Here is the quick look of cases.html
<lightning-datatable key-field="id" data={cases} columns={columns}
hide-checkbox-column
onheaderaction={handleHeaderAction}>
</lightning-datatable>
In above html onheaderaction
event is responsible for handling heading level selection
And here is handleHeaderAction
handler in cases.js
handleHeaderAction(event) {
// gives the selection header action name
const actionName = event.detail.action.name;
// gives selected column definition
const colDef = event.detail.columnDefinition;
// assigning colmuns to new variable
let cols = this.columns;
if (actionName !== undefined && actionName !== 'all') {
// filtering cases on selected actionname
this.cases = this.ALL_CASES.filter(_case => _case[colDef.label] === actionName);
} else if (actionName === 'all') {
// returning all cases
this.cases = this.ALL_CASES;
}
/* Following line is responsible for finding which header action selected and return corresponding actions then we will mark selcted as checked/true and remaining will be marked as unchecked/marked */
cols.find(col => col.label === colDef.label).actions.forEach(action => action.checked = action.name === actionName);
this.columns = [...cols];
}
Other important items to discuss will in the post are,
- For getting
Status
picklist values dynamically - click here for salesforce reference - Getting all cases using
Apex
controller
Getting cases using Apex Controller
Syntax for importing ApexClass
will be like,
import getCases from '@salesforce/apex/cases.getCases';
NOTE: cases is class name while getCases is method
@wire(getCases)
wiredCases({ error, data }) {
if (data) {
this.ALL_CASES = data;
this.cases = data;
this.error = undefined;
} else if (error) {
this.error = error;
this.contacts = undefined;
}
}
Above wire method is responsible for assigning getCases
results to ALL_CASES variable
Here is the link for the actual demoed LWC