Fix index of the paginated rows

libs/ui/src/lib/activities-table/activities-table.component.html

@@ -27,7 +27,11 @@
         class="d-none d-lg-table-cell px-1 text-right"
         mat-cell
       >
-        {{ dataSource.data.length - i }}
+        {{
+          pageSize > dataSource.data.length
+            ? dataSource.data.length - i
+            : dataSource.data.length - pageSize * pageIndex - i
+        }}
       </td>
       <td
         *matFooterCellDef
@@ -420,6 +424,7 @@
   }"
   [pageSize]="pageSize"
   showFirstLastButtons="true"
+  (page)="pageChanged($event)"
 ></mat-paginator>
 
 <ngx-skeleton-loader

libs/ui/src/lib/activities-table/activities-table.component.ts

@@ -8,7 +8,7 @@ import {
   Output,
   ViewChild
 } from '@angular/core';
-import { MatPaginator } from '@angular/material/paginator';
+import { MatPaginator, PageEvent } from '@angular/material/paginator';
 import { MatSort } from '@angular/material/sort';
 import { MatTableDataSource } from '@angular/material/table';
 import { Router } from '@angular/router';
@@ -62,6 +62,7 @@ export class ActivitiesTableComponent implements OnChanges, OnDestroy {
   public isAfter = isAfter;
   public isLoading = true;
   public isUUID = isUUID;
+  public pageIndex = 0;
   public placeholder = '';
   public routeQueryParams: Subscription;
   public searchKeywords: string[] = [];
@@ -79,6 +80,10 @@ export class ActivitiesTableComponent implements OnChanges, OnDestroy {
       });
   }
 
+  public pageChanged(page: PageEvent) {
+    this.pageIndex = page.pageIndex;
+  }
+
   public ngOnChanges() {
     this.displayedColumns = [
       'count',