How to get the sum of filtered table column in PrimeNG

Question

I have created a datatable using primeng.

I am able to filter the rows based on globalfilter as well as customFilter.

I am able to display the total count of filtered rows in the footer.

However I am unable to get the sum of filtered column.

Below is my code. I have not used any overridden functions. Have used only functions specific to primeng.

Please help.

            <p-table #dt [columns]="selectedColumns" [value]="transactions" [paginator]="true"
                [rows]="10" [rowsPerPageOptions]="[5,10,15,20]" totalRecords="totalRecords" pageLinks="3"
                [showCurrentPageReport]="true" styleClass="p-datatable-responsive-demo"
                tableStyleClass="red-bottom-border" class="some-custom-class-name"
                [style]="{'font-size': '0.8em','color':'#0088ce','border':'1px solid','border-radius':'5px'}">
                
                <ng-template pTemplate="caption">
                  <div style="text-align:left">
                    <p-multiSelect [options]="cols" [(ngModel)]="selectedColumns" optionLabel="header"
                    size="50" selectedItemsLabel="Select Display Columns" [style]="{minWidth: '200px'}" defaultLabel="Choose Columns"></p-multiSelect>
                </div>
                  <div style="text-align: right">
                    <i class="pi pi-search" style="margin:4px 4px 0 0"></i>
                    <input type="text" pInputText size="50" placeholder="Global Filter"
                      (input)="dt.filterGlobal($event.target.value, 'contains')" style="width:auto">
                  </div>
                </ng-template>

                <ng-template pTemplate="header" let-columns>
                  <tr>
                    <th *ngFor="let col of columns" [pSortableColumn]="col.field">
                      {{col.header}}
                      <p-sortIcon [field]="col.field" ariaLabel="Activate to sort" ariaLabelDesc="Activate to sort in descending order" ariaLabelAsc="Activate to sort in ascending order"></p-sortIcon>
                    </th>
                  </tr>
                  <tr>
                    <th *ngFor="let col of columns" [ngSwitch]="col.field">
                         <input *ngSwitchCase="'customerId'" style="width:100%;" pInputText type="text" (input)="dt.filter($event.target.value, col.field, 'contains')">
                      <input *ngSwitchCase="'customerNumber'" style="width:100%;" pInputText type="text" (input)="dt.filter($event.target.value, col.field, 'contains')">
                         <input *ngSwitchCase="'transactionAmount'" style="width:100%;" pInputText type="text" (input)="dt.filter($event.target.value, col.field, 'contains')">
                      <input *ngSwitchCase="'transactionDate'" style="width:100%;" pInputText type="text" (input)="dt.filter($event.target.value, col.field, 'contains')">
                      <input *ngSwitchCase="'transactionStatus'" style="width:100%;" pInputText type="text" (input)="dt.filter($event.target.value, col.field, 'contains')">
                    </th>
                  </tr>
                </ng-template>

                <ng-template pTemplate="body" let-rowData let-columns="columns">
                  <tr>
                    <td *ngFor="let col of columns">
                      {{rowData[col.field]}}
                    </td>
                  </tr>
                </ng-template>

                <ng-template pTemplate="summary">
                  <div style="text-align:left">
                  Total Transactions {{dt.totalRecords}}
                </div>
              </ng-template>
              </p-table>