JSFiddle - React, Tailwind, and code Playground

HTML

<div style="display:inline-block;width:40%;">
  <strong>Ascending:</strong>
  <pre id="asc"></pre>
</div>
<div style="display:inline-block;width:40%;">
  <strong>Descending:</strong>
  <pre id="des"></pre>
</div>

JavaScript

var arr = [
  ['ABC', 87, 'WHAT'],
  ['ABC', 34, 'ARE'],
  ['DEF', 13, 'YOU'],
  ['ABC', 18, 'DOING'],
  ['ABC', 34, 'DOING'],
  ['DEF', 24, 'TODAY'],
  ['ABA', 18, 'TODAY'],
  ['ABA', 11, 'TODAY']
];

function doSort(ascending) {
  ascending = typeof ascending == 'undefined' || ascending == true;
  return function(a, b) {
    var ret = a[0].localeCompare(b[0]) || a[1] - b[1];
    return ascending ? ret : -ret;
  };
}


// sort ascending
arr.sort(doSort());
document.querySelector('#asc').textContent = JSON.stringify(arr, null, 1);

// sort descending
arr.sort(doSort(false));
document.querySelector('#des').textContent = JSON.stringify(arr, null, 1);