title: Angular Material tables with multiple data sources
body: <p>I have this table which I'm using for multiple datas.</p>
  
  <p>My issue is that the data is displayed correctly, but paginator and sort are not working.</p>
  
  <p>Sort only shows the arrows, but won't sort</p>
  
  <p>Paginator won't count the items and will display "0 of 0"</p>
  
  <p>Here is my code: component.html</p>
  
  <pre><code>&lt;mat-table class="lmat-elevation-z8" [dataSource]="dataSources[pagePart]" matSort&gt;
      &lt;ng-container *ngFor="let column of columns[pagePart]" [matColumnDef]="column.columnDef"&gt;
          &lt;mat-header-cell *matHeaderCellDef mat-sort-header&gt;{{ column.header }}&lt;/mat-header-cell&gt;
          &lt;mat-cell *matCellDef="let row"&gt;{{ row[column.columnDef] }}&lt;/mat-cell&gt;
      &lt;/ng-container&gt;
  
      &lt;ng-container matColumnDef="azioni"&gt;
          &lt;mat-header-cell *matHeaderCellDef&gt;Azioni&lt;/mat-header-cell&gt;
          &lt;mat-cell *matCellDef="let row"&gt;
              &lt;button&gt;... here there's a list of action buttons for each row ...&lt;/button&gt;
          &lt;/mat-cell&gt;
      &lt;/ng-container&gt;
  
      &lt;mat-header-row *matHeaderRowDef="displayedColumns[pagePart].concat('azioni'); sticky:true"&gt;&lt;/mat-header-row&gt;
      &lt;mat-row *matRowDef="let row; columns: displayedColumns[pagePart].concat('azioni')"&gt;&lt;/mat-row&gt;
  &lt;/mat-table&gt;
  </code></pre>
  
  <p>And my code to load the data is: component.ts</p>
  
  <pre><code>displayedColumns={};
  columns={};
  dataSources={};
  
  @ViewChild(MatSort) sort: MatSort;
  @ViewChild(MatPaginator) paginator: MatPaginator;
  
  loadPart(part){
      this.http.get("myapi").subscribe(data=&gt;{
          // load data
          var datas=[];
          for(var k=0; k&lt;data["length"]; ++k){
              datas.push(data[k]);
          }
          // setup columns
          this.columns[part]=[];
          this.displayedColumns[part]=[];
          if(data["length"]&gt;0) // setup column names, headers and everything
          for(var key in data[0]){
              if(key.indexOf("id")&gt;=0) continue;
              this.displayedColumns[part].push(key);
              this.columns[part].push({
                  columnDef: key,
                  header: this.renameHeader(key) // rename header based on the name provided by the api
              });
          }
          // setup table
          this.dataSources[part]=new MatTableDataSource(datas);
          // load all the possible shit
          this.dataSources[part].sort = this.sort;
          this.dataSources[part].paginator = this.paginator;
          // apply changes
          this.data_loaded[part]=true;
          this.cdr.detectChanges();
      });
  }
  </code></pre>
  
  <p>Any ideas on how to make paginator and sort work?</p>