rebase

Author: andrewseguin

src/demo-app/data-table/data-table-demo.html

@@ -3,16 +3,20 @@
     <button md-raised-button (click)="connect()">Connect New Data Source</button>
     <button md-raised-button (click)="disconnect()" [disabled]="!dataSource">Disconnect Data Source</button>
 
+    <div>
     <button md-raised-button (click)="_peopleDatabase.shuffle(changeReferences)">Randomize Data</button>
     <md-checkbox [(ngModel)]="changeReferences">Change references</md-checkbox>
+  </div>
 
-    <span>Track By</span>
+    <div class="demo-track-by-select">
+    <div class="demo-track-by-label">Track By</div>
     <md-radio-group [(ngModel)]="trackByStrategy">
-      <md-radio-button [value]="'id'">ID</md-radio-button>
       <md-radio-button [value]="'reference'">Reference</md-radio-button>
+      <md-radio-button [value]="'id'">ID</md-radio-button>
       <md-radio-button [value]="'index'">Index</md-radio-button>
     </md-radio-group>
   </div>
+</div>
 
   <div class="demo-highlighter">
     Highlight:

src/demo-app/data-table/data-table-demo.scss

@@ -17,6 +17,15 @@
     margin: 16px 0;
   }
 
+  .demo-track-by-select {
+    display: flex;
+    align-items: center;
+
+    .demo-track-by-label {
+      margin-right: 8px;
+    }
+  }
+
   .demo-highlighter .mat-checkbox {
     margin: 0 8px;
   }

src/demo-app/data-table/people-database.ts

@@ -24,7 +24,7 @@ export class PeopleDatabase {
 
   initialize() {
     LATEST_ID = 0;
-    this.data = [];
+    this.dataChange.next([]);
     for (let i = 0; i < 100; i++) { this.addPerson(); }
   }