Merge branch 'main' of https://github.com/NHSDigital/prototype-gp-registration

Author: david-evans84-NHSD

app/views/reg-portal/reg-table-v2-yes-no-page-2.html

@@ -20,25 +20,72 @@ <h1 class="nhsuk-heading-xl">View patient details</h1>
 
 
           <table role="table" class="nhsuk-table-responsive">
-            <thead role="rowgroup" class="nhsuk-table__head">
+            <thead class="nhsuk-table__head">
               <tr role="row">
-                <th role="columnheader" class="" scope="col">
-                  Name
+              
+                <th role="columnheader" scope="col" class="govuk-table__header" aria-sort="none">
+                  <button type="button" data-index="0">Name<svg width="22" height="22" focusable="false" aria-hidden="true" role="img" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M8.1875 9.5L10.9609 3.95703L13.7344 9.5H8.1875Z" fill="currentColor"></path>
+                    <path d="M13.7344 12.0781L10.9609 17.6211L8.1875 12.0781H13.7344Z" fill="currentColor"></path>
+                    </svg>
+                  </button>
                 </th>
-                <th role="columnheader" class="" scope="col">
-                  Matched
+              
+                <th role="columnheader" scope="col" class="govuk-table__header" aria-sort="none">
+                  <button type="button" data-index="1">Matched<svg width="22" height="22" focusable="false" aria-hidden="true" role="img" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M8.1875 9.5L10.9609 3.95703L13.7344 9.5H8.1875Z" fill="currentColor"></path>
+                    <path d="M13.7344 12.0781L10.9609 17.6211L8.1875 12.0781H13.7344Z" fill="currentColor"></path>
+                    </svg>
+                  </button>
                 </th>
-                <th role="columnheader" class="" scope="col">
-                  Age
+              
+                <th role="columnheader" scope="col" class="govuk-table__header" aria-sort="none">
+                  <button type="button" data-index="2">Age<svg width="22" height="22" focusable="false" aria-hidden="true" role="img" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M8.1875 9.5L10.9609 3.95703L13.7344 9.5H8.1875Z" fill="currentColor"></path>
+                    <path d="M13.7344 12.0781L10.9609 17.6211L8.1875 12.0781H13.7344Z" fill="currentColor"></path>
+                    </svg>
+                  </button>
                 </th>
-                <th role="columnheader" class="" scope="col">
-                  In catchment
-                </th>
-                <th role="columnheader" class="" scope="col">
-                  
+              
+                <th role="columnheader" scope="col" class="govuk-table__header govuk-table__header--numeric" aria-sort="none">
+                  <button type="button" data-index="3">Catchment<svg width="22" height="22" focusable="false" aria-hidden="true" role="img" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M8.1875 9.5L10.9609 3.95703L13.7344 9.5H8.1875Z" fill="currentColor"></path>
+                    <path d="M13.7344 12.0781L10.9609 17.6211L8.1875 12.0781H13.7344Z" fill="currentColor"></path>
+                    </svg>
+                  </button>
                 </th>
+
+                <th role="columnheader" class="" scope="col"></th>
+              
               </tr>
             </thead>
+
+            <style>
+              .govuk-table__header {
+                padding: 10px 20px 10px 0;
+                text-align: left;
+                vertical-align: top;
+              }
+
+              [aria-sort] button, [aria-sort] button:hover {
+                align-items: center;
+                background-color: initial;
+                border-width: 0;
+                box-shadow: 0 0 0 0;
+                color: #005ea5;
+                cursor: pointer;
+                display: inline-flex;
+                font-family: inherit;
+                font-size: inherit;
+                font-size: 1em;
+                font-weight: inherit;
+                margin: 0;
+                padding: 0;
+                position: relative;
+                text-align: inherit;
+              }
+            </style>
+
             <tbody class="nhsuk-table__body">
               <tr role="row" class="nhsuk-table__row">
                 <td role="cell" class="nhsuk-table__cell">