brewman/overlord/src/app/batch-integrity-report/batch-integrity-report.component.html

<h2>Batch Integrity</h2>

<mat-table [dataSource]="dataSource" aria-label="Elements">
  <!-- Batch Column -->
  <ng-container matColumnDef="batch">
    <mat-header-cell *matHeaderCellDef>Batch</mat-header-cell>
    <mat-cell *matCellDef="let row">
      {{ row.product }} dated {{ row.date }} &#64; {{ row.price | currency: 'INR' }} is showing
      {{ row.showing }} instead of {{ row.actual }}
    </mat-cell>
  </ng-container>

  <!-- Details Column -->
  <ng-container matColumnDef="details">
    <mat-header-cell *matHeaderCellDef>Details</mat-header-cell>
    <mat-cell *matCellDef="let row">
      <ul>
        @for (detail of row.details; track detail) {
          <li>
            <a [routerLink]="detail.url">{{ detail.type }}</a> on {{ detail.date }} of {{ detail.quantity }} &#64;
            {{ detail.price | currency: 'INR' }}
          </li>
        }
      </ul>
    </mat-cell>
  </ng-container>

  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
  <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
</mat-table>