JSFiddle - React, Tailwind, and code Playground

table sort

by hronic

HTML

<table id="grid">
    <thead>
      <tr>
        <th data-type="number">Возраст</th>
        <th data-type="string">Имя</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>5</td>
        <td>Вася</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Петя</td>
      </tr>
      <tr>
        <td>12</td>
        <td>Женя</td>
      </tr>
      <tr>
        <td>9</td>
        <td>Маша</td>
      </tr>
      <tr>
        <td>1</td>
        <td>Илья</td>
      </tr>
    </tbody>
  </table>

CSS

th {
      cursor: pointer;
    }

    th:hover {
      background: yellow;
    }

JavaScript

var grid = document.getElementById('grid');
    grid.addEventListener('click',function(e){
      if(e.target.nodeName != 'TH') return
    fnSorted(e.target.cellIndex, e.target.dataset.type);
       
    })
    function fnSorted(numCell, type){
      var tbody = grid.getElementsByTagName('tbody')[0]
      var arrRows = [].slice.call(tbody.rows);
 
      if(type == 'number') {
        compare = function(rowA,rowB){ return rowA.cells[numCell].innerHTML - rowB.cells[numCell].innerHTML }
      }
      if(type == 'string'){
        compare = function(rowA,rowB){ return rowA.cells[numCell].textContent > rowB.cells[numCell].textContent }
      }
      
      arrRows.sort(compare)
      
      grid.removeChild(tbody);
      
      for(var i = 0; i < arrRows.length; i++) tbody.appendChild(arrRows[i]) 
      grid.appendChild(tbody)
      
      //console.log(arrRows)
    }