Refactor HTMX table template

netbox/templates/generic/object_list.html

@@ -96,10 +96,7 @@
         {# Object table #}
         <div class="card">
           <div class="card-body" id="object_list">
-            <div class="table-responsive">
-              {% render_table table 'inc/table_htmx.html' %}
-            </div>
-            {% include 'inc/paginator_htmx.html' with paginator=table.paginator page=table.page %}
+            {% include 'htmx/table.html' %}
           </div>
         </div>
 

netbox/templates/htmx/table.html

@@ -1,4 +1,4 @@
-{# Render an HTML table element #}
+{# Render an HTMX-enabled table with paginator #}
 {% load render_table from django_tables2 %}
 
 {% render_table table 'inc/table_htmx.html' %}

netbox/templates/inc/table_htmx.html

@@ -1,47 +1,49 @@
 {% load django_tables2 %}
 
-<table{% if table.attrs %} {{ table.attrs.as_html }}{% endif %}>
-  {% if table.show_header %}
-    <thead>
-      <tr>
-        {% for column in table.columns %}
-          {% if column.orderable %}
-            <th {{ column.attrs.th.as_html }}>
-              <a href="#"
-                 hx-get="{% querystring table.prefixed_order_by_field=column.order_by_alias.next %}"
-                 hx-target="#object_list"
-                 hx-push-url="true"
-              >{{ column.header }}</a>
-            </th>
-          {% else %}
-            <th {{ column.attrs.th.as_html }}>{{ column.header }}</th>
-          {% endif %}
-        {% endfor %}
-      </tr>
-    </thead>
-  {% endif %}
-  <tbody>
-    {% for row in table.page.object_list|default:table.rows %}
-      <tr {{ row.attrs.as_html }}>
-        {% for column, cell in row.items %}
-          <td {{ column.attrs.td.as_html }}>{{ cell }}</td>
-        {% endfor %}
-      </tr>
-    {% empty %}
-      {% if table.empty_text %}
+<div class="table-responsive">
+  <table{% if table.attrs %} {{ table.attrs.as_html }}{% endif %}>
+    {% if table.show_header %}
+      <thead>
         <tr>
-          <td colspan="{{ table.columns|length }}" class="text-center text-muted">&mdash; {{ table.empty_text }} &mdash;</td>
+          {% for column in table.columns %}
+            {% if column.orderable %}
+              <th {{ column.attrs.th.as_html }}>
+                <a href="#"
+                   hx-get="{% querystring table.prefixed_order_by_field=column.order_by_alias.next %}"
+                   hx-target="#object_list"
+                   hx-push-url="true"
+                >{{ column.header }}</a>
+              </th>
+            {% else %}
+              <th {{ column.attrs.th.as_html }}>{{ column.header }}</th>
+            {% endif %}
+          {% endfor %}
         </tr>
-      {% endif %}
-    {% endfor %}
-  </tbody>
-  {% if table.has_footer %}
-    <tfoot>
-      <tr>
-        {% for column in table.columns %}
-          <td>{{ column.footer }}</td>
-        {% endfor %}
-      </tr>
-    </tfoot>
-  {% endif %}
-</table>
+      </thead>
+    {% endif %}
+    <tbody>
+      {% for row in table.page.object_list|default:table.rows %}
+        <tr {{ row.attrs.as_html }}>
+          {% for column, cell in row.items %}
+            <td {{ column.attrs.td.as_html }}>{{ cell }}</td>
+          {% endfor %}
+        </tr>
+      {% empty %}
+        {% if table.empty_text %}
+          <tr>
+            <td colspan="{{ table.columns|length }}" class="text-center text-muted">&mdash; {{ table.empty_text }} &mdash;</td>
+          </tr>
+        {% endif %}
+      {% endfor %}
+    </tbody>
+    {% if table.has_footer %}
+      <tfoot>
+        <tr>
+          {% for column in table.columns %}
+            <td>{{ column.footer }}</td>
+          {% endfor %}
+        </tr>
+      </tfoot>
+    {% endif %}
+  </table>
+</div>