Sortable Header

<div class="nuda-tbl-sort">
  <table class="nuda-tbl-sort__table">
    <thead>
      <tr>
        <th class="nuda-tbl-sort__th nuda-tbl-sort__th--asc">
          Name <span class="nuda-tbl-sort__icon">↑</span>
        </th>
        <th class="nuda-tbl-sort__th">
          Score <span class="nuda-tbl-sort__icon nuda-tbl-sort__icon--idle">⇅</span>
        </th>
        <th class="nuda-tbl-sort__th">
          Date <span class="nuda-tbl-sort__icon nuda-tbl-sort__icon--idle">⇅</span>
        </th>
      </tr>
    </thead>
    <tbody>
      <tr class="nuda-tbl-sort__row">
        <td class="nuda-tbl-sort__td">Alice</td>
        <td class="nuda-tbl-sort__td">98</td>
        <td class="nuda-tbl-sort__td">2024-01</td>
      </tr>
      <tr class="nuda-tbl-sort__row">
        <td class="nuda-tbl-sort__td">Bob</td>
        <td class="nuda-tbl-sort__td">74</td>
        <td class="nuda-tbl-sort__td">2024-03</td>
      </tr>
      <tr class="nuda-tbl-sort__row">
        <td class="nuda-tbl-sort__td">Carol</td>
        <td class="nuda-tbl-sort__td">87</td>
        <td class="nuda-tbl-sort__td">2024-02</td>
      </tr>
    </tbody>
  </table>
</div>

.nuda-tbl-sort {
  width: 100%;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.1);
  overflow: hidden;
  background: #141414;
  animation: _nuda-tblrise .35s ease-out;
}

.nuda-tbl-sort__table {
  width: 100%;
  border-collapse: collapse;
  font-size: .78rem;
}

.nuda-tbl-sort__th {
  padding: .5rem .75rem;
  text-align: left;
  color: #cfcfcf;
  font-weight: 600;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  background: #1a1a1a;
  border-bottom: 1px solid rgba(255,255,255,.1);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition: color .15s;
}

.nuda-tbl-sort__th:hover {
  color: #e4ff54;
}

.nuda-tbl-sort__th--asc {
  color: #e4ff54;
}

.nuda-tbl-sort__icon {
  margin-left: 4px;
  font-size: .7rem;
  opacity: .9;
}

.nuda-tbl-sort__icon--idle {
  opacity: .35;
}

.nuda-tbl-sort__td {
  padding: .45rem .75rem;
  color: #cfcfcf;
  border-bottom: 1px solid rgba(255,255,255,.05);
}

.nuda-tbl-sort__row:last-child .nuda-tbl-sort__td {
  border-bottom: none;
}

@keyframes _nuda-tblrise {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion:reduce) {
  .nuda-tbl-sort {
    animation: none;
  }
}