ANgular- Is it possible to add Mat-Paginator in regular table?

Question

I made a regular HTML table in angular, whose data comes from API. I want to add mat-paginator in it.

This is my code:

<table class="table" style="text-align: center;">
<thead class="thead-light">
<tr>
<th></th>
<th style="font-weight: 800;">Points</th>
<th style="font-weight: 800;">Award Name</th>
<th style="font-weight: 800;">Country</th>
<th style="font-weight: 800;">Created At</th>
<th style="font-weight: 800;">Nominator</th>
<th style="font-weight: 800;">Visiblity</th>
<th></th>
</tr>
</thead>
<tbody *ngIf="newUserData">
<tr *ngFor="let data of newUserData; let i = index">
<td>
<div style="padding-left: 1.4rem;">
<input [(ngModel)]="radioSelected" class="form-check-input" type="radio" value="{{data.id}}">
</div>
</td>
<td>{{data.points}}</td>
<td>{{data.reason}}</td>
<td>{{data.countryName}}</td>
<td>{{data.createdAt | date : 'shortDate'}}</td>
<td>{{data.senderName}}</td>
<td>{{data.visibility}}</td>
<td>
<div class="d-flex" (click)="onRevoke(radioSelected)" style="cursor: pointer;" id="revoke" #revoke>
<svg-icon src="../../../../../assets/media/revoke_func.svg" [svgStyle]="{ 'width.px':18, 'height.px':12, 'fill':'#666666' }"></svg-icon>
<p style="color: #EB4987;">Revoke</p>
</div>
</td>
</tr>
</tbody>
</table>

Thanks in advance for the help

Answer 1

Yes it is possible with the help of MatTableDataSource, MatPaginator and Observable.

Please check the below stackblitz example I have created.

https://stackblitz.com/edit/angular-ivy-fauia1