ソート可能テーブル

<table class="d05-02-06-tbl">
          <thead><tr>
            <th data-key="name" data-type="str">商品 <span class="d05-02-06-ar"></span></th>
            <th data-key="price" data-type="num">価格 <span class="d05-02-06-ar"></span></th>
            <th data-key="sales" data-type="num">販売数 <span class="d05-02-06-ar"></span></th>
          </tr></thead>
          <tbody>
            <tr><td>プランA</td><td data-v="980">¥980</td><td data-v="120">120</td></tr>
            <tr><td>プランB</td><td data-v="2980">¥2,980</td><td data-v="48">48</td></tr>
            <tr><td>プランC</td><td data-v="480">¥480</td><td data-v="310">310</td></tr>
            <tr><td>プランD</td><td data-v="1980">¥1,980</td><td data-v="76">76</td></tr>
          </tbody>
        </table>

.d05-02-06-tbl{border-collapse:collapse;width:100%;font-size:11px}
        .d05-02-06-tbl th,.d05-02-06-tbl td{border:1px solid #e5e7eb;padding:7px 8px;text-align:left}
        .d05-02-06-tbl th{background:#f8fafc;cursor:pointer;user-select:none;color:#374151;font-weight:700;white-space:nowrap}
        .d05-02-06-tbl th:hover{background:#eef2ff}
        .d05-02-06-ar{font-size:9px;color:#6366f1}
        .d05-02-06-tbl td:not(:first-child){text-align:right}

(function(){
        var root=document.getElementById('item-05-02-06');
        var tbl=root.querySelector('.d05-02-06-tbl'),tb=tbl.querySelector('tbody');
        var dir={};
        tbl.querySelectorAll('th').forEach(function(th,i){
          th.addEventListener('click',function(){
            var type=th.dataset.type,asc=!dir[i];dir={};dir[i]=asc;
            tbl.querySelectorAll('.d05-02-06-ar').forEach(function(a){a.textContent='';});
            th.querySelector('.d05-02-06-ar').textContent=asc?'▲':'▼';
            var rows=[].slice.call(tb.querySelectorAll('tr'));
            rows.sort(function(a,b){
              var x=a.children[i],y=b.children[i];
              if(type==='num'){x=+x.dataset.v;y=+y.dataset.v;return asc?x-y:y-x;}
              x=x.textContent;y=y.textContent;return asc?x.localeCompare(y,'ja'):y.localeCompare(x,'ja');
            });
            rows.forEach(function(r){tb.appendChild(r);});
          });
        });
      })();