JSFiddle - React, Tailwind, and code Playground

by suman bogati

HTML

<table id="lake" border="1">
  <thead><tr><th>Date</th><th>Average Depth</th></tr></thead>
  <tbody></tbody>
</table>

JavaScript

var lakeData = [
{
    "Month": "1959-01",
    "LakeErieLevels": 12.296
},
{
    "Month": "1959-02",
    "LakeErieLevels": 13.131
},
{
    "Month": "1959-03",
    "LakeErieLevels": 13.966
},
{
    "Month": "1959-04",
    "LakeErieLevels": 15.028
},
{
    "Month": "1959-05",
    "LakeErieLevels": 15.844
},
{
    "Month": "1959-06",
    "LakeErieLevels": 15.769
},
{
    "Month": "1959-07",
    "LakeErieLevels": 15.237
},
{
    "Month": "1959-08",
    "LakeErieLevels": 14.801
},
{
    "Month": "1959-09",
    "LakeErieLevels": 14.137
},
{
    "Month": "1959-10",
    "LakeErieLevels": 13.89
},
{
    "Month": "1959-11",
    "LakeErieLevels": 13.416
},
{
    "Month": "1959-12",
    "LakeErieLevels": 13.871
},
{
    "Month": "1960-01",
    "LakeErieLevels": 14.478
},
{
    "Month": "1960-02",
    "LakeErieLevels": 14.725
},
{
    "Month": "1960-03",
    "LakeErieLevels": 14.763
},
{
    "Month": "1960-04",
    "LakeErieLevels": 15.806
},
{
    "Month": "1960-05",
    "LakeErieLevels": 16.565
},
{
    "Month": "1960-06",
    "LakeErieLevels": 17.097
},
{
    "Month": "1960-07",
    "LakeErieLevels": 17.306
},
{
    "Month": "1960-08",
    "LakeErieLevels": 17.211
},
{
   "Month": "1960-09",
   "LakeErieLevels": 16.717
},
{
   "Month": "1960-10",
   "LakeErieLevels": 15.787
},
{
   "Month": "1960-11",
   "LakeErieLevels": 14.801
},
{
   "Month": "1960-12",
   "LakeErieLevels": 14.231
}];

/** Sorting the data in asscending  by comparing month **/
function inOrderAsc(a, b){
  return a.Month == b.Month ? 0 : +(a.Month > b.Month) || -1;
}

/** Sorting the data in descending by comparing month **/
function inOrderDesc(a, b){
  return a.Month == b.Month ? 0 : +(a.Month < b.Month) || -1;
}

function accending(objs){
    return objs.sort(inOrderAsc);
 }

function descending(objs){
    return objs.sort(inOrderDesc);
}

/**Attach event, on which the sort action will be performed **/
document.onkeydown = initEvent;
function initEvent(e) {
    e = e || window.event;
    if (e.keyCode...