JSFiddle - React, Tailwind, and code Playground

HTML

<p>列でなく行でソートしたいです。<br>
（鈴木の行をクリックすると、数学の列が左に、国語の列は右になってほしい。）</p>

<table>
     <thead>
          <tr>
               <th data-type="string">名前<span></span></th>
               <th data-type="integer">国語<span></span></th>
               <th data-type="integer">数学<span></span></th>               
          </tr>
     </thead>
     <tbody>
          <tr class="dothesort">
               <td>鈴木</td><td>12</td><td>9</td>
          </tr>
          <tr class="dothesort">
               <td>佐藤</td><td>25</td><td>89</td>
          </tr>
          <tr class="dothesort">
               <td>高橋</td><td>1</td><td>987</td>
          </tr>
          <tr class="dothesort">
               <td>山田</td><td>604</td><td>78</td>
          </tr>
     </tbody>
</table>

CSS

p {
  color: red;  
}
th {
  background: #ccc;
}
td {
  background: pink;
}
td:first-child {
  background: #ccc;
}

JavaScript

$(function(){

//並び替え順を設定
var sortOrder = 1; //1:昇順, -1:降順
//行をクリックしたら
     $('.dothesort').click(function(){

          var type = $(this).data('type');
          var col = $(this).index(); //0, 1 ...

          //行全体を取得
          var $rows = $('tbody > tr');

          //行を並び替え（点数で）
          $rows.sort(function(a,b){
               return compare(a, b, type)*sortOrder;

          var arrow.empty.append($rows);

          var arrow = sortOrder === 1 ? “→":"←";
          $(‘.dothesort > span').text('');
          $(this).find('span').text(arrow)
          //並び替え順を反転
          sortOrder *= -1;
     });

     function  compare(a, b, type, col){
               var  _a = $(a).find('td').eq(col).text() *1;
               var  _b = $(b).find('td')eq(col).text() *1;

               if(type == “string"){
                    if(_a < _b)
                         return -1;
                    } 
                    if(_a > _b){
                         return 1;
                    }
                    return 0;
          } else {
               _a *= 1;
               _b *= 1;
               return _a - _b
              }


     }

});