How to dynamically assign a CSS class to an array in LWC?

Question

From my JS, I am calling Apex and getting results. Based on certain condition, I am dividing my results into two arrays(Arr1 & Arr2) and then concatenating both the arrays so that I can display certain results at the bottom.

Right now my CSS class assigned in HTML colours all of the results in Blue(tRowBody) but I want the results pushed in second array (Arr2) to be in Green.

Here is my JS Code

getValueWithFilters({accId: this.accountId, skey: this.searchKeyword, v12: this.dell, v22: this.compaq})    
        .then((result) => {
                let arr = [];
                let arr1=[];
                let arr2 =[];
                if(result){
                    result.forEach(r => {
                        if(r.Count_1__c < r.Count_2__c){
                            arr1.push({
                                Name: r.Service_Task_Name__c,
                                stid: r.Id,
                                Count1: r.Count_1__c,
                                Count2: r.Count_2__c,
                            })
                        }
                        else{
                            arr2.push({
                                Name: r.Service_Task_Name__c,
                                stid: r.Id,
                                Count1: r.Count_1__c,
                                Count2: r.Count_2__c,
                            })
                        }     
                    });
                }
            arr = arr1.concat(arr2);
            this.dispRecords = arr;
            })
            .catch((error) => {
                this.error = error;
            })

HTML goes like this-

<table class="">
  <thead>
     <tr class="slds-line-height_reset tableRow">
        <th class="slds-is-resizable bckgrndclr" scope=”col”>
           {label.LAPTOPS}</th>
        <th class="c1 bckgrndclr" scope=”col”>
                   {label.Name}</th>
        <th class="c2 bckgrndclr" scope=”col”>
                   {label.Count1}</th>
        <th class="c3 bckgrndclr" scope=”col”>
                   {label.Count2}</th>
     </tr>
    </thead>
      <tbody class="tableBdy" >
         <template if:false={excessTable}>
            <template for:each={dispRecords} for:item="lpt">
              <tr key = {lpt.stid} >
                 <td class="tRowBody" data-label="laptops" >
                     <div class="slds-cell-wrap customText">
                         {lpt.Name}</div>
                 </td>
                 <td data-label=””>
                   <div class="slds-cell-wrap" style="text-align: center">
                          {tsk.count1}</div>
                  </td>
                 <td data-label=””>
                   <div class="slds-cell-wrap" style="text-align: center">
                          {lpt.count2}</div>
                 </td>
               </tr>
                        </template>
                        </template>
                        <template if:true={excessTable}>
                            {label.extraResults}
                        </template>
                        <template if:true={emptyTable}>
                            {label.No_Records_Found}
                        </template>
                    </tbody>
                </table>

the CSS Class - tRowBody is defining the color blue as mentioned above.

How do I change the colour of elements in Arr2 to green ?

Answer 1

You just need to add another property to the objects you're creating. As a side note, you can do this in much less code:

this.dispRecords = result.map(
  (record)=>(
    {
      Name: record.Service_Task_Name__c,
      stid: record.Id,
      Count1: record.Count_1__c,
      Count2: record.Count_2__c,
      rowClass: record.Count_1__c < record.Count_2__c? 'blue': 'green'
    }
  )
).sort((a, b) => { 
  return a.rowClass === b.rowClass? 0: a.rowClass === 'green'? 1: -1;
});

First, we add the CSS property and copy the fields over, then we use sort to rearrange all blues before greens.

Change blue and green to match your CSS names for the blue and green rows. Change your markup as follows:

<td class="tRowBody"

Can now be:

<td class={lpt.rowClass}