Add created by column

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

@@ -1611,6 +1611,16 @@ document.addEventListener('DOMContentLoaded', function() {
             // Even if the request is not deletable, we may need these empty strings for the td if the deletable column is displayed
             let modalTrigger = '';
 
+            let markupCreatorRow = '';
+
+            if (portfolioValue) {
+              markupCreatorRow = `
+                <td>
+                    <span class="text-wrap">${request.creator ? request.creator : ''}</span>
+                </td>
+              `
+            }
+
             // If the request is deletable, create modal body and insert it. This is true for both requests and portfolio requests pages
             if (request.is_deletable) {
               let modalHeading = '';
@@ -1634,7 +1644,7 @@ document.addEventListener('DOMContentLoaded', function() {
                   role="button" 
                   id="button-toggle-delete-domain-alert-${request.id}"
                   href="#toggle-delete-domain-alert-${request.id}"
-                  class="usa-button--unstyled text-no-underline late-loading-modal-trigger"
+                  class="usa-button usa-button--unstyled text-no-underline late-loading-modal-trigger"
                   aria-controls="toggle-delete-domain-alert-${request.id}"
                   data-open-modal
                 >
@@ -1707,7 +1717,7 @@ document.addEventListener('DOMContentLoaded', function() {
                   <div class="usa-accordion__heading">
                     <button
                       type="button"
-                      class="usa-button usa-button--unstyled usa-accordion__button usa-button--more-actions"
+                      class="usa-button usa-button--unstyled usa-button--with-icon usa-accordion__button usa-button--more-actions"
                       aria-expanded="false"
                       aria-controls="more-actions-${request.id}"
                     >
@@ -1737,7 +1747,6 @@ document.addEventListener('DOMContentLoaded', function() {
             }
 
 
-
             const row = document.createElement('tr');
             row.innerHTML = `
               <th scope="row" role="rowheader" data-label="Domain name">
@@ -1746,6 +1755,7 @@ document.addEventListener('DOMContentLoaded', function() {
               <td data-sort-value="${new Date(request.last_submitted_date).getTime()}" data-label="Date submitted">
                 ${submissionDate}
               </td>
+              ${markupCreatorRow}
               <td data-label="Status">
                 ${request.status}
               </td>

src/registrar/templates/includes/domain_requests_table.html

@@ -49,6 +49,9 @@
           <tr>
             <th data-sortable="requested_domain__name" scope="col" role="columnheader">Domain name</th>
             <th data-sortable="last_submitted_date" scope="col" role="columnheader">Submitted</th>
+            {% if portfolio %}
+              <th data-sortable="creator" scope="col" role="columnheader">Created by</th>
+            {% endif %}
             <th data-sortable="status" scope="col" role="columnheader">Status</th>
             <th scope="col" role="columnheader"><span class="usa-sr-only">Action</span></th>
             <!-- AJAX will conditionally add a th for delete actions -->

src/registrar/views/domain_requests_json.py

@@ -126,6 +126,7 @@ def serialize_domain_request(domain_request):
         "last_submitted_date": domain_request.last_submitted_date,
         "status": domain_request.get_status_display(),
         "created_at": format(domain_request.created_at, "c"),  # Serialize to ISO 8601
+        "creator": domain_request.creator.email,
         "id": domain_request.id,
         "is_deletable": is_deletable,
         "action_url": action_url,