[SalesForce] How to set class or icon to data cell

I'm trying to use lightning:datatable component to render table of my custom data.

I do generate myData like:

JSONGenerator gen = JSON.createGenerator(true);
gen.writeStartArray();

    for (all territories to populate country column){
        gen.writeStartObject();
        gen.writeStringField('country', territory);

        for (all dynamic fileds){
            if(yes condition){
                gen.writeStringField(b.id, 'Yes');
            }else{
                gen.writeStringField(b.id, 'No');
            }
        }
        gen.writeEndObject();
    }
    gen.writeEndArray();

so my JSON looks like:

[
   {country: "A" , id001: "Yes", id002: "No" ... id007: "Yes"},
   {country: "B" , id001: "No", id002: "Yes" ... id007: "Yes"}...]

so number of columns (id) can be different and yes/no values checked for all of them with some background logic.

in the helper I assign it like this:

component.set('v.columns', result.lstDataTableColumns);
component.set("v.dataTable", JSON.parse(result.JSONDataTable));

My table has proper Yes/No values in proper cells but how can I customize cell classes or add icons to cells? I need to add Green/Red background or Yes/No icons to data cells based on Yes/No values in them. Is it possible to assign cellAttributes to data attribute same way as to columns attribute of lightning:datatable?

Or it is easier just go with <aura:iteration>? lightning:datatable looks cool and has a lot of additional stuff to play with.

Best Answer

The best you could do right now would be to render the cell as a button type, which would allow you to specify an iconName in the typeAttributes property for each cell. This probably isn't a desirable solution, though, so you'll probably want to use the aura:iteration idea instead, or you could write your own data table component using the code from SLDS (it's not too complicated).

Related Topic