Selection of rows now working

Hello all. I am trying to create a selectable, sortable table. Below is my code. I am able to get the table but
I am not able to select all rows with one click.
also, How can I make it sortable?

<script>
  const apiURL = "https://api.mocki.io/v1/0f83a2e7";
  const load = url => fetch(url).then(res => res.json());
</script>

{#await load(apiURL) then data}
   
<div class="data-table data-table-init card">
  <table>
    <thead>
      <tr>
        <th class="checkbox-cell">
          <label class="checkbox">
            <input type="checkbox"/>
            <i class="icon-checkbox"></i>
          </label>
        </th>
        <th class="label-cell">Pos</th>
        <th class="numeric-cell">id16</th>
        <th class="numeric-cell">timestap</th>
      </tr>
    </thead>
    <tbody>
			 {#each data.rows as row }
      <tr>
        <td class="checkbox-cell">
          <label class="checkbox">
            <input type="checkbox"/>
            <i class="icon-checkbox"></i>
          </label>
        </td>
        <td class="numeric-cell">{row.value.pos.x},{row.value.pos.y},{row.value.pos.z}</td>
        <td class="numeric-cell">{row.value.id16}</td>
        <td class="date-cell">{row.value.resultTime}</td>
      </tr>
			{/each}
    </tbody>
  </table>
</div>
{/await}