Improve admin tables

1 files changed, 37 insertions, 15 deletions

diff --git a/client/src/app/+admin/jobs/jobs-list/jobs-list.component.html b/client/src/app/+admin/jobs/jobs-list/jobs-list.component.html
index f1b14e5e3..87717d3dd 100644
--- a/client/src/app/+admin/jobs/jobs-list/jobs-list.component.html
+++ b/client/src/app/+admin/jobs/jobs-list/jobs-list.component.html
@@ -8,20 +8,42 @@
   </div>
 </div>
 
+<p-table
+  [value]="jobs" [lazy]="true" [paginator]="true" [totalRecords]="totalRecords" [rows]="rowsPerPage" dataKey="id"
+  sortField="createdAt" (onLazyLoad)="loadLazy($event)"
+>
+  <ng-template pTemplate="header">
+    <tr>
+      <th style="width: 27px"></th>
+      <th style="width: 60px">ID</th>
+      <th style="width: 210px">Type</th>
+      <th style="width: 130px">State</th>
+      <th style="width: 250px" pSortableColumn="createdAt">Created <p-sortIcon field="createdAt"></p-sortIcon></th>
+      <th style="width: 250px">Updated</th>
+    </tr>
+  </ng-template>
 
+  <ng-template pTemplate="body" let-expanded="expanded" let-job>
+    <tr>
+      <td>
+        <span class="expander" [pRowToggler]="job">
+          <i [ngClass]="expanded ? 'glyphicon glyphicon-menu-down' : 'glyphicon glyphicon-menu-right'"></i>
+        </span>
+      </td>
+      <td>{{ job.id }}</td>
+      <td>{{ job.type }}</td>
+      <td>{{ job.state }}</td>
+      <td>{{ job.createdAt }}</td>
+      <td>{{ job.updatedAt }}</td>
+    </tr>
+  </ng-template>
+
+  <ng-template pTemplate="rowexpansion" let-job>
+    <tr>
+      <td colspan="6">
+        <pre>{{ job.data }}</pre>
+      </td>
+    </tr>
+  </ng-template>
+</p-table>
 
-<p-dataTable
-    [value]="jobs" [lazy]="true" [paginator]="true" [totalRecords]="totalRecords" [rows]="rowsPerPage"
-    sortField="createdAt" (onLazyLoad)="loadLazy($event)" [scrollable]="true" [virtualScroll]="true" [scrollHeight]="scrollHeight"
->
-  <p-column field="id" header="ID" [style]="{ width: '60px' }"></p-column>
-  <p-column field="type" header="Type" [style]="{ width: '210px' }"></p-column>
-  <p-column field="state" header="State" [style]="{ width: '130px' }"></p-column>
-  <p-column header="Payload">
-    <ng-template pTemplate="body" let-job="rowData">
-      <pre>{{ job.data }}</pre>
-    </ng-template>
-  </p-column>
-  <p-column field="createdAt" header="Created date" [sortable]="true" [style]="{ width: '250px' }"></p-column>
-  <p-column field="updatedAt" header="Updated date" [style]="{ width: '250px' }"></p-column>
-</p-dataTable>