How to write custom sorting function?

[rupom96]

Currently I couldn't find any example on how to write and what to return in the "sortingFn" property of a column (https://www.material-react-table.com/docs/guides/sorting#change-sorting-function-per-column).

like for now, I need the sorting function where the asc and desc will work on only non empty cells. Like, if rowA.getValue(columnId) == "", then return -1.... means no matter what(asc or desc), the empty cells (empty strings) will be always in the last. Can anyone help how to write it in "sortingFn"? Also how to know in sortingFn that currently which mode is activated?(mode : desc or asc or no sort?)

[KevinVandy]

I should probably add more to the sorting docs. You might not actually need a custom sortingFn, because there are a few props or column options that you can use instead. Screenshot from Column Options Docs

You might want to just try out changing the sortUndefined value.

If you do need to write a custom sortingFn, there's more info in the TanStack Sorting Docs.

[rupom96]

Thank you so much for your prompt reply and for your precious time.

But "sortUndefined: false/1/-1" doesn't work.... It feels like if there was a column option named "sortEmptyString" xD, i guess that would have worked.... Means, my values are not undefined, they are defined, which is empty string (""). And I don't want them in upper row position when I am clicking to sort for ascending (in descending, they are in lower row position anyway, cz: "z">"y">"a">"" in descending).

Can you assist me further regarding this? Also applied column custom sorting function, not working either(actually partially working,because if I change 1 to -1 and -1 to 1, it is actually getting sorted in descending order when the mode is in ascending and vice versa, but the empty strings are NOT staying in the lower part of the table in ascending):

sortingFn: (rowA, rowB, columnId) =>

( rowA.getValue(columnId) ? (rowA.getValue(columnId)> rowB.getValue(columnId) ? 1 : -1) : -1)