(enhancement): add rxjs support!

demo/app.component.ts

@@ -21,6 +21,7 @@ import { Component } from '@angular/core';
               <li><a href="#" (click)="state='filter'">Filtering</a></li>
               <li><a href="#" (click)="state='hidden'">Hidden On Load</a></li>
               <li><a href="#" (click)="state='live'">Live Data</a></li>
+              <li><a href="#" (click)="state='rx'">RxJS</a></li>
             </ul>
           </li>
           <li>
@@ -85,6 +86,7 @@ import { Component } from '@angular/core';
         <filter-demo *ngIf="state === 'filter'"></filter-demo>
         <tabs-demo *ngIf="state === 'hidden'"></tabs-demo>
         <live-data-demo *ngIf="state === 'live'"></live-data-demo>
+        <rx-demo *ngIf="state === 'rx'"></rx-demo>
 
         <!-- Paging -->
         <client-paging-demo *ngIf="state === 'client-paging'"></client-paging-demo>

demo/basic/rx.ts

@@ -0,0 +1,55 @@
+import { Component } from '@angular/core';
+import { Observable } from 'rxjs/Rx';
+
+@Component({
+  selector: 'rx-demo',
+  template: `
+    <div>
+      <h3>Fix Row Height</h3>
+      <datatable
+        class="material striped"
+        [rows]="rows"
+        [columns]="columns"
+        [columnMode]="'force'"
+        [headerHeight]="50"
+        [footerHeight]="50"
+        [rowHeight]="50">
+      </datatable>
+    </div>
+  `
+})
+export class RxDemoComponent {
+
+  rows: Observable<any[]>;
+
+  columns = [
+    { prop: 'Organization' },
+    { prop: 'DateAdded' },
+    { name: 'Tags' }
+  ];
+
+  constructor() {
+    this.rows = Observable.create((subscriber) => {
+      this.fetch((data) => {
+        subscriber.next(data.splice(0, 15));
+        subscriber.next(data.splice(15, 30));
+        subscriber.complete();
+      });
+    });
+
+    // Rx.DOM.ajax({ url: '/products', responseType: 'json'}).subscribe()
+    // this.rows = Observable.from(rows);
+  }
+
+  fetch(cb) {
+    const req = new XMLHttpRequest();
+    req.open('GET', `assets/data/security.json`);
+
+    req.onload = () => {
+      cb(JSON.parse(req.response));
+    };
+
+    req.send();
+  }
+
+}

demo/index.html

@@ -136,7 +136,7 @@
       height: 100%;
       width: 200px;
       position: absolute;
-      min-height: 1200px;
+      min-height: 1500px;
       font-size:14px;
       box-shadow: 0 7px 8px -4px rgba(0,0,0,.2),0 13px 19px 2px rgba(0,0,0,.14),0 5px 24px 4px rgba(0,0,0,.12);
     }

demo/module.ts

@@ -19,6 +19,7 @@ import { RowDetailsComponent } from './basic/row-detail';
 import { FilterBarComponent } from './basic/filter';
 import { TabsDemoComponent } from './basic/tabs';
 import { LiveDataComponent } from './basic/live';
+import { RxDemoComponent } from './basic/rx';
 
 // -- Paging
 import { ClientPagingComponent } from './paging/paging-client';
@@ -77,7 +78,8 @@ import { ColumnPinningComponent } from './columns/pinning';
     SingleSelectionComponent,
     LiveDataComponent,
     MultiShiftSelectionComponent,
-    MultiDisableSelectionComponent
+    MultiDisableSelectionComponent,
+    RxDemoComponent
   ],
   imports: [BrowserModule, Angular2DataTableModule],
   bootstrap: [AppComponent]

src/components/datatable.component.ts

@@ -1,8 +1,10 @@
 import {
   Component, Input, Output, ElementRef, EventEmitter, ViewChild,
   HostListener, ContentChildren, OnInit, QueryList, AfterViewInit,
-  HostBinding, Renderer, ContentChild, TemplateRef, ChangeDetectionStrategy
+  HostBinding, Renderer, ContentChild, TemplateRef, ChangeDetectionStrategy,
+  ChangeDetectorRef
 } from '@angular/core';
+import { Observable } from 'rxjs/Rx';
 
 import { forceFillColumnWidths, adjustColumnWidths, sortRows } from '../utils';
 import { ColumnMode, SortType, SelectionType } from '../types';
@@ -79,16 +81,29 @@ import { scrollbarWidth, setColumnDefaults, translateTemplates } from '../utils'
 export class DatatableComponent implements OnInit, AfterViewInit {
 
   // Rows
-  @Input() set rows(val: any[]) {
-    if (!this.externalSorting) {
-      val = sortRows(val, this.columns, this.sorts);
-    }
+  @Input() set rows(val: any) {
+    // if a observable was passed, lets convert to array
+    if(val instanceof Observable) {
+      val.concatMap((v) => v)
+         .toArray()
+         .subscribe((r) => {
+           this.rows = r;
+           this.cdr.markForCheck();
+         });
+    } else {
+       // auto sort on new updates
+      if (!this.externalSorting) {
+        val = sortRows(val, this.columns, this.sorts);
+      }
 
-    this._rows = val;
-    this.recalculate();
+      this._rows = val;
+
+      // recalculate sizes/etc
+      this.recalculate();
+    }
   }
 
-  get rows(): any[] {
+  get rows(): any {
     return this._rows;
   }
 
@@ -287,7 +302,7 @@ export class DatatableComponent implements OnInit, AfterViewInit {
   private _columnTemplates: QueryList<DataTableColumnDirective>;
   private _rowDetailTemplateChild: DatatableRowDetailDirective;
 
-  constructor(renderer: Renderer, element: ElementRef) {
+  constructor(renderer: Renderer, element: ElementRef, private cdr: ChangeDetectorRef) {
     this.element = element.nativeElement;
     renderer.setElementClass(this.element, 'datatable', true);
   }