CodeseniorSoftware Tutorials

HTML form

<div class="flex flex-col flex-auto min-w-0">
    <div class="flex-auto p-6 sm:p-10 ">
        <p-table #dt2 [value]="users" [loading]="loading" dataKey="id" [paginator]="true"
                 [rows]="10" [rowsPerPageOptions]="[10,25,50]" styleClass="p-datatable-gridlines"
                 [globalFilterFields]="filterColumns">
            <ng-template pTemplate="caption">
                <div class="flex">
                <span class="p-input-icon-left ml-auto">
                    <i class="pi pi-search"></i>
                    <input pInputText type="text" (input)="dt2.filterGlobal($event.target.value, 'contains')"
                           placeholder="Search keyword" class="p-inputtext p-component p-element"/>
                </span>
                </div>
            </ng-template>
            <ng-template pTemplate="header">
                <tr>
                    <th *ngFor="let col of cols" pSortableColumn="{{col.field}}">
                        {{col.header}}
                        <p-sortIcon field="{{col.field}}"></p-sortIcon>
                        <p-columnFilter type="{{col.type}}" field="{{col.field}}" display="menu"></p-columnFilter>
                    </th>
                </tr>

            </ng-template>
            <ng-template pTemplate="body" let-car>
                <tr>
                    <ng-template ngFor let-item [ngForOf]="cols">
                        <td *ngIf="item.field!='enabled'">
                            {{car[item.field]}}
                        </td>
                    </ng-template>
                    <td class="text-center">
                        <i class="pi"
                           [ngClass]="{'true-icon pi-check-circle': car.enabled, 'false-icon pi-times-circle': !car.enabled}"></i>
                    </td>
                </tr>
            </ng-template>
        </p-table>
    </div>
</div>

Typscript File

import {Component, OnDestroy, OnInit, ViewEncapsulation} from '@angular/core';
import {map, Subject, takeUntil} from 'rxjs';
import {UserService} from './user.service';

@Component({
    selector: 'admin-user',
    templateUrl: './user.component.html',
    encapsulation: ViewEncapsulation.None
})
export class UserComponent implements OnInit, OnDestroy {

    users: any[];

    totalRecords: number;

    cols = [
        {field: 'username', type:'text', header: 'UserId'},
        {field: 'firstName', type:'text', header: 'First Name'},
        {field: 'lastName', type:'text', header: 'Last Name'},
        {field: 'email', type:'text', header: 'Email'},
        {field: 'enabled', type:'boolean', header: 'Enabled'},

    ];

    loading: boolean;
    private subject = new Subject<boolean>();
    filterColumns=this.cols.filter(p=>p.field!='enabled').map<string>(q=>q.field);

    constructor(private userService: UserService) {
    }

    ngOnInit(): void {
        this.loadCars();
    }

    public loadCars() {
        setTimeout(() => {
            this.userService.list().pipe(
                map(apiResponse => {
                    this.users = apiResponse.data.rows;
                    this.totalRecords = apiResponse.data.records;
                    this.loading = false;
                }),
                takeUntil(this.subject)
            ).subscribe();
        },10);
    }
    ngOnDestroy(): void {
        this.subject.next(true);
        this.subject.complete();
    }
}

Result