@swimlane/ngx-datatable 11.1.4 → 11.2.0

package/release/utils/throttle.metadata.json

@@ -1 +1 @@
-[{"__symbolic":"module","version":4,"metadata":{"throttle":{"__symbolic":"function"},"throttleable":{"__symbolic":"function","parameters":["duration","options"],"value":{"__symbolic":"error","message":"Function call not supported","line":50,"character":9}}}}]
+[{"__symbolic":"module","version":3,"metadata":{"throttle":{"__symbolic":"function"},"throttleable":{"__symbolic":"function","parameters":["duration","options"],"value":{"__symbolic":"error","message":"Function call not supported","line":50,"character":9}}}},{"__symbolic":"module","version":1,"metadata":{"throttle":{"__symbolic":"function"},"throttleable":{"__symbolic":"function","parameters":["duration","options"],"value":{"__symbolic":"error","message":"Function call not supported","line":50,"character":9}}}}]

package/release/utils/translate.js.map

@@ -1 +1 @@
-{"version":3,"file":"translate.js","sourceRoot":"","sources":["../../build/utils/translate.ts"],"names":[],"mappings":";;AAAA,uCAAmD;AACnD,2CAAyC;AAEzC,wCAAwC;AACxC,IAAM,SAAS,GAAG,OAAO,MAAM,KAAK,WAAW,CAAC,CAAC,CAAC,gCAAqB,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;AACjG,IAAM,kBAAkB,GAAG,OAAO,MAAM,KAAK,WAAW,CAAC,CAAC,CAAC,gCAAqB,CAAC,oBAAoB,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;AACnH,IAAM,gBAAgB,GAAG,OAAO,MAAM,KAAK,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,gCAAqB,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;AAC1G,IAAM,kBAAkB,GAAG,OAAO,MAAM,KAAK,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,gCAAqB,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;AAC9G,IAAM,EAAE,GAAG,OAAO,MAAM,KAAK,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC;AACjF,IAAM,QAAQ,GAAG,CAAC,UAAU,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,UAAU,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAEjE,qBAA4B,MAAW,EAAE,CAAS,EAAE,CAAS;IAC3D,EAAE,CAAC,CAAC,OAAO,SAAS,KAAK,WAAW,IAAI,gBAAgB,CAAC,CAAC,CAAC;QACzD,EAAE,CAAC,CAAC,CAAC,QAAQ,IAAI,kBAAkB,CAAC,CAAC,CAAC;YACpC,MAAM,CAAC,SAAS,CAAC,GAAG,iBAAe,CAAC,YAAO,CAAC,WAAQ,CAAC;YACrD,MAAM,CAAC,kBAAkB,CAAC,GAAG,QAAQ,CAAC;QACxC,CAAC;QAAC,IAAI,CAAC,CAAC;YACN,MAAM,CAAC,sBAAS,CAAC,SAAS,CAAC,CAAC,GAAG,eAAa,CAAC,YAAO,CAAC,QAAK,CAAC;QAC7D,CAAC;IACH,CAAC;IAAC,IAAI,CAAC,CAAC;QACN,MAAM,CAAC,GAAG,GAAM,CAAC,OAAI,CAAC;QACtB,MAAM,CAAC,IAAI,GAAM,CAAC,OAAI,CAAC;IACzB,CAAC;AACH,CAAC;AAZD,kCAYC"}
+{"version":3,"sources":["../../build/utils/translate.ts"],"names":[],"mappings":";;AAAA,uCAAmD;AACnD,2CAAyC;AAEzC,wCAAwC;AACxC,IAAM,SAAS,GAAG,OAAO,MAAM,KAAK,WAAW,CAAC,CAAC,CAAC,gCAAqB,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;AACjG,IAAM,kBAAkB,GAAG,OAAO,MAAM,KAAK,WAAW,CAAC,CAAC,CAAC,gCAAqB,CAAC,oBAAoB,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;AACnH,IAAM,gBAAgB,GAAG,OAAO,MAAM,KAAK,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,gCAAqB,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;AAC1G,IAAM,kBAAkB,GAAG,OAAO,MAAM,KAAK,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,gCAAqB,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;AAC9G,IAAM,EAAE,GAAG,OAAO,MAAM,KAAK,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC;AACjF,IAAM,QAAQ,GAAG,CAAC,UAAU,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,UAAU,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAEjE,qBAA4B,MAAW,EAAE,CAAS,EAAE,CAAS;IAC3D,EAAE,CAAC,CAAC,OAAO,SAAS,KAAK,WAAW,IAAI,gBAAgB,CAAC,CAAC,CAAC;QACzD,EAAE,CAAC,CAAC,CAAC,QAAQ,IAAI,kBAAkB,CAAC,CAAC,CAAC;YACpC,MAAM,CAAC,SAAS,CAAC,GAAG,iBAAe,CAAC,YAAO,CAAC,WAAQ,CAAC;YACrD,MAAM,CAAC,kBAAkB,CAAC,GAAG,QAAQ,CAAC;QACxC,CAAC;QAAC,IAAI,CAAC,CAAC;YACN,MAAM,CAAC,sBAAS,CAAC,SAAS,CAAC,CAAC,GAAG,eAAa,CAAC,YAAO,CAAC,QAAK,CAAC;QAC7D,CAAC;IACH,CAAC;IAAC,IAAI,CAAC,CAAC;QACN,MAAM,CAAC,GAAG,GAAM,CAAC,OAAI,CAAC;QACtB,MAAM,CAAC,IAAI,GAAM,CAAC,OAAI,CAAC;IACzB,CAAC;AACH,CAAC;AAZD,kCAYC","file":"translate.js","sourceRoot":""}

package/release/utils/translate.metadata.json

@@ -1 +1 @@
-[{"__symbolic":"module","version":4,"metadata":{"translateXY":{"__symbolic":"function"}}}]
+[{"__symbolic":"module","version":3,"metadata":{"translateXY":{"__symbolic":"function"}}},{"__symbolic":"module","version":1,"metadata":{"translateXY":{"__symbolic":"function"}}}]

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

@@ -5,17 +5,16 @@ import { DatatableGroupHeaderTemplateDirective } from './body-group-header-templ
 export class DatatableGroupHeaderDirective {
 
   /**
-   * The detail row height is required especially 
-   * when virtual scroll is enabled.
+   * Row height is required when virtual scroll is enabled.
    */
   @Input() rowHeight: (number | ((group?: any, index?: number) => number)) = 0;
 
   @Input()
-  @ContentChild(DatatableGroupHeaderTemplateDirective, { read: TemplateRef }) 
+  @ContentChild(DatatableGroupHeaderTemplateDirective, { read: TemplateRef })
   template: TemplateRef<any>;
 
   /**
-   * Group visbility was toggled.
+   * Track toggling of group visibility
    */
   @Output() toggle: EventEmitter<any> = new EventEmitter();
 
@@ -30,7 +29,7 @@ export class DatatableGroupHeaderDirective {
   }
 
   /**
-   * API method to expand all groups.
+   * Expand all groups
    */
   expandAllGroups(): void {
     this.toggle.emit({
@@ -40,7 +39,7 @@ export class DatatableGroupHeaderDirective {
   }
 
   /**
-   * API method to collapse all groups.
+   * Collapse all groups
    */
   collapseAllGroups(): void {
     this.toggle.emit({

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

@@ -1,13 +1,13 @@
 import {
   Component, Input, HostBinding, ElementRef, Output, KeyValueDiffers, KeyValueDiffer,
-  EventEmitter, HostListener, ChangeDetectionStrategy, ChangeDetectorRef, DoCheck
+  EventEmitter, HostListener, ChangeDetectionStrategy, ChangeDetectorRef, DoCheck, SkipSelf
 } from '@angular/core';
 
 import {
-  allColumnsByPinArr, columnsByPin, columnGroupWidths, columnsByPinArr, translateXY, Keys
+  columnsByPin, columnGroupWidths, columnsByPinArr, translateXY, Keys
 } from '../../utils';
 import { ScrollbarHelper } from '../../services';
-import { MouseEvent, KeyboardEvent } from '../../events';
+import { MouseEvent, KeyboardEvent, Event } from '../../events';
 
 @Component({
   selector: 'datatable-body-row',
@@ -122,7 +122,7 @@ export class DataTableBodyRowComponent implements DoCheck {
 
   constructor(
       private differs: KeyValueDiffers,
-      private scrollbarHelper: ScrollbarHelper,
+      @SkipSelf() private scrollbarHelper: ScrollbarHelper,
       private cd: ChangeDetectorRef, 
       element: ElementRef) {
     this._element = element.nativeElement;
@@ -215,7 +215,7 @@ export class DataTableBodyRowComponent implements DoCheck {
   recalculateColumns(val: any[] = this.columns): void {
     this._columns = val;
     const colsByPin = columnsByPin(this._columns);
-    this._columnsByPin = allColumnsByPinArr(this._columns);        
+    this._columnsByPin = columnsByPinArr(this._columns);        
     this._columnGroupWidths = columnGroupWidths(colsByPin, this._columns);
   }
 

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

@@ -43,8 +43,8 @@ import { MouseEvent } from '../../events';
           [expanded]="getRowExpanded(group)"
           [rowIndex]="getRowIndex(group[i])"
           (rowContextmenu)="rowContextmenu.emit($event)">
-          <datatable-body-row 
-            *ngIf="!groupedRows; else groupedRowsTemplate"        
+          <datatable-body-row
+            *ngIf="!groupedRows; else groupedRowsTemplate"
             tabindex="-1"
             [isSelected]="selector.getRowSelected(group)"
             [innerWidth]="innerWidth"
@@ -53,7 +53,7 @@ import { MouseEvent } from '../../events';
             [rowHeight]="getRowHeight(group)"
             [row]="group"
             [rowIndex]="getRowIndex(group)"
-            [expanded]="getRowExpanded(group)"            
+            [expanded]="getRowExpanded(group)"
             [rowClass]="rowClass"
             [displayCheck]="displayCheck"
             (activate)="selector.onActivate($event, indexes.first + i)">
@@ -95,7 +95,7 @@ export class DataTableBodyComponent implements OnInit, OnDestroy {
   @Input() scrollbarH: boolean;
   @Input() loadingIndicator: boolean;
   @Input() externalPaging: boolean;
-  @Input() rowHeight: number;
+  @Input() rowHeight: number | ((row: any) => number);
   @Input() offsetX: number;
   @Input() emptyMessage: string;
   @Input() selectionType: SelectionType;
@@ -111,6 +111,7 @@ export class DataTableBodyComponent implements OnInit, OnDestroy {
   @Input() groupExpansionDefault: boolean;
   @Input() innerWidth: number;
   @Input() groupRowsBy: string;
+  @Input() virtualization: boolean;
 
   @Input() set pageSize(val: number) {
     this._pageSize = val;
@@ -134,7 +135,7 @@ export class DataTableBodyComponent implements OnInit, OnDestroy {
   @Input() set columns(val: any[]) {
     this._columns = val;
     const colsByPin = columnsByPin(val);
-    this.columnGroupWidths = columnGroupWidths(colsByPin, val);    
+    this.columnGroupWidths = columnGroupWidths(colsByPin, val);
   }
 
   get columns(): any[] {
@@ -206,7 +207,7 @@ export class DataTableBodyComponent implements OnInit, OnDestroy {
    * calculate scroll height automatically (as height will be undefined).
    */
   get scrollHeight(): number | undefined {
-    if (this.scrollbarV) {
+    if (this.scrollbarV && this.rowCount) {
       return this.rowHeightsCache.query(this.rowCount - 1);
     }
     // avoid TS7030: Not all code paths return a value.
@@ -276,8 +277,8 @@ export class DataTableBodyComponent implements OnInit, OnDestroy {
           this.updateIndexes();
           this.updateRows();
           this.cd.markForCheck();
-        });              
-    }             
+        });
+    }
   }
 
   /**
@@ -357,12 +358,12 @@ export class DataTableBodyComponent implements OnInit, OnDestroy {
 
     this.rowIndexes.clear();
 
-    // 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 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) {
       let maxRowsPerGroup = 3;
-      // if there is only one group set the maximum number of 
+      // if there is only one group set the maximum number of
       // rows per group the same as the total number of rows
       if (this.groupedRows.length === 1) {
         maxRowsPerGroup = this.groupedRows[0].value.length;
@@ -375,9 +376,9 @@ export class DataTableBodyComponent implements OnInit, OnDestroy {
         idx++;
 
         // Group index in this context
-        rowIndex++; 
-      }      
-    } else {           
+        rowIndex++;
+      }
+    } else {
       while (rowIndex < last && rowIndex < this.rowCount) {
         const row = this.rows[rowIndex];
 
@@ -388,9 +389,9 @@ export class DataTableBodyComponent implements OnInit, OnDestroy {
 
         idx++;
         rowIndex++;
-      }       
+      }
     }
-    
+
     this.temp = temp;
     this.cd.detectChanges();
   }
@@ -399,14 +400,16 @@ export class DataTableBodyComponent implements OnInit, OnDestroy {
    * Get the row height
    */
   getRowHeight(row: any): number {
-    let rowHeight = this.rowHeight;
-   
+    let height;
+
     // if its a function return it
     if (typeof this.rowHeight === 'function') {
-      rowHeight = this.rowHeight(row);
+      height = this.rowHeight(row);
+    } else {
+      height = this.rowHeight;
     }
 
-    return rowHeight;
+    return height;
   }
 
   /**
@@ -417,9 +420,9 @@ export class DataTableBodyComponent implements OnInit, OnDestroy {
 
     if (group.value) {
       for (let index = 0; index < group.value.length; index++) {
-        rowHeight += this.getRowAndDetailHeight(group.value[index]);     
-      }          
-    }      
+        rowHeight += this.getRowAndDetailHeight(group.value[index]);
+      }
+    }
 
     return rowHeight;
   }
@@ -462,7 +465,7 @@ export class DataTableBodyComponent implements OnInit, OnDestroy {
    * be able to determine which row is of what height before hand.  In the above
    * case the positionY of the translate3d for row2 would be the sum of all the
    * heights of the rows before it (i.e. row0 and row1).
-   * 
+   *
    * @param {*} rows The row that needs to be placed in the 2D space.
    * @returns {*} Returns the CSS3 style to be applied
    *
@@ -475,7 +478,7 @@ export class DataTableBodyComponent implements OnInit, OnDestroy {
     if (this.groupedRows) {
       styles['width'] = this.columnGroupWidths.total;
     }
-      
+
     if (this.scrollbarV) {
       let idx = 0;
 
@@ -485,7 +488,7 @@ export class DataTableBodyComponent implements OnInit, OnDestroy {
         idx = row ? this.getRowIndex(row) : 0;
       } else {
         idx = this.getRowIndex(rows);
-      }        
+      }
 
       // const pos = idx * rowHeight;
       // The position of this row would be the sum of all row heights
@@ -497,7 +500,7 @@ export class DataTableBodyComponent implements OnInit, OnDestroy {
 
     return styles;
   }
- 
+
   /**
    * Hides the loading indicator
    */
@@ -513,12 +516,19 @@ export class DataTableBodyComponent implements OnInit, OnDestroy {
     let last = 0;
 
     if (this.scrollbarV) {
-      // Calculation of the first and last indexes will be based on where the
-      // scrollY position would be at.  The last index would be the one
-      // that shows up inside the view port the last.
-      const height = parseInt(this.bodyHeight, 0);
-      first = this.rowHeightsCache.getRowIndex(this.offsetY);
-      last = this.rowHeightsCache.getRowIndex(height + this.offsetY) + 1;
+      if (this.virtualization) {
+        // Calculation of the first and last indexes will be based on where the
+        // scrollY position would be at.  The last index would be the one
+        // that shows up inside the view port the last.
+        const height = parseInt(this.bodyHeight, 0);
+        first = this.rowHeightsCache.getRowIndex(this.offsetY);
+        last = this.rowHeightsCache.getRowIndex(height + this.offsetY) + 1;
+      } else {
+        // If virtual rows are not needed
+        // We render all in one go
+        first = 0;
+        last = this.rowCount;
+      }
     } else {
       // The server is handling paging and will pass an array that begins with the
       // element at a specified offset.  first should always be 0 with external paging.
@@ -670,7 +680,7 @@ export class DataTableBodyComponent implements OnInit, OnDestroy {
 
     return styles;
   }
-  
+
   /**
    * Returns if the row was expanded and set default row expansion when row expansion is empty
    */
@@ -679,7 +689,7 @@ export class DataTableBodyComponent implements OnInit, OnDestroy {
       for (const group of this.groupedRows) {
         this.rowExpansions.set(group, 1);
       }
-    }    
+    }
 
     const expanded = this.rowExpansions.get(row);
     return expanded === 1;

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

@@ -1,5 +1,5 @@
 import {
-  Component, Input, ElementRef, Output, EventEmitter, NgZone,
+  Component, Input, ElementRef, Output, EventEmitter, Renderer2, NgZone,
   OnInit, OnDestroy, HostBinding, ChangeDetectionStrategy
 } from '@angular/core';
 
@@ -36,17 +36,19 @@ export class ScrollerComponent implements OnInit, OnDestroy {
   parentElement: any;
   onScrollListener: any;
 
-  constructor(private ngZone: NgZone, element: ElementRef) {
+  constructor(private ngZone: NgZone, element: ElementRef, private renderer: Renderer2) {
+
     this.element = element.nativeElement;
   }
 
   ngOnInit(): void {
     // manual bind so we don't always listen
     if (this.scrollbarV || this.scrollbarH) {
-      this.parentElement = this.element.parentElement.parentElement;
+      const renderer = this.renderer;
+      this.parentElement = renderer.parentNode(renderer.parentNode(this.element));
       this.ngZone.runOutsideAngular(() => {
-        this.parentElement.addEventListener('scroll', this.onScrolled.bind(this));
-      });
+          this.parentElement.addEventListener('scroll', this.onScrolled.bind(this));
+        });
     }
   }
 

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

@@ -4,7 +4,7 @@ import { SelectionType } from '../../types';
 import { MouseEvent, KeyboardEvent } from '../../events';
 
 export interface Model {
-  type: string;
+  type: string; 
   event: MouseEvent | KeyboardEvent;
   row: any;
   rowElement: any;

package/src/components/datatable.component.scss

@@ -156,7 +156,7 @@
         cursor: pointer;
       }
 
-      .resize-handle{
+      .resize-handle, .resize-handle--not-resizable {
         display: inline-block;
         position: absolute;
         right: 0;
@@ -165,6 +165,9 @@
         width: 5px;
         padding: 0 4px;
         visibility: hidden;
+      }
+
+      .resize-handle {
         cursor: ew-resize;
       }
 
@@ -173,6 +176,16 @@
           visibility: visible;
         }
       }
+
+      &:hover {
+        .resize-handle--not-resizable {
+          visibility: visible;
+        }
+      }
+
+      .datatable-header-cell-template-wrap {
+        height: inherit;
+      }
     }
   }