feat: add expandable rows and accordion details to grid and table views

src/app/shared/components/pageDataList/page-data-list-table-view.component.html

@@ -20,6 +20,9 @@
 
     <ng-template #header let-columns>
       <tr>
+        @if (expandable) {
+          <th style="width: 3rem"></th>
+        }
         @if (showIndex) {
           <th [style]="{ width: '3rem', minWidth: '3rem' }"></th>
         }
@@ -35,14 +38,24 @@
         @if (actionsCount()) {
           <th type="th" [style]="{ width: `${actionsCount() * 2 + (actionsCount() - 1) * 0.25}rem` }"></th>
         }
-        @if (expandable) {
-          <th style="width: 3rem"></th>
-        }
       </tr>
     </ng-template>
 
     <ng-template #body let-item let-i="rowIndex" let-expanded="expanded">
       <tr>
+        @if (expandable) {
+          <td>
+            <p-button
+              type="button"
+              pRipple
+              [pRowToggler]="item"
+              [text]="true"
+              [rounded]="true"
+              [plain]="true"
+              [icon]="expanded ? 'pi pi-chevron-down' : 'pi pi-chevron-left'"
+            />
+          </td>
+        }
         @if (showIndex) {
           <td>
             {{ i * (currentPage || 1) + 1 }}
@@ -65,20 +78,6 @@
             (details)="details(item)"
           ></td>
         }
-
-        @if (expandable) {
-          <td>
-            <p-button
-              type="button"
-              pRipple
-              [pRowToggler]="item"
-              [text]="true"
-              [rounded]="true"
-              [plain]="true"
-              [icon]="expanded ? 'pi pi-chevron-down' : 'pi pi-chevron-left'"
-            />
-          </td>
-        }
       </tr>
     </ng-template>