T
TanStack•7mo ago
extended-salmon

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

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. 😊
No description
2 Replies
other-emerald
other-emerald•7mo ago
Checkout the sorting example on the docs: https://tanstack.com/table/v8/docs/framework/react/examples/sorting You can use a custom sort function if needed but it sounds like you just need something similar to the lastName column in that example: 
{
        accessorFn: (row) => row.lastName,
        id: 'lastName',
        cell: (info) => info.getValue(),
        header: () => <span>Last Name</span>,
        sortUndefined: 'last', //force undefined values to the end
        sortDescFirst: false, //first sort order will be ascending (nullable values can mess up auto detection of sort order)
},
{
        accessorFn: (row) => row.lastName,
        id: 'lastName',
        cell: (info) => info.getValue(),
        header: () => <span>Last Name</span>,
        sortUndefined: 'last', //force undefined values to the end
        sortDescFirst: false, //first sort order will be ascending (nullable values can mess up auto detection of sort order)
},
React TanStack Table Sorting Example | TanStack Table Docs
An example showing how to implement Sorting in React using TanStack Table.
flat-fuchsia
flat-fuchsia•7mo ago
There was an update a year ago where you can now use sortUndefined: 'last'

Did you find this page helpful?