function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
bretondevbretondev 

Display various icons in lightning:dataTable

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' }}

                ]);

 
Best Answer chosen by bretondev
Ashwin Kumar SrinivasanAshwin Kumar Srinivasan
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

All Answers

Varun SinghVarun Singh

<lightning:icon iconName="utility:error" variant="error"/>
bretondevbretondev
Can you please explain more? I don't understand your reply
Ashwin Kumar SrinivasanAshwin Kumar Srinivasan
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
This was selected as the best answer
bretondevbretondev
Excellent Ashwin. You save my day
Lucia VegaLucia Vega
Many thanks. Your solution worked. 
run 3 (https://run3az.com)
Vigitha Vasudevan 5Vigitha Vasudevan 5
@Ashwin Kumar can we use custom icon from static resource instead of utility:iconname?