title: Angular Material Table (<mat-table>) with datasource with multiple inner ARRAY attributes
body: <p>I am currently successfully displaying a Material <code>&lt;mat-table&gt;</code> with a 'simple' async DataSource interface. I've provided pseudocode using an async 'DataSource' extended object which works below (invoke an http call eventually, if it interests you). However, I'm having difficulty doing this with an interface that has at least 2 (TWO) inner <strong>ARRAYS</strong> (see IHuhInterface further below) each with its own <code>&lt;mat-table&gt;</code>. How does one manage a data source and display mat-table pointing to an interface with at least TWO inner arrays? </p>
  
  <p>...simple.interface.ts:</p>
  
  <pre class="lang-typescript prettyprint-override"><code>interface ISimple {
      name: string;
      address: string;
  }
  </code></pre>
  
  <p>and simple.component.ts is:
  ...</p>
  
  <p>datasource = new SimpleDataSource(this.simpleService);</p>
  
  <p>where...</p>
  
  <pre class="lang-typescript prettyprint-override"><code>export class SimpleDataSource extends DataSource&lt;any&gt; {
      constructor(private simpleService: SimpleService) {
          super();
      }
      connect(): Observable&lt;SimpleArray[]&gt; {
  
          return this.simpleService.simpleList()
              .map( (simpleItems) =&gt; {
                  return simpleItems;  // simple items returns by service
              },
              (error) =&gt; {
                  alert('returned error placeholder');
                  return error;
              })
              .catch( (exception) =&gt; {
                  alert('serious exception placeholder');
                  return of(exception);
              });
      }
      disconnect() {}
  }
  </code></pre>
  
  <p>and the partial ISimpleInterface  template is:</p>
  
  <pre class="lang-xml prettyprint-override"><code>&lt;mat-table #table [dataSource]="ds"&gt;
  
      &lt;!-- Name Column --&gt;
      &lt;ng-container matColumnDef="name"&gt;
          &lt;mat-header-cell *matHeaderCellDef&gt; Name &lt;/mat-header-cell&gt;
          &lt;mat-cell *matCellDef="let simpleItemElement"&gt; {{simpleItemElement.name}} &lt;/mat-cell&gt;
      &lt;/ng-container&gt;
  
      &lt;!-- address Column --&gt;
      &lt;ng-container matColumnDef="address"&gt;
          &lt;mat-header-cell *matHeaderCellDef&gt; Address &lt;/mat-header-cell&gt;
          &lt;mat-cell *matCellDef="let simpleItemElement"&gt; {{simpleItemElement.address}} &lt;/mat-cell&gt;
      &lt;/ng-container&gt;
  ....
  </code></pre>
  
  <p><strong>Above works.</strong>
  How do I do the above with an interface with TWO inner arrays each with it's own <code>&lt;mat-table&gt;</code>? Like this:</p>
  
  <p>huh.interface.ts: ....</p>
  
  <pre class="lang-typescript prettyprint-override"><code>interface IHuhInterface {
      table1Array:SomeArray1[];  // show in &lt;mat-table&gt; 1
      table2Array:SomeArray2[]   // show in &lt;mat-table&gt; 2
  }
  </code></pre>
  
  <p>How can I use the two arrays in a template with two material tables which must be populated with those two arrays? Do I need TWO datasources...? or ..? Note the two arrays are from ONE http call so I don't want to make that call twice.</p>
  
  <p>Many thanks!</p>
  
  <p>PS: versions are:</p>
  
  <pre><code>"@angular/animations": "^5.1.3",
  "@angular/cdk": "^5.0.3",
  "@angular/common": "^5.1.2",
  "@angular/compiler": "^5.1.2",
  "@angular/core": "^5.1.2",
  "@angular/forms": "^5.1.2",
  "@angular/http": "^5.1.2",
  "@angular/material": "^5.0.3",
  </code></pre>