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.