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?

Alexander Shkirkov · Accepted Answer · 2022-01-03 06:13:19Z

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.

Collectives™ on Stack Overflow

custom sorting v-data-table with null values last

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related