Skip to main content
Hello

I want to display different icons in lightning:dataTable based on row condition.

For example

If row1.someField == 'A' then iconName = A

If row2.someField == 'B' then iconName = B

I have looked at documentation but it seems we can specify icons at the colmun level .

This is what I have done so far but it always display the same icon :

 

component.set('v.resultColumns', [

{label: 'Provenance', fieldName: 'provenance', cellAttributes: { iconName: 'action:call' }}

]);

 
6 answers
  1. Apr 30, 2018, 9:31 PM
    Hi,

    You can try declaring your column similar to whats shown below (providing a fieldname to be used in the js controller/helper to set the iconName)

    {label: 'Provenance', fieldName: 'provenance' cellAttributes:

    { iconName: { fieldName: 'provenanceIconName' }, iconLabel: { fieldName: 'provenanceIconLabel' }, iconPosition: 'right' }}

    and just before you set the list of records which you are going to pass it to datatable's "data"  attribute if you try and set the icon based on the rowData you have, you should be able to achieve icon based on condition

    setIcon: function (cmp, dataList) {

    // dataList you retrieved from server side callback or the data you want to display in the table

    dataList = dataList.map(function(rowData) {

    if (rowData.provenance === 'value') {

    rowData.provenanceIconName = 'utility:up';

    rowData.provenanceIconLabel = 'up';

    } else {

    rowData.provenanceIconName = 'utility:down';

    rowData.provenanceIconLabel = 'down';

    }

    return rowData;

    });

    cmp.set("v.dataList", dataList);

    }

    Thanks
Loading
0/9000