title: Multiple Data Tables in one Component [Angular Material Tables] Sorting, Filtering and Pagination
body: <p>I wonder if anyone has ever solved this problem!</p>
  
  <p>I am currently developing an AdministrationComponent (which is something like a singleton for CRUD operations),  which is meant to manage the data on 4 different tables by sending the operations via HTTP request (encapsulated in a service) to the back-end, which then the results are sent to the client via WebSockets (preparing for a future where multiple clients are on this component simultaneously).</p>
  
  <ul>
  <li><p>I am retrieving the data with HTTP requests to the backend, which I have no problem showing it in each of the tables.</p></li>
  <li><p>I am instantiating Material Dialogs which encapsulate each of the CRUD operation for each of the tables. These, when validated and completed, send the correspondent HTTPRequest to the backend with the operation and its data. (Each table has its own service)</p></li>
  <li><p>Then, I have a separate service that implements WebSockets and this is the one who updates the data displayed on the tables (because this AdministrationComponent will be used by more than one client).</p></li>
  </ul>
  
  <p>I have to have to do validation(maybe not called validation(?)) that depends on data present in more than one table. 
  For instance: <strong>let's say we have table A, B and C. One item from A can be related to items from C, but It can only be accessible if both A and B have a property in common.</strong> 
  Since this type of operations is present in more than one table, I am planning on keeping this kind-of-a singleton component architecture, but please prove me wrong. </p>
  
  <p>now, <strong>the problem</strong>: 
  since showing the data on the tables is working just fine, <strong>my problem is with the sorting, filtering and the pagination</strong> of each table. </p>
  
  <p>There seems to be no error on the code, but it simply only works for the first table and not for the other ones, as I cannot figure out how to reference the matSort and matPaginator correctly.
  Initialy, I was doing the ViewChild for the matSort and matPaginator like:</p>
  
  <pre><code>@Component({
    selector: 'app-administration',
    templateUrl: './administration.component.html',
    styleUrls: ['./administration.component.scss']
  })
  export class AdministrationComponent implements OnInit {
      users: any = [];  
      userTable_displayedColumns: string[] = ['name', 'organization', 'updatedAt', 'userActionsColumn'];
      userTable_dataSource: MatTableDataSource&lt;any&gt;;
      @ViewChild(MatPaginator, { static: true }) userTable_paginator: MatPaginator;
      @ViewChild(MatSort, { static: true }) userTable_sort: MatSort;
  
      userTable_applyFilter(filterValue: string): void {
          this.userTable_dataSource.filter = filterValue.trim().toLowerCase();
          if (this.userTable_dataSource.paginator) {
            this.userTable_dataSource.paginator.firstPage();
          }
        }
  
      constructor (/* service Injection here */) {
  
          this.userTable_dataSource = new MatTableDataSource;
          // initialization of table with Promised HTTP request
          // initialization of websockets channel which updates the data according to the backend
  
          // this is done for the 4 different tables
  
      }
  
      ngOnInit(): void {
          this.userTable_dataSource.paginator = this.userTable_paginator;
          this.userTable_dataSource.sort = this.userTable_sort;
          // this is done for the 4 different tables
      }
  
      // and the rest of the code here is filtering on the different tables, 
      //as well as launching Material Dialogs which are working fine
  }
  </code></pre>
  
  <p>and the template (each table is in its own <strong>tab-pane</strong>):</p>
  
  <pre><code>    &lt;!-- Users --&gt;
      &lt;div class="tab-pane active" id="link1"&gt;
  
        &lt;div class="row"&gt;
          &lt;div class="col-md"&gt;
            &lt;button class="btn btn-enging btn-fill btn-wd mat-raised-button" mat-raised-button="" type="submit"
              (click)="openDialogCreateUser()"&gt;
              &lt;span class="mat-button-wrapper"&gt;
                &lt;i class="material-icons"&gt;person_add&lt;/i&gt; Adicionar Utilizador
              &lt;/span&gt;
              &lt;div class="mat-button-ripple mat-ripple" matripple=""&gt;&lt;/div&gt;
              &lt;div class="mat-button-focus-overlay"&gt;&lt;/div&gt;
            &lt;/button&gt;
          &lt;/div&gt;
          &lt;div class="col-md-6"&gt;
            &lt;mat-form-field class="example-full-width"&gt;
              &lt;input matInput placeholder="Encontrar..." (keyup)="userTable_applyFilter($event.target.value)"
                value=""&gt;
            &lt;/mat-form-field&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="mat-elevation-z8"&gt;
          &lt;table mat-table [dataSource]="userTable_dataSource" matSort&gt;
            &lt;tr mat-header-row *matHeaderRowDef="userTable_displayedColumns"&gt;&lt;/tr&gt;
            &lt;ng-container matColumnDef="userType"&gt;
              &lt;th mat-header-cell *matHeaderCellDef mat-sort-header&gt; Tipo de User &lt;/th&gt;
              &lt;td mat-cell *matCellDef="let row"&gt; {{row.userType}} &lt;/td&gt;
            &lt;/ng-container&gt;
            &lt;ng-container matColumnDef="username"&gt;
              &lt;th mat-header-cell *matHeaderCellDef mat-sort-header&gt; Username &lt;/th&gt;
              &lt;td mat-cell *matCellDef="let row"&gt; {{row.username}} &lt;/td&gt;
            &lt;/ng-container&gt;
            &lt;ng-container matColumnDef="name"&gt;
              &lt;th mat-header-cell *matHeaderCellDef mat-sort-header&gt; Nome &lt;/th&gt;
              &lt;td mat-cell *matCellDef="let row"&gt; {{row.name}} &lt;/td&gt;
            &lt;/ng-container&gt;
            &lt;ng-container matColumnDef="email"&gt;
              &lt;th mat-header-cell *matHeaderCellDef mat-sort-header&gt; Email &lt;/th&gt;
              &lt;td mat-cell *matCellDef="let row"&gt; {{row.email}} &lt;/td&gt;
            &lt;/ng-container&gt;
            &lt;ng-container matColumnDef="organization"&gt;
              &lt;th mat-header-cell *matHeaderCellDef mat-sort-header&gt; Organização &lt;/th&gt;
              &lt;td mat-cell *matCellDef="let row"&gt; {{getOrganizationNameByID(row.organization)}} &lt;/td&gt;
            &lt;/ng-container&gt;
            &lt;ng-container matColumnDef="updatedAt"&gt;
              &lt;th mat-header-cell *matHeaderCellDef mat-sort-header&gt; Último login &lt;/th&gt;
              &lt;td mat-cell *matCellDef="let row"&gt; {{row.updatedAt | date:'HH:mm, dd/MM/y' }} &lt;/td&gt;
            &lt;/ng-container&gt;
            &lt;ng-container matColumnDef="userActionsColumn"&gt;
              &lt;th mat-header-cell *matHeaderCellDef mat-sort-header style="white-space: nowrap;"&gt; Acções &lt;/th&gt;
              &lt;td mat-cell *matCellDef="let row"&gt;
                &lt;div class="row"&gt;
                  &lt;span class="mat-button-wrapper" (click)="openDialogViewUser(row)" style="cursor: pointer"&gt;
                    &lt;i class="material-icons" style="color:#163b65"&gt;remove_red_eye&lt;/i&gt;
                  &lt;/span&gt;
                  &lt;span class="mat-button-wrapper" (click)="openDialogEditUser(row)" style="cursor: pointer"&gt;
                    &lt;i class="material-icons" style="color:rgba(22, 59, 101, 1)"&gt;edit&lt;/i&gt;
                  &lt;/span&gt;
                  &lt;span class="mat-button-wrapper" (click)="openDialogRemoveUser(row)" style="cursor: pointer"&gt;
                    &lt;i class="material-icons" style="color:rgba(22, 59, 101, 1)"&gt;clear&lt;/i&gt;
                  &lt;/span&gt;
                &lt;/div&gt;
              &lt;/td&gt;
            &lt;/ng-container&gt;
            &lt;tr mat-row *matRowDef="let row; columns: userTable_displayedColumns;"&gt;&lt;/tr&gt;
          &lt;/table&gt;
          &lt;mat-paginator [pageSizeOptions]="[10, 25, 100]"&gt;&lt;/mat-paginator&gt;
        &lt;/div&gt;
  
      &lt;/div&gt;
      &lt;!-- Organizations, and so on ... --&gt;
  </code></pre>
  
  <p>But then, I figured out how to use ViewChild properly(I guess) and tried: (referencing: <a href="https://stackoverflow.com/a/49015542/8919846">https://stackoverflow.com/a/49015542/8919846</a> )</p>
  
  <pre><code>@ViewChild('userTablePaginator', { static: true }) userTable_paginator: MatPaginator;
  @ViewChild('userTableSort', { static: true }) userTable_sort: MatSort;
  </code></pre>
  
  <p>template: </p>
  
  <pre><code>&lt;table mat-table [dataSource]="userTable_dataSource" #userTableSort="matSort" matSort&gt;
  &lt;mat-paginator #userTablePaginator="matSort" [pageSizeOptions]="[10, 25, 100]"&gt;&lt;/mat-paginator&gt;
  </code></pre>
  
  <p>but it does not work.</p>
  
  <p>Anyone have a clue how I can make it work? :)</p>