Closes: #9583 - Add column specific search field to tables

netbox/netbox/tables/tables.py

@@ -38,6 +38,7 @@ class BaseTable(tables.Table):
     :param user: Personalize table display for the given user (optional). Has no effect if AnonymousUser is passed.
     """
     exempt_columns = ()
+    filterset_form = None
 
     class Meta:
         attrs = {

netbox/netbox/views/generic/bulk_views.py

@@ -160,6 +160,12 @@ def get(self, request):
         # Render the objects table
         table = self.get_table(self.queryset, request, has_bulk_actions)
 
+        # Check for filterset_form on this view, if a form exists, apply to context and table, otherwise set to None
+        filterset_form = None
+        if hasattr(self, 'filterset_form') and self.filterset_form:
+            filterset_form = self.filterset_form(request.GET, label_suffix='')
+            table.filterset_form = filterset_form
+
         # If this is an HTMX request, return only the rendered table HTML
         if request.htmx:
             if request.htmx.target != 'object_list':
@@ -175,7 +181,7 @@ def get(self, request):
             'model': model,
             'table': table,
             'actions': actions,
-            'filter_form': self.filterset_form(request.GET, label_suffix='') if self.filterset_form else None,
+            'filter_form': filterset_form,
             'prerequisite_model': get_prerequisite_model(self.queryset),
             **self.get_extra_context(request),
         }

netbox/project-static/styles/custom/_misc.scss

@@ -28,3 +28,9 @@ span.color-label {
   visibility: hidden;
   opacity: 0;
 }
+
+// Override column filter form dropdown
+.column-filter {
+  position: static;
+  display: inline;
+}

netbox/templates/inc/table_controls_htmx.html

@@ -5,7 +5,7 @@
   <div class="col-auto d-print-none">
     <div class="input-group input-group-flat me-2 quicksearch">
       <input type="search" results="5" name="q" id="quicksearch" class="form-control px-2 py-1" placeholder="Quick search"
-        hx-get="{{ request.full_path }}" hx-target="#object_list" hx-trigger="keyup changed delay:500ms, search" />
+        hx-get="" hx-target="#object_list" hx-trigger="keyup changed delay:500ms, search" />
       <span class="input-group-text py-1">
         <a href="#" id="quicksearch_clear" class="d-none text-secondary"><i class="mdi mdi-close-circle"></i></a>
       </span>

netbox/templates/inc/table_header_filter_dropdown.html

@@ -0,0 +1,11 @@
+{% load form_helpers %}
+{% if form_field %}
+<div class="column-filter dropdown">
+    <a href="#" classs="btn dropdown-toggle" data-bs-toggle="dropdown" data-bs-auto-close="outside">
+        <i class="mdi mdi-filter-settings" style="font-size: 1.25rem;"> </i>
+    </a>
+    <div class="dropdown-menu">
+        {% render_field form_field table=table request=request %}
+    </div>
+</div>
+{% endif %}

netbox/templates/inc/table_htmx.html

@@ -1,4 +1,5 @@
 {% load django_tables2 %}
+{% load form_helpers %}
 <table{% if table.attrs %} {{ table.attrs.as_html }}{% endif %}>
   {% if table.show_header %}
     <thead>
@@ -16,14 +17,22 @@
                   ><i class="mdi mdi-close"></i></a>
                 </div>
               {% endif %}
+              {%  if table.filterset_form %}
+                {% include 'inc/table_header_filter_dropdown.html' with form_field=table.filterset_form|getfilterfield:column.name %}
+              {% endif %}
               <a href="#"
                  hx-get="{{ table.htmx_url }}{% querystring table.prefixed_order_by_field=column.order_by_alias.next %}"
                  hx-target="closest .htmx-container"
                  {% if not table.embedded %}hx-push-url="true"{% endif %}
               >{{ column.header }}</a>
             </th>
           {% else %}
-            <th {{ column.attrs.th.as_html }}>{{ column.header }}</th>
+            <th {{ column.attrs.th.as_html }}>
+              {%  if table.filterset_form %}
+                {% include 'inc/table_header_filter_dropdown.html' with form_field=table.filterset_form|getfilterfield:column.name %}
+              {% endif %}
+              {{ column.header }}
+            </th>
           {% endif %}
         {% endfor %}
       </tr>

netbox/utilities/templatetags/form_helpers.py

@@ -1,14 +1,17 @@
 from django import template
 
+
 __all__ = (
     'getfield',
+    'getfilterfield',
     'render_custom_fields',
     'render_errors',
     'render_field',
     'render_form',
     'widget_type',
 )
 
+from utilities.templatetags.helpers import querystring
 
 register = template.Library()
 
@@ -28,6 +31,15 @@ def getfield(form, fieldname):
         return None
 
 
+@register.filter()
+def getfilterfield(form, fieldname):
+    field = getfield(form, f'{fieldname}')
+    if field is not None:
+        return field
+    else:
+        return getfield(form, f'{fieldname}_id')
+
+
 @register.filter(name='widget_type')
 def widget_type(field):
     """
@@ -46,13 +58,33 @@ def widget_type(field):
 #
 
 @register.inclusion_tag('form_helpers/render_field.html')
-def render_field(field, bulk_nullable=False, label=None):
+def render_field(field, bulk_nullable=False, label=None, table=None, request=None):
     """
     Render a single form field from template
     """
+    url = ""
+
+    # Handle filter forms
+    if table:
+        # Build kwargs for querystring function
+        kwargs = {field.name: None}
+        # Build request url
+        if request and table.htmx_url:
+            url = table.htmx_url + querystring(request, **kwargs)
+        elif request:
+            url = querystring(request, **kwargs)
+        # Set HTMX args
+        if hasattr(field.field, 'widget'):
+            field.field.widget.attrs.update({
+                'hx-get': url if url else '#',
+                'hx-push-url': "true",
+                'hx-target': '#object_list',
+                'hx-trigger': 'hidden.bs.dropdown from:closest .dropdown'
+            })
+
     return {
         'field': field,
-        'label': label or field.label,
+        'label': label or field.label if not table else None,
         'bulk_nullable': bulk_nullable,
     }