custom sorting v-data-table with null values last

Question

I have a v-data-table in vueJS that contains some numeric columns and some string columns. In each column, some of the values are null. I am trying to create a custom sorting function that will place null values last. This is what I tried so far:

<v-data-table
        :headers="[
          { text: 'Name', value: 'name' },
          { text: 'Date of Birth', value: 'dateofbirth_fmt' },
          { text: 'Team', value: 'team_name' },
          {
            text: 'dp1 (string)',
            value: 'dp1',
          },
          {
            text: 'dp2 (Numeric),
            value: 'dp2',
          }
        ]"
        :items="filteredPlayersData"
        item-key="_id"
        class="elevation-1"
        :custom-sort="customSort"
      />

and this function

customSort(items, index, isDesc) {
      items.sort((a, b) => {
        if (!isDesc[0]) {
          return (a[index] != null ? a[index] : Infinity) >
            (b[index] != null ? b[index] : Infinity)
            ? 1
            : -1;
        } else {
          return (b[index] != null ? b[index] : -Infinity) >
            (a[index] != null ? a[index] : -Infinity)
            ? 1
            : -1;
        }
      });
      return items;
    }

It is working for this numeric column (dp1), but not for the string one (dp2). Any ideas how to get this work?

Answer 1

Your sorting algorithm is not working correctly for strings.

Imagine that your first string is null , and the second one is 'Jelly bean' . Instead of null value you are trying to compate Infinity with 'Jelly bean' .

This comparison will be false in both cases:

 let a = Infinity; let b = 'Jelly bean'; console.log(a > b); console.log(a < b);

It'd be better to use another sorting algorithm.

For example, I've adapted an algorithm from this post :

customSort(items, index, isDesc) {
  items.sort((a, b) => {
    if (a[index] === b[index]) { // equal items sort equally
      return 0;
    } else if (a[index] === null) { // nulls sort after anything else
      return 1;
    } else if (b[index] === null) {
      return -1;
    } else if (!isDesc[0]) { // otherwise, if we're ascending, lowest sorts first
      return a[index] < b[index] ? -1 : 1;
    } else { // if descending, highest sorts first
      return a[index] < b[index] ? 1 : -1;
    }
  });
  return items;
}

You may test this at CodePen . Works fine for both strings and numbers.