<script>
  const sortHeader = [
    {id: 1, sort: "select", trend: "desc", name: "#"},
    {id: 2, sort: "name", trend: "asc", name: "Name"},
    {id: 3, sort: "comment", trend: "asc", name: "Comment"},
  ];
  let activeHeaderId = null;
  let activeHeaderSorting = false;

  function handler_click({target: t}) {
    if(!t.matches('th')) return;
    const id = +t.dataset.id;
    if(activeHeaderId !== id) {
      activeHeaderId = id;
      const h = sortHeader.find(h => h.id === id);
      activeHeaderSorting = h.trend === 'desc' ? true : false;
    }
    else {
      activeHeaderSorting = !activeHeaderSorting;
    }
  }
</script>

<tr on:click={handler_click}>
  {#each sortHeader as el}
    <th
      data-id={el.id}
      class:active={activeHeaderId === el.id}
      class:desc={activeHeaderId === el.id && activeHeaderSorting}
      class:asc={activeHeaderId === el.id && !activeHeaderSorting}
    >{el.name}</th>
  {/each}
</tr>

<pre>
{JSON.stringify(sortHeader, null, 2)}
</pre>

<style>
  th {
    border: solid 1px gray;
    padding: .3rem;
    -moz-user-select: none;
    user-select: none;
  }

  th {
    cursor: pointer;
  }

  th:after {
    content: "\25BE";
    position: relative;
    float: right;
    bottom: 1px;
    opacity: 0;
  }

  th.active.desc:after {
    content: "\25BE";
    opacity: 1;
  }

  th.active.asc:after {
    content: "\25B4";
    opacity: 1;
  }

</style>