DOM manipulation on lightning:datatable

Question

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.

Answer 1

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".