0

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

user18067747
  • 19
  • 1
  • 6
  • Yes, you can. Just import a Matpaginator module and implement this in your component. – Muthulakshmi M Apr 09 '22 at 09:51
  • https://stackoverflow.com/questions/70543443/how-can-use-mat-paginator-for-paging-a-custom-card-based-component-into-parent-c/70551270#70551270 – Eliseo Apr 15 '22 at 10:08

1 Answers1

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

Tushar
  • 1,948
  • 1
  • 13
  • 32
  • Hey, can you help me in another issue in this same table? – user18067747 Apr 17 '22 at 12:48
  • I will try, what is the issue? – Tushar Apr 17 '22 at 16:58
  • I made [this](https://stackblitz.com/edit/angular-ivy-yermyj?file=src%2Fapp%2Fapp.component.html) change in your stackblitz. I want to keep the elements of the last column `remove` disabled until one of the radiobutton is selected. I was able to do that, but when I select the button, all of them gets activated. I only want to active the selected row. How do I do that? – user18067747 Apr 17 '22 at 17:11
  • Please check if this logic works for you: https://stackblitz.com/edit/angular-ivy-kzvjux – Tushar Apr 17 '22 at 18:02
  • @Tushar how to add filter to your above example? without repeating MatTableDataSource – ferhado May 29 '23 at 18:12
  • https://stackblitz.com/edit/angular-ivy-4clubf?file=src%2Fapp%2Fapp.component.ts Here is an example with a proper interface instead of using any typing. incase anyone is interested :) – Qamar Stationwala Jul 18 '23 at 23:57