Undefined being included in sorting when setting sortUndefined to false.

[varwasabi]

Describe the bug

Setting up a table of data with the latest table release. When having the following:

{
  accessorFn: ({ foo }) => foo, // undefined
  sortUndefined: false,
  cell({ row }) {
    return row.original?.foo ?? '-';
  }
}

Sorting the column places all of the cells with "-" which should be undefined, at the top of the list.

I'm trying to have a way where any undefined accessorFn is always placed at the end of the table, irrespective of the direction being sorted.

Your minimal, reproducible example

N/A

Steps to reproduce

Create a standard table with sorting and try to have the undefined cells places last at the end of the table rows when sorting.

Expected behavior

Have all undefined values in cells places at the end of the list irrespective of sort direction

How often does this bug happen?

No response

Screenshots or Videos

No response

Platform

Windows

react-table version

8.1.4

TypeScript version

4.7.4

Additional context

No response

Terms & Code of Conduct

• I agree to follow this project's Code of Conduct
• I understand that if my bug cannot be reliable reproduced in a debuggable environment, it will probably not be fixed and this issue may even be closed.

[tannerlinsley]

I think what you are looking for is sortUndefined: 1 (https://tanstack.com/table/v8/docs/api/features/sorting#sortundefined)

[baba43]

@tannerlinsley thanks for your reply. It took me some time to figure out why my custom sorting is not working.
However, I still do not understand how to achieve what I want:

I have percentage data that reaches from negative to positive values. If a value is missing, this item should never be on top of the sorting (since I do not know if it should be there). When setting sortUndefined to 1 or -1 it only works for either ascending or descending sorting, but never for both.

I think what I would need is sortUndefined: true , causing the undefined values to get passed to my sorting function so that I have control over sorting my self. Or this should be built-in.

Or am I doing something wrong at all?

[nichita-pasecinic]

I have similar issue

[LipatovAlexander]

Me too

[LipatovAlexander]

Okay, I was able to do this. You should set sortUndefined: false to get your undefined values passed to your sorting function. Following sorting function will always put undefined values at the bottom.

    (a: Row<ITableDataRow>, b: Row<ITableDataRow>, column: string): number => {
      const aValue = a.getValue<number | undefined>(column);
      const bValue = b.getValue<number | undefined>(column);

      if (aValue === undefined && bValue === undefined) {
        return 0;
      }

      if (aValue === undefined) {
        return desc ? -1 : 1;
      }

      if (bValue === undefined) {
        return desc ? 1 : -1;
      }

      return aValue - bValue;
    }

desc - whether sorting is descending or not. For me it's as simple as const { desc } = tableState.sorting!.at(0)!; since my table is always sorted by some (and only one) column.

[nichita-pasecinic]

It is also possible to pass the getSortedRowModel prop with the fix of sorting function (without the need to modify the sortingFn at column level, simply use sortUndefined: 1 & getSortedRowModel)

Copy-paste it from table-core utils - https://github.com/TanStack/table/blob/main/packages/table-core/src/utils/getSortedRowModel.ts remove the inversion of the undefined sorted values

It was introduced in this commit. It is not a big change

[clickblipclick]

This is a bit of a blocker for us too. Even passing sortDesc to the sorting function would potentially help. In fact, in our use-case, we want (almost) all falsey values to always stay at the bottom of the sort order for certain columns. A way to achieve this would be very helpful.