Sorting not working for column with custom cell and accessor

[feederaccount]

I've just started using this plugin and am having difficulty getting the sorting to work for a particular column (it works OK on other columns within the same table).

This column's content is based on some properties from the data in that row so I have created a custom Cell for it. It displays OK, but the sorting performs very strangely.

Here's a link to the code in a Gist.

I've looked over the code and it looks OK. The data it's displaying has about 55 rows. When I click the header to sort it does sort, but it seems to sort the rows in two separate batches, See here:

What's more, if I change the column data so that it always print the same value:

const _columns = [{
   Header: "Name",
   Cell: cell => {
      const row = cell.row.original;
      const value = row.comment ? "TEST" : row.origins[0].domain_name;
         return (
            <Link href="/view/cloudfront/[id]" as={`/view/cloudfront/${row.id}`}>
               <a>{value}</a>
            </Link>
         );
      },
   accessor: row => {
      return row.comment ? "TEST" : row.origins[0].domain_name;
   },
   id: Math.random()
},

The sorting again works, but it again groups the values rather than treating the entire set of rows as one.

What am I doing wrong here? My understanding is that the Cell property in the column defines what gets displayed and the accessor is use to build the data model in the background. If I make those two values line up, the sorting should work.. no?

PS. I read in the docs that if the accessor is set to a function that a unique ID needs to be provided. I used Math.random() and Math.random().toString() as well as specifying nothing at all and did not see a difference.

[feederaccount]

Looking deeper into this I'm seeing more strange behaviour. When I have a functional accessor, it appears to be grouping rows on the property name rather than the value within that property. For example:

const _columns = [{
   Header: "Name",
   Cell: cell => cell.row.original.comment || cell.row.original.origins[0].domain_name,
   accessor: row => row.comment || row.origins[0].domain_name
},

When I sort this column, all rows that get their value from the comment property appear at the top, then the rows that get their value from the origins[0].domain_name property appear after it. Sorting does occur within these groups, but it should be treating it all as one table.

I am either doing this completely wrong or there is a bug in the app, but this is so widely used that I'd be surprised if this wasn't found before.

[feederaccount]

I ended up abandoning this library in favour of react-data-table-component - not because of this issue specifically - but for any future readers, the issue here is that sorting is case sensitive by default. This is why it appeared to be splitting rows into two groups.

[kayotimoteo]

Me too

[gargroh]

if case sensitive sorting is the concern then it can be customised...