Sorting custom data in a Vue data table, prioritizing null values to be displayed

Question

Sorting custom data in a Vue data table, prioritizing null values to be displayed

Currently, in my VueJS v-data-table setup, I am facing a challenge with custom sorting functions. The table has both numeric and string columns, with some null values scattered throughout. My goal is to sort the data by placing null values at the end of each column.

<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"
      />

I have implemented the following 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;
    }

While this works for sorting the numeric column (dp1), it does not perform as expected for the string column (dp2). Any suggestions on how to improve the functionality for sorting strings with null values?

javascript vue.js sorting vuetify.js

Answer 1

Answer №1

Your current sorting algorithm does not handle strings correctly.

Consider a scenario where the first string is null, and the second one is 'Jelly bean'. Instead of comparing null with 'Jelly bean', the algorithm is attempting to compare Infinity with 'Jelly bean'.

This comparison will result in false in both cases:

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

It would be more appropriate to implement a different sorting algorithm.

For instance, you can utilize an algorithm that has been modified 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 can test this sorting algorithm on CodePen by following this link: CodePen. It works effectively for sorting both strings and numbers.

Answer 2

Your current sorting algorithm does not handle strings correctly.

Consider a scenario where the first string is null, and the second one is 'Jelly bean'. Instead of comparing null with 'Jelly bean', the algorithm is attempting to compare Infinity with 'Jelly bean'.

This comparison will result in false in both cases:

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

It would be more appropriate to implement a different sorting algorithm.

For instance, you can utilize an algorithm that has been modified 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 can test this sorting algorithm on CodePen by following this link: CodePen. It works effectively for sorting both strings and numbers.

Sorting custom data in a Vue data table, prioritizing null values to be displayed

Answer №1

Similar questions

Operating on Javascript Objects with Randomized Keys

Switch up the linear gradient background periodically

Building web navigation using a combination of HTML, JavaScript, and PHP within a category, sub

Utilizing JQuery to extract data from a <select> dropdown menu

Is there a way to determine the orientation of an image in React-Native, whether it is horizontal or vertical

Unable to track user (Mineflayer - Node.js)

Generate a configuration file that allows for the reading and storage of modifications

The dynamic routing feature in React fails to function properly after the application is built or deployed

Function utilizing variables parsed by Angular directive

Issue with returning value from promise object in Next.js

I am encountering an issue with express-session where it is failing to assign an ID to

Encountering the issue of receiving an undefined value for Props in a

Tally each div individually and display the count within each div, instead of showing the total count across

Is there a way to make Phpstorm identify and acknowledge the usage of NextJS pages?

Maintain Vue Router Query Parameters Across Parent Components

Utilizing a drop-down menu in AngularJS to dynamically change a URL and fetch images

Error: TypeScript Knockout table failing to display data

Utilize Jquery to dynamically modify the content on a webpage

Deciphering the method to retain added text

Tips on creating a slow and gradual border animation that unfolds smoothly