UI Suite for  .p-component Jakarta Faces

import { AfterViewInit, Component, inject, viewChild } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { MatTableDataSource, MatTableModule } from '@angular/material/table';
import { MatSort, MatSortModule } from '@angular/material/sort';
import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
import { MatInputModule } from '@angular/material/input';
import { MatChipsModule } from '@angular/material/chips';

export interface Customer {
    name: string;
    country: string;
    status: string;
}

@Component({
    selector: 'app-customers',
    imports: [MatTableModule, MatSortModule, MatPaginatorModule, MatInputModule, MatChipsModule],
    template: `
        <mat-form-field>
            <input matInput placeholder="Search" (keyup)="filter($event)">
        </mat-form-field>
        <table mat-table [dataSource]="customers" matSort>
            <ng-container matColumnDef="name">
                <th mat-header-cell *matHeaderCellDef mat-sort-header>Name</th>
                <td mat-cell *matCellDef="let c">{{ c.name }}</td>
            </ng-container>
            <ng-container matColumnDef="country">
                <th mat-header-cell *matHeaderCellDef mat-sort-header>Country</th>
                <td mat-cell *matCellDef="let c">{{ c.country }}</td>
            </ng-container>
            <ng-container matColumnDef="status">
                <th mat-header-cell *matHeaderCellDef mat-sort-header>Status</th>
                <td mat-cell *matCellDef="let c"><mat-chip>{{ c.status }}</mat-chip></td>
            </ng-container>
            <tr mat-header-row *matHeaderRowDef="columns"></tr>
            <tr mat-row *matRowDef="let row; columns: columns"></tr>
        </table>
        <mat-paginator [pageSize]="10"></mat-paginator>
    `
})
export class CustomersComponent implements AfterViewInit {

    private http = inject(HttpClient);
    private sort = viewChild.required(MatSort);
    private paginator = viewChild.required(MatPaginator);

    columns = ['name', 'country', 'status'];
    customers = new MatTableDataSource<Customer>();

    ngAfterViewInit() {
        this.customers.sort = this.sort();
        this.customers.paginator = this.paginator();
        this.http.get<Customer[]>('/api/customers')
            .subscribe(data => this.customers.data = data);
    }

    filter(event: Event) {
        this.customers.filter = (event.target as HTMLInputElement).value.trim().toLowerCase();
    }
}

@Path("/api/customers")
@Produces(MediaType.APPLICATION_JSON)
public class CustomerResource {

    @Inject
    CustomerService service;

    @GET
    public List<CustomerDto> list() {
        return service.findAll().stream()
                .map(c -> new CustomerDto(c.getName(), c.getCountry(), c.getStatus()))
                .toList();
    }
}

public record CustomerDto(String name, String country, String status) {
}

import { bootstrapApplication } from '@angular/platform-browser';
import { provideHttpClient } from '@angular/common/http';
import { CustomersComponent } from './app/customers.component';

bootstrapApplication(CustomersComponent, {
    providers: [provideHttpClient()]
}).catch(err => console.error(err));

{
    "name": "customers",
    "version": "0.0.0",
    "private": true,
    "scripts": {
        "start": "ng serve",
        "build": "ng build"
    },
    "dependencies": {
        "@angular/cdk": "^21.0.0",
        "@angular/common": "^21.0.0",
        "@angular/compiler": "^21.0.0",
        "@angular/core": "^21.0.0",
        "@angular/forms": "^21.0.0",
        "@angular/material": "^21.0.0",
        "@angular/platform-browser": "^21.0.0",
        "rxjs": "~7.8.0",
        "tslib": "^2.8.0"
    },
    "devDependencies": {
        "@angular/build": "^21.0.0",
        "@angular/cli": "^21.0.0",
        "@angular/compiler-cli": "^21.0.0",
        "typescript": "~5.9.0"
    }
}

{
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "version": 1,
    "projects": {
        "customers": {
            "projectType": "application",
            "root": "",
            "sourceRoot": "src",
            "architect": {
                "build": {
                    "builder": "@angular/build:application",
                    "options": {
                        "browser": "src/main.ts",
                        "tsConfig": "tsconfig.app.json",
                        "styles": ["@angular/material/prebuilt-themes/azure-blue.css"]
                    }
                },
                "serve": {
                    "builder": "@angular/build:dev-server"
                }
            }
        }
    }
}