<div class="container py-5">
  <table class="table table-hover bssort-table">
    <thead>
      <tr>
        <th class="bssort-col" data-key="name" data-type="text">Customer <span class="bssort-arrow"></span></th>
        <th class="bssort-col" data-key="orders" data-type="num">Orders <span class="bssort-arrow"></span></th>
        <th class="bssort-col" data-key="total" data-type="num">Total spent <span class="bssort-arrow"></span></th>
        <th class="bssort-col" data-key="joined" data-type="date">Joined <span class="bssort-arrow"></span></th>
      </tr>
    </thead>
    <tbody id="bssortBody">
      <tr data-name="Ada Lovelace" data-orders="12" data-total="1240" data-joined="2024-03-14"><td>Ada Lovelace</td><td>12</td><td>$1,240</td><td>2024-03-14</td></tr>
      <tr data-name="Grace Hopper" data-orders="4" data-total="380" data-joined="2025-01-02"><td>Grace Hopper</td><td>4</td><td>$380</td><td>2025-01-02</td></tr>
      <tr data-name="Alan Turing" data-orders="27" data-total="3120" data-joined="2023-08-30"><td>Alan Turing</td><td>27</td><td>$3,120</td><td>2023-08-30</td></tr>
      <tr data-name="Katherine Johnson" data-orders="9" data-total="905" data-joined="2024-11-19"><td>Katherine Johnson</td><td>9</td><td>$905</td><td>2024-11-19</td></tr>
    </tbody>
  </table>
</div>

.bssort-col { cursor: pointer; user-select: none; }
.bssort-col:hover { color: #6366f1; }
.bssort-arrow { font-size: 10px; opacity: .4; }
.bssort-col.bssort-active .bssort-arrow { opacity: 1; color: #6366f1; }

const headers = document.querySelectorAll('.bssort-col');
const body = document.getElementById('bssortBody');
let sortKey = null;
let ascending = true;

const GETTERS = {
  text: row => row.dataset.name.toLowerCase(),
  num:  (row, key) => Number(row.dataset[key]),
  date: row => new Date(row.dataset.joined).getTime(),
};

headers.forEach(th => {
  th.addEventListener('click', () => {
    const key = th.dataset.key;
    ascending = sortKey === key ? !ascending : true;
    sortKey = key;

    headers.forEach(h => { h.classList.remove('bssort-active'); h.querySelector('.bssort-arrow').textContent = ''; });
    th.classList.add('bssort-active');
    th.querySelector('.bssort-arrow').textContent = ascending ? '▲' : '▼';

    const type = th.dataset.type;
    const rows = Array.from(body.children);
    rows.sort((a, b) => {
      const va = GETTERS[type](a, key);
      const vb = GETTERS[type](b, key);
      const cmp = va < vb ? -1 : va > vb ? 1 : 0;
      return ascending ? cmp : -cmp;
    });
    rows.forEach(row => body.appendChild(row));
  });
});