How hard would it be to add a sort to this custom liquid code?

[DavidBeuy]

<table>
  <tr class="label">
    <th>Model</th>
    <th>Rod Pieces</th>
    <th>Rod Length</th>
    <th>Line Rating</th>
    <th>Price</th>
    <th>Buy</th>
  </tr>
  {% for product in collection.products %}
  <tr>
    <td data-label="Model">{{ product.metafields.custom.series }}</td>
    <td data-label="Rod Pieces">{{ product.metafields.custom.rod_pieces }}</td>
    <td data-label="Rod Length">{{ product.metafields.custom.rod_length }}</td>
    <td data-label="Line Weight">{{ product.metafields.custom.line_weight }}</td>
    <td data-label="Price">{{ product.price | money_with_currency }}</td>
    <td>
      {% if product.variants.size > 0 %}
        <a class="checkOutButton" href="/products/{{product.handle}}">View product</a>
      {% endif %}
    </td>
  </tr>
{% endfor %}
</table>

Im not entirely sure how I would make this table sortable. So for instance I'd want to add a toggle so I could sort by Length shortest to longest or Lineweight from heaviest to lightest. Is that an easy fix or add on? Still really new to coding and trying to wrap my brain around liquid. Any help or direction would be much appreciated! Thanks.