(test): testing live update

swimlane · Nov 15, 2016 · 880e36e · 880e36e
1 parent cc11f77
commit 880e36e
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 3 deletions.
diff --git a/demo/basic/live.ts b/demo/basic/live.ts
@@ -19,6 +19,7 @@ import { Component } from '@angular/core';
         [columnMode]="'force'"
         [footerHeight]="50"
         [rowHeight]="'auto'"
+        [trackByProp]="'updated'"
         [rows]="rows">
         <datatable-column name="Type" prop="Type"></datatable-column>
         <datatable-column name="Organization" prop="Organization"></datatable-column>
@@ -42,7 +43,10 @@ export class LiveDataComponent {
 
   constructor() {
     this.fetch((data) => {
-      this.rows = data;
+      this.rows = data.map(d => {
+        d.updated = Date.now().toString();
+        return d;
+      });
     });
 
     this.start();
@@ -69,7 +73,9 @@ export class LiveDataComponent {
     const prop = this.cols[cellNum];
 
     if(this.rows.length) {
-      this.rows[rowNum][prop] = this.rows[newRow][prop];
+      let row = this.rows[rowNum];
+      row[prop] = this.rows[newRow][prop];
+      row.updated = Date.now().toString();
     }
 
     this.start();

diff --git a/src/components/body/body.component.ts b/src/components/body/body.component.ts
@@ -30,7 +30,7 @@ import { ScrollerComponent } from './scroller.component';
         [scrollWidth]="columnGroupWidths.total"
         (scroll)="onBodyScroll($event)">
         <datatable-row-wrapper 
-          *ngFor="let row of temp; let i = index; trackBy: row?.$$index"
+          *ngFor="let row of temp; let i = index; trackBy: rowTracking"
           [ngStyle]="getRowsStyles(row)"
           [rowDetailTemplate]="rowDetailTemplate"
           [detailRowHeight]="detailRowHeight"
@@ -71,6 +71,7 @@ export class DataTableBodyComponent {
   @Input() rowIdentity: any;
   @Input() rowDetailTemplate: any;
   @Input() selectCheck: any;
+  @Input() trackByProp: string;
 
   @Input() set pageSize(val: number) {
     this._pageSize = val;
@@ -186,6 +187,14 @@ export class DataTableBodyComponent {
     renderer.setElementClass(element.nativeElement, 'datatable-body', true);
   }
 
+  rowTracking(index: number, row: any): any {
+    if(this.trackByProp) {
+      return `${row.$$index}-${this.trackByProp}`;
+    } else {
+      return row.$$index;
+    }
+  }
+
   updateOffsetY(offset?: number): void {
     if(this.scrollbarV && offset) {
       // First get the row Index that we need to move to.

diff --git a/src/components/datatable.component.ts b/src/components/datatable.component.ts
@@ -40,6 +40,7 @@ import { scrollbarWidth, setColumnDefaults, translateTemplates } from '../utils'
         [rowHeight]="rowHeight"
         [rowCount]="rowCount"
         [offset]="offset"
+        [trackByProp]="trackByProp"
         [columns]="columns"
         [pageSize]="pageSize"
         [offsetX]="offsetX"
@@ -195,6 +196,10 @@ export class DatatableComponent implements OnInit, AfterViewInit {
   // (selection) => { return selection !== 'Ethel Price'; }
   @Input() selectCheck: any;
 
+  // Property to which you can use for custom tracking of rows
+  // Example: 'name'
+  @Input() trackByProp: string;
+
   @Output() scroll: EventEmitter<any> = new EventEmitter();
   @Output() activate: EventEmitter<any> = new EventEmitter();
   @Output() select: EventEmitter<any> = new EventEmitter();