{% if headers and data and headers|length > 0 %}
<div class="overflow-auto">
  <table class="sortable-table">
    <thead>
      <tr>
        {% for header in headers %}
        <th scope="col">{{ header }} <span class="arrow-icon"</th>
        {% endfor %}
      </tr>
    </thead>
    <tbody>
      {% for row in data %}
      <tr>
        {% for value in row.values() %}
        <td>{{ value }}</td>
        {% endfor %}
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>
{% endif %}