Angular: styled provisional tables while beeing bored

ng/src/app/pages/home/home.component.html

@@ -2,7 +2,7 @@
   <ul>
     <li *ngFor="let server of servers; index as t" class="list-unstyled">
       <button
-        class="btn btn-secondary dropdown-toggle"
+        class="btn btn-primary dropdown-toggle"
         type="button"
         data-bs-toggle="collapse"
         [attr.data-bs-target]="'#data-types-' + t"
@@ -12,7 +12,7 @@
       <ul *ngIf="server.types?.length" class="collapse" [id]="'data-types-' + t">
         <li *ngFor="let type of server.types; index as i" class="list-unstyled">
           <button
-            class="btn btn-secondary dropdown-toggle"
+            class="btn btn-primary dropdown-toggle"
             type="button"
             data-bs-toggle="collapse"
             [attr.data-bs-target]="'#data-table-' + i"
@@ -22,7 +22,7 @@
           <ul *ngIf="type.subtypes?.length; else data" class="collapse" [id]="'data-table-' + i">
             <li *ngFor="let sub of type.subtypes; index as j" class="list-unstyled">
               <button
-                class="btn btn-secondary dropdown-toggle"
+                class="btn btn-primary dropdown-toggle"
                 type="button"
                 data-bs-toggle="collapse"
                 [attr.data-bs-target]="'#data-table-sub-' + j"
@@ -33,10 +33,16 @@
                 <table class="table table-striped">
                   <tbody>
                     <tr>
-                      <th *ngFor="let entry of sub.data?.[0] | keyvalue">{{ entry.key }}</th>
+                      <th>Time</th>
+                      <th>∅ avg</th>
+                      <th>∧ peak</th>
+                      <th>Ω avail</th>
                     </tr>
                     <tr *ngFor="let dataset of sub.data">
-                      <td *ngFor="let entry of dataset | keyvalue">{{ entry.value }}</td>
+                      <td>{{ dataset.time | date: 'YYYY-MM-dd HH:mm:ss' }}</td>
+                      <td>{{ dataset.avg | number }}</td>
+                      <td>{{ dataset.peak | number }}</td>
+                      <td>{{ dataset.max | number }}</td>
                     </tr>
                   </tbody>
                 </table>
@@ -48,10 +54,16 @@
               <table class="table table-striped">
                 <tbody>
                   <tr>
-                    <th *ngFor="let entry of type.data?.[0] | keyvalue">{{ entry.key }}</th>
+                    <th>Time</th>
+                    <th>∅ avg</th>
+                    <th>∧ peak</th>
+                    <th *ngIf="type.data?.[0]?.max">Ω avail</th>
                   </tr>
                   <tr *ngFor="let dataset of type.data">
-                    <td *ngFor="let entry of dataset | keyvalue">{{ entry.value }}</td>
+                    <td>{{ dataset.time | date: 'YYYY-MM-dd HH:mm:ss' }}</td>
+                    <td>{{ dataset.avg | number }}</td>
+                    <td>{{ dataset.peak | number }}</td>
+                    <td *ngIf="dataset.max">{{ dataset.max | number }}</td>
                   </tr>
                 </tbody>
               </table>