0

I have a icon showing in my lightning-datatable using the cellAttributes property. But I want the icon to be green (instead of the default of grey). I followed the slds styling hooks documentation, but it is still grey. How can I make the checkmark green?

HTML:

<template>
    <br /> 
    <div style="height: 300px;">
        <lightning-datatable
                key-field="symbol"
                data={data}
                hide-checkbox-column
                min-column-width="100"
                suppress-bottom-bar
                columns={columns}>
        </lightning-datatable>
    </div>
</template>

Relevant JS:

columns = [
    { label: 'Company Name', fieldName: 'companyname'},
    { label: 'Symbol', fieldName: 'symbol' },
    { label: 'Price', fieldName: 'price', type: 'currency' },
    { label: 'Your Buy Price', fieldName: 'buyprice', type: 'currency', editable: true, cellAttributes: {class: 'sellOrBuy', iconName: { fieldName: 'buyIcon' }, iconPosition: 'right',} },
    { label: 'Your Sell Price', fieldName: 'sellprice', type: 'currency', editable: true, cellAttributes: { iconName: { fieldName: 'sellIcon' }} },
];

loadDashboardData() {
        console.log('dashboard: loadDashboardData()');
        loadDashboard()
            .then(result => {
                console.log('result stringified: ' + JSON.stringify(result));
                let tempData = []; 
                for(let i = 0; i < result.length; i++) {
                    let currentResult = result[i]; 
                    console.log('currentResult.Buy_Price__c: ' + currentResult.Buy_Price__c);
                    console.log('currentResult.Stock__r.Price__c: ' + currentResult.Stock__r.Price__c);
                    console.log('currentResult.Stock__r.Price__c < currentResult.Buy_Price__c ? action:approval : ' + (currentResult.Stock__r.Price__c < currentResult.Buy_Price__c ? 'action:approval' : ''));
                    let subscriptionObject = {
                        "companyname": currentResult.Stock__r.Name,
                        "symbol": currentResult.Stock__r.Symbol__c,
                        "price": currentResult.Stock__r.Price__c,
                        "buyprice": currentResult.Buy_Price__c ? currentResult.Buy_Price__c : '',
                        "sellprice": currentResult.Sell_Price__c ? currentResult.Sell_Price__c : '',
                        "buyIcon": currentResult.Stock__r.Price__c < currentResult.Buy_Price__c ? 'utility:check' : '',
                        "sellIcon": currentResult.Stock__r.Price__c > currentResult.Sell_Price__c ? 'action:check' : ''
                    };
                    tempData.push(subscriptionObject); 
                    
                }
                this.data = tempData; 
                console.log('this.data: ' + this.data);
                console.log('this.data stringified: ' + JSON.stringify(this.data)); 
                
            })
            .catch(error => {
                this.error = error;
                console.error(error);
                this.showToast('Error', error.body.message, 'error');
            })
    }

CSS

.sellOrBuy {
    --slds-c-icon-color-foreground-default: green !important;
    --slds-c-icon-color-foreground: green !important;
}
.slds-icon-utility-check {
    --slds-c-icon-color-foreground-default: green !important;
    --slds-c-icon-color-foreground: green !important;
}

Screenshot (the checkmark beside $15.00 should be green) enter image description here

1

2 Answers 2

1

The reason why the style hooks on normal class don't work in lightning-data-table is because of shadow dom

you can apply custom style hooks to a shadow host by using :host pseudo selector like this:

:host {
    /* --sds-c-icon-color-background: green; */
    --slds-c-icon-color-foreground-default: green;
    --slds-c-icon-color-foreground: green;
}

1
  • But there is a problem, it will change other icons present in the component to Green including DataTable inbuilt icons.
    – Saroj Bera
    Jan 17, 2023 at 12:51
0

I have a way to resolve your problem -

  1. Upload your CSS as a static resource.
  2. Import it into your LWC.
import { loadStyle } from 'lightning/platformResourceLoader';
import dataTable from '@salesforce/resourceUrl/dataTable';

//column- 
{
        label: 'Website', fieldName: 'website', type: 'url', type: 'button-icon', typeAttributes:
        {
            iconName: 'utility:check',
            name: 'check',
            iconClass: 'myCustomDatatableIconColor'
        }
    }
  1. Load the style.
connectedCallback() {
        loadStyle(this, dataTable);
}

CSS -

.myCustomDatatableIconColor{
    fill: orange;
}

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .