rekomen by atribbutes

<vex-page-layout-content>
    <div class="card overflow-auto" fxFlex="100">
        <form [formGroup]="rekapByAttrForm" class="normal-form" (ngSubmit)="onSubmit()">
        <mat-dialog-content class="px-6 py-4" fxLayout="column">
            <div fxLayout="column">
                <mat-radio-group appearance="outline" class="sm:px-0 md:px-2 lg:px-2 sm:px-2">
               <mat-label>Rekap Attribute</mat-label>
                <mat-form-field appearance="outline"  class="ml-4 mr-2">
                    <mat-label>Rekap Attribute By</mat-label>
                    <mat-select (valueChange)="onChangeUser($event)" formControlName="name">
                        <mat-option *ngFor="let attribute of listRekapAttribute" [value]="attribute.id">{{attribute.namaAttribute}}</mat-option>
                    </mat-select>
                    <mat-error *ngIf="rekapByAttrForm.controls.name.hasError('required')">Wajib Pilih Atrribute</mat-error>
                </mat-form-field>
            </mat-radio-group>
                <mat-radio-group appearance="outline" class="sm:px-0 md:px-2 lg:px-2 xl:px-2">
                    <!-- <mat-radio-button value="1">Bulk Value</mat-radio-button> -->
                    <mat-label>Value</mat-label>
                    <mat-form-field appearance="outline" class="ml-5">
                        <mat-label>Value</mat-label>
                        <mat-select formControlName="presentase">
                            <mat-option *ngFor="let presentase of listPresentase" [value]="presentase">{{presentase}}</mat-option>
                        </mat-select>
                        <mat-error *ngIf="rekapByAttrForm.controls.presentase.hasError('required')">Wajib Pilih Presentease</mat-error>
                    </mat-form-field>
                </mat-radio-group>

                <!-- <mat-radio-group appearance="outline" class="sm:px-0 md:px-2 lg:px-2 xl:px-2">
                    <mat-label>Balance Type</mat-label>
                    <mat-form-field appearance="outline" class="ml-4 mr-2">
                        <mat-label>Balance Type</mat-label>
                        <mat-select (valueChange)="onChanges($event)" formControlName="balance">
                            <mat-option *ngFor="let balance of items" [value]="balance.name" >{{balance.name}}</mat-option>
                        </mat-select>
                        <mat-error *ngIf="rekapByAttrForm.controls.balance.hasError('required')">Wajib Pilih Balance</mat-error>
                    </mat-form-field>
                </mat-radio-group> -->

            </div>

            <div  fxLayout="row" fxLayoutAlign="end center" fxLayoutGap="16px">
                <button color="primary" mat-button type="button">CANCEL</button>
                <button color="primary" mat-raised-button type="button" (click)="getAttributeTable()" [disabled]="rekapByAttrForm.invalid">APPLY</button>
            </div>

        </mat-dialog-content>
                <!-- <div class="mt-6 card overflow-auto" *ngIf="!loadTable">
                    <p-table
                    styleClass="p-datatable-md md-theme"
                    [columns]="columns"
                    [lazy]="true"
                    responsiveLayout="scroll"
                    currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries">
                    <ng-template pTemplate="header" let-columns >
                        <tr>
                            <th *ngFor="let col of columns">
                                <span style="white-space: nowrap;">{{ col.name }}</span>
                            </th>
                        </tr>
                    </ng-template>
                </p-table>

               </div> -->
         <div class="card overflow-auto">
            <p-table
            [value]="rows"
            dataKey="id"
            #dt
            styleClass="p-datatable-md md-theme"
            [columns]="columns"
            [lazy]="true"
            (onLazyLoad)="updatePage($event)"
            [loading]="isLoading"
            responsiveLayout="scroll"
            [paginator]="true"
            [rows]="pageSize"
            [showCurrentPageReport]="true"
            [totalRecords]="recordsTotal"
            [(first)]="paramRequest.start"
            currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries"
            [rowsPerPageOptions]="[10,25,50]">
            <ng-template pTemplate="header" let-columns>
                <tr>
                    <th [pSortableColumn]="col.field" *ngFor="let col of columns">
                        <span style="white-space: nowrap;">{{ col.name }} <span><p-sortIcon [field]="col.field"></p-sortIcon></span></span>
                    </th>
                </tr>
            </ng-template>
            <ng-template pTemplate="body" let-data let-rowData>
                <tr>
                    <td *ngFor="let col of columns">
                        <span>{{rowData[col.field]}}</span>
                    </td>
                </tr>
            </ng-template>
           </p-table>


         </div>
      </form>
    </div>
</vex-page-layout-content>