CODEWITHSUNDEEP
reactjstanstacktanstack-tablereact-table-v8
Amin
Amin

Reputation: 1

Custom sorting function for TanStack Table not working as expected

I'm using TanStack Table with React and I'm trying to implement a custom sorting function for the "status" column. I want to sort the status in a specific order like so: 'none' -> 'single' -> 'complicated' ->'relationship' then repeat. I want it to cycle through this order

However, my current implementation is not working as expected (as I want). When I trigger the re-order, seems like i'm getting 'none' -> 'single' -> 'relationship' -> 'none' which is not the behavior i want bcs it does miss the complicated status

This is the function

const sortStatusFn: SortingFn<Person> = (rowA, rowB, _columnId) => {
  const statusA = rowA.original.status;
  const statusB = rowB.original.status;
  const statusOrder = ['single', 'complicated', 'relationship'];
  return statusOrder.indexOf(statusA) - statusOrder.indexOf(statusB);
};

You can experement with the example I have on StackBlitz: https://stackblitz.com/edit/tanstack-table-d8955d?file=src%2Fmain.tsx,src%2FmakeData.ts,src%2Findex.css&preset=node

Questions:

I apologize if I've missed any important details or if my question isn't clear - this is my first time posting on Stack Overflow, and I appreciate your patience and guidance.

Upvotes: 0

Views: 840

Answers (1)

jamesTobey
jamesTobey

Reputation: 50

The React Table documentation outlines the type definition for ColumnSort:

export type ColumnSort = {
  id: string
  desc: boolean
}

Even if you pass a custom sort function that manually manipulates the values from 'none'->'single'->'relationship'->'none', what would the desc value be set to in the case that complicated is the value that we are currently sorting on? There would always be a discrepancy between what your sortingFn is keeping in state and what the table instance has in its state.

At least according to the API definition of sorting, what you are doing here isn't 'sorting' the rows. Thinking outside of this context, I can't think of any examples on the internet where a sorting button shuffles through a list of available values in a customized order, instead of ordering by some other criterion in ascending or descending order.

I would reconsider whether this is something that might be handled by using the filtering API. This seems like a misuse of the sorting API in react table.

Upvotes: 0

Related Questions