How to limit rows in mat-table and create filter to even filter data which is not in table but in datasource?

I am new to angular and mat-table. I am trying to create a table using mat which performs following functions -

1. Displays only top 10 users.
2. Create filter to search for user which may/maynot be in top 10.

I am fetching data from service API. I have created table and displaying user data from API. Filter filters the data correctly. I want to use entire API data but display only first 10 on table. However, filter should return data/users which is /isn't in top 10.

Html File -

<mat-form-field>
  <mat-label>Search</mat-label>
  <input matInput (keyup)="applyFilter($event)" placeholder="Ex. ium">
</mat-form-field>
<br>

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
  <ng-container matColumnDef="Name">
    <th mat-header-cell *matHeaderCellDef> Name </th>
    <td mat-cell *matCellDef="let element"> {{element.firstName}} </td>
  </ng-container>

  <ng-container matColumnDef="ID">
    <th mat-header-cell *matHeaderCellDef> ID </th>
    <td mat-cell *matCellDef="let element"> {{element.id}} </td>
  </ng-container>

  <ng-container matColumnDef="Rewards">
    <th mat-header-cell *matHeaderCellDef> Rewards </th>
    <td mat-cell *matCellDef="let element"> {{element.totalReward}} </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

component.ts File-

export class LeaderBoardTileComponent implements OnInit {

  dataSource;
  data: Candidate[];
  constructor(private myService: MyService) { }

  displayedColumns = ['Name','ID','Rewards'];

  ngOnInit() {
    this.myService.getUsers().subscribe(data => {
      this.dataSource = new MatTableDataSource(data);
      console.log("Data Source: ");
      console.log(this.dataSource);
    })
  }

  applyFilter(event: Event) {
    const filterValue = (event.target as HTMLInputElement).value;
    this.dataSource.filter = filterValue.trim().toLowerCase();
  }

  onSelect(element) {

  }
}

Any suggestions are highly appreciated!