title: No error but `md-table` not rendering data ( `connect()` is not called)
body: <p>I am trying to implement  <a href="https://material.angular.io/components/table/overview" rel="nofollow noreferrer">Angular Material Table.</a>. The problem is that I do not get any error but there is no output. I have not used the typical example but am trying to implement using my own data. </p>
  
  <ul>
  <li>What am I missing?</li>
  <li>Does the <code>dataSource</code> object have a specific dataformat? </li>
  </ul>
  
  <p>Please correct me if I am wrong but as per my understanding of below documentation , it should work if <code>dataSource</code> is set to an <code>array</code>.</p>
  
  <blockquote>
    <p>Data is provided to the table through a DataSource. When the table receives a data source, it calls the DataSource's connect function which returns an observable that emits an array of data. Whenever the data source emits data to this stream, the table will update.</p>
  </blockquote>
  
  <p>Below is my code.</p>
  
  <p><strong>HTML</strong> :</p>
  
  <pre><code>&lt;div class="example-container mat-elevation-z8"&gt;
    &lt;label&gt; Testing &lt;/label&gt;
    &lt;md-table #table [dataSource]="dataSource"&gt;
  
  
      &lt;ng-container cdkColumnDef="dbquery"&gt;
        &lt;md-header-cell *cdkHeaderCellDef&gt;dbquery &lt;/md-header-cell&gt;
        &lt;md-cell *cdkCellDef="let row"&gt; {{row.dbquery}} &lt;/md-cell&gt;
      &lt;/ng-container&gt;
  
      &lt;md-header-row *cdkHeaderRowDef="columns"&gt;&lt;/md-header-row&gt;
      &lt;md-row *cdkRowDef="let row; columns: columns;"&gt;&lt;/md-row&gt;
  
    &lt;/md-table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>TS</strong> :</p>
  
  <pre><code>    import { Component, OnInit , Input,OnChanges } from '@angular/core';
  import {DataSource} from '@angular/cdk';
  import {BehaviorSubject} from 'rxjs/BehaviorSubject';
  import {Observable} from 'rxjs/Observable';
  
  @Component({
    selector: 'app-data-table',
    templateUrl: './data-table.component.html',
    styleUrls: ['./data-table.component.css']
  })
  export class DataTableComponent implements OnInit {
    @Input() tabledata : any;
    private headers : any;
    private columns : any;
  
    public dataSource: BindDataTableSource | null;
  
    dataChange: BehaviorSubject&lt;any&gt; = new BehaviorSubject&lt;any&gt;([{}]);
    get data(): [{}] { console.log("getData is called ",this.dataChange.value) ;return this.dataChange.value; }
  
    constructor(){};
    ngOnInit() {
      this.dataSource = new BindDataTableSource(this);
  
      this.headers = this.tabledata.headers;
      this.columns = this.tabledata.columns;
  
      console.log("inside nginit ",this.dataSource);
      console.log(this.headers);
      console.log(this.columns);
  
    }
  
  
  }
  
  export class BindDataTableSource extends DataSource&lt;any&gt;{
  
    constructor(private datatable : DataTableComponent){
  
      super();
      console.log(this.datatable.tabledata.data);
      for(let index = 0 ; index &lt; this.datatable.tabledata.data.length ; index++){
  //      console.log(this.datatable.tabledata.data[index]);
        this.datatable.dataChange.next(this.datatable.tabledata.data[index]);
      }
  
  //     this.datatable.dataSource = this.datatable.data.data;
  //    console.log("inside bindatatablsource ",this.datatable.dataSource);
  
    }
    connect() : Observable&lt;[{}]&gt; {
  
      console.log("connect is called -&gt;  ",this.datatable.dataChange);
      return this.datatable.dataChange;
    }
  
    disconnect(){};
  
  }
  </code></pre>
  
  <p>And below is my <strong>console</strong> output</p>
  
  <p><a href="https://i.stack.imgur.com/8j0SV.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8j0SV.png" alt="Console Output"></a></p>
  
  <p>Appreciate the help.</p>
  
  <p>P.S - the docs are terrible.</p>