Responsive DataTable with hidden pColumns

Post Reply
tengel92
Posts: 28
Joined: 15 Sep 2016, 20:04

13 Dec 2017, 18:10

Below is the code I have for my DataTable. This code works perfect when the datatable is not stacked / responsive. When in responsive mode the hidden pColumns appear. Also the two fields I use an ng-template with has the label and the content stacked instead both being side by side. You can view the image on Google Drive.

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>
Regular DataTable
https://drive.google.com/file/d/1eotppK ... sp=sharing

Responsive DataTable
https://drive.google.com/file/d/1k51heN ... sp=sharing

merve7
Posts: 291
Joined: 12 Sep 2017, 10:44

15 Dec 2017, 15:38


Post Reply

Return to “Ultima - PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest