I want to add attributes or classes for rows/cells in lightning:datatable based on cell values (I want to customise styles based on values). Is it possible? How can this be achieved?
P.S. I tried to use document.querySelectorAll, document.getElementsByClassName, etc. in 'render' event handler and in custom renderer to find rows and cells but these methods always return empty list/null. Is it due to Locker Service?
My component markup:
<aura:attribute name="objectList" type="List"/>
<aura:attribute name="objectColumns" type="List"/>
<aura:handler name="init" value="{!this}" action="{!c.onInit}"/>
<lightning:datatable data="{!v.objectList}"
columns="{!v.objectColumns}"
keyField="id"/>
My component controller:
({
onInit: function (cmp, event, helper) {
cmp.set('v.objectColumns', [
{label: 'Name', fieldName: 'name', type: 'text', sortable: true},
{label: 'Status', fieldName: 'status', type: 'text', sortable: true}
]);
cmp.set('v.objectList', [
{id: '1', name: 'object one', status: 'Active'},
{id: '2', name: 'object two', status: 'Inactive'},
]);
}
})
I want to assign rows with active and inactive statuses with different css classes.