Table with scroll

A basic table that enables scrolling when it doesn't fit horizontally.

Rendered with

{% load sample_ui %}

<div class="overflow-auto">
  <table class="table">
    <thead>
      <tr>
        <th scope="col">#</th>
        <th scope="col">Name</th>
        <th scope="col">Title</th>
        <th scope="col">View</th>
      </tr>
    </thead>
    <tbody>
      {% sample_urls as samples %}
      {% for name, title in samples %}
        {% with url_name='sample_ui:'|add:name %}
          <tr>
            <th scope="row">{{ forloop.counter }}</th>
            <td class="text-nowrap">{{ name }}</td>
            <td>{{ title }}</td>
            <td>
              <a href="{% url url_name %}"><i class="bi bi-eye-fill"></i></a>
            </td>
          </tr>
        {% endwith %}
      {% endfor %}
    </tbody>
  </table>
</div>