@wavemaker/app-ng-runtime 12.0.0-next.45001 → 12.0.0-next.45005

app-ng-runtime/components/data/table/fesm2022/index.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { ViewContainerRef, Component, Optional, Attribute, ViewChild, ContentChildren, ContentChild, HostListener, Directive, Self, Inject, SkipSelf, NgModule } from '@angular/core';
+import { ViewContainerRef, Component, Optional, Attribute, Inject, ViewChild, ContentChildren, ContentChild, HostListener, Directive, Self, SkipSelf, NgModule } from '@angular/core';
 import * as i7 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i1 from '@angular/forms';
@@ -8,7 +8,7 @@ import { TooltipModule } from 'ngx-bootstrap/tooltip';
 import * as i6 from 'ngx-bootstrap/dropdown';
 import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
 import * as i4 from '@wm/components/base';
-import { register, PROP_BOOLEAN, PROP_STRING, PROP_ANY, PROP_NUMBER, StylableComponent, unsupportedStatePersistenceTypes, getConditionalClasses, DEBOUNCE_TIMES, styler, extractDataSourceName, EDIT_MODE, getRowOperationsColumn, transformData, prepareFieldDefs, getOrderByExpr, NAVIGATION_TYPE, provideAs, provideAsWidgetRef, refreshDataSource, getMatchModeTypesMap, getMatchModeMsgs, isDataSetWidget, BaseComponent, setHeaderConfigForTable, BaseFieldValidations, applyFilterOnField, getDistinctFieldProperties, getDistinctValues, getWatchIdentifier, fetchRelatedFieldData, getDistinctValuesForField, getEditModeWidget, getDataTableFilterWidget, getDefaultValue, Context, WmComponentsModule } from '@wm/components/base';
+import { PROP_BOOLEAN, PROP_STRING, PROP_ANY, PROP_NUMBER, register, StylableComponent, unsupportedStatePersistenceTypes, getConditionalClasses, DEBOUNCE_TIMES, styler, extractDataSourceName, EDIT_MODE, getRowOperationsColumn, transformData, prepareFieldDefs, getOrderByExpr, NAVIGATION_TYPE, provideAs, provideAsWidgetRef, refreshDataSource, getMatchModeTypesMap, getMatchModeMsgs, isDataSetWidget, BaseComponent, setHeaderConfigForTable, BaseFieldValidations, applyFilterOnField, getDistinctFieldProperties, getDistinctValues, getWatchIdentifier, fetchRelatedFieldData, getDistinctValuesForField, getEditModeWidget, getDataTableFilterWidget, getDefaultValue, Context, WmComponentsModule } from '@wm/components/base';
 import * as i5 from '@wm/components/basic';
 import { BasicModule } from '@wm/components/basic';
 import * as i8 from '@wm/components/input';
@@ -23,6 +23,7 @@ import * as i2 from '@wm/core';
 import { isDefined, getClonedObject, closePopover, $unwatch, $watch, $appDigest, triggerFn, DataSource, isDataSourceEqual, isMobile, $invokeWatchers, getValidJSON, extendProto, getDatasourceFromExpr, $parseEvent, extractCurrentItemExpr, isNumberType, DataType, adjustContainerRightEdges, FormWidgetType, isDateTimeType, getDisplayDateTimeFormat } from '@wm/core';
 import { Subject } from 'rxjs';
 import { debounceTime } from 'rxjs/operators';
+import { isEmpty, floor, debounce, get, set, some, findIndex, isEqual, pullAllWith, remove, extend, isNaN, isUndefined, forEach, isArray, isObject, indexOf, keys, find, toNumber, includes, split, startsWith, omitBy, values, parseInt as parseInt$1, map, last, toString, isNull, range, filter, endsWith, toLower, head, orderBy, sum, mean, round, min, max, cloneDeep } from 'lodash-es';
 
 const registerProps$5 = () => {
     register('wm-table', new Map([
@@ -51,7 +52,7 @@ const registerProps$5 = () => {
         ['gridfirstrowselect', PROP_BOOLEAN],
         ['iconclass', PROP_STRING],
         ['insertmessage', { value: 'Record added successfully', ...PROP_STRING }],
-        ['isdynamictable', PROP_BOOLEAN],
+        ['isdynamictable', PROP_BOOLEAN], // internal property to determine dynamic table
         ['isrowexpansionenabled', PROP_BOOLEAN],
         ['loadingdatamsg', { value: 'Loading...', ...PROP_STRING }],
         ['loadingicon', { value: 'fa fa-circle-o-notch fa-spin', ...PROP_STRING }],
@@ -100,39 +101,40 @@ const _c13 = ["rowDetailView"];
 const _c14 = ["rowExpansionActionView"];
 const _c15 = ["dynamicTable"];
 const _c16 = ["wmTable", ""];
+const _c17 = a0 => ({ btn: a0 });
+const _c18 = (a0, a1) => ({ "btn-sm": a0, "disabled-new": a1 });
 function TableComponent_div_0_i_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "i");
 } if (rf & 2) {
-    const ctx_r15 = i0.ɵɵnextContext(2);
-    i0.ɵɵclassMapInterpolate1("app-icon panel-icon ", ctx_r15.iconclass, "");
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵclassMapInterpolate1("app-icon panel-icon ", ctx_r0.iconclass, "");
 } }
-const _c17 = function (a0) { return { btn: a0 }; };
 function TableComponent_div_0_div_7_ng_container_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainer(0, 29);
 } if (rf & 2) {
-    const btn_r19 = ctx.$implicit;
-    i0.ɵɵnextContext(3);
-    const _r3 = i0.ɵɵreference(8);
-    const _r5 = i0.ɵɵreference(10);
-    i0.ɵɵproperty("ngTemplateOutlet", btn_r19.widgetType === "button" ? _r3 : _r5)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c17, btn_r19));
+    const btn_r2 = ctx.$implicit;
+    const index_r3 = ctx.index;
+    const ctx_r0 = i0.ɵɵnextContext(3);
+    const buttonRef_r4 = i0.ɵɵreference(8);
+    const anchorRef_r5 = i0.ɵɵreference(10);
+    i0.ɵɵproperty("ngTemplateOutlet", btn_r2.widgetType === "button" ? buttonRef_r4 : anchorRef_r5)("ngTemplateOutletContext", i0.ɵɵpureFunction1(3, _c17, btn_r2))("ngTemplateOutletInjector", ctx_r0.createCustomInjector("actions_header_" + index_r3, i0.ɵɵpureFunction1(5, _c17, btn_r2)));
 } }
 function TableComponent_div_0_div_7_div_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "div", 30);
 } if (rf & 2) {
-    const ctx_r18 = i0.ɵɵnextContext(3);
-    i0.ɵɵattributeInterpolate1("name", "", ctx_r18.name, "-export");
+    const ctx_r0 = i0.ɵɵnextContext(3);
+    i0.ɵɵattributeInterpolate1("name", "", ctx_r0.name, "-export");
 } }
 function TableComponent_div_0_div_7_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 26);
-    i0.ɵɵtemplate(1, TableComponent_div_0_div_7_ng_container_1_Template, 1, 4, "ng-container", 27);
-    i0.ɵɵtemplate(2, TableComponent_div_0_div_7_div_2_Template, 1, 1, "div", 28);
+    i0.ɵɵtemplate(1, TableComponent_div_0_div_7_ng_container_1_Template, 1, 7, "ng-container", 27)(2, TableComponent_div_0_div_7_div_2_Template, 1, 2, "div", 28);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r16 = i0.ɵɵnextContext(2);
-    i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngForOf", ctx_r16._actions.header);
-    i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngIf", ctx_r16.exportOptions.length);
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngForOf", ctx_r0._actions.header);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r0.exportOptions.length);
 } }
 function TableComponent_div_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 19)(1, "h3", 20)(2, "div", 21);
@@ -149,50 +151,50 @@ function TableComponent_div_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵproperty("ngIf", ctx_r0.iconclass);
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("innerHTML", ctx_r0.title, i0.ɵɵsanitizeHtml);
-    i0.ɵɵadvance(1);
+    i0.ɵɵadvance();
     i0.ɵɵproperty("innerHTML", ctx_r0.subheading, i0.ɵɵsanitizeHtml);
-    i0.ɵɵadvance(1);
+    i0.ɵɵadvance();
     i0.ɵɵproperty("ngIf", ctx_r0.exportOptions.length || ctx_r0._actions.header.length);
 } }
 function TableComponent_div_6_ng_container_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainer(0, 29);
 } if (rf & 2) {
-    const btn_r21 = ctx.$implicit;
-    i0.ɵɵnextContext(2);
-    const _r3 = i0.ɵɵreference(8);
-    const _r5 = i0.ɵɵreference(10);
-    i0.ɵɵproperty("ngTemplateOutlet", btn_r21.widgetType === "button" ? _r3 : _r5)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c17, btn_r21));
+    const btn_r6 = ctx.$implicit;
+    const index_r7 = ctx.index;
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    const buttonRef_r4 = i0.ɵɵreference(8);
+    const anchorRef_r5 = i0.ɵɵreference(10);
+    i0.ɵɵproperty("ngTemplateOutlet", btn_r6.widgetType === "button" ? buttonRef_r4 : anchorRef_r5)("ngTemplateOutletContext", i0.ɵɵpureFunction1(3, _c17, btn_r6))("ngTemplateOutletInjector", ctx_r0.createCustomInjector("actions_footer_" + index_r7, i0.ɵɵpureFunction1(5, _c17, btn_r6)));
 } }
 function TableComponent_div_6_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 31);
-    i0.ɵɵtemplate(1, TableComponent_div_6_ng_container_1_Template, 1, 4, "ng-container", 27);
+    i0.ɵɵtemplate(1, TableComponent_div_6_ng_container_1_Template, 1, 7, "ng-container", 27);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext();
-    i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngForOf", ctx_r2._actions.footer);
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngForOf", ctx_r0._actions.footer);
 } }
-const _c18 = function (a0, a1) { return { "btn-sm": a0, "disabled-new": a1 }; };
 function TableComponent_ng_template_7_Template(rf, ctx) { if (rf & 1) {
-    const _r24 = i0.ɵɵgetCurrentView();
+    const _r8 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "button", 32);
-    i0.ɵɵlistener("click", function TableComponent_ng_template_7_Template_button_click_0_listener($event) { const restoredCtx = i0.ɵɵrestoreView(_r24); const btn_r22 = restoredCtx.btn; const ctx_r23 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r23.invokeActionEvent($event, btn_r22.action)); });
+    i0.ɵɵlistener("click", function TableComponent_ng_template_7_Template_button_click_0_listener($event) { const btn_r9 = i0.ɵɵrestoreView(_r8).btn; const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.invokeActionEvent($event, btn_r9.action)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const btn_r22 = ctx.btn;
-    const ctx_r4 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction2(2, _c18, ctx_r4.spacing === "condensed", btn_r22.key === "addNewRow" && (ctx_r4.isGridEditMode || ctx_r4.isLoading)));
-    i0.ɵɵattribute("aria-label", btn_r22.displayName);
+    const btn_r9 = ctx.btn;
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction2(2, _c18, ctx_r0.spacing === "condensed", btn_r9.key === "addNewRow" && (ctx_r0.isGridEditMode || ctx_r0.isLoading)));
+    i0.ɵɵattribute("aria-label", btn_r9.displayName);
 } }
 function TableComponent_ng_template_9_Template(rf, ctx) { if (rf & 1) {
-    const _r27 = i0.ɵɵgetCurrentView();
+    const _r10 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "a", 33);
-    i0.ɵɵlistener("click", function TableComponent_ng_template_9_Template_a_click_0_listener($event) { const restoredCtx = i0.ɵɵrestoreView(_r27); const btn_r25 = restoredCtx.btn; const ctx_r26 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r26.invokeActionEvent($event, btn_r25.action)); });
+    i0.ɵɵlistener("click", function TableComponent_ng_template_9_Template_a_click_0_listener($event) { const btn_r11 = i0.ɵɵrestoreView(_r10).btn; const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.invokeActionEvent($event, btn_r11.action)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const btn_r25 = ctx.btn;
-    const ctx_r6 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction2(1, _c18, ctx_r6.spacing === "condensed", btn_r25.key === "addNewRow" && (ctx_r6.isGridEditMode || ctx_r6.isLoading)));
+    const btn_r11 = ctx.btn;
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction2(1, _c18, ctx_r0.spacing === "condensed", btn_r11.key === "addNewRow" && (ctx_r0.isGridEditMode || ctx_r0.isLoading)));
 } }
 const DEFAULT_CLS = 'app-grid app-panel panel';
 const WIDGET_CONFIG$5 = { widgetType: 'wm-table', hostClass: DEFAULT_CLS };
@@ -227,7 +229,7 @@ class TableComponent extends StylableComponent {
     set gridData(newValue) {
         this.isDataLoading = false;
         // Fix for [WMS-24012]: hide no datafound msg when variableInflight is true and dataset is empty
-        if (this.variableInflight && _.isEmpty(newValue)) {
+        if (this.variableInflight && isEmpty(newValue)) {
             return;
         }
         this.variableInflight = false;
@@ -243,7 +245,7 @@ class TableComponent extends StylableComponent {
             [this._gridData, this.currentPage] = this.paginationService.updateFieldsOnPagination(this, newValue);
             // When edit action is performed on previous page, update the _gridData field with the modified row data
             if (this.gridOptions.lastActionPerformed === this.gridOptions.ACTIONS.EDIT) {
-                const rowIndex = _.floor(this.actionRowIndex % this.pagesize);
+                const rowIndex = floor(this.actionRowIndex % this.pagesize);
                 this._gridData.splice(this.actionRowIndex, 1, newValue[rowIndex]);
             }
             this.setDataGridOption('isLastPage', !!(this.dataNavigator.isDisableNext));
@@ -281,7 +283,7 @@ class TableComponent extends StylableComponent {
                 this.setDataGridOption('colDefs', getClonedObject(this.fieldDefs));
             }
             // If data and colDefs are present, call on before data render event
-            if (!this.isdynamictable && !_.isEmpty(newValue) && gridOptions.colDefs.length) {
+            if (!this.isdynamictable && !isEmpty(newValue) && gridOptions.colDefs.length) {
                 this.invokeEventCallback('beforedatarender', { $data: this._gridData, $columns: this.columns, data: this._gridData, columns: this.columns });
             }
             this.setDataGridOption('data', getClonedObject(this._gridData));
@@ -294,7 +296,7 @@ class TableComponent extends StylableComponent {
         if (this.multiselect) {
             return getClonedObject(this.items);
         }
-        if (_.isEmpty(this.items)) {
+        if (isEmpty(this.items)) {
             return {};
         }
         return getClonedObject(this.items[0]);
@@ -309,8 +311,8 @@ class TableComponent extends StylableComponent {
             this.invokeEventCallback('enterkeypress', { $event, $data: this.gridData });
         }
     }
-    constructor(inj, fb, app, dynamicComponentProvider, statePersistence, paginationService, viewport, parentList, binddataset, binddatasource, readonlygrid, ngZone, trustAsPipe) {
-        super(inj, WIDGET_CONFIG$5);
+    constructor(inj, fb, app, dynamicComponentProvider, statePersistence, paginationService, viewport, parentList, binddataset, binddatasource, readonlygrid, ngZone, trustAsPipe, explicitContext) {
+        super(inj, WIDGET_CONFIG$5, explicitContext);
         this.inj = inj;
         this.fb = fb;
         this.app = app;
@@ -360,8 +362,8 @@ class TableComponent extends StylableComponent {
         this.fullFieldDefs = [];
         this.variableInflight = true;
         this.applyProps = new Map();
-        this.redraw = _.debounce(this._redraw, 150);
-        this.debouncedHandleLoading = _.debounce(this.handleLoading, 350);
+        this.redraw = debounce(this._redraw, 150);
+        this.debouncedHandleLoading = debounce(this.handleLoading, 350);
         // Filter and Sort Methods
         this.rowFilter = {};
         this._searchSortHandler = noop;
@@ -426,11 +428,11 @@ class TableComponent extends StylableComponent {
             isLastPage: false,
             // get the current page number
             getCurrentPage: () => {
-                return _.get(this.dataNavigator, 'dn.currentPage') || 1;
+                return get(this.dataNavigator, 'dn.currentPage') || 1;
             },
             // set the page number
             setCurrentPage: (pageNum) => {
-                _.set(this.dataNavigator, 'dn.currentPage', pageNum || 1);
+                set(this.dataNavigator, 'dn.currentPage', pageNum || 1);
             },
             getDataSource: () => {
                 return this.datasource;
@@ -481,7 +483,9 @@ class TableComponent extends StylableComponent {
                     if (!this.multiselect) {
                         this.items.length = 0;
                     }
-                    this.callDataGridMethod('selectRows', this.items);
+                    if (!this.infScroll && !this.onDemandLoad) {
+                        this.callDataGridMethod('selectRows', this.items);
+                    }
                     this.selectedItems = this.callDataGridMethod('getSelectedRows');
                     if (this.selectedItems.length) {
                         this.selectedItemChange.next(this.selectedItems);
@@ -502,8 +506,8 @@ class TableComponent extends StylableComponent {
                     if (this.selectedItems.length && rowData.$index && this.getConfiguredState() !== 'none' && this.dataNavigator && unsupportedStatePersistenceTypes.indexOf(this.navigation) < 0) {
                         const obj = { page: this.dataNavigator.dn.currentPage, index: rowData.$index - 1 };
                         const widgetState = this.statePersistence.getWidgetState(this);
-                        if (_.get(widgetState, 'selectedItem') && this.multiselect) {
-                            if (!_.some(widgetState.selectedItem, obj)) {
+                        if (get(widgetState, 'selectedItem') && this.multiselect) {
+                            if (!some(widgetState.selectedItem, obj)) {
                                 widgetState.selectedItem.push(obj);
                             }
                             this.statePersistence.setWidgetState(this, { 'selectedItem': widgetState.selectedItem });
@@ -527,7 +531,7 @@ class TableComponent extends StylableComponent {
                      */
                     if (this.multiselect) {
                         //Fix for [WMS-25110]: Add row to items list only if the row is selected
-                        if (_.findIndex(this.items, row) === -1 && (rowInfo?._selected === undefined || rowInfo?._selected == true || (this.gridfirstrowselect && rowInfo?.rowId == 0 && !this.showFirstRow))) {
+                        if (findIndex(this.items, row) === -1 && (rowInfo?._selected === undefined || rowInfo?._selected == true || (this.gridfirstrowselect && rowInfo?.rowId == 0 && !this.showFirstRow))) {
                             this.items.push(row);
                             if (rowInfo?.rowId == 0) {
                                 this.showFirstRow = true;
@@ -547,16 +551,16 @@ class TableComponent extends StylableComponent {
             onRowDeselect: (row, e) => {
                 if (this.multiselect) {
                     this.ngZone.run(() => {
-                        this.items = _.pullAllWith(this.items, [row], _.isEqual);
+                        this.items = pullAllWith(this.items, [row], isEqual);
                         this.selectedItems = this.callDataGridMethod('getSelectedRows');
                         this.invokeEventCallback('rowdeselect', { $data: row, $event: e, row });
                         const rowData = this.addRowIndex(row);
                         if (this.getConfiguredState() !== 'none' && unsupportedStatePersistenceTypes.indexOf(this.navigation) < 0) {
                             const obj = { page: this.dataNavigator.dn.currentPage, index: rowData.$index - 1 };
                             const widgetState = this.statePersistence.getWidgetState(this);
-                            if (_.get(widgetState, 'selectedItem')) {
-                                _.remove(widgetState.selectedItem, function (selectedItem) {
-                                    return _.isEqual(selectedItem, obj);
+                            if (get(widgetState, 'selectedItem')) {
+                                remove(widgetState.selectedItem, function (selectedItem) {
+                                    return isEqual(selectedItem, obj);
                                 });
                                 this.statePersistence.removeWidgetState(this, 'selectedItem');
                                 if (widgetState.selectedItem.length > 0) {
@@ -599,11 +603,16 @@ class TableComponent extends StylableComponent {
             },
             onRowDelete: (row, cancelRowDeleteCallback, e, callBack, options) => {
                 this.ngZone.run(() => {
-                    this.deleteRecord(_.extend({}, options, { row, 'cancelRowDeleteCallback': cancelRowDeleteCallback, 'evt': e, 'callBack': callBack }));
+                    this.deleteRecord(extend({}, options, {
+                        row,
+                        'cancelRowDeleteCallback': cancelRowDeleteCallback,
+                        'evt': e,
+                        'callBack': callBack
+                    }));
                 });
             },
             onRowInsert: (row, e, callBack, options) => {
-                this.insertRecord(_.extend({}, options, { row, event: e, 'callBack': callBack }));
+                this.insertRecord(extend({}, options, { row, event: e, 'callBack': callBack }));
             },
             beforeRowUpdate: (row, eventName) => {
                 if (this._liveTableParent) {
@@ -612,7 +621,7 @@ class TableComponent extends StylableComponent {
                 this.prevData = getClonedObject(row);
             },
             afterRowUpdate: (row, e, callBack, options) => {
-                this.updateRecord(_.extend({}, options, { row, 'prevData': this.prevData, 'event': e, 'callBack': callBack }));
+                this.updateRecord(extend({}, options, { row, 'prevData': this.prevData, 'event': e, 'callBack': callBack }));
             },
             onBeforeRowUpdate: (row, e, options) => {
                 return this.invokeEventCallback('beforerowupdate', { $event: e, $data: row, row, options: options });
@@ -693,7 +702,7 @@ class TableComponent extends StylableComponent {
                     const customExprView = this.customExprViewRef.createEmbeddedView(tmpl, context);
                     const rootNode = customExprView.rootNodes[0];
                     const fieldName = rootNode.getAttribute('data-col-identifier');
-                    _.extend(colDef, this.columns[fieldName]);
+                    extend(colDef, this.columns[fieldName]);
                     if (!summaryRow) {
                         this.customExprCompiledTl[fieldName + index] = rootNode;
                     }
@@ -921,7 +930,7 @@ class TableComponent extends StylableComponent {
                 if (this.gridOptions.isNavTypeScrollOrOndemand()) {
                     this.actionRowIndex = parseInt(val);
                     this.setDataGridOption('actionRowIndex', this.actionRowIndex);
-                    if (!_.isNaN(this.actionRowIndex)) {
+                    if (!isNaN(this.actionRowIndex)) {
                         this.actionRowPage = Math.floor(this.actionRowIndex / this.pagesize) + 1;
                         this.setDataGridOption('actionRowPage', this.actionRowPage || this.gridOptions.actionRowPage);
                     }
@@ -963,7 +972,7 @@ class TableComponent extends StylableComponent {
             clearForm: this.clearForm.bind(this),
             callLoadInlineWidgetData: () => {
                 this.fullFieldDefs.forEach(col => {
-                    if (_.isUndefined(col.isDataSetBound)) {
+                    if (isUndefined(col.isDataSetBound)) {
                         triggerFn(col.loadInlineWidgetData && col.loadInlineWidgetData.bind(col));
                     }
                 });
@@ -1000,12 +1009,12 @@ class TableComponent extends StylableComponent {
         const listenersToRemove = [
             // Updates pagination, filter, sort etc options for service and crud variables
             this.app.subscribe('check-state-persistence-options', options => {
-                let dataSourceName = _.get(this.datasource, 'name');
+                let dataSourceName = get(this.datasource, 'name');
                 // in Prefabs, this.datasource is not resolved at the time of variable invocation, so additional check is required.
                 if (!dataSourceName) {
                     dataSourceName = extractDataSourceName(this.binddatasource);
                 }
-                if (_.get(options, 'variable.name') !== dataSourceName) {
+                if (get(options, 'variable.name') !== dataSourceName) {
                     return;
                 }
                 if (this._pageLoad && this.getConfiguredState() !== 'none') {
@@ -1052,7 +1061,7 @@ class TableComponent extends StylableComponent {
     ngAfterContentInit() {
         super.ngAfterContentInit();
         this.headerConfig = this.headerConfig.filter(this.filterEmptyValues.bind(this));
-        _.remove(this.fieldDefs, f => f === undefined);
+        remove(this.fieldDefs, f => f === undefined);
         const runModeInitialProperties = {
             showrowindex: 'showRowIndex',
             multiselect: 'multiselect',
@@ -1100,7 +1109,7 @@ class TableComponent extends StylableComponent {
         this.gridOptions.loadingdatamsg = this.loadingdatamsg;
         // When loadondemand property is enabled(deferload="true") and show is true, only the column titles of the datatable are rendered, the data(body of the datatable) is not at all rendered.
         // Because the griddata is setting before the datatable dom is rendered but we are sending empty data to the datatable.
-        if (!_.isEmpty(this.gridData)) {
+        if (!isEmpty(this.gridData)) {
             this.gridOptions.data = getClonedObject(this.gridData);
         }
         this.gridOptions.messages = {
@@ -1109,7 +1118,7 @@ class TableComponent extends StylableComponent {
         this.datagridElement = $(this._tableElement.nativeElement);
         this.gridElement = this.$element;
         this.$element.css({ 'position': 'relative' });
-        _.forEach(runModeInitialProperties, (value, key) => {
+        forEach(runModeInitialProperties, (value, key) => {
             if (isDefined(this[key])) {
                 this.gridOptions[value] = (this[key] === 'true' || this[key] === true);
             }
@@ -1137,17 +1146,17 @@ class TableComponent extends StylableComponent {
         return mode && mode.toLowerCase();
     }
     handleStateParams(widgetState, options) {
-        if (_.get(widgetState, 'selectedItem')) {
+        if (get(widgetState, 'selectedItem')) {
             this._selectedItemsExist = true;
         }
         options.options = options.options || {};
-        if (_.get(widgetState, 'pagination')) {
+        if (get(widgetState, 'pagination')) {
             options.options.page = widgetState.pagination;
-            if (_.get(widgetState, 'sort')) {
+            if (get(widgetState, 'sort')) {
                 this.sortStateHandler(widgetState);
-                options.options.orderBy = _.get(widgetState, 'sort.field') + ' ' + _.get(widgetState, 'sort.direction');
+                options.options.orderBy = get(widgetState, 'sort.field') + ' ' + get(widgetState, 'sort.direction');
             }
-            if (_.get(widgetState, 'search')) {
+            if (get(widgetState, 'search')) {
                 setTimeout(() => {
                     this.searchStateHandler(widgetState);
                 }, 500);
@@ -1156,15 +1165,15 @@ class TableComponent extends StylableComponent {
         }
         else {
             options.options.page = 1;
-            if (_.get(widgetState, 'search')) {
+            if (get(widgetState, 'search')) {
                 setTimeout(() => {
                     this.searchStateHandler(widgetState);
                 }, 500);
                 options.options.filterFields = this.getFilterFields(widgetState.search);
             }
-            if (_.get(widgetState, 'sort')) {
+            if (get(widgetState, 'sort')) {
                 this.sortStateHandler(widgetState);
-                options.options.orderBy = _.get(widgetState, 'sort.field') + ' ' + _.get(widgetState, 'sort.direction');
+                options.options.orderBy = get(widgetState, 'sort.field') + ' ' + get(widgetState, 'sort.direction');
             }
         }
         return options;
@@ -1178,17 +1187,17 @@ class TableComponent extends StylableComponent {
     }
     sortStateHandler(widgetState) {
         const $gridElement = this.datagridElement;
-        const $sortIcon = $gridElement.find('th[data-col-field="' + _.get(widgetState, 'sort.field') + '"] .sort-icon');
-        if (_.get(widgetState, 'sort.direction') === 'asc' && $sortIcon.length) {
+        const $sortIcon = $gridElement.find('th[data-col-field="' + get(widgetState, 'sort.field') + '"] .sort-icon');
+        if (get(widgetState, 'sort.direction') === 'asc' && $sortIcon.length) {
             $sortIcon.addClass('asc wi wi-long-arrow-up');
         }
-        else if (_.get(widgetState, 'sort.direction') === 'desc' && $sortIcon.length) {
+        else if (get(widgetState, 'sort.direction') === 'desc' && $sortIcon.length) {
             $sortIcon.addClass('desc wi wi-long-arrow-down');
         }
     }
     searchStateHandler(widgetState) {
-        if (_.isArray(widgetState.search)) {
-            _.forEach(widgetState.search, (filterObj) => {
+        if (isArray(widgetState.search)) {
+            forEach(widgetState.search, (filterObj) => {
                 if (this.rowFilter[filterObj.field]) {
                     this.rowFilter[filterObj.field].value = filterObj.value;
                     this.rowFilter[filterObj.field].matchMode = filterObj.matchMode;
@@ -1215,11 +1224,11 @@ class TableComponent extends StylableComponent {
     }
     // Compares the prevFilterCriteria Rules with the new rules
     compareFilterExpressions(prevFilters, newFilters) {
-        return !!((prevFilters.length === newFilters.length) && (_.isEqual(prevFilters, newFilters)));
+        return !!((prevFilters.length === newFilters.length) && (isEqual(prevFilters, newFilters)));
     }
     // Set the table lastActionPerformed to Filter Criteria and maintain the prevFilterExpression
     setLastActionToFilterCriteria() {
-        this.prevFilterExpression = _.get(this.datasource, 'filterExpressions.rules') ? getClonedObject(this.datasource.filterExpressions.rules) : getClonedObject([].concat(this.datasource.dataBinding));
+        this.prevFilterExpression = get(this.datasource, 'filterExpressions.rules') ? getClonedObject(this.datasource.filterExpressions.rules) : getClonedObject([].concat(this.datasource.dataBinding));
         this.gridOptions.setLastActionPerformed(this.gridOptions.ACTIONS.FILTER_CRITERIA);
         this.gridOptions.setIsSearchTrigerred(true);
     }
@@ -1233,8 +1242,8 @@ class TableComponent extends StylableComponent {
     }
     // Update the lastActionPerformed to Filter_Criteria, when there is change in the Variable filter criteria rules
     checkIfVarFiltersApplied() {
-        if (!_.isEmpty(_.get(this.datasource, 'filterExpressions.rules')) || !_.isEmpty(_.get(this.datasource, 'dataBinding'))) {
-            const currentFilterExpr = _.get(this.datasource, 'filterExpressions.rules') ? this.datasource.filterExpressions.rules : [].concat(this.datasource.dataBinding);
+        if (!isEmpty(get(this.datasource, 'filterExpressions.rules')) || !isEmpty(get(this.datasource, 'dataBinding'))) {
+            const currentFilterExpr = get(this.datasource, 'filterExpressions.rules') ? this.datasource.filterExpressions.rules : [].concat(this.datasource.dataBinding);
             const isEqual = this.compareFilterExpressions(this.prevFilterExpression, currentFilterExpr);
             if (!isEqual) {
                 this.setLastActionToFilterCriteria();
@@ -1248,29 +1257,29 @@ class TableComponent extends StylableComponent {
             this.checkIfVarFiltersApplied();
         }
         // State handling for static variables
-        if (_.get(this.datasource, 'category') === 'wm.Variable' && this._pageLoad && this.getConfiguredState() !== 'none') {
+        if (get(this.datasource, 'category') === 'wm.Variable' && this._pageLoad && this.getConfiguredState() !== 'none') {
             const widgetState = this.statePersistence.getWidgetState(this);
             this._pageLoad = false;
-            if (_.get(widgetState, 'selectedItem')) {
+            if (get(widgetState, 'selectedItem')) {
                 this._selectedItemsExist = true;
             }
             else {
                 this.setDataGridOption('selectFirstRow', this.gridfirstrowselect);
             }
-            if (_.get(widgetState, 'search')) {
+            if (get(widgetState, 'search')) {
                 this.searchStateHandler(widgetState);
                 this.searchSortHandler(widgetState.search, undefined, 'search', true);
             }
-            if (_.get(widgetState, 'sort')) {
+            if (get(widgetState, 'sort')) {
                 this.searchSortHandler(widgetState.sort, undefined, 'sort', true);
                 this.sortStateHandler(widgetState);
             }
-            if (_.get(widgetState, 'pagination')) {
+            if (get(widgetState, 'pagination')) {
                 this.dataNavigator.pageChanged({ page: widgetState.pagination }, true);
             }
         }
         // After the setting the watch on navigator, dataset is triggered with undefined. In this case, return here.
-        if (this.dataNavigatorWatched && _.isUndefined(newVal) && this.__fullData) {
+        if (this.dataNavigatorWatched && isUndefined(newVal) && this.__fullData) {
             return;
         }
         // If variable is in loading state, show loading icon
@@ -1304,7 +1313,7 @@ class TableComponent extends StylableComponent {
         else {
             this.resetPageNavigation();
             // If the dataset is undefined or empty or table is bound to static variable then set variableInflight to false inorder to update the status
-            if (newVal === '' || newVal === undefined || _.get(this.datasource, 'category') === 'wm.Variable') {
+            if (newVal === '' || newVal === undefined || get(this.datasource, 'category') === 'wm.Variable') {
                 this.variableInflight = false;
             }
             /*for run mode, disabling the loader and showing no data found message if dataset is not valid*/
@@ -1316,7 +1325,8 @@ class TableComponent extends StylableComponent {
         if (!this.isNavigationEnabled() && newVal) {
             this.checkFiltersApplied(this.getSortExpr());
         }
-        if (!_.isObject(newVal) || newVal === '' || (newVal && newVal.dataValue === '')) {
+        // @ts-ignore
+        if (!isObject(newVal) || newVal === '' || (newVal && newVal.dataValue === '')) {
             if (!this.variableInflight) {
                 // If variable has finished loading and resultSet is empty, ender empty data
                 this.setGridData([]);
@@ -1339,7 +1349,7 @@ class TableComponent extends StylableComponent {
     }
     addRowIndex(row) {
         const rowData = getClonedObject(row);
-        const rowIndex = _.indexOf(this.gridOptions.data, row);
+        const rowIndex = indexOf(this.gridOptions.data, row);
         if (rowIndex < 0) {
             return row;
         }
@@ -1365,7 +1375,7 @@ class TableComponent extends StylableComponent {
     getClonedRowObject(rowData) {
         const row = getClonedObject(rowData);
         row.getProperty = field => {
-            return _.get(row, field);
+            return get(row, field);
         };
         row.$isFirst = row.$index === 1;
         row.$isLast = this.gridData.length === row.$index;
@@ -1381,7 +1391,7 @@ class TableComponent extends StylableComponent {
         }
         else {
             // If grid is in edit mode or grid has data, dont show the no data message
-            if (!this.isGridEditMode && _.isEmpty(this.dataset)) {
+            if (!this.isGridEditMode && isEmpty(this.dataset)) {
                 this.callDataGridMethod('setStatus', 'nodata', this.nodatamessage);
             }
             else {
@@ -1400,7 +1410,7 @@ class TableComponent extends StylableComponent {
     }
     clearForm(newRow) {
         const ctrls = this.ngform.controls;
-        _.keys(this.ngform.controls).forEach(key => {
+        keys(this.ngform.controls).forEach(key => {
             // If new row, clear the controls in the new row. Else, clear the controls in edit row
             if (!key.endsWith('_filter') && ((key.endsWith('_new') && newRow) || (!key.endsWith('_new') && !newRow))) {
                 ctrls[key].setValue('');
@@ -1452,7 +1462,7 @@ class TableComponent extends StylableComponent {
         const data = this.filternullrecords ? this.removeEmptyRecords(serverData) : serverData;
         // fix for [WMS-24012] set variableinflight flag to false for static variables
         // If the table is bound to some widget and not bound to any variable (ex: Table1.selectedItem) then set variableInflight to false
-        if (_.get(this.datasource, 'category') === 'wm.Variable' || _.get(this.datasource, 'category') === undefined) {
+        if (get(this.datasource, 'category') === 'wm.Variable' || get(this.datasource, 'category') === undefined) {
             this.variableInflight = false;
         }
         if (!this.variableInflight) {
@@ -1470,7 +1480,7 @@ class TableComponent extends StylableComponent {
             return;
         }
         const option = {};
-        if (isDefined && (!_.isEqual(newVal, this.gridOptions[optionName]) || forceSet)) {
+        if (isDefined && (!isEqual(newVal, this.gridOptions[optionName]) || forceSet)) {
             option[optionName] = newVal;
             this.datagridElement.datatable('option', option);
             this.gridOptions[optionName] = newVal;
@@ -1494,13 +1504,13 @@ class TableComponent extends StylableComponent {
         if (!this.fieldDefs.length) {
             return;
         }
-        rowActionCol = _.find(this.fullFieldDefs, { 'field': ROW_OPS_FIELD, type: 'custom' }); // Check if column is fetched from markup
-        _.remove(this.fieldDefs, { type: 'custom', field: ROW_OPS_FIELD }); // Removing operations column
-        _.remove(this.headerConfig, { field: rowOperationsColumn.field });
+        rowActionCol = find(this.fullFieldDefs, { 'field': ROW_OPS_FIELD, type: 'custom' }); // Check if column is fetched from markup
+        remove(this.fieldDefs, { type: 'custom', field: ROW_OPS_FIELD }); // Removing operations column
+        remove(this.headerConfig, { field: rowOperationsColumn.field });
         /*Add the column for row operations only if at-least one operation has been enabled.*/
         if (this.rowActions.length) {
             if (rowActionCol) { // If column is present in markup, push the column or push the default column
-                insertPosition = rowActionCol.rowactionsposition ? _.toNumber(rowActionCol.rowactionsposition) : this.fieldDefs.length;
+                insertPosition = rowActionCol.rowactionsposition ? toNumber(rowActionCol.rowactionsposition) : this.fieldDefs.length;
                 this.fieldDefs.splice(insertPosition, 0, rowActionCol);
                 if (insertPosition === 0) {
                     this.headerConfig.unshift(config);
@@ -1529,15 +1539,15 @@ class TableComponent extends StylableComponent {
                 if (isDefined(newVal)) {
                     // Watch will not be triggered if dataset and new value are equal. So trigger the property change handler manually
                     // This happens in case, if dataset is directly updated.
-                    if (_.isEqual(this.dataset, newVal)) {
+                    if (isEqual(this.dataset, newVal)) {
                         this.watchVariableDataSet(newVal);
                     }
                     else {
-                        if (_.isArray(newVal)) {
+                        if (isArray(newVal)) {
                             this.widget.dataset = [].concat(newVal);
                         }
-                        else if (_.isObject(newVal)) {
-                            this.widget.dataset = _.extend({}, newVal);
+                        else if (isObject(newVal)) {
+                            this.widget.dataset = extend({}, newVal);
                         }
                         else {
                             this.widget.dataset = newVal;
@@ -1617,7 +1627,7 @@ class TableComponent extends StylableComponent {
         if (this.getConfiguredState() !== 'none' && this._selectedItemsExist && serviceData.length) {
             const widgetState = this.statePersistence.getWidgetState(this);
             let currentPageItems;
-            if (_.get(widgetState, 'selectedItem')) {
+            if (get(widgetState, 'selectedItem')) {
                 currentPageItems = widgetState.selectedItem.filter(val => {
                     return val.page === this.dataNavigator.dn.currentPage;
                 });
@@ -1625,7 +1635,7 @@ class TableComponent extends StylableComponent {
                 // if an item is already selected, don't trigger onSelect event for it again
                 if (currentPageItems.length && this.selecteditem.length !== widgetState.selectedItem.length) {
                     // don't reassign this.selecteditem if selected items already exist.
-                    if (_.isArray(this.selecteditem)) {
+                    if (isArray(this.selecteditem)) {
                         currentPageItems.forEach((item) => {
                             this.selectItem(item.index, undefined);
                         });
@@ -1642,15 +1652,15 @@ class TableComponent extends StylableComponent {
         this.fieldDefs = []; // empty the form fields
         // empty the filter field template refs.
         this.filterTmpl._results = [];
-        if (_.isEmpty(columns)) {
+        if (isEmpty(columns)) {
             return;
         }
         let tmpl = '';
         columns.forEach(col => {
             let attrsTmpl = '';
             let customTmpl = '';
-            _.forEach(col, (val, key) => {
-                if (!_.isUndefined(val) && val !== '') {
+            forEach(col, (val, key) => {
+                if (!isUndefined(val) && val !== '') {
                     // If custom expression is present, keep it inside table column. Else, keep as attribute
                     if (key === 'customExpression') {
                         customTmpl = val;
@@ -1689,7 +1699,7 @@ class TableComponent extends StylableComponent {
         /*call utility function to prepare fieldDefs for grid against given data (A MAX OF 10 COLUMNS ONLY)*/
         defaultFieldDefs = prepareFieldDefs(properties);
         /*append additional properties*/
-        _.forEach(defaultFieldDefs, columnDef => {
+        forEach(defaultFieldDefs, columnDef => {
             columnDef.binding = columnDef.field;
             columnDef.caption = columnDef.displayName;
             columnDef.pcDisplay = true;
@@ -1711,7 +1721,7 @@ class TableComponent extends StylableComponent {
         this.invokeEventCallback('beforedatarender', { $data: data, $columns: this.columns, data: data, columns: this.columns });
         defaultFieldDefs = [];
         // Apply the changes made by the user
-        _.forEach(this.columns, val => {
+        forEach(this.columns, val => {
             defaultFieldDefs.push(val);
         });
         this.generateDynamicColumns(defaultFieldDefs);
@@ -1721,11 +1731,11 @@ class TableComponent extends StylableComponent {
         /* check whether data is valid or not */
         const dataValid = data && !data.error;
         /*if the data is type json object, make it an array of the object*/
-        if (dataValid && !_.isArray(data)) {
+        if (dataValid && !isArray(data)) {
             data = [data];
         }
         /* if the data is empty, show nodatamessage */
-        if (_.isEmpty(data)) {
+        if (isEmpty(data)) {
             this.setGridData(data);
             return;
         }
@@ -1742,7 +1752,7 @@ class TableComponent extends StylableComponent {
         let pagingOptions;
         if (this.datasource && this.datasource.execute(DataSource.Operation.IS_PAGEABLE)) {
             pagingOptions = this.datasource.execute(DataSource.Operation.GET_PAGING_OPTIONS);
-            sortExp = _.isEmpty(pagingOptions) ? '' : getOrderByExpr(pagingOptions.sort);
+            sortExp = isEmpty(pagingOptions) ? '' : getOrderByExpr(pagingOptions.sort);
         }
         return sortExp || '';
     }
@@ -1768,7 +1778,7 @@ class TableComponent extends StylableComponent {
                 }
                 // if table is inside list then table dataset will be set as "item.XXX" and there is no datasource.
                 // So extracting datasource from the datset bound expression.
-                if (this.parentList && !this.datasource && _.startsWith(this.binddataset, 'item')) {
+                if (this.parentList && !this.datasource && startsWith(this.binddataset, 'item')) {
                     this.datasource = getDatasourceFromExpr(this.widget.$attrs.get('datasetboundexpr'), this);
                 }
                 if (this.gridOptions.isNavTypeScrollOrOndemand()) {
@@ -1785,7 +1795,7 @@ class TableComponent extends StylableComponent {
                 }
                 // for Static Variables with Retain State enabled, prevent Table from rendering more than once
                 // Fix for [WMS-25284]: Render table that is inside list widget and bound to static Variable
-                if (!(_.get(this.datasource, 'category') === 'wm.Variable' && this._pageLoad && this.getConfiguredState() !== 'none') || (this.parentList && _.startsWith(this.binddataset, 'item'))) {
+                if (!(get(this.datasource, 'category') === 'wm.Variable' && this._pageLoad && this.getConfiguredState() !== 'none') || (this.parentList && startsWith(this.binddataset, 'item'))) {
                     this.watchVariableDataSet(nv);
                 }
                 break;
@@ -1836,7 +1846,7 @@ class TableComponent extends StylableComponent {
                 this.exportOptions = [];
                 if (nv) {
                     // Populate options for export drop down menu
-                    _.forEach(_.split(nv, ','), type => {
+                    forEach(split(nv, ','), type => {
                         this.exportOptions.push({
                             label: type,
                             icon: exportIconMapping[type]
@@ -1846,7 +1856,7 @@ class TableComponent extends StylableComponent {
                 break;
             case 'shownewrow':
                 // Enable new row if shownew is true or addNewRow buton is present
-                enableNewRow = nv || _.some(this.actions, act => _.includes(act.action, 'addNewRow()'));
+                enableNewRow = nv || some(this.actions, act => includes(act.action, 'addNewRow()'));
                 this.callDataGridMethod('option', 'actionsEnabled.new', enableNewRow);
                 break;
             case 'pagesize':
@@ -1901,11 +1911,11 @@ class TableComponent extends StylableComponent {
     populateActions() {
         this._actions.header = [];
         this._actions.footer = [];
-        _.forEach(this.actions, (action) => {
-            if (_.includes(action.position, 'header')) {
+        forEach(this.actions, (action) => {
+            if (includes(action.position, 'header')) {
                 this._actions.header.push(action);
             }
-            if (_.includes(action.position, 'footer')) {
+            if (includes(action.position, 'footer')) {
                 this._actions.footer.push(action);
             }
         });
@@ -1974,9 +1984,9 @@ class TableComponent extends StylableComponent {
         if (data) {
             this.serverData = data;
         }
-        if (_.isObject(item)) {
-            item = _.omitBy(item, (value) => {
-                return _.isArray(value) && _.isEmpty(value);
+        if (isObject(item)) {
+            item = omitBy(item, (value) => {
+                return isArray(value) && isEmpty(value);
             });
         }
         this.callDataGridMethod('selectRow', item, true);
@@ -1991,7 +2001,7 @@ class TableComponent extends StylableComponent {
         this.checkFiltersApplied(this.getSortExpr());
         if (this._isClientSearch) {
             data = getClonedObject(this.__fullData);
-            if (_.isObject(data) && !_.isArray(data)) {
+            if (isObject(data) && !isArray(data)) {
                 data = [data];
             }
             data = this.getSearchResult(data, this.filterInfo);
@@ -2007,7 +2017,7 @@ class TableComponent extends StylableComponent {
     }
     export($item) {
         let filterFields;
-        const sortOptions = _.isEmpty(this.sortInfo) ? '' : this.sortInfo.field + ' ' + this.sortInfo.direction;
+        const sortOptions = isEmpty(this.sortInfo) ? '' : this.sortInfo.field + ' ' + this.sortInfo.direction;
         const columns = {};
         let isValid;
         let requestData;
@@ -2043,7 +2053,7 @@ class TableComponent extends StylableComponent {
         if (isValid === false) {
             return;
         }
-        requestData.fields = _.values(requestData.columns);
+        requestData.fields = values(requestData.columns);
         this.datasource.execute(DataSource.Operation.DOWNLOAD, { data: requestData });
     }
     expandRow(rowId) {
@@ -2104,14 +2114,14 @@ class TableComponent extends StylableComponent {
     }
     ngOnDetach() {
         super.ngOnDetach();
-        if (_.get(this.datasource, 'category') === 'wm.Variable' && this.getConfiguredState() !== 'none') {
+        if (get(this.datasource, 'category') === 'wm.Variable' && this.getConfiguredState() !== 'none') {
             this._pageLoad = false;
         }
         else {
             this._pageLoad = true;
         }
     }
-    static { this.ɵfac = function TableComponent_Factory(t) { return new (t || TableComponent)(i0.ɵɵdirectiveInject(i0.Injector), i0.ɵɵdirectiveInject(i1.FormBuilder), i0.ɵɵdirectiveInject(i2.App), i0.ɵɵdirectiveInject(i2.DynamicComponentRefProvider), i0.ɵɵdirectiveInject(i2.StatePersistence), i0.ɵɵdirectiveInject(i2.PaginationService), i0.ɵɵdirectiveInject(i2.Viewport), i0.ɵɵdirectiveInject(i3.ListComponent, 8), i0.ɵɵinjectAttribute('dataset.bind'), i0.ɵɵinjectAttribute('datasource.bind'), i0.ɵɵinjectAttribute('readonlygrid'), i0.ɵɵdirectiveInject(i0.NgZone), i0.ɵɵdirectiveInject(i4.TrustAsPipe)); }; }
+    static { this.ɵfac = function TableComponent_Factory(t) { return new (t || TableComponent)(i0.ɵɵdirectiveInject(i0.Injector), i0.ɵɵdirectiveInject(i1.FormBuilder), i0.ɵɵdirectiveInject(i2.App), i0.ɵɵdirectiveInject(i2.DynamicComponentRefProvider), i0.ɵɵdirectiveInject(i2.StatePersistence), i0.ɵɵdirectiveInject(i2.PaginationService), i0.ɵɵdirectiveInject(i2.Viewport), i0.ɵɵdirectiveInject(i3.ListComponent, 8), i0.ɵɵinjectAttribute('dataset.bind'), i0.ɵɵinjectAttribute('datasource.bind'), i0.ɵɵinjectAttribute('readonlygrid'), i0.ɵɵdirectiveInject(i0.NgZone), i0.ɵɵdirectiveInject(i4.TrustAsPipe), i0.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: TableComponent, selectors: [["", "wmTable", ""]], contentQueries: function TableComponent_ContentQueries(rf, ctx, dirIndex) { if (rf & 1) {
             i0.ɵɵcontentQuery(dirIndex, _c0$1, 5);
             i0.ɵɵcontentQuery(dirIndex, _c1$1, 5);
@@ -2157,37 +2167,36 @@ class TableComponent extends StylableComponent {
         } }, features: [i0.ɵɵProvidersFeature([
                 provideAs(TableComponent, NG_VALUE_ACCESSOR, true),
                 provideAsWidgetRef(TableComponent)
-            ]), i0.ɵɵInheritDefinitionFeature], attrs: _c16, decls: 29, vars: 4, consts: [["class", "panel-heading", 4, "ngIf"], [1, "app-datagrid"], ["datagridElement", ""], [1, "panel-footer", "clearfix", 3, "hidden"], [1, "app-datagrid-paginator", 3, "hidden"], ["wmPagination", "", "show.bind", "shownavigation", "navigationalign.bind", "navigationalign", "navigationsize.bind", "navigationSize", "navigation.bind", "navControls", "showrecordcount.bind", "showrecordcount", "maxsize.bind", "maxsize", "boundarylinks.bind", "boundarylinks", "forceellipses.bind", "forceellipses", "directionlinks.bind", "directionlinks"], ["class", "app-datagrid-actions", 4, "ngIf"], ["buttonRef", ""], ["anchorRef", ""], ["hidden", ""], ["multiColumnFilterView", ""], ["inlineEditView", ""], ["inlineEditNewView", ""], ["rowActionsView", ""], ["rowExpansionActionView", ""], ["customExprView", ""], ["dynamicTable", ""], ["rowDetailView", ""], [1, "dynamic-table-container"], [1, "panel-heading"], [1, "panel-title"], [1, "pull-left"], [3, "class", 4, "ngIf"], [1, "heading", 3, "innerHTML"], [1, "description", 3, "innerHTML"], ["class", "panel-actions app-datagrid-actions", 4, "ngIf"], [1, "panel-actions", "app-datagrid-actions"], [3, "ngTemplateOutlet", "ngTemplateOutletContext", 4, "ngFor", "ngForOf"], ["wmMenu", "", "dropdown", "", "caption.bind", "appLocale.LABEL_EXPORT", "autoclose", "always", "dataset.bind", "exportOptions", "select.event", "export($item)", "menuposition", "down,left", 4, "ngIf"], [3, "ngTemplateOutlet", "ngTemplateOutletContext"], ["wmMenu", "", "dropdown", "", "caption.bind", "appLocale.LABEL_EXPORT", "autoclose", "always", "dataset.bind", "exportOptions", "select.event", "export($item)", "menuposition", "down,left"], [1, "app-datagrid-actions"], ["wmButton", "", "caption.bind", "btn.displayName", "show.bind", "btn.show", "class.bind", "btn.class", "iconclass.bind", "btn.iconclass", "type", "button", "shortcutkey.bind", "btn.shortcutkey", "tabindex.bind", "btn.tabindex", "hint.bind", "btn.title", "disabled.bind", "btn.disabled", "conditionalclass.bind", "btn.conditionalclass", "conditionalstyle.bind", "btn.conditionalstyle", 3, "ngClass", "click"], ["wmAnchor", "", "caption.bind", "btn.displayName", "show.bind", "btn.show", "class.bind", "btn.class", "iconclass.bind", "btn.iconclass", "shortcutkey.bind", "btn.shortcutkey", "tabindex.bind", "btn.tabindex", "hint.bind", "btn.title", "hyperlink.bind", "btn.hyperlink", "target.bind", "btn.target", "conditionalclass.bind", "btn.conditionalclass", "conditionalstyle.bind", "btn.conditionalstyle", 3, "ngClass", "click"]], template: function TableComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵtemplate(0, TableComponent_div_0_Template, 8, 4, "div", 0);
-            i0.ɵɵelement(1, "div", 1, 2);
-            i0.ɵɵelementStart(3, "div", 3)(4, "div", 4);
-            i0.ɵɵelement(5, "nav", 5);
+            ]), i0.ɵɵInheritDefinitionFeature], attrs: _c16, decls: 29, vars: 4, consts: [["datagridElement", ""], ["buttonRef", ""], ["anchorRef", ""], ["multiColumnFilterView", ""], ["inlineEditView", ""], ["inlineEditNewView", ""], ["rowActionsView", ""], ["rowExpansionActionView", ""], ["customExprView", ""], ["dynamicTable", ""], ["rowDetailView", ""], ["class", "panel-heading", 4, "ngIf"], [1, "app-datagrid"], [1, "panel-footer", "clearfix", 3, "hidden"], [1, "app-datagrid-paginator", 3, "hidden"], ["wmPagination", "", "show.bind", "shownavigation", "navigationalign.bind", "navigationalign", "navigationsize.bind", "navigationSize", "navigation.bind", "navControls", "showrecordcount.bind", "showrecordcount", "maxsize.bind", "maxsize", "boundarylinks.bind", "boundarylinks", "forceellipses.bind", "forceellipses", "directionlinks.bind", "directionlinks"], ["class", "app-datagrid-actions", 4, "ngIf"], ["hidden", ""], [1, "dynamic-table-container"], [1, "panel-heading"], [1, "panel-title"], [1, "pull-left"], [3, "class", 4, "ngIf"], [1, "heading", 3, "innerHTML"], [1, "description", 3, "innerHTML"], ["class", "panel-actions app-datagrid-actions", 4, "ngIf"], [1, "panel-actions", "app-datagrid-actions"], [3, "ngTemplateOutlet", "ngTemplateOutletContext", "ngTemplateOutletInjector", 4, "ngFor", "ngForOf"], ["wmMenu", "", "dropdown", "", "caption.bind", "appLocale.LABEL_EXPORT", "autoclose", "always", "dataset.bind", "exportOptions", "select.event", "export($item)", "menuposition", "down,left", 4, "ngIf"], [3, "ngTemplateOutlet", "ngTemplateOutletContext", "ngTemplateOutletInjector"], ["wmMenu", "", "dropdown", "", "caption.bind", "appLocale.LABEL_EXPORT", "autoclose", "always", "dataset.bind", "exportOptions", "select.event", "export($item)", "menuposition", "down,left"], [1, "app-datagrid-actions"], ["wmButton", "", "caption.bind", "btn.displayName", "show.bind", "btn.show", "class.bind", "btn.class", "iconclass.bind", "btn.iconclass", "type", "button", "shortcutkey.bind", "btn.shortcutkey", "tabindex.bind", "btn.tabindex", "hint.bind", "btn.title", "disabled.bind", "btn.disabled", "conditionalclass.bind", "btn.conditionalclass", "conditionalstyle.bind", "btn.conditionalstyle", 3, "click", "ngClass"], ["wmAnchor", "", "caption.bind", "btn.displayName", "show.bind", "btn.show", "class.bind", "btn.class", "iconclass.bind", "btn.iconclass", "shortcutkey.bind", "btn.shortcutkey", "tabindex.bind", "btn.tabindex", "hint.bind", "btn.title", "hyperlink.bind", "btn.hyperlink", "target.bind", "btn.target", "conditionalclass.bind", "btn.conditionalclass", "conditionalstyle.bind", "btn.conditionalstyle", 3, "click", "ngClass"]], template: function TableComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵtemplate(0, TableComponent_div_0_Template, 8, 4, "div", 11);
+            i0.ɵɵelement(1, "div", 12, 0);
+            i0.ɵɵelementStart(3, "div", 13)(4, "div", 14);
+            i0.ɵɵelement(5, "nav", 15);
             i0.ɵɵelementEnd();
-            i0.ɵɵtemplate(6, TableComponent_div_6_Template, 2, 1, "div", 6);
+            i0.ɵɵtemplate(6, TableComponent_div_6_Template, 2, 1, "div", 16);
             i0.ɵɵelementEnd();
-            i0.ɵɵtemplate(7, TableComponent_ng_template_7_Template, 1, 5, "ng-template", null, 7, i0.ɵɵtemplateRefExtractor);
-            i0.ɵɵtemplate(9, TableComponent_ng_template_9_Template, 1, 4, "ng-template", null, 8, i0.ɵɵtemplateRefExtractor);
-            i0.ɵɵelementStart(11, "div", 9);
-            i0.ɵɵelementContainer(12, null, 10)(14, null, 11)(16, null, 12)(18, null, 13)(20, null, 14)(22, null, 15)(24, null, 16)(26, null, 17);
+            i0.ɵɵtemplate(7, TableComponent_ng_template_7_Template, 1, 5, "ng-template", null, 1, i0.ɵɵtemplateRefExtractor)(9, TableComponent_ng_template_9_Template, 1, 4, "ng-template", null, 2, i0.ɵɵtemplateRefExtractor);
+            i0.ɵɵelementStart(11, "div", 17);
+            i0.ɵɵelementContainer(12, null, 3)(14, null, 4)(16, null, 5)(18, null, 6)(20, null, 7)(22, null, 8)(24, null, 9)(26, null, 10);
             i0.ɵɵelement(28, "div", 18);
             i0.ɵɵelementEnd();
         } if (rf & 2) {
             i0.ɵɵproperty("ngIf", ctx.title || ctx.subheading || ctx.iconclass || ctx.exportOptions.length || ctx._actions.header.length);
             i0.ɵɵadvance(3);
             i0.ɵɵproperty("hidden", !ctx._actions.footer.length && (!ctx.shownavigation || ctx.onDemandLoad && ctx.dataNavigator.isDisableNext || (ctx.dataNavigator == null ? null : ctx.dataNavigator.dataSize) <= ctx.pagesize));
-            i0.ɵɵadvance(1);
+            i0.ɵɵadvance();
             i0.ɵɵproperty("hidden", !(ctx.dataNavigator == null ? null : ctx.dataNavigator.dataSize) && !(ctx.dataNavigator.datasource == null ? null : ctx.dataNavigator.datasource.pagination == null ? null : ctx.dataNavigator.datasource.pagination.next) || !ctx.shownavigation || ctx.onDemandLoad && ctx.dataNavigator.isDisableNext || (ctx.dataNavigator == null ? null : ctx.dataNavigator.dataSize) <= ctx.pagesize);
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("ngIf", ctx._actions.footer.length);
         } }, dependencies: [i5.AnchorComponent, i6.BsDropdownDirective, i7.NgClass, i7.NgForOf, i7.NgIf, i7.NgTemplateOutlet, i8.ButtonComponent, i9.MenuComponent, i10.PaginationComponent], encapsulation: 2 }); }
 }
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TableComponent, [{
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TableComponent, [{
         type: Component,
         args: [{ selector: '[wmTable]', providers: [
                     provideAs(TableComponent, NG_VALUE_ACCESSOR, true),
                     provideAsWidgetRef(TableComponent)
-                ], template: "<div class=\"panel-heading\" *ngIf=\"title || subheading || iconclass || exportOptions.length || _actions.header.length\">\n    <h3 class=\"panel-title\">\n        <div class=\"pull-left\">\n            <i class=\"app-icon panel-icon {{iconclass}}\" *ngIf=\"iconclass\"></i>\n        </div>\n        <div class=\"pull-left\">\n            <div class=\"heading\" [innerHTML]=\"title\"></div>\n            <div class=\"description\" [innerHTML]=\"subheading\"></div>\n        </div>\n        <div class=\"panel-actions app-datagrid-actions\" *ngIf=\"exportOptions.length || _actions.header.length\">\n            <ng-container *ngFor=\"let btn of _actions.header\"\n                          [ngTemplateOutlet]=\"btn.widgetType === 'button' ? buttonRef : anchorRef\" [ngTemplateOutletContext]=\"{btn:btn}\">\n            </ng-container>\n            <div wmMenu dropdown caption.bind=\"appLocale.LABEL_EXPORT\" *ngIf=\"exportOptions.length\"  autoclose=\"always\" attr.name=\"{{name}}-export\"\n                dataset.bind=\"exportOptions\" select.event=\"export($item)\" menuposition=\"down,left\"></div>\n        </div>\n    </h3>\n</div>\n<div class=\"app-datagrid\" #datagridElement></div>\n\n<div class=\"panel-footer clearfix\" [hidden]=\"!_actions.footer.length && (!shownavigation || (onDemandLoad && dataNavigator.isDisableNext) || dataNavigator?.dataSize <= pagesize)\">\n    <div class=\"app-datagrid-paginator\" [hidden]=\"(!dataNavigator?.dataSize && !dataNavigator.datasource?.pagination?.next) || !shownavigation || (onDemandLoad && dataNavigator.isDisableNext) || dataNavigator?.dataSize <= pagesize\">\n        <nav wmPagination show.bind=\"shownavigation\" navigationalign.bind=\"navigationalign\"\n             navigationsize.bind=\"navigationSize\"\n             navigation.bind=\"navControls\" showrecordcount.bind=\"showrecordcount\" maxsize.bind=\"maxsize\"\n             boundarylinks.bind=\"boundarylinks\"\n             forceellipses.bind=\"forceellipses\" directionlinks.bind=\"directionlinks\"></nav>\n    </div>\n    <div class=\"app-datagrid-actions\" *ngIf=\"_actions.footer.length\">\n        <ng-container *ngFor=\"let btn of _actions.footer\"\n                      [ngTemplateOutlet]=\"btn.widgetType === 'button' ? buttonRef : anchorRef\" [ngTemplateOutletContext]=\"{btn:btn}\">\n        </ng-container>\n    </div>\n</div>\n\n<ng-template #buttonRef let-btn=\"btn\">\n    <button wmButton caption.bind=\"btn.displayName\" show.bind=\"btn.show\" class.bind=\"btn.class\"  iconclass.bind=\"btn.iconclass\" (click)=\"invokeActionEvent($event, btn.action)\"\n            [ngClass]=\"{'btn-sm': spacing === 'condensed', 'disabled-new': btn.key === 'addNewRow' && (isGridEditMode || isLoading)}\"\n            type=\"button\" shortcutkey.bind=\"btn.shortcutkey\" tabindex.bind=\"btn.tabindex\" hint.bind=\"btn.title\" [attr.aria-label]=\"btn.displayName\" disabled.bind=\"btn.disabled\" conditionalclass.bind=\"btn.conditionalclass\" conditionalstyle.bind=\"btn.conditionalstyle\"></button>\n</ng-template>\n\n<ng-template #anchorRef let-btn=\"btn\">\n    <a wmAnchor caption.bind=\"btn.displayName\" show.bind=\"btn.show\" class.bind=\"btn.class\"  iconclass.bind=\"btn.iconclass\" (click)=\"invokeActionEvent($event, btn.action)\"\n            [ngClass]=\"{'btn-sm': spacing === 'condensed', 'disabled-new': btn.key === 'addNewRow' && (isGridEditMode || isLoading)}\"\n            shortcutkey.bind=\"btn.shortcutkey\" tabindex.bind=\"btn.tabindex\" hint.bind=\"btn.title\"\n            hyperlink.bind=\"btn.hyperlink\" target.bind=\"btn.target\" conditionalclass.bind=\"btn.conditionalclass\" conditionalstyle.bind=\"btn.conditionalstyle\"></a>\n</ng-template>\n\n<div hidden>\n    <ng-container #multiColumnFilterView></ng-container>\n\n    <ng-container #inlineEditView></ng-container>\n\n    <ng-container #inlineEditNewView></ng-container>\n\n    <ng-container #rowActionsView></ng-container>\n\n    <ng-container #rowExpansionActionView></ng-container>\n\n    <ng-container #customExprView></ng-container>\n\n    <ng-container #dynamicTable></ng-container>\n\n    <ng-container #rowDetailView></ng-container>\n\n    <div class=\"dynamic-table-container\"></div>\n</div>\n" }]
-    }], function () { return [{ type: i0.Injector }, { type: i1.FormBuilder }, { type: i2.App }, { type: i2.DynamicComponentRefProvider }, { type: i2.StatePersistence }, { type: i2.PaginationService }, { type: i2.Viewport }, { type: i3.ListComponent, decorators: [{
+                ], template: "<div class=\"panel-heading\" *ngIf=\"title || subheading || iconclass || exportOptions.length || _actions.header.length\">\n    <h3 class=\"panel-title\">\n        <div class=\"pull-left\">\n            <i class=\"app-icon panel-icon {{iconclass}}\" *ngIf=\"iconclass\"></i>\n        </div>\n        <div class=\"pull-left\">\n            <div class=\"heading\" [innerHTML]=\"title\"></div>\n            <div class=\"description\" [innerHTML]=\"subheading\"></div>\n        </div>\n        <div class=\"panel-actions app-datagrid-actions\" *ngIf=\"exportOptions.length || _actions.header.length\">\n            <ng-container *ngFor=\"let btn of _actions.header; let index = index;\"\n                          [ngTemplateOutlet]=\"btn.widgetType === 'button' ? buttonRef : anchorRef\"\n                          [ngTemplateOutletContext]=\"{btn:btn}\"\n                          [ngTemplateOutletInjector]=\"createCustomInjector('actions_header_' + index, {btn:btn})\">\n            </ng-container>\n            <div wmMenu dropdown caption.bind=\"appLocale.LABEL_EXPORT\" *ngIf=\"exportOptions.length\"  autoclose=\"always\" attr.name=\"{{name}}-export\"\n                dataset.bind=\"exportOptions\" select.event=\"export($item)\" menuposition=\"down,left\"></div>\n        </div>\n    </h3>\n</div>\n<div class=\"app-datagrid\" #datagridElement></div>\n\n<div class=\"panel-footer clearfix\" [hidden]=\"!_actions.footer.length && (!shownavigation || (onDemandLoad && dataNavigator.isDisableNext) || dataNavigator?.dataSize <= pagesize)\">\n    <div class=\"app-datagrid-paginator\" [hidden]=\"(!dataNavigator?.dataSize && !dataNavigator.datasource?.pagination?.next) || !shownavigation || (onDemandLoad && dataNavigator.isDisableNext) || dataNavigator?.dataSize <= pagesize\">\n        <nav wmPagination show.bind=\"shownavigation\" navigationalign.bind=\"navigationalign\"\n             navigationsize.bind=\"navigationSize\"\n             navigation.bind=\"navControls\" showrecordcount.bind=\"showrecordcount\" maxsize.bind=\"maxsize\"\n             boundarylinks.bind=\"boundarylinks\"\n             forceellipses.bind=\"forceellipses\" directionlinks.bind=\"directionlinks\"></nav>\n    </div>\n    <div class=\"app-datagrid-actions\" *ngIf=\"_actions.footer.length\">\n        <ng-container *ngFor=\"let btn of _actions.footer; let index = index;\"\n                      [ngTemplateOutlet]=\"btn.widgetType === 'button' ? buttonRef : anchorRef\"\n                      [ngTemplateOutletContext]=\"{btn:btn}\"\n                      [ngTemplateOutletInjector]=\"createCustomInjector('actions_footer_' + index, {btn:btn})\">\n        </ng-container>\n    </div>\n</div>\n\n<ng-template #buttonRef let-btn=\"btn\">\n    <button wmButton caption.bind=\"btn.displayName\" show.bind=\"btn.show\" class.bind=\"btn.class\"  iconclass.bind=\"btn.iconclass\" (click)=\"invokeActionEvent($event, btn.action)\"\n            [ngClass]=\"{'btn-sm': spacing === 'condensed', 'disabled-new': btn.key === 'addNewRow' && (isGridEditMode || isLoading)}\"\n            type=\"button\" shortcutkey.bind=\"btn.shortcutkey\" tabindex.bind=\"btn.tabindex\" hint.bind=\"btn.title\" [attr.aria-label]=\"btn.displayName\" disabled.bind=\"btn.disabled\" conditionalclass.bind=\"btn.conditionalclass\" conditionalstyle.bind=\"btn.conditionalstyle\"></button>\n</ng-template>\n\n<ng-template #anchorRef let-btn=\"btn\">\n    <a wmAnchor caption.bind=\"btn.displayName\" show.bind=\"btn.show\" class.bind=\"btn.class\"  iconclass.bind=\"btn.iconclass\" (click)=\"invokeActionEvent($event, btn.action)\"\n            [ngClass]=\"{'btn-sm': spacing === 'condensed', 'disabled-new': btn.key === 'addNewRow' && (isGridEditMode || isLoading)}\"\n            shortcutkey.bind=\"btn.shortcutkey\" tabindex.bind=\"btn.tabindex\" hint.bind=\"btn.title\"\n            hyperlink.bind=\"btn.hyperlink\" target.bind=\"btn.target\" conditionalclass.bind=\"btn.conditionalclass\" conditionalstyle.bind=\"btn.conditionalstyle\"></a>\n</ng-template>\n\n<div hidden>\n    <ng-container #multiColumnFilterView></ng-container>\n\n    <ng-container #inlineEditView></ng-container>\n\n    <ng-container #inlineEditNewView></ng-container>\n\n    <ng-container #rowActionsView></ng-container>\n\n    <ng-container #rowExpansionActionView></ng-container>\n\n    <ng-container #customExprView></ng-container>\n\n    <ng-container #dynamicTable></ng-container>\n\n    <ng-container #rowDetailView></ng-container>\n\n    <div class=\"dynamic-table-container\"></div>\n</div>\n" }]
+    }], () => [{ type: i0.Injector }, { type: i1.FormBuilder }, { type: i2.App }, { type: i2.DynamicComponentRefProvider }, { type: i2.StatePersistence }, { type: i2.PaginationService }, { type: i2.Viewport }, { type: i3.ListComponent, decorators: [{
                 type: Optional
             }] }, { type: undefined, decorators: [{
                 type: Attribute,
@@ -2198,7 +2207,12 @@ class TableComponent extends StylableComponent {
             }] }, { type: undefined, decorators: [{
                 type: Attribute,
                 args: ['readonlygrid']
-            }] }, { type: i0.NgZone }, { type: i4.TrustAsPipe }]; }, { dataNavigator: [{
+            }] }, { type: i0.NgZone }, { type: i4.TrustAsPipe }, { type: undefined, decorators: [{
+                type: Inject,
+                args: ['EXPLICIT_CONTEXT']
+            }, {
+                type: Optional
+            }] }], { dataNavigator: [{
             type: ViewChild,
             args: [PaginationComponent, { static: true }]
         }], _tableElement: [{
@@ -2253,6 +2267,7 @@ class TableComponent extends StylableComponent {
             type: HostListener,
             args: ['keypress', ['$event']]
         }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TableComponent, { className: "TableComponent", filePath: "table.component.ts", lineNumber: 122 }); })();
 
 const OPERATION = {
     'NEW': 'new',
@@ -2374,23 +2389,23 @@ class TableCUDDirective {
     generatePath(binddataset) {
         let path, index;
         let dataBoundExpr = this.table.widget.$attrs.get('datasetboundexpr');
-        if (_.startsWith(binddataset, 'item') && dataBoundExpr) {
-            if (_.startsWith(dataBoundExpr, 'Widgets.')) {
+        if (startsWith(binddataset, 'item') && dataBoundExpr) {
+            if (startsWith(dataBoundExpr, 'Widgets.')) {
                 dataBoundExpr = extractCurrentItemExpr(dataBoundExpr, this.table);
             }
             const parentListItems = this.table.$element.parents('.app-list-item');
-            const indexArr = _.map(parentListItems, (item) => _.parseInt($(item).attr('listitemindex')));
+            const indexArr = map(parentListItems, (item) => parseInt$1($(item).attr('listitemindex')));
             for (let i = indexArr.length - 1; i >= 0; i--) {
                 dataBoundExpr = dataBoundExpr.replace('$i', indexArr[i]);
             }
-            index = _.last(indexArr);
+            index = last(indexArr);
             path = dataBoundExpr.replace(/^Variables\..*\.dataSet([^.])*(\.|$)/g, '');
         }
         else {
             // if we have dataset as "Variables.staticVar1.dataSet[1].details" then pass index as 1.
             const regEx = /^Variables\..*\.dataSet([\[][0-9]])/g;
             if (regEx.test(binddataset)) {
-                index = _.parseInt(binddataset.replace(/^Variables\..*\.dataSet([\[])/g, ''));
+                index = parseInt$1(binddataset.replace(/^Variables\..*\.dataSet([\[])/g, ''));
             }
             path = binddataset.replace(/^Variables\..*\.dataSet([^.])*(\.|$)/g, '');
         }
@@ -2712,17 +2727,17 @@ class TableCUDDirective {
     static { this.ɵfac = function TableCUDDirective_Factory(t) { return new (t || TableCUDDirective)(i0.ɵɵdirectiveInject(TableComponent, 2), i0.ɵɵdirectiveInject(i2.AbstractDialogService), i0.ɵɵdirectiveInject(i2.App)); }; }
     static { this.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: TableCUDDirective, selectors: [["", "wmTableCUD", ""]] }); }
 }
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TableCUDDirective, [{
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TableCUDDirective, [{
         type: Directive,
         args: [{
                 selector: '[wmTableCUD]'
             }]
-    }], function () { return [{ type: undefined, decorators: [{
+    }], () => [{ type: undefined, decorators: [{
                 type: Self
             }, {
                 type: Inject,
                 args: [TableComponent]
-            }] }, { type: i2.AbstractDialogService }, { type: i2.App }]; }, null); })();
+            }] }, { type: i2.AbstractDialogService }, { type: i2.App }], null); })();
 
 const emptyMatchModes = ['null', 'empty', 'nullorempty', 'isnotnull', 'isnotempty'];
 // Get search value based on the time
@@ -2731,12 +2746,12 @@ const getSearchValue = (value, type) => {
         return undefined;
     }
     if (isNumberType(type)) {
-        return _.toNumber(value);
+        return toNumber(value);
     }
     if (type === DataType.DATETIME) {
         return moment(value).valueOf();
     }
-    return _.toString(value).toLowerCase();
+    return toString(value).toLowerCase();
 };
 // Filter the data based on the search value and conditions
 const getFilteredData = (data, searchObj, visibleCols = []) => {
@@ -2745,26 +2760,27 @@ const getFilteredData = (data, searchObj, visibleCols = []) => {
     // Return whole data if
     // - search value is undefined and matchmode is not an empty matchmode type
     // - search value is null and datatype is number. Null can not be compared with numeric values[WMS-19275].
-    if ((!isDefined(searchVal) && !_.includes(emptyMatchModes, searchObj.matchMode)) || (isNumberType(searchObj.type) && _.isNull(searchObj.value))) {
+    if ((!isDefined(searchVal) && !includes(emptyMatchModes, searchObj.matchMode)) || (isNumberType(searchObj.type) && isNull(searchObj.value))) {
         return data;
     }
     data = data.filter((obj) => {
         let isExists;
         if (searchObj.field) {
-            currentVal = getSearchValue(_.get(obj, searchObj.field), searchObj.type);
+            currentVal = getSearchValue(get(obj, searchObj.field), searchObj.type);
         }
         else {
             currentVal = [];
-            _.forEach(obj, (val, key) => {
-                if ((_.includes(visibleCols, key))) {
+            forEach(obj, (val, key) => {
+                if ((includes(visibleCols, key))) {
                     currentVal.push(val);
                 }
                 else {
                     // WMS-22271 If the key is in nested key format (dot format)
                     // Find all the indexes of the key in visiblecols and extract their values from obj
-                    const colIndex = _.filter(_.range(visibleCols.length), (i) => visibleCols[i].includes(key));
-                    _.forEach(colIndex, (index) => {
-                        const value = _.get(obj, visibleCols[index]);
+                    const colIndex = filter(range(visibleCols.length), (i) => visibleCols[i].includes(key));
+                    forEach(colIndex, (index) => {
+                        // @ts-ignore
+                        const value = get(obj, visibleCols[index]);
                         if (currentVal.indexOf(value) < 0) {
                             currentVal.push(value);
                         }
@@ -2775,31 +2791,31 @@ const getFilteredData = (data, searchObj, visibleCols = []) => {
         }
         switch (searchObj.matchMode) {
             case 'start':
-                isExists = _.startsWith(currentVal, searchVal);
+                isExists = startsWith(currentVal, searchVal);
                 break;
             case 'end':
-                isExists = _.endsWith(currentVal, searchVal);
+                isExists = endsWith(currentVal, searchVal);
                 break;
             case 'exact':
-                isExists = _.isEqual(currentVal, searchVal);
+                isExists = isEqual(currentVal, searchVal);
                 break;
             case 'notequals':
-                isExists = !_.isEqual(currentVal, searchVal);
+                isExists = !isEqual(currentVal, searchVal);
                 break;
             case 'null':
-                isExists = _.isNull(currentVal);
+                isExists = isNull(currentVal);
                 break;
             case 'isnotnull':
-                isExists = !_.isNull(currentVal);
+                isExists = !isNull(currentVal);
                 break;
             case 'empty':
-                isExists = _.isEmpty(currentVal);
+                isExists = isEmpty(currentVal);
                 break;
             case 'isnotempty':
-                isExists = !_.isEmpty(currentVal);
+                isExists = !isEmpty(currentVal);
                 break;
             case 'nullorempty':
-                isExists = _.isNull(currentVal) || _.isEmpty(currentVal);
+                isExists = isNull(currentVal) || isEmpty(currentVal);
                 break;
             case 'lessthan':
                 isExists = currentVal < searchVal;
@@ -2814,7 +2830,7 @@ const getFilteredData = (data, searchObj, visibleCols = []) => {
                 isExists = currentVal >= searchVal;
                 break;
             default:
-                isExists = isNumberType(searchObj.type) ? _.isEqual(currentVal, searchVal) : _.includes(currentVal, searchVal);
+                isExists = isNumberType(searchObj.type) ? isEqual(currentVal, searchVal) : includes(currentVal, searchVal);
                 break;
         }
         return isExists;
@@ -2899,13 +2915,13 @@ class TableFilterSortDirective {
     // Get first or last page based on sort info of primary key
     getNavigationTargetBySortInfo() {
         return this.table.sortInfo && this.table.sortInfo.direction === 'desc' &&
-            _.includes(this.table.primaryKey, this.table.sortInfo.field) ? 'first' : 'last';
+            includes(this.table.primaryKey, this.table.sortInfo.field) ? 'first' : 'last';
     }
     // Returns all the columns of the table wherein, showinfilter is set to true
     getTableVisibleCols() {
         const visibleCols = [];
-        _.forEach(this.table.columns, (val, col) => {
-            if (_.toLower(_.toString(val.showinfilter)) === 'true' && col !== 'rowOperations' && val.searchable) {
+        forEach(this.table.columns, (val, col) => {
+            if (toLower(toString(val.showinfilter)) === 'true' && col !== 'rowOperations' && val.searchable) {
                 visibleCols.push(col);
             }
         });
@@ -2916,7 +2932,7 @@ class TableFilterSortDirective {
         if (searchObj.field) {
             setFilterFields(filterFields, searchObj);
         }
-        else if (!_.isEmpty(searchObj)) {
+        else if (!isEmpty(searchObj)) {
             const visibleCols = this.getTableVisibleCols();
             setFilterFields(filterFields, searchObj, visibleCols);
         }
@@ -2925,8 +2941,8 @@ class TableFilterSortDirective {
     getFilterFields(searchObj) {
         searchObj = searchObj || {};
         const filterFields = {};
-        if (_.isArray(searchObj)) {
-            _.forEach(searchObj, obj => {
+        if (isArray(searchObj)) {
+            forEach(searchObj, obj => {
                 this.invokeSetFilterfieldBasedOnFieldval(obj, filterFields);
             });
         }
@@ -2947,11 +2963,11 @@ class TableFilterSortDirective {
     // Reset the sort based on sort returned by the call
     resetSortStatus(variableSort) {
         let gridSortString;
-        if (!_.isEmpty(this.table.sortInfo) && this.table.datasource) {
+        if (!isEmpty(this.table.sortInfo) && this.table.datasource) {
             gridSortString = this.table.sortInfo.field + ' ' + this.table.sortInfo.direction;
             variableSort = this.table.datasource.execute(DataSource.Operation.GET_OPTIONS).orderBy || variableSort;
             if (variableSort) { // If multiple order by fields are present, compare with the first one
-                variableSort = _.head(_.split(variableSort, ','));
+                variableSort = head(split(variableSort, ','));
             }
             if (gridSortString !== variableSort) {
                 this.table.callDataGridMethod('resetSortIcons');
@@ -2989,7 +3005,7 @@ class TableFilterSortDirective {
             return;
         }
         if (this.table.datasource.execute(DataSource.Operation.SUPPORTS_SERVER_FILTER)) {
-            if (_.isEmpty(this.table.datasource.execute(DataSource.Operation.GET_OPTIONS).filterFields)) {
+            if (isEmpty(this.table.datasource.execute(DataSource.Operation.GET_OPTIONS).filterFields)) {
                 this.clearFilter(true);
             }
             this.resetSortStatus(variableSort);
@@ -3005,7 +3021,7 @@ class TableFilterSortDirective {
         if (!searchObj) {
             return data;
         }
-        if (_.isArray(searchObj)) {
+        if (isArray(searchObj)) {
             searchObj.forEach((obj) => {
                 data = getFilteredData(data, obj, visibleCols);
             });
@@ -3018,7 +3034,7 @@ class TableFilterSortDirective {
     // Returns data sorted using sortObj
     getSortResult(data, sortObj) {
         if (sortObj && sortObj.direction) {
-            data = _.orderBy(data, sortObj.field, sortObj.direction);
+            data = orderBy(data, sortObj.field, sortObj.direction);
         }
         return data;
     }
@@ -3033,7 +3049,7 @@ class TableFilterSortDirective {
         else {
             this.table.sortInfo = searchSortObj;
         }
-        if (_.isObject(data) && !_.isArray(data)) {
+        if (isObject(data) && !isArray(data)) {
             data = [data];
         }
         /*Both the functions return same 'data' if arguments are undefined*/
@@ -3065,9 +3081,9 @@ class TableFilterSortDirective {
         this.table.filterInfo = searchObj;
         data = this.getSearchResult(data, searchObj);
         // Compared the filtered data and original data, to show or hide the rows
-        _.forEach(this.table.gridData, (value, index) => {
+        forEach(this.table.gridData, (value, index) => {
             const $row = $($rows[index]);
-            if (_.find(data, obj => _.isEqual(obj, value))) {
+            if (find(data, obj => isEqual(obj, value))) {
                 $row.show();
             }
             else {
@@ -3138,7 +3154,7 @@ class TableFilterSortDirective {
     }
     searchHandler(searchSortObj, e, type, statePersistenceTriggered) {
         let obj;
-        if (_.isArray(searchSortObj)) {
+        if (isArray(searchSortObj)) {
             obj = searchSortObj.filter(function (searchObject) {
                 return (searchObject.matchMode !== undefined && searchObject.value !== undefined) || (searchObject.value !== undefined && searchObject.field === '');
             });
@@ -3147,7 +3163,7 @@ class TableFilterSortDirective {
             obj = { field: searchSortObj.field, value: searchSortObj.value, type: searchSortObj.type };
         }
         if (this.table.getConfiguredState() !== 'none' && unsupportedStatePersistenceTypes.indexOf(this.table.navigation) < 0) {
-            if ((_.isArray(searchSortObj) && obj.length) || (searchSortObj.value)) {
+            if ((isArray(searchSortObj) && obj.length) || (searchSortObj.value)) {
                 this.table.statePersistence.removeWidgetState(this.table, 'search');
                 this.table.statePersistence.setWidgetState(this.table, { search: obj });
             }
@@ -3170,7 +3186,7 @@ class TableFilterSortDirective {
         let output;
         const userFilters = {};
         // Transform filter fields from array to object having field names as keys
-        if (_.isArray(filterFields)) {
+        if (isArray(filterFields)) {
             filterFields.forEach(filterField => {
                 transformFilterField(userFilters, filterField);
             });
@@ -3185,9 +3201,9 @@ class TableFilterSortDirective {
         }
         filterFields = [];
         // if the field is not selected in search filter dropdown, building the filter fields object
-        if (_.isEmpty(userFilters) && !_.isEmpty(obj)) {
-            if (_.isArray(obj)) {
-                _.forEach(obj, searchObj => {
+        if (isEmpty(userFilters) && !isEmpty(obj)) {
+            if (isArray(obj)) {
+                forEach(obj, searchObj => {
                     addToFilterFields(filterFields, searchObj);
                 });
             }
@@ -3197,13 +3213,9 @@ class TableFilterSortDirective {
         }
         else {
             // Transform back the filter fields from object to array
-            _.forEach(userFilters, (val, key) => {
-                filterFields.push({
-                    field: key,
-                    matchMode: val.matchMode,
-                    type: val.type,
-                    value: val.value
-                });
+            forEach(userFilters, (val, key) => {
+                // @ts-ignore
+                filterFields.push({ field: key, matchMode: val.matchMode, type: val.type, value: val.value });
             });
         }
         if (dataSource && dataSource.execute(DataSource.Operation.SUPPORTS_SERVER_FILTER)) {
@@ -3281,7 +3293,7 @@ class TableFilterSortDirective {
         this.table.rowFilter[fieldName] = this.table.rowFilter[fieldName] || {};
         this.table.rowFilter[fieldName].matchMode = condition;
         // For empty match modes, clear off the value and call filter
-        if (_.includes(this.table.emptyMatchModes, condition)) {
+        if (includes(this.table.emptyMatchModes, condition)) {
             this.table.columns[fieldName].resetFilter();
             this.table.onRowFilterChange();
         }
@@ -3304,10 +3316,10 @@ class TableFilterSortDirective {
         }
         const fieldName = filterDef.field;
         const formFields = this.table.fullFieldDefs;
-        const filterOnFields = _.filter(formFields, { 'filteronfilter': fieldName });
-        const newVal = _.get(this.table.rowFilter, [fieldName, 'value']);
+        const filterOnFields = filter(formFields, { 'filteronfilter': fieldName });
+        const newVal = get(this.table.rowFilter, [fieldName, 'value']);
         // Loop over the fields for which the current field is filter on field
-        _.forEach(filterOnFields, filterField => {
+        forEach(filterOnFields, filterField => {
             const filterOn = filterField.filteronfilter;
             const filterKey = filterField.field;
             const filterFields = {};
@@ -3332,13 +3344,13 @@ class TableFilterSortDirective {
     // This method is triggered on value change in multi column filter
     onRowFilterChange(fieldName) {
         const searchObj = [];
-        const field = _.find(this.table.fullFieldDefs, { 'field': fieldName });
+        const field = find(this.table.fullFieldDefs, { 'field': fieldName });
         // Convert row filters to a search object and call search handler
-        _.forEach(this.table.rowFilter, (value, key) => {
-            if ((isDefined(value.value) && value.value !== '') || _.includes(this.table.emptyMatchModes, value.matchMode)) {
+        forEach(this.table.rowFilter, (value, key) => {
+            if ((isDefined(value.value) && value.value !== '') || includes(this.table.emptyMatchModes, value.matchMode)) {
                 if (field && key === field.field) {
                     value.type = value.type || field.type;
-                    value.matchMode = value.matchMode || _.get(this.table.matchModeTypesMap[value.type], 0);
+                    value.matchMode = value.matchMode || get(this.table.matchModeTypesMap[value.type], 0);
                 }
                 searchObj.push({
                     field: key,
@@ -3373,17 +3385,17 @@ class TableFilterSortDirective {
     static { this.ɵfac = function TableFilterSortDirective_Factory(t) { return new (t || TableFilterSortDirective)(i0.ɵɵdirectiveInject(TableComponent, 2)); }; }
     static { this.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: TableFilterSortDirective, selectors: [["", "wmTableFilterSort", ""]] }); }
 }
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TableFilterSortDirective, [{
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TableFilterSortDirective, [{
         type: Directive,
         args: [{
                 selector: '[wmTableFilterSort]'
             }]
-    }], function () { return [{ type: undefined, decorators: [{
+    }], () => [{ type: undefined, decorators: [{
                 type: Self
             }, {
                 type: Inject,
                 args: [TableComponent]
-            }] }]; }, null); })();
+            }] }], null); })();
 
 const registerProps$4 = () => {
     register('wm-table-action', new Map([
@@ -3412,8 +3424,8 @@ const registerProps$4 = () => {
 const WIDGET_CONFIG$4 = { widgetType: 'wm-table-action', hostClass: '' };
 class TableActionDirective extends BaseComponent {
     static { this.initializeProps = registerProps$4(); }
-    constructor(inj, table) {
-        super(inj, WIDGET_CONFIG$4);
+    constructor(inj, table, explicitContext) {
+        super(inj, WIDGET_CONFIG$4, explicitContext);
         this.table = table;
     }
     populateAction() {
@@ -3423,7 +3435,7 @@ class TableActionDirective extends BaseComponent {
             show: this.show,
             class: this.class || '',
             iconclass: this.iconclass || '',
-            title: _.isUndefined(this.title) ? (this['display-name'] || '') : this.title,
+            title: isUndefined(this.title) ? (this['display-name'] || '') : this.title,
             action: this.action,
             accessroles: this.accessroles,
             shortcutkey: this.shortcutkey,
@@ -3455,12 +3467,12 @@ class TableActionDirective extends BaseComponent {
             this.buttonDef[key] = nv;
         }
     }
-    static { this.ɵfac = function TableActionDirective_Factory(t) { return new (t || TableActionDirective)(i0.ɵɵdirectiveInject(i0.Injector), i0.ɵɵdirectiveInject(TableComponent, 8)); }; }
+    static { this.ɵfac = function TableActionDirective_Factory(t) { return new (t || TableActionDirective)(i0.ɵɵdirectiveInject(i0.Injector), i0.ɵɵdirectiveInject(TableComponent, 8), i0.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
     static { this.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: TableActionDirective, selectors: [["", "wmTableAction", ""]], features: [i0.ɵɵProvidersFeature([
                 provideAsWidgetRef(TableActionDirective)
             ]), i0.ɵɵInheritDefinitionFeature] }); }
 }
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TableActionDirective, [{
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TableActionDirective, [{
         type: Directive,
         args: [{
                 selector: '[wmTableAction]',
@@ -3468,9 +3480,14 @@ class TableActionDirective extends BaseComponent {
                     provideAsWidgetRef(TableActionDirective)
                 ]
             }]
-    }], function () { return [{ type: i0.Injector }, { type: TableComponent, decorators: [{
+    }], () => [{ type: i0.Injector }, { type: TableComponent, decorators: [{
                 type: Optional
-            }] }]; }, null); })();
+            }] }, { type: undefined, decorators: [{
+                type: Inject,
+                args: ['EXPLICIT_CONTEXT']
+            }, {
+                type: Optional
+            }] }], null); })();
 
 const registerProps$3 = () => {
     register('wm-table-column', new Map([
@@ -3484,7 +3501,7 @@ const registerProps$3 = () => {
         ['collapsible', PROP_BOOLEAN],
         ['col-ng-class', PROP_STRING],
         ['currencypattern', PROP_STRING],
-        ['customExpression', PROP_BOOLEAN],
+        ['customExpression', PROP_BOOLEAN], // Internal property to check if column has custom expression
         ['dataentrymode', { value: 'default', ...PROP_STRING }],
         ['datafield', PROP_STRING],
         ['dataoptions', PROP_ANY],
@@ -3575,8 +3592,8 @@ const registerProps$2 = () => {
 const WIDGET_CONFIG$3 = { widgetType: 'wm-table-column-group', hostClass: '' };
 class TableColumnGroupDirective extends BaseComponent {
     static { this.initializeProps = registerProps$2(); }
-    constructor(inj, group, table) {
-        super(inj, WIDGET_CONFIG$3);
+    constructor(inj, group, table, explicitContext) {
+        super(inj, WIDGET_CONFIG$3, explicitContext);
         this.group = group;
         this.table = table;
         this.config = {};
@@ -3611,12 +3628,12 @@ class TableColumnGroupDirective extends BaseComponent {
         const fieldName = this.group && this.group.name;
         setHeaderConfigForTable(this.table.headerConfig, this.config, fieldName, fieldName ? colIndex : headerIndex);
     }
-    static { this.ɵfac = function TableColumnGroupDirective_Factory(t) { return new (t || TableColumnGroupDirective)(i0.ɵɵdirectiveInject(i0.Injector), i0.ɵɵdirectiveInject(TableColumnGroupDirective, 12), i0.ɵɵdirectiveInject(TableComponent, 8)); }; }
+    static { this.ɵfac = function TableColumnGroupDirective_Factory(t) { return new (t || TableColumnGroupDirective)(i0.ɵɵdirectiveInject(i0.Injector), i0.ɵɵdirectiveInject(TableColumnGroupDirective, 12), i0.ɵɵdirectiveInject(TableComponent, 8), i0.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
     static { this.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: TableColumnGroupDirective, selectors: [["", "wmTableColumnGroup", ""]], features: [i0.ɵɵProvidersFeature([
                 provideAsWidgetRef(TableColumnGroupDirective)
             ]), i0.ɵɵInheritDefinitionFeature] }); }
 }
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TableColumnGroupDirective, [{
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TableColumnGroupDirective, [{
         type: Directive,
         args: [{
                 selector: '[wmTableColumnGroup]',
@@ -3624,13 +3641,18 @@ class TableColumnGroupDirective extends BaseComponent {
                     provideAsWidgetRef(TableColumnGroupDirective)
                 ]
             }]
-    }], function () { return [{ type: i0.Injector }, { type: TableColumnGroupDirective, decorators: [{
+    }], () => [{ type: i0.Injector }, { type: TableColumnGroupDirective, decorators: [{
                 type: SkipSelf
             }, {
                 type: Optional
             }] }, { type: TableComponent, decorators: [{
                 type: Optional
-            }] }]; }, null); })();
+            }] }, { type: undefined, decorators: [{
+                type: Inject,
+                args: ['EXPLICIT_CONTEXT']
+            }, {
+                type: Optional
+            }] }], null); })();
 
 const _c0 = ["customExprTmpl"];
 const _c1 = ["inlineWidgetTmpl"];
@@ -3663,8 +3685,8 @@ class FieldDef {
 }
 class TableColumnDirective extends BaseComponent {
     static { this.initializeProps = registerProps$3(); }
-    constructor(inj, appDefaults, table, group, bindfilterdataset, binddataset) {
-        super(inj, WIDGET_CONFIG$2);
+    constructor(inj, appDefaults, table, group, bindfilterdataset, binddataset, explicitContext) {
+        super(inj, WIDGET_CONFIG$2, explicitContext);
         this.appDefaults = appDefaults;
         this.table = table;
         this.group = group;
@@ -3675,22 +3697,22 @@ class TableColumnDirective extends BaseComponent {
         this.observeOnFields = [];
         this.aggregate = {
             sum: () => {
-                return _.sum(this._getColumnData());
+                return sum(this._getColumnData());
             },
             average: (precision = 2) => {
-                return _.round(_.mean(this._getColumnData()), precision);
+                return round(mean(this._getColumnData()), precision);
             },
             count: () => {
                 return this._getColumnData().length;
             },
             minimum: () => {
-                return _.min(this._getColumnData());
+                return min(this._getColumnData());
             },
             maximum: () => {
-                return _.max(this._getColumnData());
+                return max(this._getColumnData());
             },
             percent: (value, precision = 2) => {
-                return _.round((_.sum(this._getColumnData()) / value) * 100, precision);
+                return round((sum(this._getColumnData()) / value) * 100, precision);
             }
         };
         this.notifyForFields = [];
@@ -3947,7 +3969,7 @@ class TableColumnDirective extends BaseComponent {
                 if (this.relatedEntityName) {
                     this.widget['is-related'] = true;
                     this.widget['lookup-type'] = this.relatedEntityName;
-                    this.widget['lookup-field'] = _.last(_.split(this.field, '.'));
+                    this.widget['lookup-field'] = last(split(this.field, '.'));
                 }
                 if (this.filterwidget === FormWidgetType.AUTOCOMPLETE) {
                     this.filterInstance.dataoptions = getDistinctFieldProperties(this.table.datasource, this);
@@ -3974,11 +3996,11 @@ class TableColumnDirective extends BaseComponent {
             if (this['related-entity-name'] && this['primary-key']) {
                 // Fetch the data for the related fields
                 this.isDataSetBound = true;
-                const bindings = _.split(this.binding, '.');
+                const bindings = split(this.binding, '.');
                 this.showPendingSpinner = true;
                 fetchRelatedFieldData(dataSource, this.widget, {
-                    relatedField: _.head(bindings),
-                    datafield: _.last(bindings),
+                    relatedField: head(bindings),
+                    datafield: last(bindings),
                     widget: 'edit-widget-type'
                 });
             }
@@ -4007,7 +4029,7 @@ class TableColumnDirective extends BaseComponent {
         this.filterInstance.registerReadyStateListener(() => {
             if (isDataSetWidget(this.filterwidget)) {
                 // if binding is department.deptId then field will be deptId
-                const field = _.last(this.binding.split('.'));
+                const field = last(this.binding.split('.'));
                 this.filterInstance.dataset = this._filterDataSet;
                 this.filterInstance.datafield = this.filterdatafield || field;
                 this.filterInstance.displayfield = this.filterdisplayfield || field;
@@ -4024,7 +4046,7 @@ class TableColumnDirective extends BaseComponent {
     }
     // Notifies all the dependent validation controls incase of any changes
     notifyChanges(quickEdit) {
-        _.forEach(this.notifyForFields, field => {
+        forEach(this.notifyForFields, field => {
             if (quickEdit && this._isNewEditableRow) {
                 field.fieldValidations_new.validate();
             }
@@ -4035,7 +4057,7 @@ class TableColumnDirective extends BaseComponent {
     }
     // Watches control for dependent validation changes
     observeOn(fields) {
-        this.observeOnFields = _.cloneDeep(fields);
+        this.observeOnFields = cloneDeep(fields);
     }
     // Sets the default validators inline and quickedit new row using props
     setUpValidators() {
@@ -4046,11 +4068,11 @@ class TableColumnDirective extends BaseComponent {
     }
     // Sets the Async validators on the inline and quickedit new row form control
     setAsyncValidators(validators) {
-        this.asyncValidators = _.cloneDeep(validators);
+        this.asyncValidators = cloneDeep(validators);
     }
     // Sets the default/custom validators on the inline and quickedit new row form control
     setValidators(validators) {
-        this.syncValidators = _.cloneDeep(validators);
+        this.syncValidators = cloneDeep(validators);
     }
     boundFn(fn) {
         return fn();
@@ -4065,7 +4087,7 @@ class TableColumnDirective extends BaseComponent {
         this._invokeSummaryRowData(newData);
     }
     _invokeSummaryRowData(data) {
-        _.forEach(data, (item, index) => {
+        forEach(data, (item, index) => {
             const content = item;
             if (content instanceof Promise) {
                 content.then(res => {
@@ -4083,7 +4105,7 @@ class TableColumnDirective extends BaseComponent {
         });
     }
     _getColumnData() {
-        return _.map(this.table.dataset, this.binding);
+        return map(this.table.dataset, this.binding);
     }
     /* Summary Row Logic end */
     // Set the props on the inline edit widget
@@ -4133,7 +4155,7 @@ class TableColumnDirective extends BaseComponent {
         this.limit = this.limit ? +this.limit : undefined;
         this.editWidgetType = this['edit-widget-type'] = this['edit-widget-type'] || getEditModeWidget(this);
         this.filterOn = this['filter-on'];
-        this.readonly = isDefined(this.getAttr('readonly')) ? this.getAttr('readonly') === 'true' : (this['related-entity-name'] ? !this['primary-key'] : _.includes(['identity', 'uniqueid', 'sequence'], this.generator));
+        this.readonly = isDefined(this.getAttr('readonly')) ? this.getAttr('readonly') === 'true' : (this['related-entity-name'] ? !this['primary-key'] : includes(['identity', 'uniqueid', 'sequence'], this.generator));
         this.filterwidget = this.filterwidget || getDataTableFilterWidget(this.type || 'string');
         this.isFilterDataSetBound = !!this.bindfilterdataset;
         this.defaultvalue = getDefaultValue(this.defaultvalue, this.type, this.editWidgetType);
@@ -4159,6 +4181,15 @@ class TableColumnDirective extends BaseComponent {
             case 'caption':
                 this.displayName = nv || '';
                 this.setProperty('displayName', this.displayName);
+                // Fix for [WMS-25934]: update the headerConfig list when there is change in display name
+                // when column is inside a group then consider the col index and not header index.
+                const fieldName = this.group && this.group.name;
+                const index = fieldName ? parseInt(this.getAttr('index'), 10) : parseInt(this.getAttr('headerIndex'), 10);
+                // Register column with header config to create group structure
+                setHeaderConfigForTable(this.table.headerConfig, {
+                    field: this.field,
+                    displayName: this.displayName
+                }, fieldName, index);
                 break;
             case 'defaultvalue':
                 this.defaultvalue = getDefaultValue(this.defaultvalue, this.type, this.editWidgetType);
@@ -4197,7 +4228,7 @@ class TableColumnDirective extends BaseComponent {
                 this.table.redraw(true);
         }
     }
-    static { this.ɵfac = function TableColumnDirective_Factory(t) { return new (t || TableColumnDirective)(i0.ɵɵdirectiveInject(i0.Injector), i0.ɵɵdirectiveInject(i2.AppDefaults), i0.ɵɵdirectiveInject(TableComponent, 8), i0.ɵɵdirectiveInject(TableColumnGroupDirective, 8), i0.ɵɵinjectAttribute('filterdataset.bind'), i0.ɵɵinjectAttribute('dataset.bind')); }; }
+    static { this.ɵfac = function TableColumnDirective_Factory(t) { return new (t || TableColumnDirective)(i0.ɵɵdirectiveInject(i0.Injector), i0.ɵɵdirectiveInject(i2.AppDefaults), i0.ɵɵdirectiveInject(TableComponent, 8), i0.ɵɵdirectiveInject(TableColumnGroupDirective, 8), i0.ɵɵinjectAttribute('filterdataset.bind'), i0.ɵɵinjectAttribute('dataset.bind'), i0.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
     static { this.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: TableColumnDirective, selectors: [["", "wmTableColumn", ""]], contentQueries: function TableColumnDirective_ContentQueries(rf, ctx, dirIndex) { if (rf & 1) {
             i0.ɵɵcontentQuery(dirIndex, _c0, 5);
             i0.ɵɵcontentQuery(dirIndex, _c1, 5);
@@ -4217,7 +4248,7 @@ class TableColumnDirective extends BaseComponent {
                 provideAsWidgetRef(TableColumnDirective)
             ]), i0.ɵɵInheritDefinitionFeature] }); }
 }
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TableColumnDirective, [{
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TableColumnDirective, [{
         type: Directive,
         args: [{
                 selector: '[wmTableColumn]',
@@ -4225,7 +4256,7 @@ class TableColumnDirective extends BaseComponent {
                     provideAsWidgetRef(TableColumnDirective)
                 ]
             }]
-    }], function () { return [{ type: i0.Injector }, { type: i2.AppDefaults }, { type: TableComponent, decorators: [{
+    }], () => [{ type: i0.Injector }, { type: i2.AppDefaults }, { type: TableComponent, decorators: [{
                 type: Optional
             }] }, { type: TableColumnGroupDirective, decorators: [{
                 type: Optional
@@ -4235,7 +4266,12 @@ class TableColumnDirective extends BaseComponent {
             }] }, { type: undefined, decorators: [{
                 type: Attribute,
                 args: ['dataset.bind']
-            }] }]; }, { _filterInstances: [{
+            }] }, { type: undefined, decorators: [{
+                type: Inject,
+                args: ['EXPLICIT_CONTEXT']
+            }, {
+                type: Optional
+            }] }], { _filterInstances: [{
             type: ContentChildren,
             args: ['filterWidget', { descendants: true }]
         }], _inlineInstances: [{
@@ -4271,8 +4307,8 @@ const registerProps$1 = () => {
 const WIDGET_CONFIG$1 = { widgetType: 'wm-table-row', hostClass: '' };
 class TableRowDirective extends BaseComponent {
     static { this.initializeProps = registerProps$1(); }
-    constructor(inj, table) {
-        super(inj, WIDGET_CONFIG$1);
+    constructor(inj, table, explicitContext) {
+        super(inj, WIDGET_CONFIG$1, explicitContext);
         this.table = table;
     }
     populateConfig() {
@@ -4296,12 +4332,12 @@ class TableRowDirective extends BaseComponent {
             this.config.content = this.content;
         }
     }
-    static { this.ɵfac = function TableRowDirective_Factory(t) { return new (t || TableRowDirective)(i0.ɵɵdirectiveInject(i0.Injector), i0.ɵɵdirectiveInject(TableComponent, 12)); }; }
+    static { this.ɵfac = function TableRowDirective_Factory(t) { return new (t || TableRowDirective)(i0.ɵɵdirectiveInject(i0.Injector), i0.ɵɵdirectiveInject(TableComponent, 12), i0.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
     static { this.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: TableRowDirective, selectors: [["", "wmTableRow", ""]], features: [i0.ɵɵProvidersFeature([
                 provideAsWidgetRef(TableRowDirective)
             ]), i0.ɵɵInheritDefinitionFeature] }); }
 }
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TableRowDirective, [{
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TableRowDirective, [{
         type: Directive,
         args: [{
                 selector: '[wmTableRow]',
@@ -4309,11 +4345,16 @@ class TableRowDirective extends BaseComponent {
                     provideAsWidgetRef(TableRowDirective)
                 ]
             }]
-    }], function () { return [{ type: i0.Injector }, { type: TableComponent, decorators: [{
+    }], () => [{ type: i0.Injector }, { type: TableComponent, decorators: [{
                 type: Optional
             }, {
                 type: SkipSelf
-            }] }]; }, null); })();
+            }] }, { type: undefined, decorators: [{
+                type: Inject,
+                args: ['EXPLICIT_CONTEXT']
+            }, {
+                type: Optional
+            }] }], null); })();
 
 const registerProps = () => {
     register('wm-table-row-action', new Map([
@@ -4337,15 +4378,15 @@ const registerProps = () => {
 const WIDGET_CONFIG = { widgetType: 'wm-table-row-action', hostClass: '' };
 class TableRowActionDirective extends BaseComponent {
     static { this.initializeProps = registerProps(); }
-    constructor(inj, table, contexts) {
-        super(inj, WIDGET_CONFIG);
+    constructor(inj, table, contexts, explicitContext) {
+        super(inj, WIDGET_CONFIG, explicitContext);
         this.table = table;
         contexts[0].editRow = (evt) => this.table.editRow(evt);
         contexts[0].deleteRow = (evt) => this.table.deleteRow(evt);
         contexts[0].addNewRow = (evt) => this.table.addNewRow(evt);
     }
     getTitle() {
-        return _.isUndefined(this.title) ? (this['display-name'] || '') : this.title;
+        return isUndefined(this.title) ? (this['display-name'] || '') : this.title;
     }
     populateAction() {
         this.buttonDef = {
@@ -4371,13 +4412,13 @@ class TableRowActionDirective extends BaseComponent {
         this.populateAction();
         this.table.registerRowActions(this.buttonDef);
     }
-    static { this.ɵfac = function TableRowActionDirective_Factory(t) { return new (t || TableRowActionDirective)(i0.ɵɵdirectiveInject(i0.Injector), i0.ɵɵdirectiveInject(TableComponent, 8), i0.ɵɵdirectiveInject(Context, 2)); }; }
+    static { this.ɵfac = function TableRowActionDirective_Factory(t) { return new (t || TableRowActionDirective)(i0.ɵɵdirectiveInject(i0.Injector), i0.ɵɵdirectiveInject(TableComponent, 8), i0.ɵɵdirectiveInject(Context, 2), i0.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
     static { this.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: TableRowActionDirective, selectors: [["", "wmTableRowAction", ""]], features: [i0.ɵɵProvidersFeature([
                 provideAsWidgetRef(TableRowActionDirective),
                 { provide: Context, useFactory: () => { return {}; }, multi: true }
             ]), i0.ɵɵInheritDefinitionFeature] }); }
 }
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TableRowActionDirective, [{
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TableRowActionDirective, [{
         type: Directive,
         args: [{
                 selector: '[wmTableRowAction]',
@@ -4386,14 +4427,19 @@ class TableRowActionDirective extends BaseComponent {
                     { provide: Context, useFactory: () => { return {}; }, multi: true }
                 ]
             }]
-    }], function () { return [{ type: i0.Injector }, { type: TableComponent, decorators: [{
+    }], () => [{ type: i0.Injector }, { type: TableComponent, decorators: [{
                 type: Optional
             }] }, { type: Array, decorators: [{
                 type: Self
             }, {
                 type: Inject,
                 args: [Context]
-            }] }]; }, null); })();
+            }] }, { type: undefined, decorators: [{
+                type: Inject,
+                args: ['EXPLICIT_CONTEXT']
+            }, {
+                type: Optional
+            }] }], null); })();
 
 const components = [
     TableComponent,
@@ -4420,7 +4466,7 @@ class TableModule {
             TooltipModule,
             WmComponentsModule] }); }
 }
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TableModule, [{
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TableModule, [{
         type: NgModule,
         args: [{
                 imports: [