Perf improvements #149

swimlane · Sep 29, 2016 · 04c9f89 · 04c9f89
1 parent 4493b12
commit 04c9f89
Show file tree

Hide file tree

Showing 6 changed files with 25 additions and 12 deletions.
diff --git a/src/components/body/body-row.component.ts b/src/components/body/body-row.component.ts
@@ -12,7 +12,7 @@ import { StateService } from '../../services';
         [ngStyle]="stylesByGroup('left')"
         [style.width]="state.columnGroupWidths.left + 'px'">
         <datatable-body-cell
-          *ngFor="let column of state.columnsByPin.left"
+          *ngFor="let column of state.columnsByPin.left; trackBy: trackColBy"
           [row]="row"
           [column]="column">
         </datatable-body-cell>
@@ -23,7 +23,7 @@ import { StateService } from '../../services';
         [ngStyle]="stylesByGroup('center')"
         *ngIf="state.columnsByPin.center.length">
         <datatable-body-cell
-          *ngFor="let column of state.columnsByPin.center"
+          *ngFor="let column of state.columnsByPin.center; trackBy: trackColBy"
           [row]="row"
           [column]="column">
         </datatable-body-cell>
@@ -34,7 +34,7 @@ import { StateService } from '../../services';
         [ngStyle]="stylesByGroup('right')"
         [style.width]="state.columnGroupWidths.right + 'px'">
         <datatable-body-cell
-          *ngFor="let column of state.columnsByPin.right"
+          *ngFor="let column of state.columnsByPin.right; trackBy: trackColBy"
           [row]="row"
           [column]="column">
         </datatable-body-cell>
@@ -56,6 +56,10 @@ export class DataTableBodyRow {
     renderer.setElementClass(element.nativeElement, 'datatable-body-row', true);
   }
 
+  trackColBy(index: number, obj: any) {
+    return obj.$$id;
+  }
+
   stylesByGroup(group) {
     const widths = this.state.columnGroupWidths;
     const offsetX = this.state.offsetX;

diff --git a/src/components/body/body.component.ts b/src/components/body/body.component.ts
@@ -35,7 +35,7 @@ import { Scroller } from '../../directives';
         <datatable-body-row
           [ngStyle]="getRowsStyles(row)"
           [style.height]="state.options.rowHeight + 'px'"
-          *ngFor="let row of rows; let i = index;"
+          *ngFor="let row of rows; let i = index; trackBy: trackRowBy"
           [attr.tabindex]="i"
           (click)="rowClicked($event, i, row)"
           (keydown)="rowKeydown($event, i, row)"
@@ -113,6 +113,10 @@ export class DataTableBody implements OnInit, OnDestroy {
     }));
   }
 
+  trackRowBy(index: number, obj: any) {
+    return obj.$$index;
+  }
+
   onBodyScroll(props) {
     this.state.offsetY = props.scrollYPos;
     this.state.offsetX = props.scrollXPos;

diff --git a/src/components/datatable.component.ts b/src/components/datatable.component.ts
@@ -32,13 +32,15 @@ import { StateService } from '../services';
       visibility-observer
       (onVisibilityChange)="adjustSizes()">
       <datatable-header
+        *ngIf="state.options.headerHeight"
         (onColumnChange)="onColumnChange.emit($event)">
       </datatable-header>
       <datatable-body
         (onRowClick)="onRowClick.emit($event)"
         (onRowSelect)="onRowSelect($event)">
       </datatable-body>
       <datatable-footer
+         *ngIf="state.options.footerHeight"
         (onPageChange)="state.setPage($event)">
       </datatable-footer>
     </div>

diff --git a/src/components/footer/footer.component.ts b/src/components/footer/footer.component.ts
@@ -12,7 +12,6 @@ import { StateService } from '../../services';
   selector: 'datatable-footer',
   template: `
     <div
-      *ngIf="state.options.footerHeight"
       [style.height]="state.options.footerHeight">
       <div class="page-count">{{state.rowCount}} total</div>
       <datatable-pager

diff --git a/src/components/header/header.component.ts b/src/components/header/header.component.ts
@@ -22,7 +22,7 @@ import { translateXY } from '../../utils';
         [ngStyle]="stylesByGroup('left')"
         *ngIf="state.columnsByPin.left.length">
         <datatable-header-cell
-          *ngFor="let column of state.columnsByPin.left"
+          *ngFor="let column of state.columnsByPin.left; trackBy: trackColBy"
           resizeable
           [resizeEnabled]="column.resizeable"
           (onResize)="columnResized($event, column)"
@@ -41,7 +41,7 @@ import { translateXY } from '../../utils';
         [ngStyle]="stylesByGroup('center')"
         *ngIf="state.columnsByPin.center.length">
         <datatable-header-cell
-          *ngFor="let column of state.columnsByPin.center"
+          *ngFor="let column of state.columnsByPin.center; trackBy: trackColBy"
           resizeable
           [resizeEnabled]="column.resizeable"
           (onResize)="columnResized($event, column)"
@@ -60,7 +60,7 @@ import { translateXY } from '../../utils';
         [ngStyle]="stylesByGroup('right')"
         *ngIf="state.columnsByPin.right.length">
         <datatable-header-cell
-          *ngFor="let column of state.columnsByPin.right"
+          *ngFor="let column of state.columnsByPin.right; trackBy: trackColBy"
           resizeable
           [resizeEnabled]="column.resizeable"
           (onResize)="columnResized($event, column)"
@@ -102,6 +102,10 @@ export class DataTableHeader {
     renderer.setElementClass(element.nativeElement, 'datatable-header', true);
   }
 
+  trackColBy(index: number, obj: any) {
+    return obj.$$id;
+  }
+
   columnResized(width, column) {
     if (width <= column.minWidth) {
       width = column.minWidth;

diff --git a/src/demos/module.ts b/src/demos/module.ts
@@ -10,14 +10,15 @@ import '../components/datatable.scss';
 // import { App } from './server-paging';
 // import { App } from './server-sorting';
 // import { App } from './selection';
-import { App } from './expressive';
+// import { App } from './expressive';
 // import { App } from './template';
 // import { App } from './details';
-// import { App } from './virtual';
+import { App } from './virtual';
 // import { App } from './inline';
 // import { App } from './scrolling';
 // import { App } from './pinning';
 // import { App } from './multiple';
+// import { App } from './columns';
 
 @NgModule({
   declarations: [App],
@@ -26,8 +27,7 @@ import { App } from './expressive';
 })
 export class AppModule {
 
-  constructor(private appRef: ApplicationRef) {
-  }
+  constructor(private appRef: ApplicationRef) { }
 
   hmrOnDestroy(store) {
     const cmpLocation = this.appRef.components.map(cmp => cmp.location.nativeElement);