[Table] simpler example without example database

Bug, feature request, or proposal:

Docs request

Motivation

https://github.com/angular/material2/issues/5917#issuecomment-316936589

Also, many of the table-related questions posted here and on stack overflow show that folks don’t really understand the purpose and use of ExampleDatabase. They are trying to copy/paste/mold it to fit their solution, when it really is just a support class for the example.

Proposed Example

I think first-time readers would greatly benefit from seeing a single-emission data source without any frills. Then, once they want to know how to make their table more interesting and dynamic, they can learn about the benefits of Subjects, DAOs, etc in the more complicated examples with a better understanding of how the foundation works.

interface Pet {
  name: string;
  type: string;
  age: number;
}


@Component({ ... })
export class TableSimpleExample {
  myPets = [
    { name: 'Boots', type: 'Cat', age: 2 },
    ...
  ];

  dataSource: PetDataSource;

  ngOnInit() {
    this.dataSource = new PetDataSource(this.myPets);
  }
}


export class PetDataSource extends DataSource<Pet> {

  constructor(private pets: Pet[]) {
    super();
  }

  connect(): Observable<Pet[]> {
    return Observable.of(this.pets);
  }
}

[domske]

Anyway it would be possible to design a table completely in HTML. Without data source binding. Like:

<mat-table>
  <mat-header-row>
    <mat-header-cell>One</mat-header-cell>
    <mat-header-cell>Two</mat-header-cell>
    <mat-header-cell>Three</mat-header-cell>
  </mat-header-row>
  <mat-row>
    <mat-cell>Foo</mat-cell>
    <mat-cell>Bar</mat-cell>
    <mat-cell>Haha</mat-cell>
  </mat-row>
</mat-table>

Or conventionally:

<table>
  <thead>
    <tr>
      <th>One</th>
      <th>Two</th>
      <th>Three</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let item of items;">
        <td>{{item.one}}</td>
        <td>{{item.two}}</td>
        <td>{{item.three}}</td>
    </tr>
  </tbody>
</table>

[iposton]

I agree with @willshowell about the md-table example being too complex https://material.angular.io/guide/cdk-table.

For example, I am using the HTTPModule to access my data from an api. I have a JSON res coming back, and I would like to simply add this res to the DataSource for the table to render. I prefer something similar to *ngFor to access json data in the view. I can not figure out how to pass in my JSON data response into the DataSource for the table with the example link above. If anybody has a helpful suggestion please share.

And thank you to the angular-material team for making really amazing stuff for us to use.

import { Component } from '@angular/core';
import { DataSource } from '@angular/cdk';
import { MdSort } from '@angular/material';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import { Observable } from 'rxjs/Observable';
import { Http, Response, RequestOptions, Headers, Request, RequestMethod } from '@angular/http';
import 'rxjs/add/operator/startWith';
import 'rxjs/add/observable/merge';
import 'rxjs/add/observable/of';
import 'rxjs/add/operator/map';

export interface Data {}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  
  title = 'app';
  myData: Array < any > ;
  displayedColumns = ['id', 'name'];
  dataSource: MyDataSource;

  constructor(private http: Http) {
    this.getData();
  }

  public getData() {
    let url = 'https://api.mydatafeeds.com/v1.1/cumulative_player_data.json?';
    let headers = new Headers({ "Authorization": "123ykiki456789123456" });
    let options = new RequestOptions({ headers: headers });
    this.http.get(url, options)
      .map(response => response.json())
      .subscribe(res => {
        this.myData = res;
        this.dataSource = new MyDataSource(this.myData);
      });
  }
}

export class MyDataSource extends DataSource<any> {
  constructor(private data: Data[]) {
    super();
  }
   /** Connect function called by the table to retrieve one stream containing the data to render. */
  connect(): Observable<Data[]> {
    return Observable.of(this.data);
  }

  disconnect() {}

  }

Edit: I made some changes based on the simple code example above. Now my <md-table #table [dataSource]="dataSource"> is seeing my json data and repeating each row based on the length of the json array. But nothing is rendered in the view. The table won’t allow me to use dot notation to get the nested repeated data. Any suggestions? for example:

<md-table #table [dataSource]="dataSource">  
    <ng-container cdkColumnDef="id">
      <md-header-cell *cdkHeaderCellDef> Id </md-header-cell>
      <md-cell *cdkCellDef="let data"> <b>{{data.person.id}}.</b> 
      </md-cell>
    </ng-container>

    <md-header-row *cdkHeaderRowDef="displayedColumns"></md-header-row>
    <md-row *cdkRowDef="let data; columns: displayedColumns;"></md-row>
</md-table>

This doesn’t work. *ngFor example I would get my same json data like this:

<div *ngFor="let data of myData">
{{data.person.id}}
</div>

edit: Nevermind. It works now! I can render my json response in the md-table.