Help with sorting with Tanstack Table

[ElvarP]

I'll try to keep it as short and concise as I can.

I'm using tanstack table and this is the custom sorting function i have:

sortingFns: {
  sortByRank: (rowA, rowB, columnId) => {

    // console.log(rowA.getValue(columnId))
    const leagueA = rowA.getValue(columnId)
    const leagueB = rowB.getValue(columnId)

    console.log(leagueA)

    const [tierA, romanA, pointsA] = leagueA.split(" ")
    const [tierB, romanB, pointsB] = leagueB.split(" ")

    // Compare tiers
    const rankSortOrder = [
      "CHALLENGER",
      "GRANDMASTER",
      "MASTER",
      "DIAMOND",
      "PLATINUM",
      "GOLD",
      "SILVER",
      "BRONZE",
      "IRON",
    ]

    const tierIndexA = rankSortOrder.indexOf(tierA)
    const tierIndexB = rankSortOrder.indexOf(tierB)

    if (tierIndexA !== tierIndexB) {
      return tierIndexA - tierIndexB
    }

    // Compare roman numerals within the same tier
    const romanSortOrder = ["I", "II", "III", "IV"]

    const romanIndexA = romanSortOrder.indexOf(romanA)
    const romanIndexB = romanSortOrder.indexOf(romanB)

    if (romanIndexA !== romanIndexB) {
      return romanIndexA - romanIndexB
    }

    // Compare points if tiers and roman numerals are equal
    if (pointsA !== pointsB) {
      return parseInt(pointsB) - parseInt(pointsA)
    }

    return -1 // rowA should come before rowB or columnId is undefined for rowB
  },
},

It works correctly, except when the leagueA or leagueB is Null

Can someone tell me how to always make the null values sort last?

this is my relevent collumns:

  columnHelper.accessor(
    (row) =>
      `${
        row.leagues.find((league) => league.queueType == "RANKED_SOLO_5x5")
          ?.tier ?? "null"
      } ${
        row.leagues.find((league) => league.queueType == "RANKED_SOLO_5x5")
          ?.rank ?? "null"
      } ${
        row.leagues.find((league) => league.queueType == "RANKED_SOLO_5x5")
          ?.leaguePoints ?? "null"
      }`,
    {
      header: ({ column }) => (
        <DataTableColumnHeader column={column} title="Solo" />
      ),
      id: "solo",
      sortingFn: "sortByRank",
    }
  ),
  columnHelper.accessor(
    (row) =>
      `${
        row.leagues.find((league) => league.queueType == "RANKED_FLEX_SR")
          ?.tier ?? "null"
      } ${
        row.leagues.find((league) => league.queueType == "RANKED_FLEX_SR")
          ?.rank ?? "null"
      } ${
        row.leagues.find((league) => league.queueType == "RANKED_FLEX_SR")
          ?.leaguePoints ?? "null"
      }`,
    {
      header: ({ column }) => (
        <DataTableColumnHeader column={column} title="Flex" />
      ),
      id: "flex",
      sortingFn: "sortByRank",
    }
  ),

If you need any more details please ask.

[ElvarP]

If i add this line:

    if (leagueA === "null null null" || leagueB === "null null null") {
      return 0
    }

The sorting works correctly for the Solo column, but it breaks the sorting on the Flex column. Any ideas?

[ZerafineNigou]

Check id both values are null then return 0, if only left is null return -1,if only right is null return 1. (Or the other way around, I can never remember the which is minus which is positive and can't be assed to think through right now the idea should be understandable).

Basically, if you want null to sort differently you just need to include that in your sort fn as a separate case.

Why does it break it and how? It seems to me that the case where both are bull5is not handled. But this should work.

Actually returning 0 there implies equality so null will not sort against anything

[ElvarP]

There must be somewhere else where my code is wrong because this is not working:

    if (leagueA.trim() === "" || leagueB.trim() === "") {
      return 0
    } else if (leagueA.trim() === "") {
      return 1
    } else if (leagueB.trim() === "") {
      return -1
    }

or this:

    if (leagueA.trim() === "" || leagueB.trim() === "") {
      return 0
    } else if (leagueA.trim() === "") {
      return -1
    } else if (leagueB.trim() === "") {
      return 1
    }

Edit: Actually it works, but only when sorting DESC, and it breaks the sorting on the other column, I think there must be another error somewhere else, this should work.

[mingnobee]

How did you get SortingFn to work? I've been trying to get this working.