@swimlane/ngx-datatable 13.1.0 → 15.0.2

package/src/components/body/body-group-header.directive.ts

@@ -1,16 +1,25 @@
-import { Input, Output, EventEmitter, Directive, TemplateRef, ContentChild } from '@angular/core';
+import {
+  Input,
+  Output,
+  EventEmitter,
+  Directive,
+  TemplateRef,
+  ContentChild
+} from '@angular/core';
 import { DatatableGroupHeaderTemplateDirective } from './body-group-header-template.directive';
 
 @Directive({ selector: 'ngx-datatable-group-header' })
 export class DatatableGroupHeaderDirective {
-
   /**
    * Row height is required when virtual scroll is enabled.
    */
-  @Input() rowHeight: (number | ((group?: any, index?: number) => number)) = 0;
+  @Input() rowHeight: number | ((group?: any, index?: number) => number) = 0;
 
   @Input()
-  @ContentChild(DatatableGroupHeaderTemplateDirective, { read: TemplateRef })
+  @ContentChild(DatatableGroupHeaderTemplateDirective, {
+    read: TemplateRef,
+    static: true
+  })
   template: TemplateRef<any>;
 
   /**
@@ -47,5 +56,4 @@ export class DatatableGroupHeaderDirective {
       value: false
     });
   }
-
 }

package/src/components/body/body-row.component.ts

@@ -118,7 +118,7 @@ export class DataTableBodyRowComponent implements DoCheck {
   _offsetX: number;
   _columns: any[];
   _innerWidth: number;
-  _groupStyles = {
+  _groupStyles: {[prop: string]: {}} = {
     left: {},
     center: {},
     right: {}
@@ -150,9 +150,9 @@ export class DataTableBodyRowComponent implements DoCheck {
   }
 
   buildStylesByGroup() {
-    this._groupStyles['left'] = this.calcStylesByGroup('left');
-    this._groupStyles['center'] = this.calcStylesByGroup('center');
-    this._groupStyles['right'] = this.calcStylesByGroup('right');
+    this._groupStyles.left = this.calcStylesByGroup('left');
+    this._groupStyles.center = this.calcStylesByGroup('center');
+    this._groupStyles.right = this.calcStylesByGroup('right');
     this.cd.markForCheck();
   }
 

package/src/components/body/body.component.ts

@@ -1,8 +1,21 @@
 import {
-  Component, Output, EventEmitter, Input, HostBinding, ChangeDetectorRef,
-  ViewChild, OnInit, OnDestroy, ChangeDetectionStrategy
+  Component,
+  Output,
+  EventEmitter,
+  Input,
+  HostBinding,
+  ChangeDetectorRef,
+  ViewChild,
+  OnInit,
+  OnDestroy,
+  ChangeDetectionStrategy
 } from '@angular/core';
-import { translateXY, columnsByPin, columnGroupWidths, RowHeightCache } from '../../utils';
+import {
+  translateXY,
+  columnsByPin,
+  columnGroupWidths,
+  RowHeightCache
+} from '../../utils';
 import { SelectionType } from '../../types';
 import { ScrollerComponent } from './scroller.component';
 import { MouseEvent } from '../../events';
@@ -19,38 +32,40 @@ import { MouseEvent } from '../../events';
       [selectionType]="selectionType"
       [rowIdentity]="rowIdentity"
       (select)="select.emit($event)"
-      (activate)="activate.emit($event)">
-      <datatable-progress
-        *ngIf="loadingIndicator">
-      </datatable-progress>
+      (activate)="activate.emit($event)"
+    >
+      <datatable-progress *ngIf="loadingIndicator"> </datatable-progress>
       <datatable-scroller
         *ngIf="rows?.length"
         [scrollbarV]="scrollbarV"
         [scrollbarH]="scrollbarH"
         [scrollHeight]="scrollHeight"
         [scrollWidth]="columnGroupWidths?.total"
-        (scroll)="onBodyScroll($event)">
+        (scroll)="onBodyScroll($event)"
+      >
         <datatable-summary-row
           *ngIf="summaryRow && summaryPosition === 'top'"
           [rowHeight]="summaryHeight"
           [offsetX]="offsetX"
           [innerWidth]="innerWidth"
           [rows]="rows"
-          [columns]="columns">
+          [columns]="columns"
+        >
         </datatable-summary-row>
         <datatable-row-wrapper
           [groupedRows]="groupedRows"
-          *ngFor="let group of temp; let i = index; trackBy: rowTrackingFn;"
+          *ngFor="let group of temp; let i = index; trackBy: rowTrackingFn"
           [innerWidth]="innerWidth"
           [ngStyle]="getRowsStyles(group)"
           [rowDetail]="rowDetail"
           [groupHeader]="groupHeader"
           [offsetX]="offsetX"
-          [detailRowHeight]="getDetailRowHeight(group[i],i)"
+          [detailRowHeight]="getDetailRowHeight(group[i], i)"
           [row]="group"
           [expanded]="getRowExpanded(group)"
           [rowIndex]="getRowIndex(group[i])"
-          (rowContextmenu)="rowContextmenu.emit($event)">
+          (rowContextmenu)="rowContextmenu.emit($event)"
+        >
           <datatable-body-row
             *ngIf="!groupedRows; else groupedRowsTemplate"
             tabindex="-1"
@@ -66,11 +81,16 @@ import { MouseEvent } from '../../events';
             [displayCheck]="displayCheck"
             [treeStatus]="group.treeStatus"
             (treeAction)="onTreeAction(group)"
-            (activate)="selector.onActivate($event, indexes.first + i)">
+            (activate)="selector.onActivate($event, indexes.first + i)"
+          >
           </datatable-body-row>
           <ng-template #groupedRowsTemplate>
             <datatable-body-row
-              *ngFor="let row of group.value; let i = index; trackBy: rowTrackingFn;"
+              *ngFor="
+                let row of group.value;
+                let i = index;
+                trackBy: rowTrackingFn
+              "
               tabindex="-1"
               [isSelected]="selector.getRowSelected(row)"
               [innerWidth]="innerWidth"
@@ -82,7 +102,8 @@ import { MouseEvent } from '../../events';
               [rowIndex]="getRowIndex(row)"
               [expanded]="getRowExpanded(row)"
               [rowClass]="rowClass"
-              (activate)="selector.onActivate($event, i)">
+              (activate)="selector.onActivate($event, i)"
+            >
             </datatable-body-row>
           </ng-template>
         </datatable-row-wrapper>
@@ -93,14 +114,15 @@ import { MouseEvent } from '../../events';
           [offsetX]="offsetX"
           [innerWidth]="innerWidth"
           [rows]="rows"
-          [columns]="columns">
+          [columns]="columns"
+        >
         </datatable-summary-row>
       </datatable-scroller>
       <div
         class="empty-row"
         *ngIf="!rows?.length && !loadingIndicator"
-        [innerHTML]="emptyMessage">
-      </div>
+        [innerHTML]="emptyMessage"
+      ></div>
     </datatable-selection>
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -109,7 +131,6 @@ import { MouseEvent } from '../../events';
   }
 })
 export class DataTableBodyComponent implements OnInit, OnDestroy {
-
   @Input() scrollbarV: boolean;
   @Input() scrollbarH: boolean;
   @Input() loadingIndicator: boolean;
@@ -212,10 +233,12 @@ export class DataTableBodyComponent implements OnInit, OnDestroy {
   @Output() activate: EventEmitter<any> = new EventEmitter();
   @Output() select: EventEmitter<any> = new EventEmitter();
   @Output() detailToggle: EventEmitter<any> = new EventEmitter();
-  @Output() rowContextmenu = new EventEmitter<{ event: MouseEvent, row: any }>(false);
+  @Output() rowContextmenu = new EventEmitter<{ event: MouseEvent; row: any }>(
+    false
+  );
   @Output() treeAction: EventEmitter<any> = new EventEmitter();
 
-  @ViewChild(ScrollerComponent) scroller: ScrollerComponent;
+  @ViewChild(ScrollerComponent, { static: false }) scroller: ScrollerComponent;
 
   /**
    * Returns if selection is enabled.
@@ -260,15 +283,14 @@ export class DataTableBodyComponent implements OnInit, OnDestroy {
    */
   constructor(private cd: ChangeDetectorRef) {
     // declare fn here so we can get access to the `this` property
-    this.rowTrackingFn = function(this: any, index: number, row: any): any {
+    this.rowTrackingFn = (index: number, row: any): any => {
       const idx = this.getRowIndex(row);
       if (this.trackByProp) {
-        return `${idx}-${this.trackByProp}`;
+        return row[this.trackByProp];
       } else {
         return idx;
       }
-    }.bind(this);
-
+    };
   }
 
   /**
@@ -276,8 +298,8 @@ export class DataTableBodyComponent implements OnInit, OnDestroy {
    */
   ngOnInit(): void {
     if (this.rowDetail) {
-      this.listener = this.rowDetail.toggle
-        .subscribe(({ type, value }: { type: string, value: any }) => {
+      this.listener = this.rowDetail.toggle.subscribe(
+        ({ type, value }: { type: string; value: any }) => {
           if (type === 'row') this.toggleRowExpansion(value);
           if (type === 'all') this.toggleAllRows(value);
 
@@ -286,12 +308,13 @@ export class DataTableBodyComponent implements OnInit, OnDestroy {
           this.updateIndexes();
           this.updateRows();
           this.cd.markForCheck();
-        });
+        }
+      );
     }
 
     if (this.groupHeader) {
-      this.listener = this.groupHeader.toggle
-        .subscribe(({ type, value }: { type: string, value: any }) => {
+      this.listener = this.groupHeader.toggle.subscribe(
+        ({ type, value }: { type: string; value: any }) => {
           if (type === 'group') this.toggleRowExpansion(value);
           if (type === 'all') this.toggleAllRows(value);
 
@@ -300,7 +323,8 @@ export class DataTableBodyComponent implements OnInit, OnDestroy {
           this.updateIndexes();
           this.updateRows();
           this.cd.markForCheck();
-        });
+        }
+      );
     }
   }
 
@@ -386,7 +410,7 @@ export class DataTableBodyComponent implements OnInit, OnDestroy {
     // if grouprowsby has been specified treat row paging
     // parameters as group paging parameters ie if limit 10 has been
     // specified treat it as 10 groups rather than 10 rows
-    if(this.groupedRows) {
+    if (this.groupedRows) {
       let maxRowsPerGroup = 3;
       // if there is only one group set the maximum number of
       // rows per group the same as the total number of rows
@@ -547,7 +571,7 @@ export class DataTableBodyComponent implements OnInit, OnDestroy {
    * Hides the loading indicator
    */
   hideIndicator(): void {
-    setTimeout(() => this.loadingIndicator = false, 500);
+    setTimeout(() => (this.loadingIndicator = false), 500);
   }
 
   /**
@@ -577,7 +601,7 @@ export class DataTableBodyComponent implements OnInit, OnDestroy {
       if (!this.externalPaging) {
         first = Math.max(this.offset * this.pageSize, 0);
       }
-      last = Math.min((first + this.pageSize), this.rowCount);
+      last = Math.min(first + this.pageSize, this.rowCount);
     }
 
     this.indexes = { first, last };
@@ -619,8 +643,12 @@ export class DataTableBodyComponent implements OnInit, OnDestroy {
     const viewPortFirstRowIndex = this.indexes.first;
 
     if (this.scrollbarV && this.virtualization) {
-      const offsetScroll = this.rowHeightsCache.query(viewPortFirstRowIndex - 1);
-      return offsetScroll <= this.offsetY ? viewPortFirstRowIndex - 1 : viewPortFirstRowIndex;
+      const offsetScroll = this.rowHeightsCache.query(
+        viewPortFirstRowIndex - 1
+      );
+      return offsetScroll <= this.offsetY
+        ? viewPortFirstRowIndex - 1
+        : viewPortFirstRowIndex;
     }
 
     return viewPortFirstRowIndex;
@@ -639,7 +667,8 @@ export class DataTableBodyComponent implements OnInit, OnDestroy {
 
     // If the detailRowHeight is auto --> only in case of non-virtualized scroll
     if (this.scrollbarV && this.virtualization) {
-      const detailRowHeight = this.getDetailRowHeight(row) * (expanded ? -1 : 1);
+      const detailRowHeight =
+        this.getDetailRowHeight(row) * (expanded ? -1 : 1);
       // const idx = this.rowIndexes.get(row) || 0;
       const idx = this.getRowIndex(row);
       this.rowHeightsCache.update(idx, detailRowHeight);
@@ -710,9 +739,9 @@ export class DataTableBodyComponent implements OnInit, OnDestroy {
       width: `${widths[group]}px`
     };
 
-    if(group === 'left') {
+    if (group === 'left') {
       translateXY(styles, offsetX, 0);
-    } else if(group === 'right') {
+    } else if (group === 'right') {
       const bodyWidth = parseInt(this.innerWidth + '', 0);
       const totalDiff = widths.total - bodyWidth;
       const offsetDiff = totalDiff - offsetX;
@@ -747,5 +776,4 @@ export class DataTableBodyComponent implements OnInit, OnDestroy {
   onTreeAction(row: any) {
     this.treeAction.emit({ row });
   }
-
 }

package/src/components/columns/column.directive.ts

@@ -1,15 +1,19 @@
-import { Directive, TemplateRef, ContentChild, Input, OnChanges, SimpleChanges } from '@angular/core';
+import {
+  Directive,
+  TemplateRef,
+  ContentChild,
+  Input,
+  OnChanges,
+  SimpleChanges
+} from '@angular/core';
 import { DataTableColumnHeaderDirective } from './column-header.directive';
 import { DataTableColumnCellDirective } from './column-cell.directive';
-import {
-  DataTableColumnCellTreeToggle
-} from './tree.directive';
+import { DataTableColumnCellTreeToggle } from './tree.directive';
 import { TableColumnProp } from '../../types';
 import { ColumnChangesService } from '../../services/column-changes.service';
 
 @Directive({ selector: 'ngx-datatable-column' })
 export class DataTableColumnDirective implements OnChanges {
-  
   @Input() name: string;
   @Input() prop: TableColumnProp;
   @Input() frozenLeft: any;
@@ -26,28 +30,37 @@ export class DataTableColumnDirective implements OnChanges {
   @Input() maxWidth: number;
   @Input() checkboxable: boolean;
   @Input() headerCheckboxable: boolean;
-  @Input() headerClass: string | ((data: any) => string|any);
-  @Input() cellClass: string | ((data: any) => string|any);
+  @Input() headerClass: string | ((data: any) => string | any);
+  @Input() cellClass: string | ((data: any) => string | any);
   @Input() isTreeColumn: boolean;
   @Input() treeLevelIndent: number;
   @Input() summaryFunc: (cells: any[]) => any;
   @Input() summaryTemplate: TemplateRef<any>;
 
   @Input()
-  @ContentChild(DataTableColumnCellDirective, { read: TemplateRef })
+  @ContentChild(DataTableColumnCellDirective, {
+    read: TemplateRef,
+    static: true
+  })
   cellTemplate: TemplateRef<any>;
 
   @Input()
-  @ContentChild(DataTableColumnHeaderDirective, { read: TemplateRef })
+  @ContentChild(DataTableColumnHeaderDirective, {
+    read: TemplateRef,
+    static: true
+  })
   headerTemplate: TemplateRef<any>;
 
   @Input()
-  @ContentChild(DataTableColumnCellTreeToggle, { read: TemplateRef })
+  @ContentChild(DataTableColumnCellTreeToggle, {
+    read: TemplateRef,
+    static: true
+  })
   treeToggleTemplate: TemplateRef<any>;
   private isFirstChange = true;
-  
+
   constructor(private columnChangesService: ColumnChangesService) {}
-  
+
   ngOnChanges() {
     if (this.isFirstChange) {
       this.isFirstChange = false;

package/src/components/datatable.component.ts

@@ -640,26 +640,26 @@ export class DatatableComponent implements OnInit, DoCheck, AfterViewInit {
   /**
    * Row Detail templates gathered from the ContentChild
    */
-  @ContentChild(DatatableRowDetailDirective)
+  @ContentChild(DatatableRowDetailDirective, { static: false })
   rowDetail: DatatableRowDetailDirective;
 
   /**
    * Group Header templates gathered from the ContentChild
    */
-  @ContentChild(DatatableGroupHeaderDirective)
+  @ContentChild(DatatableGroupHeaderDirective, { static: false })
   groupHeader: DatatableGroupHeaderDirective;
 
   /**
    * Footer template gathered from the ContentChild
    */
-  @ContentChild(DatatableFooterDirective)
+  @ContentChild(DatatableFooterDirective, { static: false })
   footer: DatatableFooterDirective;
 
   /**
    * Reference to the body component for manually
    * invoking functions on the body.
    */
-  @ViewChild(DataTableBodyComponent)
+  @ViewChild(DataTableBodyComponent, { static: false })
   bodyComponent: DataTableBodyComponent;
 
   /**
@@ -670,7 +670,7 @@ export class DatatableComponent implements OnInit, DoCheck, AfterViewInit {
    * @type {DataTableHeaderComponent}
    * @memberOf DatatableComponent
    */
-  @ViewChild(DataTableHeaderComponent)
+  @ViewChild(DataTableHeaderComponent, { static: false })
   headerComponent: DataTableHeaderComponent;
 
   /**

package/src/components/footer/footer.component.spec.ts

@@ -249,23 +249,25 @@ describe('DataTableFooterComponent', () => {
       [selectedCount]="selectedCount"
       [selectedMessage]="selectedMessage"
       [pagerNextIcon]="pagerNextIcon"
-      (page)="onPageEvent($event)">
+      (page)="onPageEvent($event)"
+    >
     </datatable-footer>
-    
+
     <ng-template
       #testTemplate
       let-rowCount="rowCount"
       let-pageSize="pageSize"
       let-selectedCount="selectedCount"
       let-curPage="curPage"
-      let-offset="offset">
-        <ul id="template-list">
-          <li>rowCount {{rowCount}}</li>
-          <li>pageSize {{pageSize}}</li>
-          <li>selectedCount {{selectedCount}}</li>
-          <li>curPage {{curPage}}</li>
-          <li>offset {{offset}}</li>
-        </ul>
+      let-offset="offset"
+    >
+      <ul id="template-list">
+        <li>rowCount {{ rowCount }}</li>
+        <li>pageSize {{ pageSize }}</li>
+        <li>selectedCount {{ selectedCount }}</li>
+        <li>curPage {{ curPage }}</li>
+        <li>offset {{ offset }}</li>
+      </ul>
     </ng-template>
   `
 })
@@ -288,7 +290,7 @@ class TestFixtureComponent {
    * selectively be passed to the DatatableFooterComponent
    * in these unit tests
    */
-  @ViewChild('testTemplate', { read: TemplateRef })
+  @ViewChild('testTemplate', { read: TemplateRef, static: true })
   testTemplate: TemplateRef<any>;
 
   onPageEvent() {

package/src/components/footer/footer.directive.ts

@@ -1,9 +1,15 @@
-import { Input, Output, EventEmitter, Directive, TemplateRef, ContentChild } from '@angular/core';
+import {
+  Input,
+  Output,
+  EventEmitter,
+  Directive,
+  TemplateRef,
+  ContentChild
+} from '@angular/core';
 import { DataTableFooterTemplateDirective } from './footer-template.directive';
 
 @Directive({ selector: 'ngx-datatable-footer' })
 export class DatatableFooterDirective {
-
   @Input() footerHeight: number;
   @Input() totalMessage: string;
   @Input() selectedMessage: string | boolean;
@@ -13,7 +19,9 @@ export class DatatableFooterDirective {
   @Input() pagerNextIcon: string;
 
   @Input()
-  @ContentChild(DataTableFooterTemplateDirective, { read: TemplateRef }) 
+  @ContentChild(DataTableFooterTemplateDirective, {
+    read: TemplateRef,
+    static: false
+  })
   template: TemplateRef<any>;
-
 }

package/src/components/header/header.component.ts

@@ -134,7 +134,7 @@ export class DataTableHeaderComponent {
   _offsetX: number;
   _columns: any[];
   _headerHeight: string;
-  _styleByGroup = {
+  _styleByGroup: {[prop: string]: {}} = {
     left: {},
     center: {},
     right: {}
@@ -277,9 +277,9 @@ export class DataTableHeaderComponent {
   }
 
   setStylesByGroup() {
-    this._styleByGroup['left'] = this.calcStylesByGroup('left');
-    this._styleByGroup['center'] = this.calcStylesByGroup('center');
-    this._styleByGroup['right'] = this.calcStylesByGroup('right');
+    this._styleByGroup.left = this.calcStylesByGroup('left');
+    this._styleByGroup.center = this.calcStylesByGroup('center');
+    this._styleByGroup.right = this.calcStylesByGroup('right');
     this.cd.detectChanges();
   }
 

package/src/components/row-detail/row-detail.directive.ts

@@ -1,17 +1,26 @@
-import { Input, Output, EventEmitter, Directive, TemplateRef, ContentChild } from '@angular/core';
+import {
+  Input,
+  Output,
+  EventEmitter,
+  Directive,
+  TemplateRef,
+  ContentChild
+} from '@angular/core';
 import { DatatableRowDetailTemplateDirective } from './row-detail-template.directive';
 
 @Directive({ selector: 'ngx-datatable-row-detail' })
 export class DatatableRowDetailDirective {
-
   /**
-   * The detail row height is required especially 
+   * The detail row height is required especially
    * when virtual scroll is enabled.
    */
-  @Input() rowHeight: (number | ((row?: any, index?: number) => number)) = 0;
+  @Input() rowHeight: number | ((row?: any, index?: number) => number) = 0;
 
   @Input()
-  @ContentChild(DatatableRowDetailTemplateDirective, { read: TemplateRef }) 
+  @ContentChild(DatatableRowDetailTemplateDirective, {
+    read: TemplateRef,
+    static: true
+  })
   template: TemplateRef<any>;
 
   /**
@@ -48,5 +57,4 @@ export class DatatableRowDetailDirective {
       value: false
     });
   }
-
 }

package/src/directives/orderable.directive.ts

@@ -3,7 +3,7 @@ import {
   QueryList, KeyValueDiffers, AfterContentInit, OnDestroy, Inject
 } from '@angular/core';
 import { DraggableDirective } from './draggable.directive';
-import { DOCUMENT } from '@angular/platform-browser';
+import { DOCUMENT } from '@angular/common';
 
 @Directive({ selector: '[orderable]' })
 export class OrderableDirective implements AfterContentInit, OnDestroy {

package/src/services/scrollbar-helper.service.ts

@@ -1,5 +1,5 @@
 import { Inject, Injectable } from '@angular/core';
-import { DOCUMENT } from '@angular/platform-browser';
+import { DOCUMENT } from '@angular/common';
 
 /**
  * Gets the width of the scrollbar.  Nesc for windows
@@ -7,10 +7,9 @@ import { DOCUMENT } from '@angular/platform-browser';
  */
 @Injectable()
 export class ScrollbarHelper {
-
   width: number = this.getWidth();
 
-  constructor(@Inject(DOCUMENT) private document: any) { }
+  constructor(@Inject(DOCUMENT) private document: any) {}
 
   getWidth(): number {
     const outer = this.document.createElement('div');
@@ -31,5 +30,4 @@ export class ScrollbarHelper {
 
     return widthNoScroll - widthWithScroll;
   }
-
 }