@angular-generic-table/core - npm Package Compare versions

Comparing version 4.6.0 to 4.7.0

CHANGELOG.md

@@ -6,2 +6,13 @@ Release History
 
+# [4.7.0] - 2017-10-10
+### Added
+- Drilldown component, see [example](https://hjalmers.github.io/angular-generic-table/drilldown), (issue #137).
+- Support for displaying all rows, (issue #139).
+
+### Deprecated
+- Input `GtRowComponent` has been deprecated and support will be removed in a future release, see issue #34 for more info.
+
+### Improved
+- Minor improvement for row rendering
+
 # [4.6.0] - 2017-08-29
@@ -12,3 +23,3 @@ ### Added
 
-### Notes
+### Deprecated
 - Field setting `classNames` have been deprecated in favor for `columnClass` and will be removed in a future release.
@@ -15,0 +26,0 @@

components/generic-table.component.d.ts

@@ -15,2 +15,3 @@ import { OnInit, OnChanges, EventEmitter, Type, SimpleChanges, Renderer2, OnDestroy } from '@angular/core';
     private renderer;
+    gtRowComponent: Type<C>;
     readonly hasEdits: boolean;
@@ -22,3 +23,3 @@ gtOptions: GtOptions;
     gtData: Array<any>;
-    gtRowComponent: Type<C>;
+    columnWidth: Object;
     configObject: GtConfig<R>;
@@ -35,2 +36,7 @@ sortOrder: Array<any>;
     private _gtTotals;
+    private _gtRowComponent;
+    expandedRow: {
+        component: Type<C>;
+        data: Array<any>;
+    };
     gtDefaultTexts: GtTexts;
@@ -71,3 +77,2 @@ gtTexts: GtTexts;
      * @param {boolean} reset - should page be reset to first page.
-     * @returns {number} number of pages to display.
      */
@@ -118,4 +123,8 @@ changeRowLength: (rowLength: any, reset?: boolean) => void;
      * @param {GtRow} row - row object that should be expanded/collapsed.
+     * @param {Type<C>} component - component to render when row is expanded.
      */
-    toggleCollapse(row: GtRow): void;
+    toggleCollapse(row: GtRow, expandedRow?: {
+        component: Type<C>;
+        data: any;
+    }): void;
     /**
@@ -242,3 +251,5 @@ * Toggle row selected state ie. selected or not.
     ngOnChanges(changes: SimpleChanges): void;
+    trackByFn(index: number, item: GtRow): any;
+    trackByColumnFn(index: number, item: GtConfigField<any, any>): string;
     ngOnDestroy(): void;
 }

components/generic-table.component.js

@@ -17,2 +17,3 @@ "use strict";
         this.renderer = renderer;
+        this.columnWidth = {};
         this.sortOrder = [];
@@ -50,3 +51,4 @@ this.metaInfo = {};
             rowExpandAllowMultiple: true,
-            numberOfRows: 10
+            numberOfRows: 10,
+            reportColumnWidth: false
         };
@@ -62,3 +64,3 @@ this._gtOptions = this.gtDefaultOptions;
             recordTo: 0,
-            recordLength: this._gtOptions.numberOfRows,
+            recordLength: this.gtOptions.numberOfRows,
             recordsAll: 0,
@@ -187,6 +189,9 @@ recordsAfterFilter: 0,
          * @param {boolean} reset - should page be reset to first page.
-         * @returns {number} number of pages to display.
          */
         this.changeRowLength = function (rowLength, reset) {
+            var lengthValue = isNaN(parseInt(rowLength, 10)) ? 0 : parseInt(rowLength, 10);
             var newPosition = 1;
+            if (!lengthValue && this.gtData) {
+                lengthValue = this.gtData.length;
+            }
             // if reset is not true and we're not lazy loading data...
@@ -198,6 +203,6 @@ if (reset !== true && this._gtOptions.lazyLoad !== true) {
                 // ...get new position
-                newPosition = Math.ceil(currentPosition / rowLength);
+                newPosition = Math.ceil(currentPosition / lengthValue);
             }
             // change row length
-            this.gtInfo.recordLength = parseInt(rowLength, 10);
+            this.gtInfo.recordLength = lengthValue;
             // go to new position
@@ -208,3 +213,3 @@ this.gtInfo.pageCurrent = newPosition;
                 // ...replace data with place holders for new data
-                this._gtData[0] = this.loadingContent(rowLength);
+                this._gtData[0] = this.loadingContent(lengthValue);
                 // ...empty current store
@@ -216,3 +221,3 @@ this.store = [];
                 name: 'gt-row-length-changed',
-                value: rowLength
+                value: lengthValue
             });
@@ -375,2 +380,13 @@ };
     }
+    Object.defineProperty(GenericTableComponent.prototype, "gtRowComponent", {
+        get: function () {
+            return this._gtRowComponent;
+        },
+        set: function (value) {
+            console.warn('GtRowComponent has been deprecated and support will be removed in a future release, see https://github.com/hjalmers/angular-generic-table/issues/34');
+            this._gtRowComponent = value;
+        },
+        enumerable: true,
+        configurable: true
+    });
     Object.defineProperty(GenericTableComponent.prototype, "hasEdits", {
@@ -390,5 +406,5 @@ get: function () {
             // if number of rows is passed and if number of rows differs from current record length...
-            if (this._gtOptions.numberOfRows && this.gtInfo.recordLength !== this._gtOptions.numberOfRows) {
+            if (this.gtOptions.numberOfRows && this.gtInfo.recordLength !== this.gtOptions.numberOfRows) {
                 // ...update record length and redraw table
-                this.gtInfo.recordLength = this._gtOptions.numberOfRows;
+                this.gtInfo.recordLength = this.gtOptions.numberOfRows;
                 this.redraw();
@@ -508,4 +524,8 @@ }
      * @param {GtRow} row - row object that should be expanded/collapsed.
+     * @param {Type<C>} component - component to render when row is expanded.
      */
-    GenericTableComponent.prototype.toggleCollapse = function (row) {
+    GenericTableComponent.prototype.toggleCollapse = function (row, expandedRow) {
+        if (expandedRow) {
+            this.expandedRow = expandedRow;
+        }
         this._toggleRowProperty(row, 'isOpen');
@@ -1014,2 +1034,7 @@ };
     GenericTableComponent.prototype.ngOnInit = function () {
+        // if number of row to display from start is set to null or 0...
+        if (!this.gtOptions.numberOfRows) {
+            // ...change row length
+            this.changeRowLength(this.gtOptions.numberOfRows);
+        }
         this.restructureSorting();
@@ -1024,3 +1049,3 @@ };
         // if lazy loading data and paging information is available...
-        if (this._gtOptions.lazyLoad && this.gtInfo) {
+        if (this.gtOptions.lazyLoad && this.gtInfo) {
             // ...calculate total number of pages
@@ -1053,2 +1078,8 @@ this.gtInfo.pageTotal = Math.ceil(this.gtInfo.recordsAfterSearch / this.gtInfo.recordLength);
     };
+    GenericTableComponent.prototype.trackByFn = function (index, item) {
+        return item.$$gtRowId;
+    };
+    GenericTableComponent.prototype.trackByColumnFn = function (index, item) {
+        return item.objectKey;
+    };
     GenericTableComponent.prototype.ngOnDestroy = function () {
@@ -1063,3 +1094,3 @@ // remove listener
                 selector: 'generic-table',
-                template: "\n        <table class=\"table\" ngClass=\"{{gtClasses}} {{gtOptions.stack ? 'table-stacked':''}}\"\n               *ngIf=\"gtFields && gtSettings && (gtFields | gtVisible:gtSettings:refreshPipe).length > 0\">\n            <thead>\n            <tr>\n                <th class=\"gt-sort-label\" *ngIf=\"gtOptions.stack\">{{gtTexts.sortLabel}}</th>\n                <th *ngFor=\"let column of gtSettings | gtVisible:gtSettings:refreshPipe\"\n                    ngClass=\"{{column.objectKey +'-column' | dashCase}} {{gtFields | gtProperty:column.objectKey:'classNames'}} {{column.sortEnabled ? 'sort-'+column.sort:''}} {{column.sortEnabled && column.sortOrder >= 0  ? 'sort-order-'+column.sortOrder:''}} {{ gtFields | gtColumnClass:'th':column }}\"\n                    (click)=\"column.sortEnabled ? gtSort(column.objectKey,$event):'';\">\n                    {{gtFields | gtProperty:column.objectKey:'name'}}\n                </th>\n            </tr>\n            </thead>\n            <ng-template\n                    [ngIf]=\"gtTotals && (gtData | gtFilter:gtInfo.filter:gtInfo:refreshFilter:gtData.length | gtSearch:gtInfo.searchTerms:gtInfo:gtSettings:gtFields:gtData.length).length > 0\">\n                <thead class=\"gt-totals\">\n                <tr *ngFor=\"let total of gtTotals | gtTotalsPosition\">\n                    <td *ngFor=\"let column of gtSettings | gtVisible:gtSettings:refreshPipe;let i = index;\"\n                        ngClass=\"{{column.objectKey +'-totals-column' | dashCase}} {{gtFields | gtProperty:column.objectKey:'classNames'}} {{ gtFields | gtColumnClass:'total':column }}\">\n                        <span *ngIf=\"i === 0\" class=\"float-left\">{{total.name}}</span><span\n                            [innerHTML]=\"total.fields[column.objectKey] | gtTotals:total.update === false ? gtData:(gtData | gtFilter:gtInfo.filter:gtInfo:refreshFilter:gtData.length | gtSearch:gtInfo.searchTerms:gtInfo:gtSettings:gtFields:gtData.length):column.objectKey:refreshTotals\"></span>\n                    </td>\n                </tr>\n                </thead>\n                <tfoot class=\"gt-totals\">\n                <tr *ngFor=\"let total of gtTotals | gtTotalsPosition:'footer'\">\n                    <td *ngFor=\"let column of gtSettings | gtVisible:gtSettings:refreshPipe;let i = index;\"\n                        ngClass=\"{{column.objectKey +'-totals-column' | dashCase}} {{gtFields | gtProperty:column.objectKey:'classNames'}} {{ gtFields | gtColumnClass:'total':column }}\">\n                        <span *ngIf=\"i === 0\" class=\"float-left\">{{total.name}}</span><span\n                            [innerHTML]=\"total.fields[column.objectKey] | gtTotals:total.update === false ? gtData:(gtData | gtFilter:gtInfo.filter:gtInfo:refreshFilter:gtData.length | gtSearch:gtInfo.searchTerms:gtInfo:gtSettings:gtFields:gtData.length):column.objectKey:refreshTotals\"></span>\n                    </td>\n                </tr>\n                </tfoot>\n            </ng-template>\n            <tbody *ngIf=\"gtData && gtInfo\">\n            <ng-template class=\"table-rows\" ngFor let-row\n                         [ngForOf]=\"gtOptions.lazyLoad && gtInfo ? (gtData[gtInfo.pageCurrent-1] | gtMeta:(gtInfo.pageCurrent-1):gtInfo.recordLength) : (gtData | gtMeta:null:null:gtData.length | gtFilter:gtInfo.filter:gtInfo:refreshFilter:gtData.length | gtSearch:gtInfo.searchTerms:gtInfo:gtSettings:gtFields:gtData.length | gtOrderBy:sortOrder:gtFields:refreshSorting:gtData.length | gtChunk:gtInfo:gtInfo.recordLength:gtInfo.pageCurrent:refreshPageArray:gtData.length:gtEvent:data | gtRowClass:gtFields)\">\n                <tr [ngClass]=\"{'row-selected':metaInfo[row.$$gtRowId]?.isSelected, 'row-open':metaInfo[row.$$gtRowId]?.isOpen, 'row-loading':loading, 'row-expandable':gtRowComponent}\" class=\"{{row.$$gtRowClass}}\"\n                    (click)=\"gtOptions.rowSelection ? toggleSelect(row):null\">\n                    <td *ngFor=\"let column of row | gtRender:gtSettings:gtFields:refreshPipe:loading:gtOptions.highlightSearch:gtInfo.searchTerms;\"\n                        ngClass=\"{{column.objectKey +'-column' | dashCase}} {{gtFields | gtProperty:column.objectKey:'classNames'}} {{(gtFields | gtProperty:column.objectKey:'inlineEdit') ? 'gt-inline-edit':''}} {{column.edited ? 'gt-edited':''}} {{ gtFields | gtColumnClass:row:column }}\">\n                        <span class=\"gt-row-label\"\n                              *ngIf=\"gtOptions.stack\">{{(gtFields | gtProperty:column.objectKey:'stackedHeading') ? (gtFields | gtProperty:column.objectKey:'stackedHeading') : (gtFields | gtProperty:column.objectKey:'name')}}</span>\n                        <gt-custom-component-factory *ngIf=\"column.columnComponent\" class=\"gt-row-content\"\n                                                     [type]=\"column.columnComponent.type\"\n                                                     [injector]=\"column.columnComponent.injector\" [row]=\"row\"\n                                                     [column]=\"column\" (redrawEvent)=\"redraw($event)\"\n                                                     (click)=\"column.click ? column.click(row,column,$event):'';column.expand ? toggleCollapse(row):''\"></gt-custom-component-factory>\n                        <span *ngIf=\"!column.columnComponent && !(gtFields | gtProperty:column.objectKey:'inlineEdit')\"\n                              class=\"gt-row-content\" [innerHTML]=\"column.renderValue\"\n                              (click)=\"column.click ? column.click(row,column,$event):'';column.expand ? toggleCollapse(row):''\"></span>\n                        <ng-template\n                                [ngIf]=\"!column.columnComponent && (gtFields | gtProperty:column.objectKey:'inlineEdit') === true\">\n                            <input class=\"inline-edit\" type=\"text\" [(ngModel)]=\"column.renderValue\"\n                                   (keyup)=\"gtUpdateColumn($event,row, column)\">\n                            <span class=\"gt-inline-edit-notice\">{{gtTexts.inlineEditEdited}}</span>\n                        </ng-template>\n                        <gt-dropdown\n                                *ngIf=\"!column.columnComponent && (gtFields | gtProperty:column.objectKey:'inlineEdit') && (gtFields | gtProperty:column.objectKey:'inlineEdit').length > 0\"\n                                [options]=\"gtFields | gtProperty:column.objectKey:'inlineEdit'\"\n                                [(selected)]=\"column.renderValue\" (selectedChange)=\"gtDropdownSelect(row, column)\">Add\n                            inline editing module\n                        </gt-dropdown>\n                    </td>\n                </tr>\n                <tr class=\"row-expanded\" *ngIf=\"metaInfo[row.$$gtRowId]?.isOpen\">\n                    <td [attr.colspan]=\"(gtFields | gtVisible:gtSettings:refreshPipe).length\">\n                        <gt-expanding-row [row]=\"row\" [type]=\"gtRowComponent\" (redrawEvent)=\"redraw($event)\"\n                                          (toggleRowEvent)=\"toggleCollapse($event)\"></gt-expanding-row>\n                    </td>\n                </tr>\n            </ng-template>\n            <tr *ngIf=\"gtInfo.pageTotal === 0 && (gtInfo.searchTerms || gtInfo.filter) && !loading\">\n                <td class=\"gt-no-matching-results\" [attr.colspan]=\"(gtFields | gtVisible:gtSettings).length\">\n                    {{gtTexts.noMatchingData}}\n                </td>\n            </tr>\n            <tr *ngIf=\"gtInfo.pageTotal === 0 && !(gtInfo.searchTerms || gtInfo.filter) && !loading\">\n                <td class=\"gt-no-results\" [attr.colspan]=\"(gtFields | gtVisible:gtSettings).length\">{{gtTexts.noData}}\n                </td>\n            </tr>\n            <tr *ngIf=\"gtInfo.pageTotal === 0 && loading\">\n                <td class=\"gt-loading-data\" [attr.colspan]=\"(gtFields | gtVisible:gtSettings).length\">{{gtTexts.loading}}</td>\n            </tr>\n            </tbody>\n        </table>\n        <table class=\"table\" ngClass=\"{{gtClasses}} {{gtOptions.stack ? 'table-stacked':''}}\"\n               *ngIf=\"gtFields && gtSettings && (gtFields | gtVisible:gtSettings:refreshPipe).length === 0\">\n            <thead>\n            <tr>\n                <th class=\"gt-no-visible-columns\">{{gtTexts.noVisibleColumnsHeading}}</th>\n            </tr>\n            </thead>\n            <tbody>\n            <tr>\n                <td class=\"gt-no-visible-columns\">{{gtTexts.noVisibleColumns}}</td>\n            </tr>\n            </tbody>\n        </table>\n        <table class=\"table\" ngClass=\"{{gtClasses}} {{gtOptions.stack ? 'table-stacked':''}}\"\n               *ngIf=\"!gtFields || !gtSettings\">\n            <thead>\n            <tr>\n                <th class=\"gt-loading-config\">&nbsp;</th>\n            </tr>\n            </thead>\n            <tbody>\n            <tr>\n                <td class=\"gt-loading-config\">&nbsp;</td>\n            </tr>\n            </tbody>\n        </table>\n    ",
+                template: "\n        <table class=\"table\" ngClass=\"{{gtClasses}} {{gtOptions.stack ? 'table-stacked':''}}\"\n               *ngIf=\"gtFields && gtSettings && (gtFields | gtVisible:gtSettings:refreshPipe).length > 0\">\n            <thead>\n            <tr>\n                <th class=\"gt-sort-label\" *ngIf=\"gtOptions.stack\">{{gtTexts.sortLabel}}</th>\n                <th *ngFor=\"let column of gtSettings | gtVisible:gtSettings:refreshPipe\"\n                    ngClass=\"{{column.objectKey +'-column' | dashCase}} {{gtFields | gtProperty:column.objectKey:'classNames'}} {{column.sortEnabled ? 'sort-'+column.sort:''}} {{column.sortEnabled && column.sortOrder >= 0  ? 'sort-order-'+column.sortOrder:''}} {{ gtFields | gtColumnClass:'th':column }}\"\n                    (click)=\"column.sortEnabled ? gtSort(column.objectKey,$event):'';\">\n                    {{gtFields | gtProperty:column.objectKey:'name'}}\n                </th>\n            </tr>\n            </thead>\n            <ng-template\n                    [ngIf]=\"gtTotals && (gtData | gtFilter:gtInfo.filter:gtInfo:refreshFilter:gtData.length | gtSearch:gtInfo.searchTerms:gtInfo:gtSettings:gtFields:gtData.length).length > 0\">\n                <thead class=\"gt-totals\">\n                <tr *ngFor=\"let total of gtTotals | gtTotalsPosition\">\n                    <td *ngFor=\"let column of gtSettings | gtVisible:gtSettings:refreshPipe;let i = index;\"\n                        ngClass=\"{{column.objectKey +'-totals-column' | dashCase}} {{gtFields | gtProperty:column.objectKey:'classNames'}} {{ gtFields | gtColumnClass:'total':column }}\">\n                        <span *ngIf=\"i === 0\" class=\"float-left\">{{total.name}}</span><span\n                            [innerHTML]=\"total.fields[column.objectKey] | gtTotals:total.update === false ? gtData:(gtData | gtFilter:gtInfo.filter:gtInfo:refreshFilter:gtData.length | gtSearch:gtInfo.searchTerms:gtInfo:gtSettings:gtFields:gtData.length):column.objectKey:refreshTotals\"></span>\n                    </td>\n                </tr>\n                </thead>\n                <tfoot class=\"gt-totals\">\n                <tr *ngFor=\"let total of gtTotals | gtTotalsPosition:'footer'\">\n                    <td *ngFor=\"let column of gtSettings | gtVisible:gtSettings:refreshPipe;let i = index;\"\n                        ngClass=\"{{column.objectKey +'-totals-column' | dashCase}} {{gtFields | gtProperty:column.objectKey:'classNames'}} {{ gtFields | gtColumnClass:'total':column }}\">\n                        <span *ngIf=\"i === 0\" class=\"float-left\">{{total.name}}</span><span\n                            [innerHTML]=\"total.fields[column.objectKey] | gtTotals:total.update === false ? gtData:(gtData | gtFilter:gtInfo.filter:gtInfo:refreshFilter:gtData.length | gtSearch:gtInfo.searchTerms:gtInfo:gtSettings:gtFields:gtData.length):column.objectKey:refreshTotals\"></span>\n                    </td>\n                </tr>\n                </tfoot>\n            </ng-template>\n            <tbody *ngIf=\"gtData && gtInfo\">\n            <ng-template class=\"table-rows\" ngFor let-row let-last=\"last\" [ngForTrackBy]=\"trackByFn\"\n                         [ngForOf]=\"gtOptions.lazyLoad && gtInfo ? (gtData[gtInfo.pageCurrent-1] | gtMeta:(gtInfo.pageCurrent-1):gtInfo.recordLength) : (gtData | gtMeta:null:null:gtData.length | gtFilter:gtInfo.filter:gtInfo:refreshFilter:gtData.length | gtSearch:gtInfo.searchTerms:gtInfo:gtSettings:gtFields:gtData.length | gtOrderBy:sortOrder:gtFields:refreshSorting:gtData.length | gtChunk:gtInfo:gtInfo.recordLength:gtInfo.pageCurrent:refreshPageArray:gtData.length:gtEvent:data | gtRowClass:gtFields)\">\n                <tr [ngClass]=\"{'row-selected':metaInfo[row.$$gtRowId]?.isSelected, 'row-open':metaInfo[row.$$gtRowId]?.isOpen, 'row-loading':loading, 'row-expandable':gtRowComponent}\"\n                    class=\"{{row.$$gtRowClass}}\"\n                    (click)=\"gtOptions.rowSelection ? toggleSelect(row):null\">\n                    <td *ngFor=\"let column of row | gtRender:gtSettings:gtFields:refreshPipe:loading:gtOptions.highlightSearch:gtInfo.searchTerms;trackBy:trackByColumnFn\"\n                        ngClass=\"{{column.objectKey +'-column' | dashCase}} {{gtFields | gtProperty:column.objectKey:'classNames'}} {{(gtFields | gtProperty:column.objectKey:'inlineEdit') ? 'gt-inline-edit':''}} {{column.edited ? 'gt-edited':''}} {{ gtFields | gtColumnClass:row:column }}\">\n                        <span class=\"gt-row-label\"\n                              *ngIf=\"gtOptions.stack\">{{(gtFields | gtProperty:column.objectKey:'stackedHeading') ? (gtFields | gtProperty:column.objectKey:'stackedHeading') : (gtFields | gtProperty:column.objectKey:'name')}}</span>\n                        <gt-custom-component-factory *ngIf=\"column.columnComponent\" class=\"gt-row-content\"\n                                                     [type]=\"column.columnComponent.type\"\n                                                     [injector]=\"column.columnComponent.injector\" [row]=\"row\"\n                                                     [column]=\"column\" (redrawEvent)=\"redraw($event)\"\n                                                     (click)=\"column.click ? column.click(row,column,$event):'';column.expand ? toggleCollapse(row, column.expand):''\"></gt-custom-component-factory>\n                        <span *ngIf=\"!column.columnComponent && !(gtFields | gtProperty:column.objectKey:'inlineEdit')\"\n                              class=\"gt-row-content\" [innerHTML]=\"column.renderValue\"\n                              (click)=\"column.click ? column.click(row,column,$event):'';column.expand ? toggleCollapse(row, column.expand):''\"></span>\n                        <ng-template\n                                [ngIf]=\"!column.columnComponent && (gtFields | gtProperty:column.objectKey:'inlineEdit') === true\">\n                            <input class=\"inline-edit\" type=\"text\" [(ngModel)]=\"column.renderValue\"\n                                   (keyup)=\"gtUpdateColumn($event,row, column)\">\n                            <span class=\"gt-inline-edit-notice\">{{gtTexts.inlineEditEdited}}</span>\n                        </ng-template>\n                        <gt-dropdown\n                                *ngIf=\"!column.columnComponent && (gtFields | gtProperty:column.objectKey:'inlineEdit') && (gtFields | gtProperty:column.objectKey:'inlineEdit').length > 0\"\n                                [options]=\"gtFields | gtProperty:column.objectKey:'inlineEdit'\"\n                                [(selected)]=\"column.renderValue\" (selectedChange)=\"gtDropdownSelect(row, column)\">Add\n                            inline editing module\n                        </gt-dropdown>\n                    </td>\n                </tr>\n                <tr class=\"row-expanded\" *ngIf=\"metaInfo[row.$$gtRowId]?.isOpen\">\n                    <td [attr.colspan]=\"(gtFields | gtVisible:gtSettings:refreshPipe).length\">\n                        <gt-expanding-row [row]=\"row\"\n                                          [type]=\"gtRowComponent ? gtRowComponent:expandedRow.component\"\n                                          [columnWidth]=\"columnWidth\"\n                                          [gtFields]=\"gtFields\"\n                                          [gtOptions]=\"gtOptions\"\n                                          [gtInfo]=\"gtInfo\"\n                                          [gtSettings]=\"gtSettings\"\n                                          [data]=\"expandedRow.data\"\n                                          (redrawEvent)=\"redraw($event)\"\n                                          (toggleRowEvent)=\"toggleCollapse($event)\"></gt-expanding-row>\n                    </td>\n                </tr>\n                <tr *ngIf=\"gtOptions.reportColumnWidth && last\">\n                    <td style=\"padding: 0; border:none;\"\n                        *ngFor=\"let column of gtSettings | gtVisible:gtSettings:refreshPipe\" gtColumnWidth\n                        [objectKey]=\"column.objectKey\" [widths]=\"columnWidth\"></td>\n                </tr>\n            </ng-template>\n            <tr *ngIf=\"gtInfo.pageTotal === 0 && (gtInfo.searchTerms || gtInfo.filter) && !loading\">\n                <td class=\"gt-no-matching-results\" [attr.colspan]=\"(gtFields | gtVisible:gtSettings).length\">\n                    {{gtTexts.noMatchingData}}\n                </td>\n            </tr>\n            <tr *ngIf=\"gtInfo.pageTotal === 0 && !(gtInfo.searchTerms || gtInfo.filter) && !loading\">\n                <td class=\"gt-no-results\" [attr.colspan]=\"(gtFields | gtVisible:gtSettings).length\">{{gtTexts.noData}}\n                </td>\n            </tr>\n            <tr *ngIf=\"gtInfo.pageTotal === 0 && loading\">\n                <td class=\"gt-loading-data\" [attr.colspan]=\"(gtFields | gtVisible:gtSettings).length\">{{gtTexts.loading}}</td>\n            </tr>\n            </tbody>\n        </table>\n        <table class=\"table\" ngClass=\"{{gtClasses}} {{gtOptions.stack ? 'table-stacked':''}}\"\n               *ngIf=\"gtFields && gtSettings && (gtFields | gtVisible:gtSettings:refreshPipe).length === 0\">\n            <thead>\n            <tr>\n                <th class=\"gt-no-visible-columns\">{{gtTexts.noVisibleColumnsHeading}}</th>\n            </tr>\n            </thead>\n            <tbody>\n            <tr>\n                <td class=\"gt-no-visible-columns\">{{gtTexts.noVisibleColumns}}</td>\n            </tr>\n            </tbody>\n        </table>\n        <table class=\"table\" ngClass=\"{{gtClasses}} {{gtOptions.stack ? 'table-stacked':''}}\"\n               *ngIf=\"!gtFields || !gtSettings\">\n            <thead>\n            <tr>\n                <th class=\"gt-loading-config\">&nbsp;</th>\n            </tr>\n            </thead>\n            <tbody>\n            <tr>\n                <td class=\"gt-loading-config\">&nbsp;</td>\n            </tr>\n            </tbody>\n        </table>\n    ",
             },] },
@@ -1066,0 +1097,0 @@ ];

components/generic-table.component.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":3,"metadata":{"GenericTableComponent":{"__symbolic":"class","arity":2,"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"generic-table","template":"\n        <table class=\"table\" ngClass=\"{{gtClasses}} {{gtOptions.stack ? 'table-stacked':''}}\"\n               *ngIf=\"gtFields && gtSettings && (gtFields | gtVisible:gtSettings:refreshPipe).length > 0\">\n            <thead>\n            <tr>\n                <th class=\"gt-sort-label\" *ngIf=\"gtOptions.stack\">{{gtTexts.sortLabel}}</th>\n                <th *ngFor=\"let column of gtSettings | gtVisible:gtSettings:refreshPipe\"\n                    ngClass=\"{{column.objectKey +'-column' | dashCase}} {{gtFields | gtProperty:column.objectKey:'classNames'}} {{column.sortEnabled ? 'sort-'+column.sort:''}} {{column.sortEnabled && column.sortOrder >= 0  ? 'sort-order-'+column.sortOrder:''}} {{ gtFields | gtColumnClass:'th':column }}\"\n                    (click)=\"column.sortEnabled ? gtSort(column.objectKey,$event):'';\">\n                    {{gtFields | gtProperty:column.objectKey:'name'}}\n                </th>\n            </tr>\n            </thead>\n            <ng-template\n                    [ngIf]=\"gtTotals && (gtData | gtFilter:gtInfo.filter:gtInfo:refreshFilter:gtData.length | gtSearch:gtInfo.searchTerms:gtInfo:gtSettings:gtFields:gtData.length).length > 0\">\n                <thead class=\"gt-totals\">\n                <tr *ngFor=\"let total of gtTotals | gtTotalsPosition\">\n                    <td *ngFor=\"let column of gtSettings | gtVisible:gtSettings:refreshPipe;let i = index;\"\n                        ngClass=\"{{column.objectKey +'-totals-column' | dashCase}} {{gtFields | gtProperty:column.objectKey:'classNames'}} {{ gtFields | gtColumnClass:'total':column }}\">\n                        <span *ngIf=\"i === 0\" class=\"float-left\">{{total.name}}</span><span\n                            [innerHTML]=\"total.fields[column.objectKey] | gtTotals:total.update === false ? gtData:(gtData | gtFilter:gtInfo.filter:gtInfo:refreshFilter:gtData.length | gtSearch:gtInfo.searchTerms:gtInfo:gtSettings:gtFields:gtData.length):column.objectKey:refreshTotals\"></span>\n                    </td>\n                </tr>\n                </thead>\n                <tfoot class=\"gt-totals\">\n                <tr *ngFor=\"let total of gtTotals | gtTotalsPosition:'footer'\">\n                    <td *ngFor=\"let column of gtSettings | gtVisible:gtSettings:refreshPipe;let i = index;\"\n                        ngClass=\"{{column.objectKey +'-totals-column' | dashCase}} {{gtFields | gtProperty:column.objectKey:'classNames'}} {{ gtFields | gtColumnClass:'total':column }}\">\n                        <span *ngIf=\"i === 0\" class=\"float-left\">{{total.name}}</span><span\n                            [innerHTML]=\"total.fields[column.objectKey] | gtTotals:total.update === false ? gtData:(gtData | gtFilter:gtInfo.filter:gtInfo:refreshFilter:gtData.length | gtSearch:gtInfo.searchTerms:gtInfo:gtSettings:gtFields:gtData.length):column.objectKey:refreshTotals\"></span>\n                    </td>\n                </tr>\n                </tfoot>\n            </ng-template>\n            <tbody *ngIf=\"gtData && gtInfo\">\n            <ng-template class=\"table-rows\" ngFor let-row\n                         [ngForOf]=\"gtOptions.lazyLoad && gtInfo ? (gtData[gtInfo.pageCurrent-1] | gtMeta:(gtInfo.pageCurrent-1):gtInfo.recordLength) : (gtData | gtMeta:null:null:gtData.length | gtFilter:gtInfo.filter:gtInfo:refreshFilter:gtData.length | gtSearch:gtInfo.searchTerms:gtInfo:gtSettings:gtFields:gtData.length | gtOrderBy:sortOrder:gtFields:refreshSorting:gtData.length | gtChunk:gtInfo:gtInfo.recordLength:gtInfo.pageCurrent:refreshPageArray:gtData.length:gtEvent:data | gtRowClass:gtFields)\">\n                <tr [ngClass]=\"{'row-selected':metaInfo[row.$$gtRowId]?.isSelected, 'row-open':metaInfo[row.$$gtRowId]?.isOpen, 'row-loading':loading, 'row-expandable':gtRowComponent}\" class=\"{{row.$$gtRowClass}}\"\n                    (click)=\"gtOptions.rowSelection ? toggleSelect(row):null\">\n                    <td *ngFor=\"let column of row | gtRender:gtSettings:gtFields:refreshPipe:loading:gtOptions.highlightSearch:gtInfo.searchTerms;\"\n                        ngClass=\"{{column.objectKey +'-column' | dashCase}} {{gtFields | gtProperty:column.objectKey:'classNames'}} {{(gtFields | gtProperty:column.objectKey:'inlineEdit') ? 'gt-inline-edit':''}} {{column.edited ? 'gt-edited':''}} {{ gtFields | gtColumnClass:row:column }}\">\n                        <span class=\"gt-row-label\"\n                              *ngIf=\"gtOptions.stack\">{{(gtFields | gtProperty:column.objectKey:'stackedHeading') ? (gtFields | gtProperty:column.objectKey:'stackedHeading') : (gtFields | gtProperty:column.objectKey:'name')}}</span>\n                        <gt-custom-component-factory *ngIf=\"column.columnComponent\" class=\"gt-row-content\"\n                                                     [type]=\"column.columnComponent.type\"\n                                                     [injector]=\"column.columnComponent.injector\" [row]=\"row\"\n                                                     [column]=\"column\" (redrawEvent)=\"redraw($event)\"\n                                                     (click)=\"column.click ? column.click(row,column,$event):'';column.expand ? toggleCollapse(row):''\"></gt-custom-component-factory>\n                        <span *ngIf=\"!column.columnComponent && !(gtFields | gtProperty:column.objectKey:'inlineEdit')\"\n                              class=\"gt-row-content\" [innerHTML]=\"column.renderValue\"\n                              (click)=\"column.click ? column.click(row,column,$event):'';column.expand ? toggleCollapse(row):''\"></span>\n                        <ng-template\n                                [ngIf]=\"!column.columnComponent && (gtFields | gtProperty:column.objectKey:'inlineEdit') === true\">\n                            <input class=\"inline-edit\" type=\"text\" [(ngModel)]=\"column.renderValue\"\n                                   (keyup)=\"gtUpdateColumn($event,row, column)\">\n                            <span class=\"gt-inline-edit-notice\">{{gtTexts.inlineEditEdited}}</span>\n                        </ng-template>\n                        <gt-dropdown\n                                *ngIf=\"!column.columnComponent && (gtFields | gtProperty:column.objectKey:'inlineEdit') && (gtFields | gtProperty:column.objectKey:'inlineEdit').length > 0\"\n                                [options]=\"gtFields | gtProperty:column.objectKey:'inlineEdit'\"\n                                [(selected)]=\"column.renderValue\" (selectedChange)=\"gtDropdownSelect(row, column)\">Add\n                            inline editing module\n                        </gt-dropdown>\n                    </td>\n                </tr>\n                <tr class=\"row-expanded\" *ngIf=\"metaInfo[row.$$gtRowId]?.isOpen\">\n                    <td [attr.colspan]=\"(gtFields | gtVisible:gtSettings:refreshPipe).length\">\n                        <gt-expanding-row [row]=\"row\" [type]=\"gtRowComponent\" (redrawEvent)=\"redraw($event)\"\n                                          (toggleRowEvent)=\"toggleCollapse($event)\"></gt-expanding-row>\n                    </td>\n                </tr>\n            </ng-template>\n            <tr *ngIf=\"gtInfo.pageTotal === 0 && (gtInfo.searchTerms || gtInfo.filter) && !loading\">\n                <td class=\"gt-no-matching-results\" [attr.colspan]=\"(gtFields | gtVisible:gtSettings).length\">\n                    {{gtTexts.noMatchingData}}\n                </td>\n            </tr>\n            <tr *ngIf=\"gtInfo.pageTotal === 0 && !(gtInfo.searchTerms || gtInfo.filter) && !loading\">\n                <td class=\"gt-no-results\" [attr.colspan]=\"(gtFields | gtVisible:gtSettings).length\">{{gtTexts.noData}}\n                </td>\n            </tr>\n            <tr *ngIf=\"gtInfo.pageTotal === 0 && loading\">\n                <td class=\"gt-loading-data\" [attr.colspan]=\"(gtFields | gtVisible:gtSettings).length\">{{gtTexts.loading}}</td>\n            </tr>\n            </tbody>\n        </table>\n        <table class=\"table\" ngClass=\"{{gtClasses}} {{gtOptions.stack ? 'table-stacked':''}}\"\n               *ngIf=\"gtFields && gtSettings && (gtFields | gtVisible:gtSettings:refreshPipe).length === 0\">\n            <thead>\n            <tr>\n                <th class=\"gt-no-visible-columns\">{{gtTexts.noVisibleColumnsHeading}}</th>\n            </tr>\n            </thead>\n            <tbody>\n            <tr>\n                <td class=\"gt-no-visible-columns\">{{gtTexts.noVisibleColumns}}</td>\n            </tr>\n            </tbody>\n        </table>\n        <table class=\"table\" ngClass=\"{{gtClasses}} {{gtOptions.stack ? 'table-stacked':''}}\"\n               *ngIf=\"!gtFields || !gtSettings\">\n            <thead>\n            <tr>\n                <th class=\"gt-loading-config\">&nbsp;</th>\n            </tr>\n            </thead>\n            <tbody>\n            <tr>\n                <td class=\"gt-loading-config\">&nbsp;</td>\n            </tr>\n            </tbody>\n        </table>\n    "}]}],"members":{"gtOptions":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"gtTotals":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"gtFields":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"gtSettings":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"gtData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"gtRowComponent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"gtTexts":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"gtClasses":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"gtEvent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"gtInfo":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"Renderer2"}]}],"updateRecordRange":[{"__symbolic":"method"}],"updateTotals":[{"__symbolic":"method"}],"getRowState":[{"__symbolic":"method"}],"expandAllRows":[{"__symbolic":"method"}],"collapseAllRows":[{"__symbolic":"method"}],"selectAllRows":[{"__symbolic":"method"}],"deselectAllRows":[{"__symbolic":"method"}],"toggleCollapse":[{"__symbolic":"method"}],"toggleSelect":[{"__symbolic":"method"}],"updateRow":[{"__symbolic":"method"}],"removeRow":[{"__symbolic":"method"}],"isRowSelected":[{"__symbolic":"method"}],"_updateMetaInfo":[{"__symbolic":"method"}],"_pushLazyRows":[{"__symbolic":"method"}],"_toggleAllRowProperty":[{"__symbolic":"method"}],"_toggleRowProperty":[{"__symbolic":"method"}],"gtUpdateColumn":[{"__symbolic":"method"}],"gtDropdownSelect":[{"__symbolic":"method"}],"_editRow":[{"__symbolic":"method"}],"_listenForKeydownEvent":[{"__symbolic":"method"}],"inlineEditUpdate":[{"__symbolic":"method"}],"inlineEditCancel":[{"__symbolic":"method"}],"_stopListeningForKeydownEvent":[{"__symbolic":"method"}],"gtApplyFilter":[{"__symbolic":"method"}],"gtClearFilter":[{"__symbolic":"method"}],"gtSearch":[{"__symbolic":"method"}],"createStore":[{"__symbolic":"method"}],"loadingContent":[{"__symbolic":"method"}],"exportCSV":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"GenericTableComponent":{"__symbolic":"class","arity":2,"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"generic-table","template":"\n        <table class=\"table\" ngClass=\"{{gtClasses}} {{gtOptions.stack ? 'table-stacked':''}}\"\n               *ngIf=\"gtFields && gtSettings && (gtFields | gtVisible:gtSettings:refreshPipe).length > 0\">\n            <thead>\n            <tr>\n                <th class=\"gt-sort-label\" *ngIf=\"gtOptions.stack\">{{gtTexts.sortLabel}}</th>\n                <th *ngFor=\"let column of gtSettings | gtVisible:gtSettings:refreshPipe\"\n                    ngClass=\"{{column.objectKey +'-column' | dashCase}} {{gtFields | gtProperty:column.objectKey:'classNames'}} {{column.sortEnabled ? 'sort-'+column.sort:''}} {{column.sortEnabled && column.sortOrder >= 0  ? 'sort-order-'+column.sortOrder:''}} {{ gtFields | gtColumnClass:'th':column }}\"\n                    (click)=\"column.sortEnabled ? gtSort(column.objectKey,$event):'';\">\n                    {{gtFields | gtProperty:column.objectKey:'name'}}\n                </th>\n            </tr>\n            </thead>\n            <ng-template\n                    [ngIf]=\"gtTotals && (gtData | gtFilter:gtInfo.filter:gtInfo:refreshFilter:gtData.length | gtSearch:gtInfo.searchTerms:gtInfo:gtSettings:gtFields:gtData.length).length > 0\">\n                <thead class=\"gt-totals\">\n                <tr *ngFor=\"let total of gtTotals | gtTotalsPosition\">\n                    <td *ngFor=\"let column of gtSettings | gtVisible:gtSettings:refreshPipe;let i = index;\"\n                        ngClass=\"{{column.objectKey +'-totals-column' | dashCase}} {{gtFields | gtProperty:column.objectKey:'classNames'}} {{ gtFields | gtColumnClass:'total':column }}\">\n                        <span *ngIf=\"i === 0\" class=\"float-left\">{{total.name}}</span><span\n                            [innerHTML]=\"total.fields[column.objectKey] | gtTotals:total.update === false ? gtData:(gtData | gtFilter:gtInfo.filter:gtInfo:refreshFilter:gtData.length | gtSearch:gtInfo.searchTerms:gtInfo:gtSettings:gtFields:gtData.length):column.objectKey:refreshTotals\"></span>\n                    </td>\n                </tr>\n                </thead>\n                <tfoot class=\"gt-totals\">\n                <tr *ngFor=\"let total of gtTotals | gtTotalsPosition:'footer'\">\n                    <td *ngFor=\"let column of gtSettings | gtVisible:gtSettings:refreshPipe;let i = index;\"\n                        ngClass=\"{{column.objectKey +'-totals-column' | dashCase}} {{gtFields | gtProperty:column.objectKey:'classNames'}} {{ gtFields | gtColumnClass:'total':column }}\">\n                        <span *ngIf=\"i === 0\" class=\"float-left\">{{total.name}}</span><span\n                            [innerHTML]=\"total.fields[column.objectKey] | gtTotals:total.update === false ? gtData:(gtData | gtFilter:gtInfo.filter:gtInfo:refreshFilter:gtData.length | gtSearch:gtInfo.searchTerms:gtInfo:gtSettings:gtFields:gtData.length):column.objectKey:refreshTotals\"></span>\n                    </td>\n                </tr>\n                </tfoot>\n            </ng-template>\n            <tbody *ngIf=\"gtData && gtInfo\">\n            <ng-template class=\"table-rows\" ngFor let-row\n                         [ngForOf]=\"gtOptions.lazyLoad && gtInfo ? (gtData[gtInfo.pageCurrent-1] | gtMeta:(gtInfo.pageCurrent-1):gtInfo.recordLength) : (gtData | gtMeta:null:null:gtData.length | gtFilter:gtInfo.filter:gtInfo:refreshFilter:gtData.length | gtSearch:gtInfo.searchTerms:gtInfo:gtSettings:gtFields:gtData.length | gtOrderBy:sortOrder:gtFields:refreshSorting:gtData.length | gtChunk:gtInfo:gtInfo.recordLength:gtInfo.pageCurrent:refreshPageArray:gtData.length:gtEvent:data | gtRowClass:gtFields)\">\n                <tr [ngClass]=\"{'row-selected':metaInfo[row.$$gtRowId]?.isSelected, 'row-open':metaInfo[row.$$gtRowId]?.isOpen, 'row-loading':loading, 'row-expandable':gtRowComponent}\" class=\"{{row.$$gtRowClass}}\"\n                    (click)=\"gtOptions.rowSelection ? toggleSelect(row):null\">\n                    <td *ngFor=\"let column of row | gtRender:gtSettings:gtFields:refreshPipe:loading:gtOptions.highlightSearch:gtInfo.searchTerms;\"\n                        ngClass=\"{{column.objectKey +'-column' | dashCase}} {{gtFields | gtProperty:column.objectKey:'classNames'}} {{(gtFields | gtProperty:column.objectKey:'inlineEdit') ? 'gt-inline-edit':''}} {{column.edited ? 'gt-edited':''}} {{ gtFields | gtColumnClass:row:column }}\">\n                        <span class=\"gt-row-label\"\n                              *ngIf=\"gtOptions.stack\">{{(gtFields | gtProperty:column.objectKey:'stackedHeading') ? (gtFields | gtProperty:column.objectKey:'stackedHeading') : (gtFields | gtProperty:column.objectKey:'name')}}</span>\n                        <gt-custom-component-factory *ngIf=\"column.columnComponent\" class=\"gt-row-content\"\n                                                     [type]=\"column.columnComponent.type\"\n                                                     [injector]=\"column.columnComponent.injector\" [row]=\"row\"\n                                                     [column]=\"column\" (redrawEvent)=\"redraw($event)\"\n                                                     (click)=\"column.click ? column.click(row,column,$event):'';column.expand ? toggleCollapse(row):''\"></gt-custom-component-factory>\n                        <span *ngIf=\"!column.columnComponent && !(gtFields | gtProperty:column.objectKey:'inlineEdit')\"\n                              class=\"gt-row-content\" [innerHTML]=\"column.renderValue\"\n                              (click)=\"column.click ? column.click(row,column,$event):'';column.expand ? toggleCollapse(row):''\"></span>\n                        <ng-template\n                                [ngIf]=\"!column.columnComponent && (gtFields | gtProperty:column.objectKey:'inlineEdit') === true\">\n                            <input class=\"inline-edit\" type=\"text\" [(ngModel)]=\"column.renderValue\"\n                                   (keyup)=\"gtUpdateColumn($event,row, column)\">\n                            <span class=\"gt-inline-edit-notice\">{{gtTexts.inlineEditEdited}}</span>\n                        </ng-template>\n                        <gt-dropdown\n                                *ngIf=\"!column.columnComponent && (gtFields | gtProperty:column.objectKey:'inlineEdit') && (gtFields | gtProperty:column.objectKey:'inlineEdit').length > 0\"\n                                [options]=\"gtFields | gtProperty:column.objectKey:'inlineEdit'\"\n                                [(selected)]=\"column.renderValue\" (selectedChange)=\"gtDropdownSelect(row, column)\">Add\n                            inline editing module\n                        </gt-dropdown>\n                    </td>\n                </tr>\n                <tr class=\"row-expanded\" *ngIf=\"metaInfo[row.$$gtRowId]?.isOpen\">\n                    <td [attr.colspan]=\"(gtFields | gtVisible:gtSettings:refreshPipe).length\">\n                        <gt-expanding-row [row]=\"row\" [type]=\"gtRowComponent\" (redrawEvent)=\"redraw($event)\"\n                                          (toggleRowEvent)=\"toggleCollapse($event)\"></gt-expanding-row>\n                    </td>\n                </tr>\n            </ng-template>\n            <tr *ngIf=\"gtInfo.pageTotal === 0 && (gtInfo.searchTerms || gtInfo.filter) && !loading\">\n                <td class=\"gt-no-matching-results\" [attr.colspan]=\"(gtFields | gtVisible:gtSettings).length\">\n                    {{gtTexts.noMatchingData}}\n                </td>\n            </tr>\n            <tr *ngIf=\"gtInfo.pageTotal === 0 && !(gtInfo.searchTerms || gtInfo.filter) && !loading\">\n                <td class=\"gt-no-results\" [attr.colspan]=\"(gtFields | gtVisible:gtSettings).length\">{{gtTexts.noData}}\n                </td>\n            </tr>\n            <tr *ngIf=\"gtInfo.pageTotal === 0 && loading\">\n                <td class=\"gt-loading-data\" [attr.colspan]=\"(gtFields | gtVisible:gtSettings).length\">{{gtTexts.loading}}</td>\n            </tr>\n            </tbody>\n        </table>\n        <table class=\"table\" ngClass=\"{{gtClasses}} {{gtOptions.stack ? 'table-stacked':''}}\"\n               *ngIf=\"gtFields && gtSettings && (gtFields | gtVisible:gtSettings:refreshPipe).length === 0\">\n            <thead>\n            <tr>\n                <th class=\"gt-no-visible-columns\">{{gtTexts.noVisibleColumnsHeading}}</th>\n            </tr>\n            </thead>\n            <tbody>\n            <tr>\n                <td class=\"gt-no-visible-columns\">{{gtTexts.noVisibleColumns}}</td>\n            </tr>\n            </tbody>\n        </table>\n        <table class=\"table\" ngClass=\"{{gtClasses}} {{gtOptions.stack ? 'table-stacked':''}}\"\n               *ngIf=\"!gtFields || !gtSettings\">\n            <thead>\n            <tr>\n                <th class=\"gt-loading-config\">&nbsp;</th>\n            </tr>\n            </thead>\n            <tbody>\n            <tr>\n                <td class=\"gt-loading-config\">&nbsp;</td>\n            </tr>\n            </tbody>\n        </table>\n    "}]}],"members":{"gtOptions":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"gtTotals":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"gtFields":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"gtSettings":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"gtData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"gtRowComponent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"gtTexts":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"gtClasses":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"gtEvent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"gtInfo":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"Renderer2"}]}],"updateRecordRange":[{"__symbolic":"method"}],"updateTotals":[{"__symbolic":"method"}],"getRowState":[{"__symbolic":"method"}],"expandAllRows":[{"__symbolic":"method"}],"collapseAllRows":[{"__symbolic":"method"}],"selectAllRows":[{"__symbolic":"method"}],"deselectAllRows":[{"__symbolic":"method"}],"toggleCollapse":[{"__symbolic":"method"}],"toggleSelect":[{"__symbolic":"method"}],"updateRow":[{"__symbolic":"method"}],"removeRow":[{"__symbolic":"method"}],"isRowSelected":[{"__symbolic":"method"}],"_updateMetaInfo":[{"__symbolic":"method"}],"_pushLazyRows":[{"__symbolic":"method"}],"_toggleAllRowProperty":[{"__symbolic":"method"}],"_toggleRowProperty":[{"__symbolic":"method"}],"gtUpdateColumn":[{"__symbolic":"method"}],"gtDropdownSelect":[{"__symbolic":"method"}],"_editRow":[{"__symbolic":"method"}],"_listenForKeydownEvent":[{"__symbolic":"method"}],"inlineEditUpdate":[{"__symbolic":"method"}],"inlineEditCancel":[{"__symbolic":"method"}],"_stopListeningForKeydownEvent":[{"__symbolic":"method"}],"gtApplyFilter":[{"__symbolic":"method"}],"gtClearFilter":[{"__symbolic":"method"}],"gtSearch":[{"__symbolic":"method"}],"createStore":[{"__symbolic":"method"}],"loadingContent":[{"__symbolic":"method"}],"exportCSV":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":3,"metadata":{"GenericTableComponent":{"__symbolic":"class","arity":2,"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"generic-table","template":"\n        <table class=\"table\" ngClass=\"{{gtClasses}} {{gtOptions.stack ? 'table-stacked':''}}\"\n               *ngIf=\"gtFields && gtSettings && (gtFields | gtVisible:gtSettings:refreshPipe).length > 0\">\n            <thead>\n            <tr>\n                <th class=\"gt-sort-label\" *ngIf=\"gtOptions.stack\">{{gtTexts.sortLabel}}</th>\n                <th *ngFor=\"let column of gtSettings | gtVisible:gtSettings:refreshPipe\"\n                    ngClass=\"{{column.objectKey +'-column' | dashCase}} {{gtFields | gtProperty:column.objectKey:'classNames'}} {{column.sortEnabled ? 'sort-'+column.sort:''}} {{column.sortEnabled && column.sortOrder >= 0  ? 'sort-order-'+column.sortOrder:''}} {{ gtFields | gtColumnClass:'th':column }}\"\n                    (click)=\"column.sortEnabled ? gtSort(column.objectKey,$event):'';\">\n                    {{gtFields | gtProperty:column.objectKey:'name'}}\n                </th>\n            </tr>\n            </thead>\n            <ng-template\n                    [ngIf]=\"gtTotals && (gtData | gtFilter:gtInfo.filter:gtInfo:refreshFilter:gtData.length | gtSearch:gtInfo.searchTerms:gtInfo:gtSettings:gtFields:gtData.length).length > 0\">\n                <thead class=\"gt-totals\">\n                <tr *ngFor=\"let total of gtTotals | gtTotalsPosition\">\n                    <td *ngFor=\"let column of gtSettings | gtVisible:gtSettings:refreshPipe;let i = index;\"\n                        ngClass=\"{{column.objectKey +'-totals-column' | dashCase}} {{gtFields | gtProperty:column.objectKey:'classNames'}} {{ gtFields | gtColumnClass:'total':column }}\">\n                        <span *ngIf=\"i === 0\" class=\"float-left\">{{total.name}}</span><span\n                            [innerHTML]=\"total.fields[column.objectKey] | gtTotals:total.update === false ? gtData:(gtData | gtFilter:gtInfo.filter:gtInfo:refreshFilter:gtData.length | gtSearch:gtInfo.searchTerms:gtInfo:gtSettings:gtFields:gtData.length):column.objectKey:refreshTotals\"></span>\n                    </td>\n                </tr>\n                </thead>\n                <tfoot class=\"gt-totals\">\n                <tr *ngFor=\"let total of gtTotals | gtTotalsPosition:'footer'\">\n                    <td *ngFor=\"let column of gtSettings | gtVisible:gtSettings:refreshPipe;let i = index;\"\n                        ngClass=\"{{column.objectKey +'-totals-column' | dashCase}} {{gtFields | gtProperty:column.objectKey:'classNames'}} {{ gtFields | gtColumnClass:'total':column }}\">\n                        <span *ngIf=\"i === 0\" class=\"float-left\">{{total.name}}</span><span\n                            [innerHTML]=\"total.fields[column.objectKey] | gtTotals:total.update === false ? gtData:(gtData | gtFilter:gtInfo.filter:gtInfo:refreshFilter:gtData.length | gtSearch:gtInfo.searchTerms:gtInfo:gtSettings:gtFields:gtData.length):column.objectKey:refreshTotals\"></span>\n                    </td>\n                </tr>\n                </tfoot>\n            </ng-template>\n            <tbody *ngIf=\"gtData && gtInfo\">\n            <ng-template class=\"table-rows\" ngFor let-row let-last=\"last\" [ngForTrackBy]=\"trackByFn\"\n                         [ngForOf]=\"gtOptions.lazyLoad && gtInfo ? (gtData[gtInfo.pageCurrent-1] | gtMeta:(gtInfo.pageCurrent-1):gtInfo.recordLength) : (gtData | gtMeta:null:null:gtData.length | gtFilter:gtInfo.filter:gtInfo:refreshFilter:gtData.length | gtSearch:gtInfo.searchTerms:gtInfo:gtSettings:gtFields:gtData.length | gtOrderBy:sortOrder:gtFields:refreshSorting:gtData.length | gtChunk:gtInfo:gtInfo.recordLength:gtInfo.pageCurrent:refreshPageArray:gtData.length:gtEvent:data | gtRowClass:gtFields)\">\n                <tr [ngClass]=\"{'row-selected':metaInfo[row.$$gtRowId]?.isSelected, 'row-open':metaInfo[row.$$gtRowId]?.isOpen, 'row-loading':loading, 'row-expandable':gtRowComponent}\"\n                    class=\"{{row.$$gtRowClass}}\"\n                    (click)=\"gtOptions.rowSelection ? toggleSelect(row):null\">\n                    <td *ngFor=\"let column of row | gtRender:gtSettings:gtFields:refreshPipe:loading:gtOptions.highlightSearch:gtInfo.searchTerms;trackBy:trackByColumnFn\"\n                        ngClass=\"{{column.objectKey +'-column' | dashCase}} {{gtFields | gtProperty:column.objectKey:'classNames'}} {{(gtFields | gtProperty:column.objectKey:'inlineEdit') ? 'gt-inline-edit':''}} {{column.edited ? 'gt-edited':''}} {{ gtFields | gtColumnClass:row:column }}\">\n                        <span class=\"gt-row-label\"\n                              *ngIf=\"gtOptions.stack\">{{(gtFields | gtProperty:column.objectKey:'stackedHeading') ? (gtFields | gtProperty:column.objectKey:'stackedHeading') : (gtFields | gtProperty:column.objectKey:'name')}}</span>\n                        <gt-custom-component-factory *ngIf=\"column.columnComponent\" class=\"gt-row-content\"\n                                                     [type]=\"column.columnComponent.type\"\n                                                     [injector]=\"column.columnComponent.injector\" [row]=\"row\"\n                                                     [column]=\"column\" (redrawEvent)=\"redraw($event)\"\n                                                     (click)=\"column.click ? column.click(row,column,$event):'';column.expand ? toggleCollapse(row, column.expand):''\"></gt-custom-component-factory>\n                        <span *ngIf=\"!column.columnComponent && !(gtFields | gtProperty:column.objectKey:'inlineEdit')\"\n                              class=\"gt-row-content\" [innerHTML]=\"column.renderValue\"\n                              (click)=\"column.click ? column.click(row,column,$event):'';column.expand ? toggleCollapse(row, column.expand):''\"></span>\n                        <ng-template\n                                [ngIf]=\"!column.columnComponent && (gtFields | gtProperty:column.objectKey:'inlineEdit') === true\">\n                            <input class=\"inline-edit\" type=\"text\" [(ngModel)]=\"column.renderValue\"\n                                   (keyup)=\"gtUpdateColumn($event,row, column)\">\n                            <span class=\"gt-inline-edit-notice\">{{gtTexts.inlineEditEdited}}</span>\n                        </ng-template>\n                        <gt-dropdown\n                                *ngIf=\"!column.columnComponent && (gtFields | gtProperty:column.objectKey:'inlineEdit') && (gtFields | gtProperty:column.objectKey:'inlineEdit').length > 0\"\n                                [options]=\"gtFields | gtProperty:column.objectKey:'inlineEdit'\"\n                                [(selected)]=\"column.renderValue\" (selectedChange)=\"gtDropdownSelect(row, column)\">Add\n                            inline editing module\n                        </gt-dropdown>\n                    </td>\n                </tr>\n                <tr class=\"row-expanded\" *ngIf=\"metaInfo[row.$$gtRowId]?.isOpen\">\n                    <td [attr.colspan]=\"(gtFields | gtVisible:gtSettings:refreshPipe).length\">\n                        <gt-expanding-row [row]=\"row\"\n                                          [type]=\"gtRowComponent ? gtRowComponent:expandedRow.component\"\n                                          [columnWidth]=\"columnWidth\"\n                                          [gtFields]=\"gtFields\"\n                                          [gtOptions]=\"gtOptions\"\n                                          [gtInfo]=\"gtInfo\"\n                                          [gtSettings]=\"gtSettings\"\n                                          [data]=\"expandedRow.data\"\n                                          (redrawEvent)=\"redraw($event)\"\n                                          (toggleRowEvent)=\"toggleCollapse($event)\"></gt-expanding-row>\n                    </td>\n                </tr>\n                <tr *ngIf=\"gtOptions.reportColumnWidth && last\">\n                    <td style=\"padding: 0; border:none;\"\n                        *ngFor=\"let column of gtSettings | gtVisible:gtSettings:refreshPipe\" gtColumnWidth\n                        [objectKey]=\"column.objectKey\" [widths]=\"columnWidth\"></td>\n                </tr>\n            </ng-template>\n            <tr *ngIf=\"gtInfo.pageTotal === 0 && (gtInfo.searchTerms || gtInfo.filter) && !loading\">\n                <td class=\"gt-no-matching-results\" [attr.colspan]=\"(gtFields | gtVisible:gtSettings).length\">\n                    {{gtTexts.noMatchingData}}\n                </td>\n            </tr>\n            <tr *ngIf=\"gtInfo.pageTotal === 0 && !(gtInfo.searchTerms || gtInfo.filter) && !loading\">\n                <td class=\"gt-no-results\" [attr.colspan]=\"(gtFields | gtVisible:gtSettings).length\">{{gtTexts.noData}}\n                </td>\n            </tr>\n            <tr *ngIf=\"gtInfo.pageTotal === 0 && loading\">\n                <td class=\"gt-loading-data\" [attr.colspan]=\"(gtFields | gtVisible:gtSettings).length\">{{gtTexts.loading}}</td>\n            </tr>\n            </tbody>\n        </table>\n        <table class=\"table\" ngClass=\"{{gtClasses}} {{gtOptions.stack ? 'table-stacked':''}}\"\n               *ngIf=\"gtFields && gtSettings && (gtFields | gtVisible:gtSettings:refreshPipe).length === 0\">\n            <thead>\n            <tr>\n                <th class=\"gt-no-visible-columns\">{{gtTexts.noVisibleColumnsHeading}}</th>\n            </tr>\n            </thead>\n            <tbody>\n            <tr>\n                <td class=\"gt-no-visible-columns\">{{gtTexts.noVisibleColumns}}</td>\n            </tr>\n            </tbody>\n        </table>\n        <table class=\"table\" ngClass=\"{{gtClasses}} {{gtOptions.stack ? 'table-stacked':''}}\"\n               *ngIf=\"!gtFields || !gtSettings\">\n            <thead>\n            <tr>\n                <th class=\"gt-loading-config\">&nbsp;</th>\n            </tr>\n            </thead>\n            <tbody>\n            <tr>\n                <td class=\"gt-loading-config\">&nbsp;</td>\n            </tr>\n            </tbody>\n        </table>\n    "}]}],"members":{"gtOptions":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"gtTotals":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"gtFields":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"gtSettings":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"gtData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"gtRowComponent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"gtTexts":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"gtClasses":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"gtEvent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"gtInfo":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"Renderer2"}]}],"updateRecordRange":[{"__symbolic":"method"}],"updateTotals":[{"__symbolic":"method"}],"getRowState":[{"__symbolic":"method"}],"expandAllRows":[{"__symbolic":"method"}],"collapseAllRows":[{"__symbolic":"method"}],"selectAllRows":[{"__symbolic":"method"}],"deselectAllRows":[{"__symbolic":"method"}],"toggleCollapse":[{"__symbolic":"method"}],"toggleSelect":[{"__symbolic":"method"}],"updateRow":[{"__symbolic":"method"}],"removeRow":[{"__symbolic":"method"}],"isRowSelected":[{"__symbolic":"method"}],"_updateMetaInfo":[{"__symbolic":"method"}],"_pushLazyRows":[{"__symbolic":"method"}],"_toggleAllRowProperty":[{"__symbolic":"method"}],"_toggleRowProperty":[{"__symbolic":"method"}],"gtUpdateColumn":[{"__symbolic":"method"}],"gtDropdownSelect":[{"__symbolic":"method"}],"_editRow":[{"__symbolic":"method"}],"_listenForKeydownEvent":[{"__symbolic":"method"}],"inlineEditUpdate":[{"__symbolic":"method"}],"inlineEditCancel":[{"__symbolic":"method"}],"_stopListeningForKeydownEvent":[{"__symbolic":"method"}],"gtApplyFilter":[{"__symbolic":"method"}],"gtClearFilter":[{"__symbolic":"method"}],"gtSearch":[{"__symbolic":"method"}],"createStore":[{"__symbolic":"method"}],"loadingContent":[{"__symbolic":"method"}],"exportCSV":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"trackByFn":[{"__symbolic":"method"}],"trackByColumnFn":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"GenericTableComponent":{"__symbolic":"class","arity":2,"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"generic-table","template":"\n        <table class=\"table\" ngClass=\"{{gtClasses}} {{gtOptions.stack ? 'table-stacked':''}}\"\n               *ngIf=\"gtFields && gtSettings && (gtFields | gtVisible:gtSettings:refreshPipe).length > 0\">\n            <thead>\n            <tr>\n                <th class=\"gt-sort-label\" *ngIf=\"gtOptions.stack\">{{gtTexts.sortLabel}}</th>\n                <th *ngFor=\"let column of gtSettings | gtVisible:gtSettings:refreshPipe\"\n                    ngClass=\"{{column.objectKey +'-column' | dashCase}} {{gtFields | gtProperty:column.objectKey:'classNames'}} {{column.sortEnabled ? 'sort-'+column.sort:''}} {{column.sortEnabled && column.sortOrder >= 0  ? 'sort-order-'+column.sortOrder:''}} {{ gtFields | gtColumnClass:'th':column }}\"\n                    (click)=\"column.sortEnabled ? gtSort(column.objectKey,$event):'';\">\n                    {{gtFields | gtProperty:column.objectKey:'name'}}\n                </th>\n            </tr>\n            </thead>\n            <ng-template\n                    [ngIf]=\"gtTotals && (gtData | gtFilter:gtInfo.filter:gtInfo:refreshFilter:gtData.length | gtSearch:gtInfo.searchTerms:gtInfo:gtSettings:gtFields:gtData.length).length > 0\">\n                <thead class=\"gt-totals\">\n                <tr *ngFor=\"let total of gtTotals | gtTotalsPosition\">\n                    <td *ngFor=\"let column of gtSettings | gtVisible:gtSettings:refreshPipe;let i = index;\"\n                        ngClass=\"{{column.objectKey +'-totals-column' | dashCase}} {{gtFields | gtProperty:column.objectKey:'classNames'}} {{ gtFields | gtColumnClass:'total':column }}\">\n                        <span *ngIf=\"i === 0\" class=\"float-left\">{{total.name}}</span><span\n                            [innerHTML]=\"total.fields[column.objectKey] | gtTotals:total.update === false ? gtData:(gtData | gtFilter:gtInfo.filter:gtInfo:refreshFilter:gtData.length | gtSearch:gtInfo.searchTerms:gtInfo:gtSettings:gtFields:gtData.length):column.objectKey:refreshTotals\"></span>\n                    </td>\n                </tr>\n                </thead>\n                <tfoot class=\"gt-totals\">\n                <tr *ngFor=\"let total of gtTotals | gtTotalsPosition:'footer'\">\n                    <td *ngFor=\"let column of gtSettings | gtVisible:gtSettings:refreshPipe;let i = index;\"\n                        ngClass=\"{{column.objectKey +'-totals-column' | dashCase}} {{gtFields | gtProperty:column.objectKey:'classNames'}} {{ gtFields | gtColumnClass:'total':column }}\">\n                        <span *ngIf=\"i === 0\" class=\"float-left\">{{total.name}}</span><span\n                            [innerHTML]=\"total.fields[column.objectKey] | gtTotals:total.update === false ? gtData:(gtData | gtFilter:gtInfo.filter:gtInfo:refreshFilter:gtData.length | gtSearch:gtInfo.searchTerms:gtInfo:gtSettings:gtFields:gtData.length):column.objectKey:refreshTotals\"></span>\n                    </td>\n                </tr>\n                </tfoot>\n            </ng-template>\n            <tbody *ngIf=\"gtData && gtInfo\">\n            <ng-template class=\"table-rows\" ngFor let-row let-last=\"last\" [ngForTrackBy]=\"trackByFn\"\n                         [ngForOf]=\"gtOptions.lazyLoad && gtInfo ? (gtData[gtInfo.pageCurrent-1] | gtMeta:(gtInfo.pageCurrent-1):gtInfo.recordLength) : (gtData | gtMeta:null:null:gtData.length | gtFilter:gtInfo.filter:gtInfo:refreshFilter:gtData.length | gtSearch:gtInfo.searchTerms:gtInfo:gtSettings:gtFields:gtData.length | gtOrderBy:sortOrder:gtFields:refreshSorting:gtData.length | gtChunk:gtInfo:gtInfo.recordLength:gtInfo.pageCurrent:refreshPageArray:gtData.length:gtEvent:data | gtRowClass:gtFields)\">\n                <tr [ngClass]=\"{'row-selected':metaInfo[row.$$gtRowId]?.isSelected, 'row-open':metaInfo[row.$$gtRowId]?.isOpen, 'row-loading':loading, 'row-expandable':gtRowComponent}\"\n                    class=\"{{row.$$gtRowClass}}\"\n                    (click)=\"gtOptions.rowSelection ? toggleSelect(row):null\">\n                    <td *ngFor=\"let column of row | gtRender:gtSettings:gtFields:refreshPipe:loading:gtOptions.highlightSearch:gtInfo.searchTerms;trackBy:trackByColumnFn\"\n                        ngClass=\"{{column.objectKey +'-column' | dashCase}} {{gtFields | gtProperty:column.objectKey:'classNames'}} {{(gtFields | gtProperty:column.objectKey:'inlineEdit') ? 'gt-inline-edit':''}} {{column.edited ? 'gt-edited':''}} {{ gtFields | gtColumnClass:row:column }}\">\n                        <span class=\"gt-row-label\"\n                              *ngIf=\"gtOptions.stack\">{{(gtFields | gtProperty:column.objectKey:'stackedHeading') ? (gtFields | gtProperty:column.objectKey:'stackedHeading') : (gtFields | gtProperty:column.objectKey:'name')}}</span>\n                        <gt-custom-component-factory *ngIf=\"column.columnComponent\" class=\"gt-row-content\"\n                                                     [type]=\"column.columnComponent.type\"\n                                                     [injector]=\"column.columnComponent.injector\" [row]=\"row\"\n                                                     [column]=\"column\" (redrawEvent)=\"redraw($event)\"\n                                                     (click)=\"column.click ? column.click(row,column,$event):'';column.expand ? toggleCollapse(row, column.expand):''\"></gt-custom-component-factory>\n                        <span *ngIf=\"!column.columnComponent && !(gtFields | gtProperty:column.objectKey:'inlineEdit')\"\n                              class=\"gt-row-content\" [innerHTML]=\"column.renderValue\"\n                              (click)=\"column.click ? column.click(row,column,$event):'';column.expand ? toggleCollapse(row, column.expand):''\"></span>\n                        <ng-template\n                                [ngIf]=\"!column.columnComponent && (gtFields | gtProperty:column.objectKey:'inlineEdit') === true\">\n                            <input class=\"inline-edit\" type=\"text\" [(ngModel)]=\"column.renderValue\"\n                                   (keyup)=\"gtUpdateColumn($event,row, column)\">\n                            <span class=\"gt-inline-edit-notice\">{{gtTexts.inlineEditEdited}}</span>\n                        </ng-template>\n                        <gt-dropdown\n                                *ngIf=\"!column.columnComponent && (gtFields | gtProperty:column.objectKey:'inlineEdit') && (gtFields | gtProperty:column.objectKey:'inlineEdit').length > 0\"\n                                [options]=\"gtFields | gtProperty:column.objectKey:'inlineEdit'\"\n                                [(selected)]=\"column.renderValue\" (selectedChange)=\"gtDropdownSelect(row, column)\">Add\n                            inline editing module\n                        </gt-dropdown>\n                    </td>\n                </tr>\n                <tr class=\"row-expanded\" *ngIf=\"metaInfo[row.$$gtRowId]?.isOpen\">\n                    <td [attr.colspan]=\"(gtFields | gtVisible:gtSettings:refreshPipe).length\">\n                        <gt-expanding-row [row]=\"row\"\n                                          [type]=\"gtRowComponent ? gtRowComponent:expandedRow.component\"\n                                          [columnWidth]=\"columnWidth\"\n                                          [gtFields]=\"gtFields\"\n                                          [gtOptions]=\"gtOptions\"\n                                          [gtInfo]=\"gtInfo\"\n                                          [gtSettings]=\"gtSettings\"\n                                          [data]=\"expandedRow.data\"\n                                          (redrawEvent)=\"redraw($event)\"\n                                          (toggleRowEvent)=\"toggleCollapse($event)\"></gt-expanding-row>\n                    </td>\n                </tr>\n                <tr *ngIf=\"gtOptions.reportColumnWidth && last\">\n                    <td style=\"padding: 0; border:none;\"\n                        *ngFor=\"let column of gtSettings | gtVisible:gtSettings:refreshPipe\" gtColumnWidth\n                        [objectKey]=\"column.objectKey\" [widths]=\"columnWidth\"></td>\n                </tr>\n            </ng-template>\n            <tr *ngIf=\"gtInfo.pageTotal === 0 && (gtInfo.searchTerms || gtInfo.filter) && !loading\">\n                <td class=\"gt-no-matching-results\" [attr.colspan]=\"(gtFields | gtVisible:gtSettings).length\">\n                    {{gtTexts.noMatchingData}}\n                </td>\n            </tr>\n            <tr *ngIf=\"gtInfo.pageTotal === 0 && !(gtInfo.searchTerms || gtInfo.filter) && !loading\">\n                <td class=\"gt-no-results\" [attr.colspan]=\"(gtFields | gtVisible:gtSettings).length\">{{gtTexts.noData}}\n                </td>\n            </tr>\n            <tr *ngIf=\"gtInfo.pageTotal === 0 && loading\">\n                <td class=\"gt-loading-data\" [attr.colspan]=\"(gtFields | gtVisible:gtSettings).length\">{{gtTexts.loading}}</td>\n            </tr>\n            </tbody>\n        </table>\n        <table class=\"table\" ngClass=\"{{gtClasses}} {{gtOptions.stack ? 'table-stacked':''}}\"\n               *ngIf=\"gtFields && gtSettings && (gtFields | gtVisible:gtSettings:refreshPipe).length === 0\">\n            <thead>\n            <tr>\n                <th class=\"gt-no-visible-columns\">{{gtTexts.noVisibleColumnsHeading}}</th>\n            </tr>\n            </thead>\n            <tbody>\n            <tr>\n                <td class=\"gt-no-visible-columns\">{{gtTexts.noVisibleColumns}}</td>\n            </tr>\n            </tbody>\n        </table>\n        <table class=\"table\" ngClass=\"{{gtClasses}} {{gtOptions.stack ? 'table-stacked':''}}\"\n               *ngIf=\"!gtFields || !gtSettings\">\n            <thead>\n            <tr>\n                <th class=\"gt-loading-config\">&nbsp;</th>\n            </tr>\n            </thead>\n            <tbody>\n            <tr>\n                <td class=\"gt-loading-config\">&nbsp;</td>\n            </tr>\n            </tbody>\n        </table>\n    "}]}],"members":{"gtOptions":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"gtTotals":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"gtFields":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"gtSettings":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"gtData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"gtRowComponent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"gtTexts":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"gtClasses":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"gtEvent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"gtInfo":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"Renderer2"}]}],"updateRecordRange":[{"__symbolic":"method"}],"updateTotals":[{"__symbolic":"method"}],"getRowState":[{"__symbolic":"method"}],"expandAllRows":[{"__symbolic":"method"}],"collapseAllRows":[{"__symbolic":"method"}],"selectAllRows":[{"__symbolic":"method"}],"deselectAllRows":[{"__symbolic":"method"}],"toggleCollapse":[{"__symbolic":"method"}],"toggleSelect":[{"__symbolic":"method"}],"updateRow":[{"__symbolic":"method"}],"removeRow":[{"__symbolic":"method"}],"isRowSelected":[{"__symbolic":"method"}],"_updateMetaInfo":[{"__symbolic":"method"}],"_pushLazyRows":[{"__symbolic":"method"}],"_toggleAllRowProperty":[{"__symbolic":"method"}],"_toggleRowProperty":[{"__symbolic":"method"}],"gtUpdateColumn":[{"__symbolic":"method"}],"gtDropdownSelect":[{"__symbolic":"method"}],"_editRow":[{"__symbolic":"method"}],"_listenForKeydownEvent":[{"__symbolic":"method"}],"inlineEditUpdate":[{"__symbolic":"method"}],"inlineEditCancel":[{"__symbolic":"method"}],"_stopListeningForKeydownEvent":[{"__symbolic":"method"}],"gtApplyFilter":[{"__symbolic":"method"}],"gtClearFilter":[{"__symbolic":"method"}],"gtSearch":[{"__symbolic":"method"}],"createStore":[{"__symbolic":"method"}],"loadingContent":[{"__symbolic":"method"}],"exportCSV":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"trackByFn":[{"__symbolic":"method"}],"trackByColumnFn":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}}}}]

components/gt-expanding-row.component.d.ts

 import { EventEmitter, Type } from '@angular/core';
 import { GtRow } from '../interfaces/gt-row';
+import { GtConfigField } from '../interfaces/gt-config-field';
+import { GtConfigSetting } from '../interfaces/gt-config-setting';
 export declare class GtExpandedRow<R extends GtRow> {
     row: R;
+    columnWidth: Object;
+    gtSettings: Array<GtConfigSetting>;
+    gtFields: Array<GtConfigField<R, any>>;
+    gtOptions: any;
+    gtInfo: any;
+    data: any;
     redrawEvent: EventEmitter<R>;
@@ -13,2 +21,8 @@ toggleRowEvent: EventEmitter<R>;
     row: R;
+    columnWidth: Object;
+    gtSettings: Array<GtConfigSetting>;
+    gtFields: Array<GtConfigField<R, any>>;
+    gtOptions: any;
+    gtInfo: any;
+    data: any;
     redrawEvent: EventEmitter<R>;
@@ -15,0 +29,0 @@ toggleRowEvent: EventEmitter<R>;

components/gt-expanding-row.component.js

@@ -25,2 +25,8 @@ "use strict";
         instance.row = this.row;
+        instance.columnWidth = this.columnWidth;
+        instance.gtSettings = this.gtSettings;
+        instance.gtFields = this.gtFields;
+        instance.gtOptions = this.gtOptions;
+        instance.gtInfo = this.gtInfo;
+        instance.data = typeof this.data === 'function' ? this.data(this.row) : this.data;
         instance.redrawEvent.subscribe(this.redrawEvent);
@@ -34,3 +40,3 @@ instance.toggleRowEvent.subscribe(this.toggleRowEvent);
                 selector: 'gt-expanding-row',
-                template: "\n    <div appComponentAnchor\n         [ctor]=\"type\" (instance)=\"newInstance($event)\"></div>"
+                template: "\n        <div appComponentAnchor\n             [ctor]=\"type\" (instance)=\"newInstance($event)\"></div>"
             },] },
@@ -43,2 +49,8 @@ ];
     'row': [{ type: core_1.Input },],
+    'columnWidth': [{ type: core_1.Input },],
+    'gtSettings': [{ type: core_1.Input },],
+    'gtFields': [{ type: core_1.Input },],
+    'gtOptions': [{ type: core_1.Input },],
+    'gtInfo': [{ type: core_1.Input },],
+    'data': [{ type: core_1.Input },],
     'redrawEvent': [{ type: core_1.Output },],
@@ -45,0 +57,0 @@ 'toggleRowEvent': [{ type: core_1.Output },],

components/gt-expanding-row.component.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":3,"metadata":{"GtExpandedRow":{"__symbolic":"class","arity":1,"members":{"$hide":[{"__symbolic":"method"}],"$redraw":[{"__symbolic":"method"}]}},"GtExpandingRowComponent":{"__symbolic":"class","arity":2,"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"gt-expanding-row","template":"\n    <div appComponentAnchor\n         [ctor]=\"type\" (instance)=\"newInstance($event)\"></div>"}]}],"members":{"type":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"row":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"redrawEvent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"toggleRowEvent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"newInstance":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"GtExpandedRow":{"__symbolic":"class","arity":1,"members":{"$hide":[{"__symbolic":"method"}],"$redraw":[{"__symbolic":"method"}]}},"GtExpandingRowComponent":{"__symbolic":"class","arity":2,"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"gt-expanding-row","template":"\n    <div appComponentAnchor\n         [ctor]=\"type\" (instance)=\"newInstance($event)\"></div>"}]}],"members":{"type":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"row":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"redrawEvent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"toggleRowEvent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"newInstance":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":3,"metadata":{"GtExpandedRow":{"__symbolic":"class","arity":1,"members":{"$hide":[{"__symbolic":"method"}],"$redraw":[{"__symbolic":"method"}]}},"GtExpandingRowComponent":{"__symbolic":"class","arity":2,"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"gt-expanding-row","template":"\n        <div appComponentAnchor\n             [ctor]=\"type\" (instance)=\"newInstance($event)\"></div>"}]}],"members":{"type":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"row":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"columnWidth":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"gtSettings":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"gtFields":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"gtOptions":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"gtInfo":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"data":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"redrawEvent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"toggleRowEvent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"newInstance":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"GtExpandedRow":{"__symbolic":"class","arity":1,"members":{"$hide":[{"__symbolic":"method"}],"$redraw":[{"__symbolic":"method"}]}},"GtExpandingRowComponent":{"__symbolic":"class","arity":2,"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"gt-expanding-row","template":"\n        <div appComponentAnchor\n             [ctor]=\"type\" (instance)=\"newInstance($event)\"></div>"}]}],"members":{"type":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"row":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"columnWidth":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"gtSettings":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"gtFields":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"gtOptions":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"gtInfo":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"data":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"redrawEvent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"toggleRowEvent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"newInstance":[{"__symbolic":"method"}]}}}}]

components/gt-pagination.component.js

@@ -83,5 +83,5 @@ "use strict";
         if (pagination.indexOf(totalPages) === -1) {
-            //...if not, page next to last should either show ellipsis or actual page number for the page
+            // ...if not, page next to last should either show ellipsis or actual page number for the page
             pagination[pagination.length - 1] = pagination[pagination.length - 1] === totalPages - 1 ? totalPages - 1 : true;
-            //...add last page to pagination
+            // ...add last page to pagination
             pagination.push(totalPages);
@@ -88,0 +88,0 @@ }

core.module.js

@@ -26,2 +26,4 @@ "use strict";
 var gt_column_class_pipe_1 = require("./pipes/gt-column-class.pipe");
+var gt_column_width_directive_1 = require("./directives/gt-column-width.directive");
+var gt_drilldown_component_1 = require("./components/gt-drilldown.component");
 var GenericTableModule = (function () {
@@ -56,3 +58,5 @@ function GenericTableModule() {
                     gt_column_class_pipe_1.GtColumnClassPipe,
-                    gt_dropdown_component_1.GtDropdownComponent
+                    gt_dropdown_component_1.GtDropdownComponent,
+                    gt_column_width_directive_1.GtColumnWidthDirective,
+                    gt_drilldown_component_1.GtDrilldownComponent
                 ],
@@ -66,5 +70,8 @@ imports: [common_1.CommonModule, forms_1.FormsModule],
                     gt_expanding_row_component_1.GtExpandingRowComponent,
-                    gt_dropdown_component_1.GtDropdownComponent
+                    gt_dropdown_component_1.GtDropdownComponent,
+                    gt_drilldown_component_1.GtDrilldownComponent
                 ],
-                entryComponents: [],
+                entryComponents: [
+                    gt_drilldown_component_1.GtDrilldownComponent
+                ],
                 providers: [],
@@ -71,0 +78,0 @@ bootstrap: []

core.module.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":3,"metadata":{"GenericTableModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"declarations":[{"__symbolic":"reference","module":"./directives/component-anchor.directive","name":"ComponentAnchorDirective"},{"__symbolic":"reference","module":"./components/generic-table.component","name":"GenericTableComponent"},{"__symbolic":"reference","module":"./components/gt-pagination.component","name":"GtPaginationComponent"},{"__symbolic":"reference","module":"./pipes/gt-visible.pipe","name":"GtVisiblePipe"},{"__symbolic":"reference","module":"./pipes/gt-render.pipe","name":"GtRenderPipe"},{"__symbolic":"reference","module":"./pipes/dash-case.pipe","name":"DashCasePipe"},{"__symbolic":"reference","module":"./pipes/gt-property.pipe","name":"GtPropertyPipe"},{"__symbolic":"reference","module":"./pipes/gt-chunk.pipe","name":"GtChunkPipe"},{"__symbolic":"reference","module":"./pipes/gt-filter.pipe","name":"GtFilterPipe"},{"__symbolic":"reference","module":"./pipes/gt-order-by.pipe","name":"GtOrderByPipe"},{"__symbolic":"reference","module":"./components/gt-expanding-row.component","name":"GtExpandingRowComponent"},{"__symbolic":"reference","module":"./components/gt-custom-component-factory","name":"GtCustomComponentFactory"},{"__symbolic":"reference","module":"./pipes/gt-search.pipe","name":"GtSearchPipe"},{"__symbolic":"reference","module":"./components/gt-pagination.component","name":"PaginationPipe"},{"__symbolic":"reference","module":"./components/gt-table-info.component","name":"GtTableInfoComponent"},{"__symbolic":"reference","module":"./components/gt-table-info.component","name":"TableInfoPipe"},{"__symbolic":"reference","module":"./pipes/gt-meta.pipe","name":"GtMetaPipe"},{"__symbolic":"reference","module":"./pipes/gt-totals.pipe","name":"GtTotalsPipe"},{"__symbolic":"reference","module":"./pipes/gt-totals-position.pipe","name":"GtTotalsPositionPipe"},{"__symbolic":"reference","module":"./pipes/gt-row-class.pipe","name":"GtRowClassPipe"},{"__symbolic":"reference","module":"./pipes/gt-column-class.pipe","name":"GtColumnClassPipe"},{"__symbolic":"reference","module":"./components/gt-dropdown.component","name":"GtDropdownComponent"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule"},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule"}],"exports":[{"__symbolic":"reference","module":"./components/generic-table.component","name":"GenericTableComponent"},{"__symbolic":"reference","module":"./components/gt-pagination.component","name":"GtPaginationComponent"},{"__symbolic":"reference","module":"./components/gt-table-info.component","name":"GtTableInfoComponent"},{"__symbolic":"reference","module":"./pipes/gt-property.pipe","name":"GtPropertyPipe"},{"__symbolic":"reference","module":"./components/gt-expanding-row.component","name":"GtExpandingRowComponent"},{"__symbolic":"reference","module":"./components/gt-dropdown.component","name":"GtDropdownComponent"}],"entryComponents":[],"providers":[],"bootstrap":[]}]}]}}},{"__symbolic":"module","version":1,"metadata":{"GenericTableModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"declarations":[{"__symbolic":"reference","module":"./directives/component-anchor.directive","name":"ComponentAnchorDirective"},{"__symbolic":"reference","module":"./components/generic-table.component","name":"GenericTableComponent"},{"__symbolic":"reference","module":"./components/gt-pagination.component","name":"GtPaginationComponent"},{"__symbolic":"reference","module":"./pipes/gt-visible.pipe","name":"GtVisiblePipe"},{"__symbolic":"reference","module":"./pipes/gt-render.pipe","name":"GtRenderPipe"},{"__symbolic":"reference","module":"./pipes/dash-case.pipe","name":"DashCasePipe"},{"__symbolic":"reference","module":"./pipes/gt-property.pipe","name":"GtPropertyPipe"},{"__symbolic":"reference","module":"./pipes/gt-chunk.pipe","name":"GtChunkPipe"},{"__symbolic":"reference","module":"./pipes/gt-filter.pipe","name":"GtFilterPipe"},{"__symbolic":"reference","module":"./pipes/gt-order-by.pipe","name":"GtOrderByPipe"},{"__symbolic":"reference","module":"./components/gt-expanding-row.component","name":"GtExpandingRowComponent"},{"__symbolic":"reference","module":"./components/gt-custom-component-factory","name":"GtCustomComponentFactory"},{"__symbolic":"reference","module":"./pipes/gt-search.pipe","name":"GtSearchPipe"},{"__symbolic":"reference","module":"./components/gt-pagination.component","name":"PaginationPipe"},{"__symbolic":"reference","module":"./components/gt-table-info.component","name":"GtTableInfoComponent"},{"__symbolic":"reference","module":"./components/gt-table-info.component","name":"TableInfoPipe"},{"__symbolic":"reference","module":"./pipes/gt-meta.pipe","name":"GtMetaPipe"},{"__symbolic":"reference","module":"./pipes/gt-totals.pipe","name":"GtTotalsPipe"},{"__symbolic":"reference","module":"./pipes/gt-totals-position.pipe","name":"GtTotalsPositionPipe"},{"__symbolic":"reference","module":"./pipes/gt-row-class.pipe","name":"GtRowClassPipe"},{"__symbolic":"reference","module":"./pipes/gt-column-class.pipe","name":"GtColumnClassPipe"},{"__symbolic":"reference","module":"./components/gt-dropdown.component","name":"GtDropdownComponent"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule"},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule"}],"exports":[{"__symbolic":"reference","module":"./components/generic-table.component","name":"GenericTableComponent"},{"__symbolic":"reference","module":"./components/gt-pagination.component","name":"GtPaginationComponent"},{"__symbolic":"reference","module":"./components/gt-table-info.component","name":"GtTableInfoComponent"},{"__symbolic":"reference","module":"./pipes/gt-property.pipe","name":"GtPropertyPipe"},{"__symbolic":"reference","module":"./components/gt-expanding-row.component","name":"GtExpandingRowComponent"},{"__symbolic":"reference","module":"./components/gt-dropdown.component","name":"GtDropdownComponent"}],"entryComponents":[],"providers":[],"bootstrap":[]}]}]}}}]
+[{"__symbolic":"module","version":3,"metadata":{"GenericTableModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"declarations":[{"__symbolic":"reference","module":"./directives/component-anchor.directive","name":"ComponentAnchorDirective"},{"__symbolic":"reference","module":"./components/generic-table.component","name":"GenericTableComponent"},{"__symbolic":"reference","module":"./components/gt-pagination.component","name":"GtPaginationComponent"},{"__symbolic":"reference","module":"./pipes/gt-visible.pipe","name":"GtVisiblePipe"},{"__symbolic":"reference","module":"./pipes/gt-render.pipe","name":"GtRenderPipe"},{"__symbolic":"reference","module":"./pipes/dash-case.pipe","name":"DashCasePipe"},{"__symbolic":"reference","module":"./pipes/gt-property.pipe","name":"GtPropertyPipe"},{"__symbolic":"reference","module":"./pipes/gt-chunk.pipe","name":"GtChunkPipe"},{"__symbolic":"reference","module":"./pipes/gt-filter.pipe","name":"GtFilterPipe"},{"__symbolic":"reference","module":"./pipes/gt-order-by.pipe","name":"GtOrderByPipe"},{"__symbolic":"reference","module":"./components/gt-expanding-row.component","name":"GtExpandingRowComponent"},{"__symbolic":"reference","module":"./components/gt-custom-component-factory","name":"GtCustomComponentFactory"},{"__symbolic":"reference","module":"./pipes/gt-search.pipe","name":"GtSearchPipe"},{"__symbolic":"reference","module":"./components/gt-pagination.component","name":"PaginationPipe"},{"__symbolic":"reference","module":"./components/gt-table-info.component","name":"GtTableInfoComponent"},{"__symbolic":"reference","module":"./components/gt-table-info.component","name":"TableInfoPipe"},{"__symbolic":"reference","module":"./pipes/gt-meta.pipe","name":"GtMetaPipe"},{"__symbolic":"reference","module":"./pipes/gt-totals.pipe","name":"GtTotalsPipe"},{"__symbolic":"reference","module":"./pipes/gt-totals-position.pipe","name":"GtTotalsPositionPipe"},{"__symbolic":"reference","module":"./pipes/gt-row-class.pipe","name":"GtRowClassPipe"},{"__symbolic":"reference","module":"./pipes/gt-column-class.pipe","name":"GtColumnClassPipe"},{"__symbolic":"reference","module":"./components/gt-dropdown.component","name":"GtDropdownComponent"},{"__symbolic":"reference","module":"./directives/gt-column-width.directive","name":"GtColumnWidthDirective"},{"__symbolic":"reference","module":"./components/gt-drilldown.component","name":"GtDrilldownComponent"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule"},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule"}],"exports":[{"__symbolic":"reference","module":"./components/generic-table.component","name":"GenericTableComponent"},{"__symbolic":"reference","module":"./components/gt-pagination.component","name":"GtPaginationComponent"},{"__symbolic":"reference","module":"./components/gt-table-info.component","name":"GtTableInfoComponent"},{"__symbolic":"reference","module":"./pipes/gt-property.pipe","name":"GtPropertyPipe"},{"__symbolic":"reference","module":"./components/gt-expanding-row.component","name":"GtExpandingRowComponent"},{"__symbolic":"reference","module":"./components/gt-dropdown.component","name":"GtDropdownComponent"},{"__symbolic":"reference","module":"./components/gt-drilldown.component","name":"GtDrilldownComponent"}],"entryComponents":[{"__symbolic":"reference","module":"./components/gt-drilldown.component","name":"GtDrilldownComponent"}],"providers":[],"bootstrap":[]}]}]}}},{"__symbolic":"module","version":1,"metadata":{"GenericTableModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"declarations":[{"__symbolic":"reference","module":"./directives/component-anchor.directive","name":"ComponentAnchorDirective"},{"__symbolic":"reference","module":"./components/generic-table.component","name":"GenericTableComponent"},{"__symbolic":"reference","module":"./components/gt-pagination.component","name":"GtPaginationComponent"},{"__symbolic":"reference","module":"./pipes/gt-visible.pipe","name":"GtVisiblePipe"},{"__symbolic":"reference","module":"./pipes/gt-render.pipe","name":"GtRenderPipe"},{"__symbolic":"reference","module":"./pipes/dash-case.pipe","name":"DashCasePipe"},{"__symbolic":"reference","module":"./pipes/gt-property.pipe","name":"GtPropertyPipe"},{"__symbolic":"reference","module":"./pipes/gt-chunk.pipe","name":"GtChunkPipe"},{"__symbolic":"reference","module":"./pipes/gt-filter.pipe","name":"GtFilterPipe"},{"__symbolic":"reference","module":"./pipes/gt-order-by.pipe","name":"GtOrderByPipe"},{"__symbolic":"reference","module":"./components/gt-expanding-row.component","name":"GtExpandingRowComponent"},{"__symbolic":"reference","module":"./components/gt-custom-component-factory","name":"GtCustomComponentFactory"},{"__symbolic":"reference","module":"./pipes/gt-search.pipe","name":"GtSearchPipe"},{"__symbolic":"reference","module":"./components/gt-pagination.component","name":"PaginationPipe"},{"__symbolic":"reference","module":"./components/gt-table-info.component","name":"GtTableInfoComponent"},{"__symbolic":"reference","module":"./components/gt-table-info.component","name":"TableInfoPipe"},{"__symbolic":"reference","module":"./pipes/gt-meta.pipe","name":"GtMetaPipe"},{"__symbolic":"reference","module":"./pipes/gt-totals.pipe","name":"GtTotalsPipe"},{"__symbolic":"reference","module":"./pipes/gt-totals-position.pipe","name":"GtTotalsPositionPipe"},{"__symbolic":"reference","module":"./pipes/gt-row-class.pipe","name":"GtRowClassPipe"},{"__symbolic":"reference","module":"./pipes/gt-column-class.pipe","name":"GtColumnClassPipe"},{"__symbolic":"reference","module":"./components/gt-dropdown.component","name":"GtDropdownComponent"},{"__symbolic":"reference","module":"./directives/gt-column-width.directive","name":"GtColumnWidthDirective"},{"__symbolic":"reference","module":"./components/gt-drilldown.component","name":"GtDrilldownComponent"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule"},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule"}],"exports":[{"__symbolic":"reference","module":"./components/generic-table.component","name":"GenericTableComponent"},{"__symbolic":"reference","module":"./components/gt-pagination.component","name":"GtPaginationComponent"},{"__symbolic":"reference","module":"./components/gt-table-info.component","name":"GtTableInfoComponent"},{"__symbolic":"reference","module":"./pipes/gt-property.pipe","name":"GtPropertyPipe"},{"__symbolic":"reference","module":"./components/gt-expanding-row.component","name":"GtExpandingRowComponent"},{"__symbolic":"reference","module":"./components/gt-dropdown.component","name":"GtDropdownComponent"},{"__symbolic":"reference","module":"./components/gt-drilldown.component","name":"GtDrilldownComponent"}],"entryComponents":[{"__symbolic":"reference","module":"./components/gt-drilldown.component","name":"GtDrilldownComponent"}],"providers":[],"bootstrap":[]}]}]}}}]

index.d.ts

@@ -5,2 +5,3 @@ export { GtExpandingRowComponent, GtExpandedRow } from './components/gt-expanding-row.component';
 export { GtPaginationComponent } from './components/gt-pagination.component';
+export { GtDrilldownComponent } from './components/gt-drilldown.component';
 export { GenericTableModule } from './core.module';
@@ -7,0 +8,0 @@ export { GtConfig } from './interfaces/gt-config';

index.js

@@ -12,2 +12,4 @@ "use strict";
 exports.GtPaginationComponent = gt_pagination_component_1.GtPaginationComponent;
+var gt_drilldown_component_1 = require("./components/gt-drilldown.component");
+exports.GtDrilldownComponent = gt_drilldown_component_1.GtDrilldownComponent;
 var core_module_1 = require("./core.module");
@@ -14,0 +16,0 @@ exports.GenericTableModule = core_module_1.GenericTableModule;

index.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":3,"metadata":{},"exports":[{"from":"./components/gt-expanding-row.component","export":["GtExpandingRowComponent","GtExpandedRow"]},{"from":"./components/generic-table.component","export":["GenericTableComponent"]},{"from":"./components/gt-table-info.component","export":["GtTableInfoComponent"]},{"from":"./components/gt-pagination.component","export":["GtPaginationComponent"]},{"from":"./core.module","export":["GenericTableModule"]},{"from":"./interfaces/gt-config","export":["GtConfig"]},{"from":"./interfaces/gt-config-field","export":["GtConfigField"]},{"from":"./interfaces/gt-config-setting","export":["GtConfigSetting"]},{"from":"./interfaces/gt-information","export":["GtInformation"]},{"from":"./interfaces/gt-row","export":["GtRow"]},{"from":"./interfaces/gt-texts","export":["GtTexts"]},{"from":"./interfaces/gt-options","export":["GtOptions"]},{"from":"./components/gt-custom-component-factory","export":["GtCustomComponent"]}]},{"__symbolic":"module","version":1,"metadata":{},"exports":[{"from":"./components/gt-expanding-row.component","export":["GtExpandingRowComponent","GtExpandedRow"]},{"from":"./components/generic-table.component","export":["GenericTableComponent"]},{"from":"./components/gt-table-info.component","export":["GtTableInfoComponent"]},{"from":"./components/gt-pagination.component","export":["GtPaginationComponent"]},{"from":"./core.module","export":["GenericTableModule"]},{"from":"./interfaces/gt-config","export":["GtConfig"]},{"from":"./interfaces/gt-config-field","export":["GtConfigField"]},{"from":"./interfaces/gt-config-setting","export":["GtConfigSetting"]},{"from":"./interfaces/gt-information","export":["GtInformation"]},{"from":"./interfaces/gt-row","export":["GtRow"]},{"from":"./interfaces/gt-texts","export":["GtTexts"]},{"from":"./interfaces/gt-options","export":["GtOptions"]},{"from":"./components/gt-custom-component-factory","export":["GtCustomComponent"]}]}]
+[{"__symbolic":"module","version":3,"metadata":{},"exports":[{"from":"./components/gt-expanding-row.component","export":["GtExpandingRowComponent","GtExpandedRow"]},{"from":"./components/generic-table.component","export":["GenericTableComponent"]},{"from":"./components/gt-table-info.component","export":["GtTableInfoComponent"]},{"from":"./components/gt-pagination.component","export":["GtPaginationComponent"]},{"from":"./components/gt-drilldown.component","export":["GtDrilldownComponent"]},{"from":"./core.module","export":["GenericTableModule"]},{"from":"./interfaces/gt-config","export":["GtConfig"]},{"from":"./interfaces/gt-config-field","export":["GtConfigField"]},{"from":"./interfaces/gt-config-setting","export":["GtConfigSetting"]},{"from":"./interfaces/gt-information","export":["GtInformation"]},{"from":"./interfaces/gt-row","export":["GtRow"]},{"from":"./interfaces/gt-texts","export":["GtTexts"]},{"from":"./interfaces/gt-options","export":["GtOptions"]},{"from":"./components/gt-custom-component-factory","export":["GtCustomComponent"]}]},{"__symbolic":"module","version":1,"metadata":{},"exports":[{"from":"./components/gt-expanding-row.component","export":["GtExpandingRowComponent","GtExpandedRow"]},{"from":"./components/generic-table.component","export":["GenericTableComponent"]},{"from":"./components/gt-table-info.component","export":["GtTableInfoComponent"]},{"from":"./components/gt-pagination.component","export":["GtPaginationComponent"]},{"from":"./components/gt-drilldown.component","export":["GtDrilldownComponent"]},{"from":"./core.module","export":["GenericTableModule"]},{"from":"./interfaces/gt-config","export":["GtConfig"]},{"from":"./interfaces/gt-config-field","export":["GtConfigField"]},{"from":"./interfaces/gt-config-setting","export":["GtConfigSetting"]},{"from":"./interfaces/gt-information","export":["GtInformation"]},{"from":"./interfaces/gt-row","export":["GtRow"]},{"from":"./interfaces/gt-texts","export":["GtTexts"]},{"from":"./interfaces/gt-options","export":["GtOptions"]},{"from":"./components/gt-custom-component-factory","export":["GtCustomComponent"]}]}]

interfaces/gt-config-field.d.ts

@@ -31,3 +31,6 @@ import { GtRow } from './gt-row';
     click?: GtClickFunc<R>;
-    expand?: boolean;
+    expand?: boolean | {
+        component: Type<C>;
+        data?: any;
+    };
     export?: GtValueFunc<R>;
@@ -34,0 +37,0 @@ sort?: GtValueFunc<R>;

interfaces/gt-options.d.ts

@@ -12,2 +12,3 @@ export interface GtOptions {
     numberOfRows?: number;
+    reportColumnWidth?: boolean;
 }

interfaces/gt-render-field.d.ts

@@ -9,3 +9,6 @@ import { GtRow } from './gt-row';
     click?: GtClickFunc<R>;
-    expand?: boolean;
+    expand?: boolean | {
+        component: Type<C>;
+        data?: any;
+    };
     sortValue: any;
@@ -12,0 +15,0 @@ columnComponent: {

package.json

 {
   "name": "@angular-generic-table/core",
-  "version": "4.6.0",
+  "version": "4.7.0",
   "description": "A generic table component for Angular",
@@ -5,0 +5,0 @@ "main": "index.js",

New alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

325919

increased by8.57%

Number of package files

145

increased by5.84%

Lines of code

3159

increased by6.15%

Worsened metrics

Number of low supply chain risk alerts

3

increased by50%

No dependency changes