How to sort an array on multiple columns using JavaScript ?

Last Updated : 30 Jun, 2020

The task is to sort the JavaScript array on multiple columns with the help of JavaScript. There are two approaches that are discussed below.

Approach 1: Combine the multiple sort operations by OR operator and comparing the strings. For comparing the string, we will use the localeCompare() method.

Example: This example implements the above approach. First sorting on four columns and then on the two columns.

<!DOCTYPE HTML> 
<html> 
  
<head> 
    <title> 
        How to sort an array on multiple  
        columns using JavaScript? 
    </title> 
</head> 
  
<body style="text-align:center;"> 
  
    <h1>GeeksForGeeks</h1> 
      
    <p id="GFG_UP"></p> 
      
    <button onclick="GFG_Fun();"> 
        Click Here 
    </button> 
      
    <p id="GFG_DOWN"></p> 
      
    <script> 
        var up = document.getElementById('GFG_UP'); 
        var down = document.getElementById('GFG_DOWN'); 
        var arr = [ 
            [1, 'GFG', 2, 'Geek'], 
            [3, 'g', 1, 'for'], 
            [2, 'portal', 0, 'Geeks'], 
        ]; 
        up.innerHTML = "Click on the button to sort " 
                + "the array on multiple columns on " 
                + "strings.< br > [" + arr[0]  
                + "] < br > [" + arr[1] + "] < br > ["  
                + arr[2] + "]"; 
  
        function GFG_Fun() { 
            arr.sort(function (a, b) { 
                return a[3].localeCompare(b[3])  
                        || a[1].localeCompare(b[1]); 
            }); 
  
            down.innerHTML = "[" + arr[0] + "]<br>["  
                    + arr[1] + "]<br>[" + arr[2] + "]"; 
        } 
    </script> 
</body> 
  
</html> 

Output:

Approach 2: If we sorting the elements on numbers then use the Comparison operators to compare the values. The idea is to first perform the operation on a single column and if the values are similar then move to the next column and do the same.

Example: This example implements the above approach.
First sorting on three columns and then on one column.

<!DOCTYPE HTML> 
<html> 
  
<head> 
    <title> 
        How to sort an array on multiple  
        columns using JavaScript? 
    </title> 
</head> 
  
<body style="text-align:center;"> 
  
    <h1>GeeksForGeeks</h1> 
  
    <p id="GFG_UP"></p> 
      
    <button onclick="GFG_Fun();"> 
        Click Here 
    </button> 
      
    <p id="GFG_DOWN"></p> 
      
    <script> 
        var up = document.getElementById('GFG_UP'); 
        var down = document.getElementById('GFG_DOWN'); 
        var arr = [ 
            [1, 'GFG', 2, 'Geek'], 
            [3, 'g', 0, 'for'], 
            [2, 'portal', 0, 'Geeks'], 
        ]; 
        up.innerHTML = "Click on the button to sort " 
                + "the array on multiple columns on " 
                + "strings.< br > [" + arr[0]  
                + "] < br > [" + arr[1]  
                + "] < br > [" + arr[2] + "]"; 
  
        function GFG_Fun() { 
            arr.sort(function (a, b) { 
                var o1 = a[2]; 
                var o2 = b[2]; 
                var p1 = a[0]; 
                var p2 = b[0]; 
                if (o1 < o2) return -1; 
                if (o1 > o2) return 1; 
                if (p1 < p2) return -1; 
                if (p1 > p2) return 1; 
                return 0; 
            }); 
  
            down.innerHTML = "[" + arr[0] + "]<br>["  
                    + arr[1] + "]<br>[" + arr[2] + "]"; 
        } 
    </script> 
</body> 
  
</html> 