Issue: Sorting null values to the bottom in @tanstack-table

[Vittor-Emanoel]

Hello everyone! I hope you're all doing well.

I've been struggling with a sorting issue in @tanstack-table for a few days and haven't found a solution yet.

I'm sorting a table on the client side, but when some users have null names and I apply descending (desc) sorting, these null values appear at the top of the list. Ideally, I would like them to always be placed at the bottom, regardless of the sorting direction, so they don't interfere with the natural order of the data.

I've tried the solution mentioned in this issue: #4289, but unfortunately, it didn't work for me.

Is there a recommended way to ensure that null or undefined values always appear at the end of the list when sorting?

Any help would be greatly appreciated! Thanks in advance. 😊

[omerfarukgurbuz]

For TanStack Table v8, return undefined from the accessor when the name is missing and set sortUndefined: 'last':

{
  id: 'name',
  header: 'Name',
  accessorFn: row => row.name ?? undefined,
  sortingFn: 'text',
  sortUndefined: 'last',
}

The accessor leaves the original data alone and keeps empty strings intact. The v8 sorted row model checks for undefined specifically and puts it last before applying the sort direction. In a v8.21.3 test, both null and undefined names landed at the bottom in ascending and descending order.

One edge case in v8.21.3: if two names are missing, the same branch returns before a secondary sort can run. If you need to sort the missing rows by another column, prepend a hidden sort column with accessorFn: row => Number(row.name == null) and desc: false while the name sort is active, then use row.name ?? '' for the name accessor. The secondary sort can then break ties within the missing-name group.