React-table: v7: Sorting of rows

[fxOne]

We have some fields which depends on combined data. In some of our cases the display data, sort data and filter data are different. A simple example would be firstname + lastname where we display both, but sort only by last name and the filter is only for first name.

Also as I can get the complete row data in many callback functions file the cell renderer or the accessor it would be consistent to have the full data in the column.sortType function.

Fro reference see this discussion: https://spectrum.chat/react-table/general/v7-sorting-of-rows~c8fb1547-a3ee-4ddc-9df8-619427831769

[tannerlinsley]

This is a great use-case. I'll update the API today to support this. Stay tuned.

[tannerlinsley]

I just updated this locally to allow you to use the entire row in your sortType functions. In fact, I'm live streaming it right now!

[fxOne]

Saw the stream today and loved it. Thanks for your quick help!

[juiceo]

Okay, so apparently now the custom sortType function is called with only a and b, which are the full rows of data, without any information on which column is being sorted, or what the resolved accessor for that column is?

Say I have a column like this:

{
  Header: 'My column',
  accessor: row => {
    return row.someProperty
  },
  sortType: myReusableSortFunction
}

How do I tell myReusableSortFunction which column I want to sort by? Currently myReusableSortFunction is being called with just two arguments, the full rows a & b, with no context on what column they are being sorted by. How does this make sense? Or am I doing something wrong here?

This is also different from the docs, which say the function signature should be

sortType: String | Function(rowA: <Row>, rowB: <Row>, columnID: String, desc: Bool)

I'm using react-table v7.

[juiceo]

Okay, disregard the end of the last comment, upon further investigation the function does get called with the same arguments as in the documentation. However, the problem is still the same:

How do I get the resolved value of the accessor in my custom sort function? How am I supposed to sort the rows without any context as to which column is being sorted, other than a columnID?

[defields923]

A bit late, but I was on the same issue, so anyway...

The rowA and rowB parameters give you access to the 'original' (also property name) data. Kind of stinks, but you could compute the final value in your sortType method as you would in the accessor.

*Better yet, adding an id in combination with an accessor function will place the accessor's result within the values object. I know the docs say that an id is required if accessor is a function, but I omitted at first and it didn't seem to matter until now.

[raulrene]

@juiceo

I'm using react-table v7.

I'm on v7.2.1 and I get the column name param as well

useTable({
  sortTypes: {
     alphanumeric: (row1, row2, columnName) => {
       console.log(row1, row2, columnName)   
      },
    },
  ...
  })