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

Comparing version 4.1.1 to 4.2.0

CHANGELOG.md

 Release History
 ---------------
 
+# [4.2.0] - 2017-06-01
+### Added
+- Support for simple inline editing (see issue #52)
+
+### Fixed
+- CSV escaping (see issue #89)
+- Confusing paging behaviour (see issue #87)
+
 # [4.1.1] - 2017-04-21
@@ -5,0 +13,0 @@ ### Fixed

components/generic-table.component.d.ts

@@ -11,3 +11,4 @@ import { OnInit, OnChanges, EventEmitter, Type, SimpleChanges } from '@angular/core';
 import { GtOptions } from '../interfaces/gt-options';
-import { GtRowMeta } from "../interfaces/gt-row-meta";
+import { GtRowMeta } from '../interfaces/gt-row-meta';
+import { GtRenderField } from '../pipes/gt-render.pipe';
 export declare class GenericTableComponent<R extends GtRow, C extends GtExpandedRow<R>> implements OnInit, OnChanges {
@@ -104,2 +105,8 @@ gtFields: GtConfigField<R, any>[];
     /**
+     * Edit row data.
+     * @param {GtRow} row - row object that has been edited.
+     * @param {GtRow} oldValue - row object before edit.
+     */
+    editRow(row: GtRow, oldValue: GtRow): void;
+    /**
      * Update meta info for all rows, ie. isSelected, isOpen.
@@ -109,2 +116,3 @@ * @param {Array} array - array that holds rows that need to be updated.
      * @param {boolean} active - should rows be expanded/open, selected.
+     * @param {GtRow} exception - update all rows except this one.
      */
@@ -129,11 +137,20 @@ private _updateMetaInfo(array, property, active, exception?);
      * @param {string} property - name of property that should be changed/toggled.
+     * @param {any} propertyValues - optional property values that can be passed.
      */
-    private _toggleRowProperty(row, property);
+    private _toggleRowProperty(row, property, propertyValues?);
     /**
+     * Update column.
+     * @param {Object} $event - key up event.
+     * @param {GtRow} row - row object.
+     * @param {GtRenderField} column - column object.
+     */
+    gtUpdateColumn($event: KeyboardEvent, row: GtRow, column: GtRenderField<any, any>): void;
+    gtSelect(row: GtRow, column: GtRenderField<any, any>): void;
+    /**
      * Apply filter(s).
      * @param {Object} filter - object containing key value pairs, where value should be array of values.
      */
-    gtApplyFilter: (filter: Object) => void;
+    gtApplyFilter(filter: Object): void;
     /** Clear/remove applied filter(s). */
-    gtClearFilter: () => void;
+    gtClearFilter(): void;
     /**
@@ -143,3 +160,3 @@ * Search
      */
-    gtSearch: (value: string) => void;
+    gtSearch(value: string): void;
     /**
@@ -151,3 +168,3 @@ * Create store to hold previously loaded records.
      */
-    private createStore;
+    private createStore(records, perPage);
     /**
@@ -158,3 +175,3 @@ * Create placeholders for rows while loading data from back-end.
      */
-    private loadingContent;
+    private loadingContent(perPage);
     /** Sort by sort order */
@@ -161,0 +178,0 @@ private getSortOrder;

components/generic-table.component.js

 "use strict";
+var __assign = (this && this.__assign) || Object.assign || function(t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+        s = arguments[i];
+        for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+            t[p] = s[p];
+    }
+    return t;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
@@ -15,13 +23,14 @@ var core_1 = require("@angular/core");
         this.gtDefaultTexts = {
-            loading: "Loading...",
-            noData: "No data",
-            noMatchingData: "No data matching results found",
-            noVisibleColumnsHeading: "No visible columns",
-            noVisibleColumns: "Please select at least one column to be visible.",
-            tableInfo: "Showing #recordFrom to #recordTo of #recordsAfterSearch entries.",
-            tableInfoAfterSearch: "Showing  #recordFrom to #recordTo of #recordsAfterSearch entries (filtered from a total of #recordsAll entries).",
-            csvDownload: "download",
-            sortLabel: "Sort:",
-            paginateNext: "Next page",
-            paginatePrevious: "Previous page"
+            loading: 'Loading...',
+            noData: 'No data',
+            noMatchingData: 'No data matching results found',
+            noVisibleColumnsHeading: 'No visible columns',
+            noVisibleColumns: 'Please select at least one column to be visible.',
+            tableInfo: 'Showing #recordFrom to #recordTo of #recordsAfterSearch entries.',
+            tableInfoAfterSearch: 'Showing  #recordFrom to #recordTo of #recordsAfterSearch entries (filtered from a total of #recordsAll entries).',
+            csvDownload: 'download',
+            sortLabel: 'Sort:',
+            paginateNext: 'Next page',
+            paginatePrevious: 'Previous page',
+            inlineEditEdited: 'Press enter to save'
         };
@@ -270,81 +279,2 @@ this.gtTexts = this.gtDefaultTexts;
         };
-        /**
-         * Apply filter(s).
-         * @param {Object} filter - object containing key value pairs, where value should be array of values.
-         */
-        this.gtApplyFilter = function (filter) {
-            this.gtInfo.filter = filter;
-            // go to first page
-            this.goToPage(1);
-        };
-        /** Clear/remove applied filter(s). */
-        this.gtClearFilter = function () {
-            this.gtInfo.filter = false;
-            //this.updateRecordRange();
-        };
-        /**
-         * Search
-         * @param {string} value - string containing one or more words
-         */
-        this.gtSearch = function (value) {
-            this.gtInfo.searchTerms = value;
-            //always go to first page when searching
-            this.goToPage(1);
-        };
-        /**
-         * Create store to hold previously loaded records.
-         * @param {number} records - total number of records in store.
-         * @param {number} perPage - how many records to show per page.
-         * @returns {Array} a nested array to hold records per page.
-         */
-        this.createStore = function (records, perPage) {
-            var stores = Math.ceil(records / perPage);
-            var store = [];
-            for (var i = 0; i < stores; i++) {
-                store[i] = [];
-            }
-            return store;
-        };
-        /**
-         * Create placeholders for rows while loading data from back-end.
-         * @param {number} perPage - how many records to show per page.
-         * @returns {Array} an array containing empty records to be presented while fetching real data.
-         */
-        this.loadingContent = function (perPage) {
-            // create row object
-            var rowObject = {
-                $$loading: true
-            };
-            var order = 0;
-            // sort settings by column order
-            this._gtSettings.sort(this.getColumnOrder);
-            // loop through all settings objects...
-            for (var i = 0; i < this._gtSettings.length; i++) {
-                var setting = this._gtSettings[i];
-                // ...if column is visible and enabled...
-                if (setting.visible !== false && setting.enabled !== false) {
-                    // ...if first column, set value to loading text otherwise leave it empty
-                    if (order === 0) {
-                        //console.log(setting.objectKey);
-                        rowObject[setting.objectKey] = this.gtTexts.loading;
-                        this.loadingProperty = setting.objectKey;
-                    }
-                    else {
-                        rowObject[setting.objectKey] = '';
-                    }
-                    order++;
-                }
-                else {
-                    rowObject[setting.objectKey] = '';
-                }
-            }
-            // create content placeholder
-            var contentPlaceholder = [];
-            // create equal number of rows as rows per page
-            for (var i = 0; i < perPage; i++) {
-                // ...add temporary row object
-                contentPlaceholder.push(rowObject);
-            }
-            return contentPlaceholder;
-        };
         // TODO: move to helper functions
@@ -473,2 +403,10 @@ /** Sort by sort order */
     /**
+     * Edit row data.
+     * @param {GtRow} row - row object that has been edited.
+     * @param {GtRow} oldValue - row object before edit.
+     */
+    GenericTableComponent.prototype.editRow = function (row, oldValue) {
+        this._toggleRowProperty(row, 'isEdited', oldValue);
+    };
+    /**
      * Update meta info for all rows, ie. isSelected, isOpen.
@@ -478,2 +416,3 @@ * @param {Array} array - array that holds rows that need to be updated.
      * @param {boolean} active - should rows be expanded/open, selected.
+     * @param {GtRow} exception - update all rows except this one.
      */
@@ -568,4 +507,5 @@ GenericTableComponent.prototype._updateMetaInfo = function (array, property, active, exception) {
      * @param {string} property - name of property that should be changed/toggled.
+     * @param {any} propertyValues - optional property values that can be passed.
      */
-    GenericTableComponent.prototype._toggleRowProperty = function (row, property) {
+    GenericTableComponent.prototype._toggleRowProperty = function (row, property, propertyValues) {
         var eventName;
@@ -645,2 +585,19 @@ var eventValue;
                     break;
+                case 'isEdited':
+                    eventName = 'updated';
+                    var oldValue = propertyValues;
+                    // check if edit object exists for row
+                    if (typeof this.metaInfo[row.$$gtRowId][property] === 'undefined') {
+                        this.metaInfo[row.$$gtRowId][property] = {
+                            originalValue: oldValue,
+                            oldValue: oldValue,
+                            newValue: row
+                        };
+                    }
+                    else {
+                        this.metaInfo[row.$$gtRowId][property].oldValue = oldValue;
+                        this.metaInfo[row.$$gtRowId][property].newValue = row;
+                    }
+                    eventValue = this.metaInfo[row.$$gtRowId][property];
+                    break;
             }
@@ -651,5 +608,119 @@ this.gtEvent.emit({
             });
-            this.metaInfo[row.$$gtRowId][property] = !this.metaInfo[row.$$gtRowId][property];
+            if (property !== 'isEdited') {
+                this.metaInfo[row.$$gtRowId][property] = !this.metaInfo[row.$$gtRowId][property];
+            }
         }
     };
+    /**
+     * Update column.
+     * @param {Object} $event - key up event.
+     * @param {GtRow} row - row object.
+     * @param {GtRenderField} column - column object.
+     */
+    GenericTableComponent.prototype.gtUpdateColumn = function ($event, row, column) {
+        switch ($event.key) {
+            case 'Enter':
+                var oldValue = __assign({}, row);
+                row[column.objectKey] = column.renderValue;
+                this.editRow(row, oldValue);
+                column.edited = false;
+                break;
+            case 'Escape':
+                column.renderValue = row[column.objectKey];
+                column.edited = false;
+                break;
+            default:
+                column.edited = row[column.objectKey] !== column.renderValue;
+                break;
+        }
+    };
+    GenericTableComponent.prototype.gtSelect = function (row, column) {
+        var oldValue = __assign({}, row);
+        row[column.objectKey] = column.renderValue;
+        this.editRow(row, oldValue);
+    };
+    /**
+     * Apply filter(s).
+     * @param {Object} filter - object containing key value pairs, where value should be array of values.
+     */
+    GenericTableComponent.prototype.gtApplyFilter = function (filter) {
+        this.gtInfo.filter = filter;
+        // go to first page
+        this.goToPage(1);
+    };
+    ;
+    /** Clear/remove applied filter(s). */
+    GenericTableComponent.prototype.gtClearFilter = function () {
+        this.gtInfo.filter = false;
+        //this.updateRecordRange();
+    };
+    ;
+    /**
+     * Search
+     * @param {string} value - string containing one or more words
+     */
+    GenericTableComponent.prototype.gtSearch = function (value) {
+        this.gtInfo.searchTerms = value;
+        //always go to first page when searching
+        this.goToPage(1);
+    };
+    ;
+    /**
+     * Create store to hold previously loaded records.
+     * @param {number} records - total number of records in store.
+     * @param {number} perPage - how many records to show per page.
+     * @returns {Array} a nested array to hold records per page.
+     */
+    GenericTableComponent.prototype.createStore = function (records, perPage) {
+        var stores = Math.ceil(records / perPage);
+        var store = [];
+        for (var i = 0; i < stores; i++) {
+            store[i] = [];
+        }
+        return store;
+    };
+    ;
+    /**
+     * Create placeholders for rows while loading data from back-end.
+     * @param {number} perPage - how many records to show per page.
+     * @returns {Array} an array containing empty records to be presented while fetching real data.
+     */
+    GenericTableComponent.prototype.loadingContent = function (perPage) {
+        // create row object
+        var rowObject = {
+            $$loading: true
+        };
+        var order = 0;
+        // sort settings by column order
+        this._gtSettings.sort(this.getColumnOrder);
+        // loop through all settings objects...
+        for (var i = 0; i < this._gtSettings.length; i++) {
+            var setting = this._gtSettings[i];
+            // ...if column is visible and enabled...
+            if (setting.visible !== false && setting.enabled !== false) {
+                // ...if first column, set value to loading text otherwise leave it empty
+                if (order === 0) {
+                    //console.log(setting.objectKey);
+                    rowObject[setting.objectKey] = this.gtTexts.loading;
+                    this.loadingProperty = setting.objectKey;
+                }
+                else {
+                    rowObject[setting.objectKey] = '';
+                }
+                order++;
+            }
+            else {
+                rowObject[setting.objectKey] = '';
+            }
+        }
+        // create content placeholder
+        var contentPlaceholder = [];
+        // create equal number of rows as rows per page
+        for (var i = 0; i < perPage; i++) {
+            // ...add temporary row object
+            contentPlaceholder.push(rowObject);
+        }
+        return contentPlaceholder;
+    };
+    ;
     /** Export data as CSV
@@ -679,5 +750,8 @@ * @param {string} fileName - optional file name (overrides default file name).
                     // get export value, if export function is defined use it otherwise check for value function and as a last resort export raw data
-                    csv += fieldSetting.export && typeof fieldSetting.export === 'function' ?
+                    var exportValue = fieldSetting.export && typeof fieldSetting.export === 'function' ?
                         fieldSetting.export(row) : fieldSetting.value && typeof fieldSetting.value === 'function' ?
                         fieldSetting.value(row) : row[_this._gtSettings[i_1].objectKey];
+                    // escape export value using double quotes (") if export value contains delimiter
+                    exportValue = typeof exportValue === 'string' && exportValue.indexOf(_this.gtOptions.csvDelimiter) != -1 ? '"' + exportValue + '"' : exportValue;
+                    csv += exportValue;
                     if (i_1 < (_this._gtSettings.length - 1)) {
@@ -696,3 +770,3 @@ csv += _this.gtOptions.csvDelimiter; //this.csvSeparator;
         else {
-            var link = document.createElement("a");
+            var link = document.createElement('a');
             link.style.display = 'none';
@@ -738,3 +812,3 @@ document.body.appendChild(link);
                     // ... add to sorting
-                    sorting.push("-" + setting.objectKey);
+                    sorting.push('-' + setting.objectKey);
                 }
@@ -829,3 +903,3 @@ }
                 selector: 'generic-table',
-                template: "\n      <table class=\"table\" ngClass=\"{{gtClasses}} {{gtOptions.stack ? 'table-stacked':''}}\" *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><th *ngFor=\"let column of gtSettings | gtVisible:gtSettings:refreshPipe\" ngClass=\"{{column.objectKey +'-column' | dashCase}} {{gtFields | gtProperty:column.objectKey:'classNames'}} {{column.sortEnabled ? 'sort-'+column.sort:''}} {{column.sortEnabled && column.sortOrder >= 0  ? 'sort-order-'+column.sortOrder:''}}\" (click)=\"column.sortEnabled ? gtSort(column.objectKey,$event):'';\">{{gtFields | gtProperty:column.objectKey:'name'}}</th>\n          </tr>\n          </thead>\n          <tbody *ngIf=\"gtData && gtInfo\">\n          <ng-template class=\"table-rows\" ngFor let-row [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)\">\n              <tr [ngClass]=\"{'row-selected':metaInfo[row.$$gtRowId]?.isSelected, 'row-open':metaInfo[row.$$gtRowId]?.isOpen, 'row-loading':loading}\" (click)=\"gtOptions.rowSelection ? toggleSelect(row):null\">\n                  <td *ngFor=\"let column of row | gtRender:gtSettings:gtFields:refreshPipe:loading:gtOptions.highlightSearch:gtInfo.searchTerms;\" ngClass=\"{{column.objectKey +'-column' | dashCase}} {{gtFields | gtProperty:column.objectKey:'classNames'}}\">\n                      <span class=\"gt-row-label\" *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\" [type]=\"column.columnComponent.type\" [injector]=\"column.columnComponent.injector\" [row]=\"row\" [column]=\"column\" (redrawEvent)=\"redraw($event)\" (click)=\"column.click ? column.click(row,column):'';column.expand ? toggleCollapse(row):''\"></gt-custom-component-factory>\n                      <span *ngIf=\"!column.columnComponent\" class=\"gt-row-content\" [innerHTML]=\"column.renderValue\" (click)=\"column.click ? column.click(row,column):'';column.expand ? toggleCollapse(row):''\"></span>\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)\" (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\">{{gtTexts.noMatchingData}}</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}}</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':''}}\"  *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':''}}\"  *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      \n  ",
+                template: "\n    <table class=\"table\" ngClass=\"{{gtClasses}} {{gtOptions.stack ? 'table-stacked':''}}\" *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><th *ngFor=\"let column of gtSettings | gtVisible:gtSettings:refreshPipe\" ngClass=\"{{column.objectKey +'-column' | dashCase}} {{gtFields | gtProperty:column.objectKey:'classNames'}} {{column.sortEnabled ? 'sort-'+column.sort:''}} {{column.sortEnabled && column.sortOrder >= 0  ? 'sort-order-'+column.sortOrder:''}}\" (click)=\"column.sortEnabled ? gtSort(column.objectKey,$event):'';\">{{gtFields | gtProperty:column.objectKey:'name'}}</th>\n      </tr>\n      </thead>\n      <tbody *ngIf=\"gtData && gtInfo\">\n      <ng-template class=\"table-rows\" ngFor let-row [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)\">\n        <tr [ngClass]=\"{'row-selected':metaInfo[row.$$gtRowId]?.isSelected, 'row-open':metaInfo[row.$$gtRowId]?.isOpen, 'row-loading':loading}\" (click)=\"gtOptions.rowSelection ? toggleSelect(row):null\">\n          <td *ngFor=\"let column of row | gtRender:gtSettings:gtFields:refreshPipe:loading:gtOptions.highlightSearch:gtInfo.searchTerms;\" ngClass=\"{{column.objectKey +'-column' | dashCase}} {{gtFields | gtProperty:column.objectKey:'classNames'}} {{(gtFields | gtProperty:column.objectKey:'inlineEdit') ? 'gt-inline-edit':''}} {{column.edited ? 'gt-edited':''}}\">\n            <span class=\"gt-row-label\" *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\" [type]=\"column.columnComponent.type\" [injector]=\"column.columnComponent.injector\" [row]=\"row\" [column]=\"column\" (redrawEvent)=\"redraw($event)\" (click)=\"column.click ? column.click(row,column):'';column.expand ? toggleCollapse(row):''\"></gt-custom-component-factory>\n            <span *ngIf=\"!column.columnComponent && !(gtFields | gtProperty:column.objectKey:'inlineEdit')\" class=\"gt-row-content\" [innerHTML]=\"column.renderValue\" (click)=\"column.click ? column.click(row,column):'';column.expand ? toggleCollapse(row):''\"></span>\n            <ng-template [ngIf]=\"!column.columnComponent && (gtFields | gtProperty:column.objectKey:'inlineEdit') === true\">\n              <input class=\"inline-edit\" type=\"text\" [(ngModel)]=\"column.renderValue\" (keyup)=\"gtUpdateColumn($event,row, column)\">\n              <span class=\"gt-inline-edit-notice\">{{gtTexts.inlineEditEdited}}</span>\n            </ng-template>\n            <gt-dropdown *ngIf=\"!column.columnComponent && (gtFields | gtProperty:column.objectKey:'inlineEdit') && (gtFields | gtProperty:column.objectKey:'inlineEdit').length > 0\" [options]=\"gtFields | gtProperty:column.objectKey:'inlineEdit'\" [(selected)]=\"column.renderValue\" (selectedChange)=\"gtSelect(row, column)\">Add inline editing module</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)\" (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\">{{gtTexts.noMatchingData}}</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}}</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':''}}\"  *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':''}}\"  *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  ",
             },] },
@@ -832,0 +906,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':''}}\" *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><th *ngFor=\"let column of gtSettings | gtVisible:gtSettings:refreshPipe\" ngClass=\"{{column.objectKey +'-column' | dashCase}} {{gtFields | gtProperty:column.objectKey:'classNames'}} {{column.sortEnabled ? 'sort-'+column.sort:''}} {{column.sortEnabled && column.sortOrder >= 0  ? 'sort-order-'+column.sortOrder:''}}\" (click)=\"column.sortEnabled ? gtSort(column.objectKey,$event):'';\">{{gtFields | gtProperty:column.objectKey:'name'}}</th>\n          </tr>\n          </thead>\n          <tbody *ngIf=\"gtData && gtInfo\">\n          <ng-template class=\"table-rows\" ngFor let-row [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)\">\n              <tr [ngClass]=\"{'row-selected':metaInfo[row.$$gtRowId]?.isSelected, 'row-open':metaInfo[row.$$gtRowId]?.isOpen, 'row-loading':loading}\" (click)=\"gtOptions.rowSelection ? toggleSelect(row):null\">\n                  <td *ngFor=\"let column of row | gtRender:gtSettings:gtFields:refreshPipe:loading:gtOptions.highlightSearch:gtInfo.searchTerms;\" ngClass=\"{{column.objectKey +'-column' | dashCase}} {{gtFields | gtProperty:column.objectKey:'classNames'}}\">\n                      <span class=\"gt-row-label\" *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\" [type]=\"column.columnComponent.type\" [injector]=\"column.columnComponent.injector\" [row]=\"row\" [column]=\"column\" (redrawEvent)=\"redraw($event)\" (click)=\"column.click ? column.click(row,column):'';column.expand ? toggleCollapse(row):''\"></gt-custom-component-factory>\n                      <span *ngIf=\"!column.columnComponent\" class=\"gt-row-content\" [innerHTML]=\"column.renderValue\" (click)=\"column.click ? column.click(row,column):'';column.expand ? toggleCollapse(row):''\"></span>\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)\" (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\">{{gtTexts.noMatchingData}}</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}}</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':''}}\"  *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':''}}\"  *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      \n  "}]}],"members":{"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"}}]}],"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"}}]}],"__ctor__":[{"__symbolic":"constructor"}],"getRowState":[{"__symbolic":"method"}],"expandAllRows":[{"__symbolic":"method"}],"collapseAllRows":[{"__symbolic":"method"}],"selectAllRows":[{"__symbolic":"method"}],"deselectAllRows":[{"__symbolic":"method"}],"toggleCollapse":[{"__symbolic":"method"}],"toggleSelect":[{"__symbolic":"method"}],"_updateMetaInfo":[{"__symbolic":"method"}],"_pushLazyRows":[{"__symbolic":"method"}],"_toggleAllRowProperty":[{"__symbolic":"method"}],"_toggleRowProperty":[{"__symbolic":"method"}],"exportCSV":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__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':''}}\" *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><th *ngFor=\"let column of gtSettings | gtVisible:gtSettings:refreshPipe\" ngClass=\"{{column.objectKey +'-column' | dashCase}} {{gtFields | gtProperty:column.objectKey:'classNames'}} {{column.sortEnabled ? 'sort-'+column.sort:''}} {{column.sortEnabled && column.sortOrder >= 0  ? 'sort-order-'+column.sortOrder:''}}\" (click)=\"column.sortEnabled ? gtSort(column.objectKey,$event):'';\">{{gtFields | gtProperty:column.objectKey:'name'}}</th>\n          </tr>\n          </thead>\n          <tbody *ngIf=\"gtData && gtInfo\">\n          <ng-template class=\"table-rows\" ngFor let-row [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)\">\n              <tr [ngClass]=\"{'row-selected':metaInfo[row.$$gtRowId]?.isSelected, 'row-open':metaInfo[row.$$gtRowId]?.isOpen, 'row-loading':loading}\" (click)=\"gtOptions.rowSelection ? toggleSelect(row):null\">\n                  <td *ngFor=\"let column of row | gtRender:gtSettings:gtFields:refreshPipe:loading:gtOptions.highlightSearch:gtInfo.searchTerms;\" ngClass=\"{{column.objectKey +'-column' | dashCase}} {{gtFields | gtProperty:column.objectKey:'classNames'}}\">\n                      <span class=\"gt-row-label\" *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\" [type]=\"column.columnComponent.type\" [injector]=\"column.columnComponent.injector\" [row]=\"row\" [column]=\"column\" (redrawEvent)=\"redraw($event)\" (click)=\"column.click ? column.click(row,column):'';column.expand ? toggleCollapse(row):''\"></gt-custom-component-factory>\n                      <span *ngIf=\"!column.columnComponent\" class=\"gt-row-content\" [innerHTML]=\"column.renderValue\" (click)=\"column.click ? column.click(row,column):'';column.expand ? toggleCollapse(row):''\"></span>\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)\" (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\">{{gtTexts.noMatchingData}}</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}}</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':''}}\"  *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':''}}\"  *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      \n  "}]}],"members":{"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"}}]}],"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"}}]}],"__ctor__":[{"__symbolic":"constructor"}],"getRowState":[{"__symbolic":"method"}],"expandAllRows":[{"__symbolic":"method"}],"collapseAllRows":[{"__symbolic":"method"}],"selectAllRows":[{"__symbolic":"method"}],"deselectAllRows":[{"__symbolic":"method"}],"toggleCollapse":[{"__symbolic":"method"}],"toggleSelect":[{"__symbolic":"method"}],"_updateMetaInfo":[{"__symbolic":"method"}],"_pushLazyRows":[{"__symbolic":"method"}],"_toggleAllRowProperty":[{"__symbolic":"method"}],"_toggleRowProperty":[{"__symbolic":"method"}],"exportCSV":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__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':''}}\" *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><th *ngFor=\"let column of gtSettings | gtVisible:gtSettings:refreshPipe\" ngClass=\"{{column.objectKey +'-column' | dashCase}} {{gtFields | gtProperty:column.objectKey:'classNames'}} {{column.sortEnabled ? 'sort-'+column.sort:''}} {{column.sortEnabled && column.sortOrder >= 0  ? 'sort-order-'+column.sortOrder:''}}\" (click)=\"column.sortEnabled ? gtSort(column.objectKey,$event):'';\">{{gtFields | gtProperty:column.objectKey:'name'}}</th>\n      </tr>\n      </thead>\n      <tbody *ngIf=\"gtData && gtInfo\">\n      <ng-template class=\"table-rows\" ngFor let-row [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)\">\n        <tr [ngClass]=\"{'row-selected':metaInfo[row.$$gtRowId]?.isSelected, 'row-open':metaInfo[row.$$gtRowId]?.isOpen, 'row-loading':loading}\" (click)=\"gtOptions.rowSelection ? toggleSelect(row):null\">\n          <td *ngFor=\"let column of row | gtRender:gtSettings:gtFields:refreshPipe:loading:gtOptions.highlightSearch:gtInfo.searchTerms;\" ngClass=\"{{column.objectKey +'-column' | dashCase}} {{gtFields | gtProperty:column.objectKey:'classNames'}} {{(gtFields | gtProperty:column.objectKey:'inlineEdit') ? 'gt-inline-edit':''}} {{column.edited ? 'gt-edited':''}}\">\n            <span class=\"gt-row-label\" *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\" [type]=\"column.columnComponent.type\" [injector]=\"column.columnComponent.injector\" [row]=\"row\" [column]=\"column\" (redrawEvent)=\"redraw($event)\" (click)=\"column.click ? column.click(row,column):'';column.expand ? toggleCollapse(row):''\"></gt-custom-component-factory>\n            <span *ngIf=\"!column.columnComponent && !(gtFields | gtProperty:column.objectKey:'inlineEdit')\" class=\"gt-row-content\" [innerHTML]=\"column.renderValue\" (click)=\"column.click ? column.click(row,column):'';column.expand ? toggleCollapse(row):''\"></span>\n            <ng-template [ngIf]=\"!column.columnComponent && (gtFields | gtProperty:column.objectKey:'inlineEdit') === true\">\n              <input class=\"inline-edit\" type=\"text\" [(ngModel)]=\"column.renderValue\" (keyup)=\"gtUpdateColumn($event,row, column)\">\n              <span class=\"gt-inline-edit-notice\">{{gtTexts.inlineEditEdited}}</span>\n            </ng-template>\n            <gt-dropdown *ngIf=\"!column.columnComponent && (gtFields | gtProperty:column.objectKey:'inlineEdit') && (gtFields | gtProperty:column.objectKey:'inlineEdit').length > 0\" [options]=\"gtFields | gtProperty:column.objectKey:'inlineEdit'\" [(selected)]=\"column.renderValue\" (selectedChange)=\"gtSelect(row, column)\">Add inline editing module</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)\" (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\">{{gtTexts.noMatchingData}}</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}}</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':''}}\"  *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':''}}\"  *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":{"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"}}]}],"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"}}]}],"__ctor__":[{"__symbolic":"constructor"}],"getRowState":[{"__symbolic":"method"}],"expandAllRows":[{"__symbolic":"method"}],"collapseAllRows":[{"__symbolic":"method"}],"selectAllRows":[{"__symbolic":"method"}],"deselectAllRows":[{"__symbolic":"method"}],"toggleCollapse":[{"__symbolic":"method"}],"toggleSelect":[{"__symbolic":"method"}],"editRow":[{"__symbolic":"method"}],"_updateMetaInfo":[{"__symbolic":"method"}],"_pushLazyRows":[{"__symbolic":"method"}],"_toggleAllRowProperty":[{"__symbolic":"method"}],"_toggleRowProperty":[{"__symbolic":"method"}],"gtUpdateColumn":[{"__symbolic":"method"}],"gtSelect":[{"__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"}]}}}},{"__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':''}}\" *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><th *ngFor=\"let column of gtSettings | gtVisible:gtSettings:refreshPipe\" ngClass=\"{{column.objectKey +'-column' | dashCase}} {{gtFields | gtProperty:column.objectKey:'classNames'}} {{column.sortEnabled ? 'sort-'+column.sort:''}} {{column.sortEnabled && column.sortOrder >= 0  ? 'sort-order-'+column.sortOrder:''}}\" (click)=\"column.sortEnabled ? gtSort(column.objectKey,$event):'';\">{{gtFields | gtProperty:column.objectKey:'name'}}</th>\n      </tr>\n      </thead>\n      <tbody *ngIf=\"gtData && gtInfo\">\n      <ng-template class=\"table-rows\" ngFor let-row [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)\">\n        <tr [ngClass]=\"{'row-selected':metaInfo[row.$$gtRowId]?.isSelected, 'row-open':metaInfo[row.$$gtRowId]?.isOpen, 'row-loading':loading}\" (click)=\"gtOptions.rowSelection ? toggleSelect(row):null\">\n          <td *ngFor=\"let column of row | gtRender:gtSettings:gtFields:refreshPipe:loading:gtOptions.highlightSearch:gtInfo.searchTerms;\" ngClass=\"{{column.objectKey +'-column' | dashCase}} {{gtFields | gtProperty:column.objectKey:'classNames'}} {{(gtFields | gtProperty:column.objectKey:'inlineEdit') ? 'gt-inline-edit':''}} {{column.edited ? 'gt-edited':''}}\">\n            <span class=\"gt-row-label\" *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\" [type]=\"column.columnComponent.type\" [injector]=\"column.columnComponent.injector\" [row]=\"row\" [column]=\"column\" (redrawEvent)=\"redraw($event)\" (click)=\"column.click ? column.click(row,column):'';column.expand ? toggleCollapse(row):''\"></gt-custom-component-factory>\n            <span *ngIf=\"!column.columnComponent && !(gtFields | gtProperty:column.objectKey:'inlineEdit')\" class=\"gt-row-content\" [innerHTML]=\"column.renderValue\" (click)=\"column.click ? column.click(row,column):'';column.expand ? toggleCollapse(row):''\"></span>\n            <ng-template [ngIf]=\"!column.columnComponent && (gtFields | gtProperty:column.objectKey:'inlineEdit') === true\">\n              <input class=\"inline-edit\" type=\"text\" [(ngModel)]=\"column.renderValue\" (keyup)=\"gtUpdateColumn($event,row, column)\">\n              <span class=\"gt-inline-edit-notice\">{{gtTexts.inlineEditEdited}}</span>\n            </ng-template>\n            <gt-dropdown *ngIf=\"!column.columnComponent && (gtFields | gtProperty:column.objectKey:'inlineEdit') && (gtFields | gtProperty:column.objectKey:'inlineEdit').length > 0\" [options]=\"gtFields | gtProperty:column.objectKey:'inlineEdit'\" [(selected)]=\"column.renderValue\" (selectedChange)=\"gtSelect(row, column)\">Add inline editing module</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)\" (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\">{{gtTexts.noMatchingData}}</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}}</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':''}}\"  *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':''}}\"  *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":{"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"}}]}],"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"}}]}],"__ctor__":[{"__symbolic":"constructor"}],"getRowState":[{"__symbolic":"method"}],"expandAllRows":[{"__symbolic":"method"}],"collapseAllRows":[{"__symbolic":"method"}],"selectAllRows":[{"__symbolic":"method"}],"deselectAllRows":[{"__symbolic":"method"}],"toggleCollapse":[{"__symbolic":"method"}],"toggleSelect":[{"__symbolic":"method"}],"editRow":[{"__symbolic":"method"}],"_updateMetaInfo":[{"__symbolic":"method"}],"_pushLazyRows":[{"__symbolic":"method"}],"_toggleAllRowProperty":[{"__symbolic":"method"}],"_toggleRowProperty":[{"__symbolic":"method"}],"gtUpdateColumn":[{"__symbolic":"method"}],"gtSelect":[{"__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"}]}}}}]

components/gt-pagination.component.js

@@ -31,3 +31,3 @@ "use strict";
                 selector: 'gt-pagination',
-                template: "<nav aria-label=\"Table navigation\" *ngIf=\"genericTable && genericTable.gtInfo && ready && genericTable.gtData?.length > 0\">\n  <ul class=\"pagination\" [ngClass]=\"gtClasses\">\n    <li class=\"page-item\" [ngClass]=\"{'disabled' : genericTable.gtInfo.pageCurrent === 1 || genericTable.loading }\"><a class=\"page-link\" href=\"javascript:void(0);\" (click)=\"genericTable.gtInfo.pageCurrent > 1 && genericTable.previousPage()\" [attr.aria-label]=\"genericTable.gtTexts.paginatePrevious\"><span aria-hidden=\"true\">&laquo;</span><span class=\"sr-only\">{{genericTable.gtTexts.paginatePrevious}}</span></a></li>\n    <li class=\"page-item\" [ngClass]=\"{'disabled' : genericTable.loading && genericTable.gtInfo.pageCurrent !== page, 'active' : genericTable.gtInfo.pageCurrent === page }\" *ngFor=\"let page of genericTable.gtInfo.pageTotal | gtPaginationPipe:genericTable.gtInfo.pageCurrent\"><a class=\"page-link\" [tabindex]=\"page === true ? -1:0\" href=\"javascript:void(0);\" (click)=\"page === true ? '':genericTable.goToPage(page)\">{{page === true ? '&hellip;':page}}</a></li>\n    <li class=\"page-item\" [ngClass]=\"{'disabled' : genericTable.gtInfo.pageCurrent === genericTable.gtInfo.pageTotal || genericTable.loading }\"><a class=\"page-link gt-link\" href=\"javascript:void(0);\" (click)=\"genericTable.gtInfo.pageCurrent !== genericTable.gtInfo.pageTotal && genericTable.nextPage()\" [attr.aria-label]=\"genericTable.gtTexts.paginateNext\"><span aria-hidden=\"true\">&raquo;</span><span class=\"sr-only\">{{genericTable.gtTexts.paginateNext}}</span></a></li>\n  </ul>\n  </nav>\n    ",
+                template: "<nav class=\"gt-pagination\" aria-label=\"Table navigation\" *ngIf=\"genericTable && genericTable.gtInfo && ready && genericTable.gtData?.length > 0\" [ngClass]=\"{'no-data':genericTable.gtInfo.pageTotal === 0}\">\n  <ul class=\"pagination\" [ngClass]=\"gtClasses\">\n    <li class=\"page-item\" [ngClass]=\"{'disabled' : genericTable.gtInfo.pageCurrent === 1 || genericTable.loading }\"><a class=\"page-link\" href=\"javascript:void(0);\" (click)=\"genericTable.gtInfo.pageCurrent > 1 && genericTable.previousPage()\" [attr.aria-label]=\"genericTable.gtTexts.paginatePrevious\"><span aria-hidden=\"true\">&laquo;</span><span class=\"sr-only\">{{genericTable.gtTexts.paginatePrevious}}</span></a></li>\n    <li class=\"page-item\" [ngClass]=\"{'disabled' : genericTable.loading && genericTable.gtInfo.pageCurrent !== page, 'active' : genericTable.gtInfo.pageCurrent === page }\" *ngFor=\"let page of genericTable.gtInfo.pageTotal | gtPaginationPipe:genericTable.gtInfo.pageCurrent\"><a class=\"page-link\" [tabindex]=\"page === true ? -1:0\" href=\"javascript:void(0);\" (click)=\"page === true ? '':genericTable.goToPage(page)\">{{page === true ? '&hellip;':page}}</a></li>\n    <li class=\"page-item\" [ngClass]=\"{'disabled' : genericTable.gtInfo.pageCurrent === genericTable.gtInfo.pageTotal || genericTable.loading }\"><a class=\"page-link gt-link\" href=\"javascript:void(0);\" (click)=\"genericTable.gtInfo.pageCurrent !== genericTable.gtInfo.pageTotal && genericTable.nextPage()\" [attr.aria-label]=\"genericTable.gtTexts.paginateNext\"><span aria-hidden=\"true\">&raquo;</span><span class=\"sr-only\">{{genericTable.gtTexts.paginateNext}}</span></a></li>\n  </ul>\n  </nav>\n    ",
                 styles: ['.gt-link {cursor: pointer;}']
@@ -48,2 +48,5 @@ },] },
     PaginationPipe.prototype.transform = function (totalPages, currentPage) {
+        if (totalPages === 0) {
+            return [1];
+        }
         var pagination = []; // create new empty array for pagination
@@ -50,0 +53,0 @@ var siblings = 2; // sibling elements ie. number of elements on each side of current page

components/gt-pagination.component.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":3,"metadata":{"GtPaginationComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"gt-pagination","template":"<nav aria-label=\"Table navigation\" *ngIf=\"genericTable && genericTable.gtInfo && ready && genericTable.gtData?.length > 0\">\n  <ul class=\"pagination\" [ngClass]=\"gtClasses\">\n    <li class=\"page-item\" [ngClass]=\"{'disabled' : genericTable.gtInfo.pageCurrent === 1 || genericTable.loading }\"><a class=\"page-link\" href=\"javascript:void(0);\" (click)=\"genericTable.gtInfo.pageCurrent > 1 && genericTable.previousPage()\" [attr.aria-label]=\"genericTable.gtTexts.paginatePrevious\"><span aria-hidden=\"true\">&laquo;</span><span class=\"sr-only\">{{genericTable.gtTexts.paginatePrevious}}</span></a></li>\n    <li class=\"page-item\" [ngClass]=\"{'disabled' : genericTable.loading && genericTable.gtInfo.pageCurrent !== page, 'active' : genericTable.gtInfo.pageCurrent === page }\" *ngFor=\"let page of genericTable.gtInfo.pageTotal | gtPaginationPipe:genericTable.gtInfo.pageCurrent\"><a class=\"page-link\" [tabindex]=\"page === true ? -1:0\" href=\"javascript:void(0);\" (click)=\"page === true ? '':genericTable.goToPage(page)\">{{page === true ? '&hellip;':page}}</a></li>\n    <li class=\"page-item\" [ngClass]=\"{'disabled' : genericTable.gtInfo.pageCurrent === genericTable.gtInfo.pageTotal || genericTable.loading }\"><a class=\"page-link gt-link\" href=\"javascript:void(0);\" (click)=\"genericTable.gtInfo.pageCurrent !== genericTable.gtInfo.pageTotal && genericTable.nextPage()\" [attr.aria-label]=\"genericTable.gtTexts.paginateNext\"><span aria-hidden=\"true\">&raquo;</span><span class=\"sr-only\">{{genericTable.gtTexts.paginateNext}}</span></a></li>\n  </ul>\n  </nav>\n    ","styles":[".gt-link {cursor: pointer;}"]}]}],"members":{"genericTable":[{"__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"}}]}]}},"PaginationPipe":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Pipe"},"arguments":[{"name":"gtPaginationPipe"}]}],"members":{"transform":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"GtPaginationComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"gt-pagination","template":"<nav aria-label=\"Table navigation\" *ngIf=\"genericTable && genericTable.gtInfo && ready && genericTable.gtData?.length > 0\">\n  <ul class=\"pagination\" [ngClass]=\"gtClasses\">\n    <li class=\"page-item\" [ngClass]=\"{'disabled' : genericTable.gtInfo.pageCurrent === 1 || genericTable.loading }\"><a class=\"page-link\" href=\"javascript:void(0);\" (click)=\"genericTable.gtInfo.pageCurrent > 1 && genericTable.previousPage()\" [attr.aria-label]=\"genericTable.gtTexts.paginatePrevious\"><span aria-hidden=\"true\">&laquo;</span><span class=\"sr-only\">{{genericTable.gtTexts.paginatePrevious}}</span></a></li>\n    <li class=\"page-item\" [ngClass]=\"{'disabled' : genericTable.loading && genericTable.gtInfo.pageCurrent !== page, 'active' : genericTable.gtInfo.pageCurrent === page }\" *ngFor=\"let page of genericTable.gtInfo.pageTotal | gtPaginationPipe:genericTable.gtInfo.pageCurrent\"><a class=\"page-link\" [tabindex]=\"page === true ? -1:0\" href=\"javascript:void(0);\" (click)=\"page === true ? '':genericTable.goToPage(page)\">{{page === true ? '&hellip;':page}}</a></li>\n    <li class=\"page-item\" [ngClass]=\"{'disabled' : genericTable.gtInfo.pageCurrent === genericTable.gtInfo.pageTotal || genericTable.loading }\"><a class=\"page-link gt-link\" href=\"javascript:void(0);\" (click)=\"genericTable.gtInfo.pageCurrent !== genericTable.gtInfo.pageTotal && genericTable.nextPage()\" [attr.aria-label]=\"genericTable.gtTexts.paginateNext\"><span aria-hidden=\"true\">&raquo;</span><span class=\"sr-only\">{{genericTable.gtTexts.paginateNext}}</span></a></li>\n  </ul>\n  </nav>\n    ","styles":[".gt-link {cursor: pointer;}"]}]}],"members":{"genericTable":[{"__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"}}]}]}},"PaginationPipe":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Pipe"},"arguments":[{"name":"gtPaginationPipe"}]}],"members":{"transform":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":3,"metadata":{"GtPaginationComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"gt-pagination","template":"<nav class=\"gt-pagination\" aria-label=\"Table navigation\" *ngIf=\"genericTable && genericTable.gtInfo && ready && genericTable.gtData?.length > 0\" [ngClass]=\"{'no-data':genericTable.gtInfo.pageTotal === 0}\">\n  <ul class=\"pagination\" [ngClass]=\"gtClasses\">\n    <li class=\"page-item\" [ngClass]=\"{'disabled' : genericTable.gtInfo.pageCurrent === 1 || genericTable.loading }\"><a class=\"page-link\" href=\"javascript:void(0);\" (click)=\"genericTable.gtInfo.pageCurrent > 1 && genericTable.previousPage()\" [attr.aria-label]=\"genericTable.gtTexts.paginatePrevious\"><span aria-hidden=\"true\">&laquo;</span><span class=\"sr-only\">{{genericTable.gtTexts.paginatePrevious}}</span></a></li>\n    <li class=\"page-item\" [ngClass]=\"{'disabled' : genericTable.loading && genericTable.gtInfo.pageCurrent !== page, 'active' : genericTable.gtInfo.pageCurrent === page }\" *ngFor=\"let page of genericTable.gtInfo.pageTotal | gtPaginationPipe:genericTable.gtInfo.pageCurrent\"><a class=\"page-link\" [tabindex]=\"page === true ? -1:0\" href=\"javascript:void(0);\" (click)=\"page === true ? '':genericTable.goToPage(page)\">{{page === true ? '&hellip;':page}}</a></li>\n    <li class=\"page-item\" [ngClass]=\"{'disabled' : genericTable.gtInfo.pageCurrent === genericTable.gtInfo.pageTotal || genericTable.loading }\"><a class=\"page-link gt-link\" href=\"javascript:void(0);\" (click)=\"genericTable.gtInfo.pageCurrent !== genericTable.gtInfo.pageTotal && genericTable.nextPage()\" [attr.aria-label]=\"genericTable.gtTexts.paginateNext\"><span aria-hidden=\"true\">&raquo;</span><span class=\"sr-only\">{{genericTable.gtTexts.paginateNext}}</span></a></li>\n  </ul>\n  </nav>\n    ","styles":[".gt-link {cursor: pointer;}"]}]}],"members":{"genericTable":[{"__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"}}]}]}},"PaginationPipe":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Pipe"},"arguments":[{"name":"gtPaginationPipe"}]}],"members":{"transform":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"GtPaginationComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"gt-pagination","template":"<nav class=\"gt-pagination\" aria-label=\"Table navigation\" *ngIf=\"genericTable && genericTable.gtInfo && ready && genericTable.gtData?.length > 0\" [ngClass]=\"{'no-data':genericTable.gtInfo.pageTotal === 0}\">\n  <ul class=\"pagination\" [ngClass]=\"gtClasses\">\n    <li class=\"page-item\" [ngClass]=\"{'disabled' : genericTable.gtInfo.pageCurrent === 1 || genericTable.loading }\"><a class=\"page-link\" href=\"javascript:void(0);\" (click)=\"genericTable.gtInfo.pageCurrent > 1 && genericTable.previousPage()\" [attr.aria-label]=\"genericTable.gtTexts.paginatePrevious\"><span aria-hidden=\"true\">&laquo;</span><span class=\"sr-only\">{{genericTable.gtTexts.paginatePrevious}}</span></a></li>\n    <li class=\"page-item\" [ngClass]=\"{'disabled' : genericTable.loading && genericTable.gtInfo.pageCurrent !== page, 'active' : genericTable.gtInfo.pageCurrent === page }\" *ngFor=\"let page of genericTable.gtInfo.pageTotal | gtPaginationPipe:genericTable.gtInfo.pageCurrent\"><a class=\"page-link\" [tabindex]=\"page === true ? -1:0\" href=\"javascript:void(0);\" (click)=\"page === true ? '':genericTable.goToPage(page)\">{{page === true ? '&hellip;':page}}</a></li>\n    <li class=\"page-item\" [ngClass]=\"{'disabled' : genericTable.gtInfo.pageCurrent === genericTable.gtInfo.pageTotal || genericTable.loading }\"><a class=\"page-link gt-link\" href=\"javascript:void(0);\" (click)=\"genericTable.gtInfo.pageCurrent !== genericTable.gtInfo.pageTotal && genericTable.nextPage()\" [attr.aria-label]=\"genericTable.gtTexts.paginateNext\"><span aria-hidden=\"true\">&raquo;</span><span class=\"sr-only\">{{genericTable.gtTexts.paginateNext}}</span></a></li>\n  </ul>\n  </nav>\n    ","styles":[".gt-link {cursor: pointer;}"]}]}],"members":{"genericTable":[{"__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"}}]}]}},"PaginationPipe":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Pipe"},"arguments":[{"name":"gtPaginationPipe"}]}],"members":{"transform":[{"__symbolic":"method"}]}}}}]

core.module.js

@@ -20,2 +20,4 @@ "use strict";
 var gt_meta_pipe_1 = require("./pipes/gt-meta.pipe");
+var forms_1 = require("@angular/forms");
+var gt_dropdown_component_1 = require("./components/gt-dropdown.component");
 var GenericTableModule = (function () {
@@ -45,5 +47,6 @@ function GenericTableModule() {
                     gt_table_info_component_1.TableInfoPipe,
-                    gt_meta_pipe_1.GtMetaPipe
+                    gt_meta_pipe_1.GtMetaPipe,
+                    gt_dropdown_component_1.GtDropdownComponent
                 ],
-                imports: [common_1.CommonModule],
+                imports: [common_1.CommonModule, forms_1.FormsModule],
                 exports: [
@@ -54,7 +57,9 @@ generic_table_component_1.GenericTableComponent,
                     gt_property_pipe_1.GtPropertyPipe,
-                    gt_expanding_row_component_1.GtExpandingRowComponent
+                    gt_expanding_row_component_1.GtExpandingRowComponent,
+                    gt_dropdown_component_1.GtDropdownComponent
                 ],
                 entryComponents: [],
                 providers: [],
-                bootstrap: []
+                bootstrap: [] //,
+                //schemas:[CUSTOM_ELEMENTS_SCHEMA]
             },] },
@@ -61,0 +66,0 @@ ];

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"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule"}],"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"}],"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"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule"}],"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"}],"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":"./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":"./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":[]}]}]}}}]

interfaces/gt-config-field.d.ts

@@ -30,2 +30,3 @@ import { GtRow } from './gt-row';
     search?: any;
+    inlineEdit?: boolean | Array<any>;
 }

interfaces/gt-config.d.ts

@@ -1,5 +0,5 @@
-import { GtConfigField } from "./gt-config-field";
-import { GtConfigSetting } from "./gt-config-setting";
-import { GtRow } from "./gt-row";
-import { GtInformation } from "./gt-information";
+import { GtConfigField } from './gt-config-field';
+import { GtConfigSetting } from './gt-config-setting';
+import { GtRow } from './gt-row';
+import { GtInformation } from './gt-information';
 export interface GtConfig<R extends GtRow> {
@@ -6,0 +6,0 @@ settings: GtConfigSetting[];

interfaces/gt-texts.d.ts

@@ -13,2 +13,3 @@ export interface GtTexts {
     paginatePrevious?: string;
+    inlineEditEdited?: string;
 }

package.json

 {
   "name": "@angular-generic-table/core",
-  "version": "4.1.1",
+  "version": "4.2.0",
   "description": "A generic table component for Angular",
@@ -23,2 +23,5 @@ "main": "index.js",
   ],
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
   "author": "Robert Hjalmers",
@@ -25,0 +28,0 @@ "license": "MIT",

pipes/gt-meta.pipe.d.ts

 import { PipeTransform } from '@angular/core';
-import { GtRow } from "../interfaces/gt-row";
-import { GtRowMeta } from "../interfaces/gt-row-meta";
+import { GtRow } from '../interfaces/gt-row';
+import { GtRowMeta } from '../interfaces/gt-row-meta';
 export declare class GtMetaPipe implements PipeTransform {
     transform(allRows: Array<GtRow>, page?: number, recordLength?: number, dataLength?: number, metaData?: Array<GtRowMeta>): Array<GtRow>;
 }

pipes/gt-property.pipe.d.ts

 import { PipeTransform } from '@angular/core';
-import { GtConfigField } from "../interfaces/gt-config-field";
+import { GtConfigField } from '../interfaces/gt-config-field';
 import { GtConfigSetting } from '../interfaces/gt-config-setting';
@@ -4,0 +4,0 @@ import { GtRow } from '../interfaces/gt-row';

pipes/gt-property.pipe.js

@@ -8,4 +8,4 @@ "use strict";
     GtPropertyPipe.prototype.transform = function (config, objectKey, property, refresh) {
+        var output = null;
         try {
-            var output = null;
             for (var i = 0; i < config.length; i++) {
@@ -12,0 +12,0 @@ if (config[i].objectKey === objectKey) {

pipes/gt-render.pipe.d.ts

@@ -1,7 +0,7 @@
-import { Injector, PipeTransform, Type } from "@angular/core";
-import { GtConfigSetting } from "../interfaces/gt-config-setting";
-import { GtClickFunc, GtConfigField } from "../interfaces/gt-config-field";
-import { DomSanitizer } from "@angular/platform-browser";
-import { GtRow } from "../interfaces/gt-row";
-import { GtCustomComponent } from "../components/gt-custom-component-factory";
+import { Injector, PipeTransform, Type } from '@angular/core';
+import { GtConfigSetting } from '../interfaces/gt-config-setting';
+import { GtClickFunc, GtConfigField } from '../interfaces/gt-config-field';
+import { DomSanitizer } from '@angular/platform-browser';
+import { GtRow } from '../interfaces/gt-row';
+import { GtCustomComponent } from '../components/gt-custom-component-factory';
 export interface GtRenderField<R extends GtRow, C extends GtCustomComponent<any>> {
@@ -17,2 +17,3 @@ objectKey: string;
     };
+    edited?: boolean;
 }
@@ -19,0 +20,0 @@ export declare class GtRenderPipe<R extends GtRow> implements PipeTransform {

pipes/gt-render.pipe.js

@@ -81,3 +81,3 @@ "use strict";
             if (fields[i].value && typeof fields[i].value === 'function' && !row[fields[i].objectKey]) {
-                row[fields[i].objectKey] = loading ? "" : fields[i].value(row);
+                row[fields[i].objectKey] = loading ? '' : fields[i].value(row);
             }
@@ -103,9 +103,9 @@ }
                 if (loading) {
-                    columnObject.renderValue = row[key] !== null ? row[key] : "";
+                    columnObject.renderValue = row[key] !== null ? row[key] : '';
                 }
                 else if (highlight && searchString && this.getProperty(settings, key).search !== false) {
-                    columnObject.renderValue = fieldSetting.render && typeof fieldSetting.render === 'function' ? this.highlight(fieldSetting.render(row), searchString) : this.highlight(row[key] !== null ? row[key] : "", searchString);
+                    columnObject.renderValue = fieldSetting.render && typeof fieldSetting.render === 'function' ? this.highlight(fieldSetting.render(row), searchString) : this.highlight(row[key] !== null ? row[key] : '', searchString);
                 }
                 else {
-                    columnObject.renderValue = fieldSetting.render && typeof fieldSetting.render === 'function' ? this.sanitizer.bypassSecurityTrustHtml(fieldSetting.render(row)) : row[key] !== null ? row[key] : "";
+                    columnObject.renderValue = fieldSetting.render && typeof fieldSetting.render === 'function' ? this.sanitizer.bypassSecurityTrustHtml(fieldSetting.render(row)) : row[key] !== null ? row[key] : '';
                 }
@@ -112,0 +112,0 @@ if (fieldSetting.click && typeof fieldSetting.click === 'function') {

pipes/gt-search.pipe.d.ts

 import { PipeTransform } from '@angular/core';
-import { GtConfigField } from "../interfaces/gt-config-field";
+import { GtConfigField } from '../interfaces/gt-config-field';
 import { GtRow } from '../interfaces/gt-row';
@@ -4,0 +4,0 @@ import { GtConfigSetting } from '../interfaces/gt-config-setting';

pipes/gt-search.pipe.js

@@ -17,3 +17,3 @@ "use strict";
         //  if no search terms are defined...
-        if (!searchTerms || searchTerms.replace(/"/g, "").length === 0) {
+        if (!searchTerms || searchTerms.replace(/"/g, '').length === 0) {
             // ...return all rows
@@ -20,0 +20,0 @@ var length_1 = allRows === null ? 0 : allRows.length;

pipes/gt-visible.pipe.d.ts

 import { PipeTransform } from '@angular/core';
-import { GtConfigField } from "../interfaces/gt-config-field";
-import { GtConfigSetting } from "../interfaces/gt-config-setting";
+import { GtConfigField } from '../interfaces/gt-config-field';
+import { GtConfigSetting } from '../interfaces/gt-config-setting';
 import { GtRow } from '../interfaces/gt-row';
@@ -5,0 +5,0 @@ export declare class GtVisiblePipe<R extends GtRow> implements PipeTransform {

README.md

@@ -0,0 +0,0 @@ # angular-generic-table

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

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

246285

increased by12.12%

Number of package files

113

increased by3.67%

Lines of code

2513

increased by12.09%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes