Let say you want to highlight a cell in a Lightning data table (lightning:datatable) when a specific value is invalid. In our example, we want to display those invalid emails in red.
Context
Let say you want to highlight a cell in a Lightning data table (
lightning:datatable) when a specific value is invalid. In our example, we want to display those invalid emails in red.
Expected result
UI component
<aura:attribute name="data" type="Object"/>
<aura:attribute name="columns" type="List"/>
<aura:handler name="init" value="{! this }" action="{! c.doInit }"/>
<lightning:datatable
columns="{! v.columns }"
data="{! v.data }"
keyField="id"/>
Component JS controller
doInit : function(component, event, helper) {
component.set('v.columns', [
{ label: 'First Name', fieldName: 'firstName', type: 'text' },
{ label: 'Last Name', fieldName: 'lastName', type: 'text' },
{
label: 'Email',
fieldName: 'email',
type: 'text',
cellAttributes: {
class: {
fieldName: 'emailCellClass'
}
}
}
]);
component.set('v.data', [
{
firstName: "Emelie",
lastName:"Sloan",
email: "valid@email.com",
emailCellClass: 'slds-truncate'
},
{
firstName: "John",
lastName: "Jackson",
email:"invalid@email.com",
emailCellClass : "slds-truncate slds-text-color_error"
}
]);
},