material-data-table

<form method="post" action="{% url 'po-bulk' %}">
  <material-data-table sticky-header class="max-h-[70vh]">
    <table up-target="table">
      <thead><tr>
        <th class="cell-select">
          <material-checkbox data-select-all aria-label="Select all"></material-checkbox>
        </th>
        <th aria-sort="{{ sort.number }}"><a href="?o=number" up-target="table">PO #</a></th>
        <th class="numeric"><a href="?o=total" up-target="table">Total</a></th>
      </tr></thead>
      <tbody>
        {% for po in page %}
        <tr data-row-link>
          <td class="cell-select">
            <material-checkbox name="selected" value="{{ po.pk }}"
                               aria-label="Select {{ po }}"></material-checkbox>
          </td>
          <td><a href="{{ po.get_absolute_url }}" up-layer="new">{{ po.number }}</a></td>
          <td class="numeric">{{ po.total }}</td>
        </tr>
        {% empty %}
        <tr><td class="empty" colspan="3">No purchase orders</td></tr>
        {% endfor %}
      </tbody>
    </table>
    <footer>{% include "pagination.html" %}</footer>
  </material-data-table>
  <button>Archive selected</button>  <!-- request.POST.getlist('selected') -->
</form>

<!-- v2: virtual rows / resize / reorder / pinned columns / groups / editing -->
<material-data-table virtual sticky-header class="max-h-[70vh]"
                     resizable reorderable sticky-start="2">
  <table>
    <thead><tr>
      <th>Order</th>
      <th data-hide-below="720">Date</th>  <!-- responsive: hidden in narrow containers,
                                               reachable via the per-row "…" fold-out -->
    </tr></thead>
    <tbody>
      <tr class="row-group{% if g.folded %} collapsed{% endif %}" data-group="{{ g.key }}">
        <td colspan="3">{{ g.title }} · {{ g.count }}</td>
        <td class="numeric">{{ g.total }}</td>  <!-- aggregates: server-side -->
      </tr>
      <tr>…
        <td class="numeric">
          <input class="cell-edit" name="qty-{{ item.pk }}" value="{{ item.qty }}">
        </td>
      </tr>
    </tbody>
  </table>
</material-data-table>

<script>
  table.addEventListener('materialSelectionChange', (e) => e.detail); // {values, count, allSelected}
  table.addEventListener('materialSort', (e) => e.detail);            // {column, direction} (client-side mode)
  table.addEventListener('materialColumnResize', (e) => e.detail);    // {column, width} — persist per user
  table.addEventListener('materialColumnReorder', (e) => e.detail);   // {column, from, to}
  table.addEventListener('materialGroupToggle', (e) => e.detail);     // {group, collapsed}
  table.addEventListener('materialCellEdit', (e) => e.detail);        // {name, value}
</script>