How to color border for a row in table on specific condition in lwc

Question

<table class="slds-table slds-table_cell-buffer slds-table_bordered  slds-border_left slds-border_right">
                                <thead>
                                    <tr class="slds-line-height_reset">
                                        
                                        <th class="" scope="col">
                                            <div class="slds-truncate" title="Name">Image</div>
                                        </th>
                                        <th class="" scope="col">
                                            <div class="slds-truncate" title="First Name">Name</div>
                                        </th>
                                        <th class="" scope="col">
                                            <div class="slds-truncate" title="Last Name">Track Family Name</div>
                                        </th>
                                        
                                    </tr>
                                </thead>
                                <tbody>
                                    <template for:each={studentList} for:item="con">
                                        <tr key={con.Id} >
                                          
                                            <th scope="col">
                                                <div class="slds-avatar_large slds-p-right_xx-small">
                                                    <img src={con.PROFILE_PIC} />
                                                </div>
                                            </th>
                                            <th scope="col">
                                                <div>{con.Student_Name}</div>
                                            </th>
                                            <th scope="col">
                                                <div>{con.TRACK_FAMILY}</div>
                                            </th>
                                            
                                        </tr>
                                    </template>
                                </tbody>
                            </table>

I want to color the border of a row in which student name = 'xyz'.

Update: I modified the code as suggested and now while I inspect I can see the class added to my tr and the border markup as well. But, still border is not applied to the row. Please see the image.

Answer 1

You need to evaluate the condition in js & you can create apply styles based on that condition.

studentList = studentList.map(student => (...student, styles: `${student.name === 'xyz' ? 'xyz-student_border' : ''}`));

then on html you can simply apply these properties.

<template for:each={studentList} for:item="con">
     <tr class={con.styles} key={con.Id} >
         <th scope="col">
             <div class="slds-avatar_large slds-p-right_xx-small">
                  <img src={con.PROFILE_PIC} />
             </div>
         </th>
         <th scope="col">
            <div>{con.Student_Name}</div>
         </th>
         <th scope="col">
             <div>{con.TRACK_FAMILY}</div>
         </th>
      </tr>
     </template>

and css,

.xyz-student_border{
    border:2px solid red;
}