Return to Answer

Changed rowStyle keyword to rowClass as it is being defined in the array

Source Link

edit approved Feb 8, 2023 at 20:10

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.rowStylerowClass === b.rowStylerowClass? 0: a.rowStylerowClass === 'green'? 1: -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}

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.rowStyle === b.rowStyle? 0: a.rowStyle === '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}

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}

Source Link

created Feb 8, 2023 at 14:41

sfdcfox ♦

501.7k
21
473
828

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.rowStyle === b.rowStyle? 0: a.rowStyle === '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}