<!-- New Table Headers -->
            <th
              *ngIf="showTransactionDetails"
              class="th-sm text-center"
              style="
                border-right: 1px solid #ffffffff;
                border-left: 1px solid #4e73df;
              "
            >
              Select
            </th>
            <!-- <th *ngIf="showTransactionDetails" class="th-sm text-center" style="border-right: 1px solid #ffffffff; border-left: 1px solid #4e73df;">Tran ID</th> -->
            <th
              *ngIf="showTransactionDetails"
              class="th-sm text-center"
              style="
                border-right: 1px solid #ffffffff;
                border-left: 1px solid #4e73df;
              "
            >
              Policy Number
            </th>
            <th
              *ngIf="showTransactionDetails"
              class="th-sm text-center"
              style="
                border-right: 1px solid #ffffffff;
                border-left: 1px solid #4e73df;
              "
            >
              Customer Name
            </th>
            <th
              *ngIf="showTransactionDetails"
              class="th-sm text-center"
              style="
                border-right: 1px solid #ffffffff;
                border-left: 1px solid #4e73df;
              "
            >
              Quote Number
            </th>
            <th
              *ngIf="showTransactionDetails"
              class="th-sm text-center"
              style="
                border-right: 1px solid #ffffffff;
                border-left: 1px solid #4e73df;
              "
            >
              Issuance Date
            </th>
            <th
              *ngIf="showTransactionDetails"
              class="th-sm text-center"
              style="
                border-right: 1px solid #ffffffff;
                border-left: 1px solid #4e73df;
              "
            >
              Risk Start Date
            </th>
            <th
              *ngIf="showTransactionDetails"
              class="th-sm text-center"
              style="
                border-right: 1px solid #ffffffff;
                border-left: 1px solid #4e73df;
              "
            >
              Premium Amount
            </th>
            <th
              *ngIf="showTransactionDetails"
              class="th-sm text-center"
              style="
                border-right: 1px solid #ffffffff;
                border-left: 1px solid #4e73df;
              "
            >
              Elapsed Days
            </th>
            <th
              *ngIf="showTransactionDetails"
              class="th-sm text-center"
              style="
                border-right: 1px solid #ffffffff;
                border-left: 1px solid #4e73df;
              "
            >
              ACD Number
            </th>
            <th
              *ngIf="showTransactionDetails"
              class="th-sm text-center"
              style="
                border-right: 1px solid #ffffffff;
                border-left: 1px solid #4e73df;
              "
            >
              Replenish Status
            </th>
            <th
              *ngIf="showTransactionDetails"
              class="th-sm text-center"
              style="
                border-right: 1px solid #ffffffff;
                border-left: 1px solid #4e73df;
              "
            >
              Replenish Date
            </th>
            <th
              *ngIf="showTransactionDetails"
              class="th-sm text-center"
              style="
                border-right: 1px solid #ffffffff;
                border-left: 1px solid #4e73df;
              "
            >
              Vehicle No
            </th>
          </tr>
        </thead><tbody *ngIf="showTransactionDetails">
          <tr
            *ngFor="
              let transaction of reporttransaction
                | paginate : { itemsPerPage: 5, currentPage: page }
            "
          >
            <td class="text-center text-font" style="border: 1px solid #858796">
              <input
                type="checkbox"
                (change)="onCheckboxClick(transaction, $event)"
                [disabled]="transaction.replenish_status === 'Y'"
              />
            </td>
            <!-- <td class="text-center text-font" style="border: 1px solid #858796;">{{transaction.tran_id}}</td> -->
            <td class="text-center text-font" style="border: 1px solid #858796">
              {{ transaction.policyNumber }}
            </td>
            <td class="text-center text-font" style="border: 1px solid #858796">
              {{ transaction.customerName }}
            </td>
            <td class="text-center text-font" style="border: 1px solid #858796">
              {{ transaction.quoteNumber }}
            </td>
            <td class="text-center text-font" style="border: 1px solid #858796">
              {{ transaction.insurenceDate | date : "dd-MM-yyyy" }}
            </td>
            <td class="text-center text-font" style="border: 1px solid #858796">
              {{ transaction.tran_date | date : "dd-MM-yyyy" }}
            </td>
            <td class="text-center text-font" style="border: 1px solid #858796">
              {{ transaction.premium | currency : "INR" }}
            </td>
            <td class="text-center text-font" style="border: 1px solid #858796">
              {{
                transaction.replenish_status === "Y"
                  ? "0"
                  : transaction.elapsed_days
              }}
            </td>
            <td
              class="text-center text-font"
              style="border: 1px solid #858796"
              align-items="Rights"
            >
              {{ transaction.acd_number }}
            </td>
            <td
              class="text-center text-font"
              style="border: 1px solid #858796"
              [ngStyle]="{
                color: transaction.replenish_status === 'Y' ? 'green' : 'red'
              }"
            >
              {{
                transaction.replenish_status === "Y"
                  ? "Success Payment"
                  : "Pending"
              }}
            </td>
            <td
              class="text-center text-font"
              style="border: 1px solid #858796"
              [ngStyle]="{
                color: transaction.replenish_status === 'Y' ? 'green' : 'red'
              }"
            >
              {{ transaction.replenishDate | date : "dd-MM-yyyy" }}
            </td>
            <td class="text-center text-font" style="border: 1px solid #858796">
              {{ transaction.vehicleNo }}
            </td>
          </tr>
        </tbody>
      </table>
    </div> i have to add filter to the columns so that i can filter data according to it