things so far

src/registrar/admin.py

@@ -3208,12 +3208,17 @@ class PortfolioAdmin(ListHeaderAdmin):
         obj: Portfolio = self.get_object(request, object_id)
         extra_context = extra_context or {}
         extra_context["skip_additional_contact_info"] = True
+        sort_by = request.GET.get('sort', 'requested_domain__name')
+        order = request.GET.get('order', 'asc')
+
+        order_prefix = '-' if order == 'desc' else ''
+        domain_requests_order_by = [f"{order_prefix}{sort_by}"]
 
         if obj:
             extra_context["members"] = self.get_user_portfolio_permission_non_admins(obj)
             extra_context["admins"] = self.get_user_portfolio_permission_admins(obj)
             extra_context["domains"] = obj.get_domains(order_by=["domain__name"])
-            extra_context["domain_requests"] = obj.get_domain_requests(order_by=["requested_domain__name"])
+            extra_context["domain_requests"] = obj.get_domain_requests(order_by=domain_requests_order_by)
         return super().change_view(request, object_id, form_url, extra_context)
 
     def save_model(self, request, obj, form, change):

src/registrar/assets/js/get-gov-admin.js

@@ -1035,3 +1035,19 @@ document.addEventListener('DOMContentLoaded', function() {
         };
     }
 })();
+
+(function sortTable(sortBy, order,event) {
+    event.preventDefault()
+    const xhr = new XMLHttpRequest();
+    xhr.open('GET', `?sort=${sortBy}&order=${order}`, true);
+    xhr.onreadystatechange = function() {
+        if (xhr.readyState === 4 && xhr.status === 200) {
+            // Parse the response and update only the table body or container
+            const parser = new DOMParser();
+            const doc = parser.parseFromString(xhr.responseText, 'text/html');
+            const sortedContent = doc.querySelector('#table-content').innerHTML;
+            document.querySelector('#table-content').innerHTML = sortedContent;
+        }
+    };
+    xhr.send();
+})();

src/registrar/templates/django/admin/includes/portfolio/portfolio_domain_requests_table.html

@@ -5,11 +5,19 @@
 <table>
     <thead>
         <tr>
-            <th>Name</th>
+            <th data-sortable="requested_domain__name">
-            <th>Status</th>
+                <a href="#" onclick="sortTable('requested_domain__name', '{% if request.GET.order == 'asc' %}desc{% else %}asc{% endif %}'); return false;">
+                    Name
+                </a>
+            </th>
+            <th data-sortable="requested_domain__status">
+                <a href="#" onclick="sortTable('status', '{% if request.GET.order == 'asc' %}desc{% else %}asc{% endif %}'); return false;">
+                    Status
+                </a>
+            </th>
         </tr>
     </thead>
-    <tbody>
+    <tbody id="table-content">
         {% for domain_request in domain_requests %}
         {% url 'admin:registrar_domainrequest_change' domain_request.pk as url %}
         <tr>

src/registrar/templates/django/admin/includes/portfolio/portfolio_domains_table.html

@@ -5,8 +5,12 @@
 <table>
     <thead>
         <tr>
-            <th>Name</th>
+            <th data-sortable="domain__name">
-            <th>State</th>
+                <a href="?sort=name&order={% if request.GET.order == 'asc' %}desc{% else %}asc{% endif %}">Name</a>
+            </th>
+            <th data-sortable="domain__state">
+                <a href="?sort=state&order={% if request.GET.order == 'asc' %}desc{% else %}asc{% endif %}">State</a>
+            </th>
         </tr>
     </thead>
     <tbody>