3

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.

  • Yes, this is due to locker service. have you tried anything using the components Attributes and events available in the framework? A good place to start would be theLightning Components Developer Guide – glls Feb 19 '18 at 20:08
  • @glls thanks for reply! Is there any specific attribute or event I should look at? It looks like it is not possible to add styles the way I'm used to (find nodes and then add classes to them) but maybe there is another approach in lightning? – user39399 Feb 19 '18 at 20:26
  • there are different approaches, for example, from the components markup you can conditionally instantiate and render your DOM with the classes you want based on the value of x attribute. Another approach would be by creating a custom Renderer. I would suggest you look it up and try either way. Once you have some code sample working and are stuck somewhere, please update your post. – glls Feb 19 '18 at 20:32
  • @glls added code sample. I understand what a custom renderer is, but how exactly can I find rows with it? I was going to use it for DOM search and edit but the search doesn't work so I can't obtain the nodes to edit them. – user39399 Feb 19 '18 at 20:57
6

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

| improve this answer | |
  • Great thanks for sharing your solution! It works perfectly for setting classes for cells. Do you know if there's also a way to add classes to rows? – user39399 Apr 16 '18 at 17:01
  • 1
    @user39399 I don’t think there is. – Keith C Apr 16 '18 at 17:03

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.