Code: Select all
<p-dataTable #exportCSV #dt [value]="acknowledgements" [rows]="25" [paginator]="true" [rowsPerPageOptions]="[25,50,100]" [globalFilter]="globalFilter" reorderableColumns="true" expandableRows="true" [responsive]="true" sortField="DataChangePrimaryID"
sortOrder="-1" selectionMode="single" (onRowSelect)="onRowSelect($event)" [(selection)]="selectedAcknowledgement" exportFilename="Acknowledgements">
<p-column expander="true" header="Details" styleClass="col-icon"></p-column>
<p-column field="DataChangePrimaryID" header="ID / Number" [sortable]="true" [filter]="true" filterMatchMode="contains" styleClass="col-data"></p-column>
<p-column field="ClientStatusID" header="Client Status ID" [sortable]="true" [filter]="true" filterMatchMode="in" [style]="{'overflow':'visible'}">
<ng-template pTemplate="filter" let-col>
<p-multiSelect [disabled]="!acknowledgements" [options]="statusID" [(ngModel)]="selectedClientStatusID" defaultLabel="All Client Status IDs" (onChange)="dt.filter($event.value=selectedClientStatusID,col.field,col.filterMatchMode)" styleClass="ui-column-filter"></p-multiSelect>
</ng-template>
<ng-template let-acknowledgement="rowData" let-i="rowIndex" pTemplate="body">
<div *ngIf="acknowledgement.ClientStatusID=='0'">Not yet acknowledged</div>
<div *ngIf="acknowledgement.ClientStatusID=='1'">Success</div>
<div *ngIf="acknowledgement.ClientStatusID=='2'">Error</div>
<!-- <button type="button" pButton (click)="selectCar(i)" icon="fa-search"></button> -->
</ng-template>
</p-column>
<p-column field="AcknowledgementStatusID" header="Acknowledgement Status ID" [sortable]="true" [filter]="true" filterMatchMode="in" [style]="{'overflow':'visible'}">
<ng-template pTemplate="filter" let-col>
<p-multiSelect [disabled]="!acknowledgements" [options]="ackStatusID" [(ngModel)]="selectedAckStatusID" defaultLabel="All Ack Status IDs" (onChange)="dt.filter($event.value=selectedAckStatusID,col.field,col.filterMatchMode)" styleClass="ui-column-filter"></p-multiSelect>
</ng-template>
<ng-template let-acknowledgement="rowData" let-i="rowIndex" pTemplate="body">
<div *ngIf="acknowledgement.AcknowledgementStatusID=='1'">Requires Acknowledgement</div>
<div *ngIf="acknowledgement.AcknowledgementStatusID=='2'">Awaiting Acknowledgement</div>
<div *ngIf="acknowledgement.AcknowledgementStatusID=='3'">Success</div>
<div *ngIf="acknowledgement.AcknowledgementStatusID=='7'">Max Error</div>
<!-- <button type="button" pButton (click)="selectCar(i)" icon="fa-search"></button> -->
</ng-template>
</p-column>
<p-column field="BizType" header="Biz Type" [sortable]="true" [filter]="true" filterMatchMode="contains" styleClass="col-data"></p-column>
<p-column field="AcknowledgedDate" header="Acknowledged Date" [sortable]="true" [filter]="true" filterMatchMode="contains" [style]="{'overflow':'visible'}">
<ng-template pTemplate="filter" let-col>
<p-calendar [disabled]="!acknowledgements" [(ngModel)]="dateFilter" placeholder="Select Date" showIcon="true" dateFormat="yy-mm-dd" dataType="string" (onSelect)="dt.filter($event.value=dateFilter,col.field,col.filterMatchMode)" styleClass="ui-column-filter"></p-calendar>
</ng-template>
<ng-template let-acknowledgement="rowData" pTemplate>
{{acknowledgement.AcknowledgedDate | date:'medium'}}
</ng-template>
</p-column>
<p-column field="ClientComment" header="Client Comment" [sortable]="true" [filter]="true" filterMatchMode="contains"></p-column>
<p-column field="SupplimentData" header="Supplimental Data" [sortable]="true" [filter]="true" filterMatchMode="contains"></p-column>
<p-column field="DataChangeTypeName" hidden="true" [filter]="true" filterMatchMode="contains"></p-column>
<p-column field="DataChangeID" hidden="true" [filter]="true" filterMatchMode="contains"></p-column>
<p-column field="APIUserID" hidden="true" [filter]="true" filterMatchMode="contains"></p-column>
<p-column field="AcknowledgementStatusID" hidden="true" [filter]="true" filterMatchMode="contains"></p-column>
<p-column field="AcknowledgementStatusName" hidden="true" [filter]="true" filterMatchMode="contains"></p-column>
<p-column field="AcknowledgementStatusDesc" hidden="true" [filter]="true" filterMatchMode="contains"></p-column>
<p-column field="ClientStatusID" hidden="true" [filter]="true" filterMatchMode="contains"></p-column>
<p-column field="ErrorCount" hidden="true" [filter]="true" filterMatchMode="contains"></p-column>
<p-column field="MaxErrorCount" hidden="true" [filter]="true" filterMatchMode="contains"></p-column>
<p-column field="WaitTimeInterval" hidden="true" [filter]="true" filterMatchMode="contains"></p-column>
<p-column field="MaxTimeInterval" hidden="true" [filter]="true" filterMatchMode="contains"></p-column>
<ng-template let-acknowledgement pTemplate="rowexpansion">
<div class="ui-g ui-g-responsive ui-fluid">
<div class="ui-g-12">
<h2>Acknowledgement Details: {{acknowledgement.DataChangePrimaryID}}</h2>
</div>
<div class="ui-g-12 ui-md-6 ui-lg-4">
<div class="ui-g-12 ui-g-nopad">
<div class="ui-g-4">Nucor Status ID: </div>
<div class="ui-g-8">
{{acknowledgement.ClientStatusID}}
</div>
</div>
<div class="ui-g-12 ui-g-nopad">
<div class="ui-g-4">Nucor Comment: </div>
<div class="ui-g-8">
{{acknowledgement.ClientComment}}
</div>
</div>
</div>
<div class="ui-g-12 ui-md-6 ui-lg-4">
<div class="ui-g-12 ui-g-nopad">
<div class="ui-g-4">Error Count: </div>
<div class="ui-g-8">
{{acknowledgement.ErrorCount}}
</div>
</div>
<div class="ui-g-12 ui-g-nopad">
<div class="ui-g-4">Max Error Count: </div>
<div class="ui-g-8">
{{acknowledgement.MaxErrorCount}}
</div>
</div>
</div>
<div class="ui-g-12 ui-md-6 ui-lg-4">
<div class="ui-g-12 ui-g-nopad">
<div class="ui-g-4">Shipments: </div>
<div class="ui-g-8">
{{acknowledgement.SupplimentData}}
</div>
</div>
</div>
</div>
</ng-template>
</p-dataTable>
https://drive.google.com/file/d/1eotppK ... sp=sharing
Responsive DataTable
https://drive.google.com/file/d/1k51heN ... sp=sharing