1

I'm currently trying to apply colors to each of these icons within the datatable. I tried to use the cellattributes to change the color, but it seems that we're not allowed to use our own classes and can only use the slds classes which are very limited in the colors that I seem to be able to choose from. I'm currently trying to use custom datatypes instead, but while the class seems to have been applied, it has none of the styling.

I'm applying the classes through the typeAttributes in the columns

{
    label: 'Executed Procedure', 
    fieldName: 'executedProcedure', 
    hideDefaultActions: true, 
    type: 'DOCUMENT_ICON',
    typeAttributes: {
        style: {fieldName: 'executedStyle'},
    }
},

and I'm trying to apply it through this template

<template>
    <div class="document-container" >
        <lightning-icon
            icon-name="utility:page"
            size="small"
            alternative-text="Process"
            class={typeAttributes.style}
        >
        </lightning-icon>
        <span>{value}</span>
    </div>
</template>

enter image description here

enter image description here

1 Answer 1

1

You need to put your styles into static resource and load them into your code, then they will be applicable.

Here is the documentation for loading the styles from static resource - Platform Resource Loader

Alternatively, you can use the SLDS styling hooks. Here is a blog post I have written about styling hooks - SLDS Styling hooks in Lightning web components

1
  • 1
    Thanks - I tried loading the styles but I didn't realize it had to be in static resources first.
    – Kevin Yao
    Commented Jul 24, 2023 at 19:20

You must log in to answer this question.

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