I need to change the color of the row in the table to red instated of gray color. i have used the playground but i cannot change it,


If you open this above link(Playground)the table ll be row with gray color but my requirement is it should be red color.there is any resolved solution to be red color row? https://developer.salesforce.com/docs/component-library/tools/playground/bjfQj0b-8/6/edit enter image description herein this table row with gray color but i need lite red color . if i apply t1 to slds-theme_error , red colr came but hover on row color

if you open that link it ll show like this picture

There is anyway to avoid hover in slds table

  • Hi Phil, my requirement is the slds table row color should be in lite red color .developer.salesforce.com/docs/component-library/tools/… . if you open this link it shows gray color on table row ,but i need lite red color in table row
    – user83806
    Commented Jun 11, 2020 at 8:02
  • I understand. My point was that styling is very limited. See this Q/A for more.
    – Phil W
    Commented Jun 11, 2020 at 8:10
  • yes , but i used this link lightningdesignsystem.com/design-tokens/… - but only few color only applied in table,you also check that background in playground developer.salesforce.com/docs/component-library/tools/…
    – user83806
    Commented Jun 11, 2020 at 8:15
  • The CSS you define is not able to impact the internals of the component (the tree grid) because of the reasons covered in the articles I have referenced in my previous comments. You cannot do what you are trying to do.
    – Phil W
    Commented Jun 11, 2020 at 10:35
  • Ah, I see - your playground code is confusing because you have basic.css trying to set colours and I didn't spot your use of cellAttributes. Try setting t1 to "slds-theme_error".
    – Phil W
    Commented Jun 11, 2020 at 12:08

1 Answer 1


As Phil stated things are limited when it comes to styling out of the box lightning functionality.

However researching online I stumbled upon a playground that made me realize that if you change the styling for t1 to the styling for any of the icons from this link it will take the color of the icon and apply it as a background color to your row. Well at least if you use any of the custom and standard icons.

enter image description here

Here's a link to a playground where you can see this in action using your example code. What I did was replace t1: 'slds-color__background_gray-7' with t1: 'slds-icon-standard-dashboard'.

Obviously this is not ideal and could be causing some unexpected styling behavior with your table so you will need to test and verify if it can work in your case.

EDIT If you want to achieve a different color for the font inside the row you will need to try out different icon styling. For instance if you want the same background color but have the color of the font being white you can use set the t1: to 'slds-icon-custom-custom67'.

enter image description here

  • Hi Arthelte, i have tried this one t1: to 'slds-icon-custom-custom67'. and t1: 'slds-icon-standard-dashboard' , but it causing hover on color.if i place cursor on row color the color getting dim like hover ..there is any other way ?
    – user83806
    Commented Jun 11, 2020 at 15:43
  • I am not sure if this is possible. This is one of the major limitations when using out of the box sf lightning functionality. If you want something custom you are usually better off using a library or building your own component.
    – Arthlete
    Commented Jun 11, 2020 at 16:20
  • Yes, but css also not supporting in slds table in a row color and hover the color
    – user83806
    Commented Jun 11, 2020 at 16:26
  • Yes, that's why you might want to look for a custom table to import into LWC or build your own table.
    – Arthlete
    Commented Jun 11, 2020 at 16:52
  • There is way to stop hover on colored row ?
    – user83806
    Commented Jun 12, 2020 at 12:46