DOM manipulation on lightning:datatable
As others have mentioned, the LockerService means you can't attack the problem via the DOM, but instead have to see what the component offers.
I followed the lightning:datatable
JavaScript through in the debugger and found that the cellAttributes
mechanism documented to support this:
{
label:'Confidence',
fieldName:'confidence',
type:'percent',
cellAttributes:{
iconName:{
fieldName:'trendIcon'
},
iconPosition:'right'
}
}
will also allow this:
{
label:'Name',
fieldName:'Name',
type:'text',
cellAttributes:{
class:{
fieldName:"ClassName__c"
}
}
},
and set the DOM attribute class
to the value of the field specified, be that a fixed value or a reference to a row field (as illustrated here).
Note too that the fieldName
does not have to be an actual field in the SObject. In my case I have JavaScript code that works out the CSS class from other data values and adds that to the row:
// Convert to style
for (i = 0; i < data.length; i++) {
var row = data[i];
row._class = ...;
}
and then set fieldName:"_class"
.
As a not documented feature it cannot necessarily be relied on, but seems like a valuable mechanism so I hope it will make it into the documentation and so become "official API".