Client List Pagination - Copy this Angular, Tailwind Component to your project

Complet this code to add pagination:<div class="container mx auto px 4 py 8 max h screen"> <div class="mb 6"> <input type="text" [(ngModel)]="searchTerm" placeholder="Search clients..." class="w full px 4 py 2 rounded lg border focus:outline none focus:ring 2 focus:ring blue 500"> </div> <div class=" rounded lg shadow overflow x auto "> <table class="min w full table auto"> <thead class="bg gray 50"> <tr> <th *ngFor="let column of nameColumn" class="px 6 py 3 text left text xs font medium text gray 500 uppercase tracking wider" >{{column}}</th> </tr> </thead> <tbody class="divide y divide gray 200"> <ng container *ngFor="let client of filteredClients"> <tr class="hover:bg gray 50"> <td class="px 6 py 4 whitespace nowrap">{{client.contact.email}}</td> <td class="px 6 py 4 whitespace nowrap">{{client.contact.telephone}}</td> <td class="px 6 py 4 whitespace nowrap">{{client.contact.adresse}}</td> <td class="px 6 py 4 whitespace nowrap">{{client.created_at | date:'dd MMM yyyy HH:mm:ss':'fr FR'}}</td> <td class="px 6 py 4 whitespace nowrap"> {{client.updated_at | date:'dd MMM yyyy HH:mm:ss':'fr FR'}}</td> <td class="px 6 py 4 whitespace nowrap">{{client.contact.typeContact}}</td> <td class="px 6 py 4 whitespace nowrap"> <button (click)="toggleDetails(client)" class="text gray 600 hover:text gray 800 mr 3">Details</button> <button (click)="deleteClient(client)" class="text red 600 hover:text red 800">Delete</button> </td> </tr> <tr *ngIf="client.showDetails" class="bg gray 50"> <td colspan="5" class="px 6 py 4"> <div class="text sm text gray 600"> <ng container *ngIf="client.contact.typeContact === 'Personne'"> <p><span class="font medium">Gender:</span> {{client.contact.genre}}</p> <p><span class="font medium">Date of Birth:</span> {{client.contact.dateNaissance| date}}</p> </ng container> <ng container *ngIf="client.contact.typeContact === 'Entreprise'"> <p><span class="font medium">Nom de l'entreprise:</span> {{client.contact.nom_entreprise}}</p> <p><span class="font medium">Secteur d'activite:</span> {{client.contact.secteur_activite}}</p> </ng container> </div> </td> </tr> </ng container> </tbody> </table> </div> </div>import { CommonModule } from '@angular/common'; import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { MatTableDataSource, MatTableModule } from '@angular/material/table'; // interface Contact { // id: number; // fullName: string; // email: string; // phone: string; // company: string; // lastInteraction: Date; // } interface Client{ id:number; created_at: Date; updated_at: Date; campagne:[]; contact:Contact; showDetails?: boolean; } interface Contact{ id: number; typeContact: string; telephone: string; email: string; adresse: string; nom_entreprise?: string; secteur_activite?: string; dateNaissance?: Date; genre?: string; nom?: string; prenom?: string; } @Component({ selector: 'app table client', standalone: true, imports: [ CommonModule, FormsModule,MatTableModule ], templateUrl: './table client.component.html', styleUrl: './table client.component.css' }) export class TableClientComponent { currentPage: any; totalPages: any; nextPage() { throw new Error('Method not implemented.'); } previousPage() { throw new Error('Method not implemented.'); } nameColumn:string[]=[]; clients: Client[] = []; filteredClients: Client[] = []; searchTerm: string = ""; ngOnInit() { this.initClients(); this.filteredClients = this.clients; this.nameColumn =["Email","Telephone","Adresse", "Cree le", "Derniere modification","Type de contact", "Actions" ]; } ngDoCheck() { this.filterClients(); } initClients(){ this.clients = [ { id: 1, created_at: new Date('2023 01 01'), updated_at: new Date('2023 01 10'), campagne: [], contact: { id: 1, typeContact: 'Entreprise', telephone: '123456789', email: 'openit@exemple.com', adresse: '123 rue de la paix', nom_entreprise: 'OpenIT', secteur_activite: 'Informatique', }, showDetails: false, }, { id: 2, created_at: new Date('2023 02 01'), updated_at: new Date('2023 02 10'), campagne: [], contact: { id: 2, typeContact: 'Personne', telephone: '987654321', email: 'jane.doe@example.com', adresse: '456 avenue des Champs', nom: 'Doe', prenom: 'Jane', genre: 'F', dateNaissance: new Date('1990 05 12'), }, showDetails: false, }, { id: 3, created_at: new Date('2023 03 01'), updated_at: new Date('2023 03 15'), campagne: [], contact: { id: 3, typeContact: 'Entreprise', telephone: '111222333', email: 'info@techcorp.com', adresse: '789 boulevard du Tech', nom_entreprise: 'TechCorp', secteur_activite: 'Technologie', }, showDetails: false, }, // Ajout de 10 nouveaux clients { id: 4, created_at: new Date('2023 04 01'), updated_at: new Date('2023 04 10'), campagne: [], contact: { id: 4, typeContact: 'Personne', telephone: '555444333', email: 'john.smith@example.com', adresse: '12 rue des Fleurs', nom: 'Smith', prenom: 'John', genre: 'M', dateNaissance: new Date('1985 07 20'), }, showDetails: false, }, { id: 5, created_at: new Date('2023 05 01'), updated_at: new Date('2023 05 10'), campagne: [], contact: { id: 5, typeContact: 'Entreprise', telephone: '444555666', email: 'contact@greentech.com', adresse: '22 boulevard Vert', nom_entreprise: 'GreenTech', secteur_activite: 'Énergie renouvelable', }, showDetails: false, }, { id: 6, created_at: new Date('2023 06 01'), updated_at: new Date('2023 06 15'), campagne: [], contact: { id: 6, typeContact: 'Personne', telephone: '333444555', email: 'lucy.brown@example.com', adresse: '90 avenue Lumière', nom: 'Brown', prenom: 'Lucy', genre: 'F', dateNaissance: new Date('1995 03 15'), }, showDetails: false, }, { id: 7, created_at: new Date('2023 07 01'), updated_at: new Date('2023 07 20'), campagne: [], contact: { id: 7, typeContact: 'Entreprise', telephone: '222333444', email: 'info@buildcorp.com', adresse: '66 rue de la Construction', nom_entreprise: 'BuildCorp', secteur_activite: 'Bâtiment et travaux publics', }, showDetails: false, }, { id: 8, created_at: new Date('2023 08 01'), updated_at: new Date('2023 08 10'), campagne: [], contact: { id: 8, typeContact: 'Personne', telephone: '666777888', email: 'mark.jones@example.com', adresse: '34 rue des Roses', nom: 'Jones', prenom: 'Mark', genre: 'M', dateNaissance: new Date('1988 11 11'), }, showDetails: false, }, { id: 9, created_at: new Date('2023 09 01'), updated_at: new Date('2023 09 15'), campagne: [], contact: { id: 9, typeContact: 'Entreprise', telephone: '777888999', email: 'hello@creativehub.com', adresse: '18 rue de l\'Art', nom_entreprise: 'CreativeHub', secteur_activite: 'Design graphique', }, showDetails: false, }, { id: 10, created_at: new Date('2023 10 01'), updated_at: new Date('2023 10 20'), campagne: [], contact: { id: 10, typeContact: 'Personne', telephone: '888999000', email: 'emma.wilson@example.com', adresse: '78 rue du Soleil', nom: 'Wilson', prenom: 'Emma', genre: 'F', dateNaissance: new Date('1992 06 25'), }, showDetails: false, }, { id: 11, created_at: new Date('2023 11 01'), updated_at: new Date('2023 11 10'), campagne: [], contact: { id: 11, typeContact: 'Entreprise', telephone: '999000111', email: 'contact@financeplus.com', adresse: '55 rue des Finances', nom_entreprise: 'FinancePlus', secteur_activite: 'Services financiers', }, showDetails: false, }, ]; } filterClients() { if (!this.searchTerm) { this.filteredClients = this.clients; return; } const searchTermLower = this.searchTerm.toLowerCase(); this.filteredClients = this.clients.filter(client => client.contact.email.toLowerCase().includes(searchTermLower) || client.contact.typeContact.toLowerCase().includes(searchTermLower) || client.contact.nom?.toLowerCase().includes(searchTermLower) || client.contact.prenom?.toLowerCase().includes(searchTermLower) ); } toggleDetails(client: Client) { client.showDetails = !client.showDetails; } deleteClient(client: Client) { this.clients = this.clients.filter(c => c.id !== client.id); this.filterClients(); } }