0

This is just a general question, but the material table provided from Angular Materials seems to only allow for one dataSource. Would it be possible to have a second dataSource used in the table?

The below example code from the angular material website: https://material.angular.io/components/table/overview#datasource

<mat-table [dataSource]="dataSource">
  <!-- User name Definition -->
  <ng-container matColumnDef="username">
    <mat-header-cell *matHeaderCellDef> User name </mat-header-cell>
    <mat-cell *matCellDef="let row"> {{row.username}} </mat-cell>
  </ng-container>

  <!-- Age Definition -->
  <ng-container matColumnDef="age">
    <mat-header-cell *matHeaderCellDef> Age </mat-header-cell>
    <mat-cell *matCellDef="let row"> {{row.age}} </mat-cell>
  </ng-container>

  <!-- Title Definition -->
  <ng-container matColumnDef="title">
    <mat-header-cell *matHeaderCellDef> Title </mat-header-cell>
    <mat-cell *matCellDef="let row"> {{row.title}} </mat-cell>
  </ng-container>

  <!-- Header and Row Declarations -->
  <mat-header-row *matHeaderRowDef="['username', 'age', 'title']"></mat-header-row>
  <mat-row *matRowDef="let row; columns: ['username', 'age', 'title']"></mat-row>
</mat-table>

Would it be possible to have something like:

<mat-table [dataSource]="dataSource", [dataSource2]="dataSource2">
  <!-- User name Definition -->
  <ng-container matColumnDef="username">
    <mat-header-cell *matHeaderCellDef> User name </mat-header-cell>
    <mat-cell *matCellDef="let row"> {{row.username}} </mat-cell>
  </ng-container>

  <!-- Age Definition -->
  <ng-container matColumnDef="age">
    <mat-header-cell *matHeaderCellDef> Age </mat-header-cell>
    <mat-cell *matCellDef="let row"> {{row.age}} </mat-cell>
  </ng-container>

  <!-- Title Definition -->
  <ng-container matColumnDef="title">
    <mat-header-cell *matHeaderCellDef> Title </mat-header-cell>
    <mat-cell *matCellDef="let row"> {{row.title}} </mat-cell>
  </ng-container>

  <!-- Header and Row Declarations -->
  <mat-header-row *matHeaderRowDef="['username', 'age', 'title']"></mat-header-row>
  <mat-row *matRowDef="let row; columns: ['username', 'age', 'title']"></mat-row>
</mat-table>
Robert Mason
  • 77
  • 2
  • 5
  • no. why do you want to? – Jun Kang Nov 02 '21 at 20:30
  • @JunKang It was just something I was looking in to doing. – Robert Mason Nov 02 '21 at 20:48
  • well depending on what your goal is, there are ways around it. do you want both data sources to display data in the table? if thats the case, just concat your data sources into one array. do you want the table to switch between the two data sources? just use a ternary in your data source input. why you want to do something, or the end goal, is important context. – Jun Kang Nov 02 '21 at 20:54
  • One way to use an additional data source is when binding the columns to a drop down list. I have not seen multiple data sources mentioned in the Angular Material table documentation. Does it really make sense to bind to a secondary data source when the primary data source is used for the row data? – Andrew Halil Nov 03 '21 at 12:16

0 Answers0