4. Simple table with students data and integration of pagination component
<div class="container-fluid"> | |
<!-- Starts table --> | |
<div class="row"> | |
<div class="col-md-12"> | |
<h3>Students</h3> | |
<div class="card"> | |
<div class="pt-0 card-body"> | |
<table class="table table-striped table-hover"> | |
<thead> | |
<tr> | |
<th class="bt-none">Name</th> | |
<th class="bt-none">Email</th> | |
<th class="bt-none">Department</th> | |
</tr> | |
</thead> | |
<tbody> | |
<tr | |
*ngIf="!students.length && !isLoadingStudents" | |
class="text-center" | |
> | |
<td colSpan="3">No students</td> | |
</tr> | |
<tr *ngIf="isLoadingStudents" class="text-center"> | |
<td colSpan="3"> | |
<span>Loading...</span> | |
</td> | |
</tr> | |
<tr *ngFor="let student of students"> | |
<td>{{ student.name }}</td> | |
<td>{{ student.email }}</td> | |
<td>{{ student.department }}</td> | |
</tr> | |
</tbody> | |
</table> | |
<!-- PAGINATION COMPONENT START--> | |
<app-pagination | |
(responseData)="students = $event" | |
(loading)="isLoadingStudents = $event" | |
[apiRoute]="'http://localhost:4000/api/students'" | |
[recordsPerPage]="recordsPerPage" | |
> | |
</app-pagination> | |
<!-- PAGINATION COMPONENT END--> | |
</div> | |
</div> | |
</div> | |
</div> | |
<!-- Ends table --> | |
</div> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment