How to sort custom rendered cells containing two values?

[iwannabetall]

In this case I have two values in each cell (like rank and value) but I only want to sort on one of the two but setting sortBy doesn't work. I tried creating a custom function using sortMethod, but I have no idea how it works like if I did something like (I just copy pasted the function from some other response to see if I could get anything to even print)

sortMethod: (a, b) => {
     console.log(a,b)
      if (a.length === b.length) {
         return a > b ? 1 : -1;
      }
  return a.length > b.length ? 1 : -1;
 }

I have no idea what a and b are or how to reference them for my situation and I can't even get a and b to print to the console when I click which makes me think that I'm doing something so wrong that the function's not even triggering.

Also to render the cell, I couldnt figure out how to just add a value without adding a wrapped div, so it looks like this because I need two different styles for the two values

Cell: ({ row: { original } }) => (<div className = 'pctl' data-rk={original.percentile}>
      {original.percentile}
     <span className='stat'> {original.value}</span>
</div>),

[bdugg-91]

I'm encountering the same issue, I have a cell that renders custom component code, and I'm unable to get the custom sort function to even fire in order for me to log data to see what I need to do to complete the sort logic.

[TonyVeigel]

if you provide more information I could probably help.

[bdugg-91]

Sorry for the delayed reply. I realized that it was because the implementation I was working with was set to use Server Side processing and I just needed to change it to client side, lol.