mat-table-ext 0.0.10 → 1.0.0-beta.0

package/fesm2022/mat-table-ext-test1.mjs

@@ -0,0 +1,3019 @@
+import * as i0 from '@angular/core';
+import { Injectable, Inject, Component, EventEmitter, Output, Input, inject, Renderer2, ElementRef, Directive, ViewChild, ViewEncapsulation, NgModule } from '@angular/core';
+import * as i7$1 from '@angular/material/table';
+import { MatTableDataSource, MatTableModule } from '@angular/material/table';
+import * as i3 from '@angular/forms';
+import { FormsModule, FormControl, ReactiveFormsModule } from '@angular/forms';
+import { MatNativeDateModule, MatRippleModule } from '@angular/material/core';
+import * as i5 from '@angular/material/form-field';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { trigger, state, transition, style, animate } from '@angular/animations';
+import { SelectionModel } from '@angular/cdk/collections';
+import * as i20 from '@angular/cdk/drag-drop';
+import { moveItemInArray, DragDropModule } from '@angular/cdk/drag-drop';
+import * as i1$1 from '@angular/material/dialog';
+import { MAT_DIALOG_DATA, MatDialogModule, MatDialogConfig } from '@angular/material/dialog';
+import * as i14 from '@angular/material/menu';
+import { MatMenuModule, MatMenuTrigger } from '@angular/material/menu';
+import * as i12 from '@angular/material/paginator';
+import { MatPaginatorModule, MatPaginator } from '@angular/material/paginator';
+import * as i13 from '@angular/material/sort';
+import { MatSortModule, MatSort } from '@angular/material/sort';
+import * as i6 from '@angular/common';
+import { CommonModule, TitleCasePipe } from '@angular/common';
+import * as i6$1 from '@angular/material/input';
+import { MatInputModule } from '@angular/material/input';
+import * as i7 from '@angular/material/select';
+import { MatSelectModule } from '@angular/material/select';
+import * as i8 from '@angular/material/checkbox';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import * as i9 from '@angular/material/button';
+import { MatButtonModule } from '@angular/material/button';
+import * as i10 from '@angular/material/datepicker';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import * as i5$1 from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
+import { BehaviorSubject } from 'rxjs';
+import * as i1 from '@angular/common/http';
+import * as XLSX from 'xlsx';
+import * as i2 from '@angular/material/tooltip';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import * as i17 from '@angular/material/toolbar';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import * as i18 from '@angular/material/progress-bar';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+import * as i4 from '@angular/platform-browser';
+import * as i1$2 from '@ngx-translate/core';
+import { TranslateModule } from '@ngx-translate/core';
+import { A11yModule } from '@angular/cdk/a11y';
+import { CdkAccordionModule } from '@angular/cdk/accordion';
+import { ClipboardModule } from '@angular/cdk/clipboard';
+import { PortalModule } from '@angular/cdk/portal';
+import { ScrollingModule } from '@angular/cdk/scrolling';
+import { CdkStepperModule } from '@angular/cdk/stepper';
+import { CdkTableModule } from '@angular/cdk/table';
+import { CdkTreeModule } from '@angular/cdk/tree';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
+import { MatBadgeModule } from '@angular/material/badge';
+import { MatBottomSheetModule } from '@angular/material/bottom-sheet';
+import { MatButtonToggleModule } from '@angular/material/button-toggle';
+import { MatCardModule } from '@angular/material/card';
+import { MatChipsModule } from '@angular/material/chips';
+import { MatStepperModule } from '@angular/material/stepper';
+import { MatDividerModule } from '@angular/material/divider';
+import { MatExpansionModule } from '@angular/material/expansion';
+import { MatGridListModule } from '@angular/material/grid-list';
+import { MatListModule } from '@angular/material/list';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatRadioModule } from '@angular/material/radio';
+import { MatSidenavModule } from '@angular/material/sidenav';
+import { MatSliderModule } from '@angular/material/slider';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
+import { MatSnackBarModule } from '@angular/material/snack-bar';
+import { MatTabsModule } from '@angular/material/tabs';
+import { MatTreeModule } from '@angular/material/tree';
+
+class MatTableExtService {
+    constructor(http) {
+        this.http = http;
+        this.selectedRow = new BehaviorSubject(null);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: MatTableExtService, deps: [{ token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: MatTableExtService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: MatTableExtService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [{ type: i1.HttpClient }] });
+
+class EditingComponent {
+    constructor(dialogRef, dialogData, service) {
+        this.dialogRef = dialogRef;
+        this.dialogData = dialogData;
+        this.service = service;
+        this.keys = [];
+        this.templateKeys = [];
+        this.types = {};
+        this.templateTypes = {};
+        this.columns = [];
+        this.templateRow = {};
+        this.isCellEdit = false;
+        this.cellField = '';
+    }
+    ngOnInit() {
+        // Check if this is cell-level editing
+        if (this.dialogData.isCellEdit) {
+            this.isCellEdit = true;
+            this.cellColumn = this.dialogData.column;
+            this.cellField = this.cellColumn.field;
+            this.cellValue = this.dialogData.row[this.cellField];
+            // Handle selection type
+            if (this.cellColumn.type === 'selection') {
+                this.types[this.cellField] = 'selection';
+            }
+            else {
+                this.types[this.cellField] = this.cellColumn.type;
+            }
+            this.templateRef = this.dialogData.templateRef;
+        }
+        else {
+            this.setData(this.dialogData);
+        }
+    }
+    /**
+     * @description This method is used to set data for editing.
+     * @param value dialog Data
+     */
+    setData(value) {
+        let row = value.row;
+        let types = {};
+        this.keys = [];
+        this.columns = value.columns;
+        this.columns.forEach((column) => {
+            this.keys.push(column.field);
+            if (column.type == 'selection') {
+                types[column.field] = column.type;
+                let temp = row[column.field];
+                row[column.field] = {
+                    value: temp,
+                    options: column.options,
+                };
+            }
+            else {
+                types[column.field] = column.type;
+            }
+        });
+        this.types = types;
+        this.setTemplateRef(value);
+    }
+    /**
+     * @description This method is used to set the data when data comes in from cus template.
+     * @param value template value
+     */
+    setTemplateRef(value) {
+        if (value.templateRef !== undefined) {
+            this.templateRow = { ...value.row };
+            let types = {};
+            this.templateKeys = [];
+            this.columns.forEach((column) => {
+                this.templateKeys.push(column.field);
+                if (column.type == 'selection') {
+                    types[column.field] = column.type;
+                    let temp = this.templateRow[column.field];
+                    this.templateRow[column.field] = {
+                        value: temp,
+                        options: column.options,
+                    };
+                }
+                else {
+                    types[column.field] = column.type;
+                }
+            });
+            this.templateTypes = types;
+            this.templateRef = value.templateRef;
+        }
+    }
+    /**
+     * @description This method is triggered when dialog is closed and also emits the dialog closed event data.
+     */
+    closeDialog() {
+        if (this.isCellEdit) {
+            // Return single cell data
+            this.dialogRef.close({
+                field: this.cellField,
+                value: this.cellValue
+            });
+        }
+        else {
+            // Return full row data
+            let rowData = { ...this.dialogData.row };
+            this.keys.forEach((key) => {
+                if (this.types[key] === 'selection') {
+                    let temp = rowData[key].value;
+                    rowData[key] = temp;
+                }
+            });
+            this.dialogRef.close(rowData);
+        }
+    } /**
+     * @description This method is called when the dialog is closed custom template action.
+     * @param row row to be edited.
+     * @param keys keys of columns
+     * @param types column types
+     */
+    closeTemplateDialog(row, keys, types) {
+        let rowData = { ...row };
+        keys.forEach((key) => {
+            if (types[key] === 'selection') {
+                let temp = rowData[key].value;
+                rowData[key] = temp;
+            }
+        });
+        this.dialogRef.close(rowData);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: EditingComponent, deps: [{ token: i1$1.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: MatTableExtService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.5", type: EditingComponent, isStandalone: true, selector: "app-editing", ngImport: i0, template: "@if (!templateRef) {\n    <div style=\"height: 100%;\" class=\"main-dialog-container\">\n        <div mat-dialog-title class=\"dialog-title-container\">\n            <h4 style=\"margin: 0;\">{{ isCellEdit ? 'Edit Cell' : 'Edit Row' }}</h4>\n            <span class=\"example-spacer\"></span>\n            <button style=\"margin-right: -10px;\" mat-icon-button aria-label=\"Example icon button with a vertical three dot icon\">\n                <mat-icon mat-dialog-close style=\"cursor: pointer;\" fxFlex=\"5\">close</mat-icon>\n            </button>\n        </div>\n        <mat-dialog-content style=\"margin-right: 20px;\">\n            <!-- Cell-level editing -->\n            @if (isCellEdit) {\n                <div style=\"display: flex; flex-direction: column;\">\n                    <!-- Number Type -->\n                    @if (types[cellField] == 'number') {\n                        <mat-form-field appearance=\"outline\" class=\"inline-editing-field\">\n                            <mat-label>{{cellColumn.header || cellField | titlecase}}</mat-label>\n                            <input matInput type=\"number\" [(ngModel)]=\"cellValue\" [ngModelOptions]=\"{standalone: true}\">\n                        </mat-form-field>\n                    }\n            \n                    <!-- String Type -->\n                    @if (types[cellField] == 'string') {\n                        <mat-form-field appearance=\"outline\" class=\"inline-editing-field\">\n                            <mat-label>{{cellColumn.header || cellField | titlecase}}</mat-label>\n                            <input matInput type=\"text\" [(ngModel)]=\"cellValue\" [ngModelOptions]=\"{standalone: true}\">\n                        </mat-form-field>\n                    }\n                    \n                    <!-- Textarea Type -->\n                    @if (types[cellField] == 'textarea') {\n                        <mat-form-field appearance=\"outline\" class=\"inline-editing-field\">\n                            <mat-label>{{cellColumn.header || cellField | titlecase}}</mat-label>\n                            <textarea matInput rows=\"6\" [(ngModel)]=\"cellValue\" [ngModelOptions]=\"{standalone: true}\"></textarea>\n                        </mat-form-field>\n                    }\n                    \n                    @if (types[cellField] == 'date') {\n                        <mat-form-field appearance=\"outline\" class=\"inline-editing-field\">\n                            <mat-label>{{cellColumn.header || cellField | titlecase}}</mat-label>\n                            <input matInput type=\"text\" [(ngModel)]=\"cellValue\" [ngModelOptions]=\"{standalone: true}\">\n                        </mat-form-field>\n                    }\n                    \n                    <!-- Datepicker Type -->\n                    @if (types[cellField] == 'datepicker') {\n                        <mat-form-field appearance=\"outline\" class=\"inline-editing-field\">\n                            <mat-label>{{cellColumn.header || cellField | titlecase}}</mat-label>\n                            <input matInput [matDatepicker]=\"cellPopupPicker\" [(ngModel)]=\"cellValue\" [ngModelOptions]=\"{standalone: true}\">\n                            <mat-datepicker-toggle matIconSuffix [for]=\"cellPopupPicker\"></mat-datepicker-toggle>\n                            <mat-datepicker #cellPopupPicker></mat-datepicker>\n                        </mat-form-field>\n                    }\n                    \n                    <!-- Selection Type -->\n                    @if (types[cellField] == 'selection') {\n                        <mat-form-field appearance=\"outline\" class=\"inline-editing-field\">\n                            <mat-label>{{cellColumn.header || cellField | titlecase}}</mat-label>\n                            <mat-select [(ngModel)]=\"cellValue\">\n                                @for (option of cellColumn.options; track option) {\n                                    <mat-option [value]=\"option\">{{option}}</mat-option>\n                                }\n                            </mat-select>\n                        </mat-form-field>\n                    }\n                    \n                    <!-- Boolean Type -->\n                    @if (types[cellField] == 'boolean') {\n                        <p>\n                            <mat-checkbox color=\"primary\" [(ngModel)]=\"cellValue\">\n                                <mat-label>{{cellColumn.header || cellField | titlecase}}</mat-label>\n                            </mat-checkbox>\n                        </p>\n                    }\n                </div>\n            }\n            \n            <!-- Row-level editing -->\n            @if (!isCellEdit) {\n                <div style=\"display: flex; flex-direction: column;\">\\n                @for (key of keys; track key) {\n                    <!-- Number Type -->\n                    @if (types[key] == 'number') {\n                        <mat-form-field appearance=\"outline\" class=\"inline-editing-field\">\n                            <mat-label>{{key | titlecase}}</mat-label>\n                            <input matInput type=\"number\" [(ngModel)]=\"dialogData['row'][key]\" [ngModelOptions]=\"{standalone: true}\">\n                        </mat-form-field>\n                    }\n            \n                    <!-- String Type -->\n                    @if (types[key] == 'string') {\n                        <mat-form-field appearance=\"outline\" class=\"inline-editing-field\">\n                            <mat-label>{{key | titlecase}}</mat-label>\n                            <input matInput type=\"text\" [(ngModel)]=\"dialogData['row'][key]\" [ngModelOptions]=\"{standalone: true}\">\n                        </mat-form-field>\n                    }\n                    <!-- Textarea Type -->\n                    @if (types[key] == 'textarea') {\n                        <mat-form-field appearance=\"outline\" class=\"inline-editing-field\">\n                            <mat-label>{{key | titlecase}}</mat-label>\n                            <textarea matInput rows=\"4\" [(ngModel)]=\"dialogData['row'][key]\" [ngModelOptions]=\"{standalone: true}\"></textarea>\n                        </mat-form-field>\n                    }\n                    @if (types[key] == 'date') {\n                        <mat-form-field appearance=\"outline\" class=\"inline-editing-field\">\n                            <mat-label>{{key | titlecase}}</mat-label>\n                            <input matInput type=\"text\" [(ngModel)]=\"dialogData['row'][key]\" [ngModelOptions]=\"{standalone: true}\">\n                        </mat-form-field>\n                    }\n                    <!-- Datepicker Type -->\n                    @if (types[key] == 'datepicker') {\n                        <mat-form-field appearance=\"outline\" class=\"inline-editing-field\">\n                            <mat-label>{{key | titlecase}}</mat-label>\n                            <input matInput [matDatepicker]=\"popupPicker\" [(ngModel)]=\"dialogData['row'][key]\" [ngModelOptions]=\"{standalone: true}\">\n                            <mat-datepicker-toggle matIconSuffix [for]=\"popupPicker\"></mat-datepicker-toggle>\n                            <mat-datepicker #popupPicker></mat-datepicker>\n                        </mat-form-field>\n                    }\n                    <!-- Selection Type -->\n                    @if (types[key] == 'selection') {\n                        <mat-form-field appearance=\"outline\" class=\"inline-editing-field\">\n                            <mat-label>{{key | titlecase}}</mat-label>\n                            <mat-select [value]=\"dialogData['row'][key].value\" [(ngModel)]=\"dialogData['row'][key].value\">\n                                @for (option of dialogData['row'][key].options; track option) {\n                                    <mat-option [value]=\"option\">{{option}}</mat-option>\n                                }\n                            </mat-select>\n                        </mat-form-field>\n                    }\n                    <!-- Boolean Type -->\n                    @if (types[key] == 'boolean') {\n                        <p>\n                            <mat-checkbox color=\"primary\" [(ngModel)]=\"dialogData['row'][key]\">\n                                <mat-label>{{key | titlecase}}</mat-label>\n                            </mat-checkbox>\n                        </p>\n                    }\n                }\n            </div>\n            }\n        </mat-dialog-content>\n        <div class=\"spacer\"></div>\n        <mat-dialog-actions style=\"margin-top: 20px;\" align=\"end\">\n            <button mat-raised-button color=\"warn\" mat-dialog-close>\n                Cancel\n            </button>\n            <button mat-raised-button color=\"primary\" (click)=\"closeDialog()\">Save</button>\n        </mat-dialog-actions>\n    </div>\n}\n@if (templateRef) {\n    <ng-container [ngTemplateOutlet]=\"templateRef\" [ngTemplateOutletContext]=\"{data:{row:templateRow,columns:columns,columnKeys:templateKeys,columnTypes:templateTypes,closeDialog:closeTemplateDialog}}\"></ng-container>\n}", styles: [".main-dialog-container{display:flex;flex-direction:column}.main-dialog-container mat-dialog-content{overflow-y:auto;margin:0;padding:10px 10px 10px 20px}.dialog-title-container{display:flex;align-items:center}.spacer{flex-grow:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i6$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i7.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i7.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i8.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i9.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i9.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1$1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1$1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1$1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i10.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i10.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i10.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "ngmodule", type: MatNativeDateModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: i6.TitleCasePipe, name: "titlecase" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: EditingComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-editing', standalone: true, imports: [
+                        CommonModule,
+                        FormsModule,
+                        MatFormFieldModule,
+                        MatInputModule,
+                        MatSelectModule,
+                        MatCheckboxModule,
+                        MatButtonModule,
+                        MatDialogModule,
+                        MatDatepickerModule,
+                        MatNativeDateModule,
+                        MatIconModule,
+                        TitleCasePipe
+                    ], template: "@if (!templateRef) {\n    <div style=\"height: 100%;\" class=\"main-dialog-container\">\n        <div mat-dialog-title class=\"dialog-title-container\">\n            <h4 style=\"margin: 0;\">{{ isCellEdit ? 'Edit Cell' : 'Edit Row' }}</h4>\n            <span class=\"example-spacer\"></span>\n            <button style=\"margin-right: -10px;\" mat-icon-button aria-label=\"Example icon button with a vertical three dot icon\">\n                <mat-icon mat-dialog-close style=\"cursor: pointer;\" fxFlex=\"5\">close</mat-icon>\n            </button>\n        </div>\n        <mat-dialog-content style=\"margin-right: 20px;\">\n            <!-- Cell-level editing -->\n            @if (isCellEdit) {\n                <div style=\"display: flex; flex-direction: column;\">\n                    <!-- Number Type -->\n                    @if (types[cellField] == 'number') {\n                        <mat-form-field appearance=\"outline\" class=\"inline-editing-field\">\n                            <mat-label>{{cellColumn.header || cellField | titlecase}}</mat-label>\n                            <input matInput type=\"number\" [(ngModel)]=\"cellValue\" [ngModelOptions]=\"{standalone: true}\">\n                        </mat-form-field>\n                    }\n            \n                    <!-- String Type -->\n                    @if (types[cellField] == 'string') {\n                        <mat-form-field appearance=\"outline\" class=\"inline-editing-field\">\n                            <mat-label>{{cellColumn.header || cellField | titlecase}}</mat-label>\n                            <input matInput type=\"text\" [(ngModel)]=\"cellValue\" [ngModelOptions]=\"{standalone: true}\">\n                        </mat-form-field>\n                    }\n                    \n                    <!-- Textarea Type -->\n                    @if (types[cellField] == 'textarea') {\n                        <mat-form-field appearance=\"outline\" class=\"inline-editing-field\">\n                            <mat-label>{{cellColumn.header || cellField | titlecase}}</mat-label>\n                            <textarea matInput rows=\"6\" [(ngModel)]=\"cellValue\" [ngModelOptions]=\"{standalone: true}\"></textarea>\n                        </mat-form-field>\n                    }\n                    \n                    @if (types[cellField] == 'date') {\n                        <mat-form-field appearance=\"outline\" class=\"inline-editing-field\">\n                            <mat-label>{{cellColumn.header || cellField | titlecase}}</mat-label>\n                            <input matInput type=\"text\" [(ngModel)]=\"cellValue\" [ngModelOptions]=\"{standalone: true}\">\n                        </mat-form-field>\n                    }\n                    \n                    <!-- Datepicker Type -->\n                    @if (types[cellField] == 'datepicker') {\n                        <mat-form-field appearance=\"outline\" class=\"inline-editing-field\">\n                            <mat-label>{{cellColumn.header || cellField | titlecase}}</mat-label>\n                            <input matInput [matDatepicker]=\"cellPopupPicker\" [(ngModel)]=\"cellValue\" [ngModelOptions]=\"{standalone: true}\">\n                            <mat-datepicker-toggle matIconSuffix [for]=\"cellPopupPicker\"></mat-datepicker-toggle>\n                            <mat-datepicker #cellPopupPicker></mat-datepicker>\n                        </mat-form-field>\n                    }\n                    \n                    <!-- Selection Type -->\n                    @if (types[cellField] == 'selection') {\n                        <mat-form-field appearance=\"outline\" class=\"inline-editing-field\">\n                            <mat-label>{{cellColumn.header || cellField | titlecase}}</mat-label>\n                            <mat-select [(ngModel)]=\"cellValue\">\n                                @for (option of cellColumn.options; track option) {\n                                    <mat-option [value]=\"option\">{{option}}</mat-option>\n                                }\n                            </mat-select>\n                        </mat-form-field>\n                    }\n                    \n                    <!-- Boolean Type -->\n                    @if (types[cellField] == 'boolean') {\n                        <p>\n                            <mat-checkbox color=\"primary\" [(ngModel)]=\"cellValue\">\n                                <mat-label>{{cellColumn.header || cellField | titlecase}}</mat-label>\n                            </mat-checkbox>\n                        </p>\n                    }\n                </div>\n            }\n            \n            <!-- Row-level editing -->\n            @if (!isCellEdit) {\n                <div style=\"display: flex; flex-direction: column;\">\\n                @for (key of keys; track key) {\n                    <!-- Number Type -->\n                    @if (types[key] == 'number') {\n                        <mat-form-field appearance=\"outline\" class=\"inline-editing-field\">\n                            <mat-label>{{key | titlecase}}</mat-label>\n                            <input matInput type=\"number\" [(ngModel)]=\"dialogData['row'][key]\" [ngModelOptions]=\"{standalone: true}\">\n                        </mat-form-field>\n                    }\n            \n                    <!-- String Type -->\n                    @if (types[key] == 'string') {\n                        <mat-form-field appearance=\"outline\" class=\"inline-editing-field\">\n                            <mat-label>{{key | titlecase}}</mat-label>\n                            <input matInput type=\"text\" [(ngModel)]=\"dialogData['row'][key]\" [ngModelOptions]=\"{standalone: true}\">\n                        </mat-form-field>\n                    }\n                    <!-- Textarea Type -->\n                    @if (types[key] == 'textarea') {\n                        <mat-form-field appearance=\"outline\" class=\"inline-editing-field\">\n                            <mat-label>{{key | titlecase}}</mat-label>\n                            <textarea matInput rows=\"4\" [(ngModel)]=\"dialogData['row'][key]\" [ngModelOptions]=\"{standalone: true}\"></textarea>\n                        </mat-form-field>\n                    }\n                    @if (types[key] == 'date') {\n                        <mat-form-field appearance=\"outline\" class=\"inline-editing-field\">\n                            <mat-label>{{key | titlecase}}</mat-label>\n                            <input matInput type=\"text\" [(ngModel)]=\"dialogData['row'][key]\" [ngModelOptions]=\"{standalone: true}\">\n                        </mat-form-field>\n                    }\n                    <!-- Datepicker Type -->\n                    @if (types[key] == 'datepicker') {\n                        <mat-form-field appearance=\"outline\" class=\"inline-editing-field\">\n                            <mat-label>{{key | titlecase}}</mat-label>\n                            <input matInput [matDatepicker]=\"popupPicker\" [(ngModel)]=\"dialogData['row'][key]\" [ngModelOptions]=\"{standalone: true}\">\n                            <mat-datepicker-toggle matIconSuffix [for]=\"popupPicker\"></mat-datepicker-toggle>\n                            <mat-datepicker #popupPicker></mat-datepicker>\n                        </mat-form-field>\n                    }\n                    <!-- Selection Type -->\n                    @if (types[key] == 'selection') {\n                        <mat-form-field appearance=\"outline\" class=\"inline-editing-field\">\n                            <mat-label>{{key | titlecase}}</mat-label>\n                            <mat-select [value]=\"dialogData['row'][key].value\" [(ngModel)]=\"dialogData['row'][key].value\">\n                                @for (option of dialogData['row'][key].options; track option) {\n                                    <mat-option [value]=\"option\">{{option}}</mat-option>\n                                }\n                            </mat-select>\n                        </mat-form-field>\n                    }\n                    <!-- Boolean Type -->\n                    @if (types[key] == 'boolean') {\n                        <p>\n                            <mat-checkbox color=\"primary\" [(ngModel)]=\"dialogData['row'][key]\">\n                                <mat-label>{{key | titlecase}}</mat-label>\n                            </mat-checkbox>\n                        </p>\n                    }\n                }\n            </div>\n            }\n        </mat-dialog-content>\n        <div class=\"spacer\"></div>\n        <mat-dialog-actions style=\"margin-top: 20px;\" align=\"end\">\n            <button mat-raised-button color=\"warn\" mat-dialog-close>\n                Cancel\n            </button>\n            <button mat-raised-button color=\"primary\" (click)=\"closeDialog()\">Save</button>\n        </mat-dialog-actions>\n    </div>\n}\n@if (templateRef) {\n    <ng-container [ngTemplateOutlet]=\"templateRef\" [ngTemplateOutletContext]=\"{data:{row:templateRow,columns:columns,columnKeys:templateKeys,columnTypes:templateTypes,closeDialog:closeTemplateDialog}}\"></ng-container>\n}", styles: [".main-dialog-container{display:flex;flex-direction:column}.main-dialog-container mat-dialog-content{overflow-y:auto;margin:0;padding:10px 10px 10px 20px}.dialog-title-container{display:flex;align-items:center}.spacer{flex-grow:1}\n"] }]
+        }], ctorParameters: () => [{ type: i1$1.MatDialogRef }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MAT_DIALOG_DATA]
+                }] }, { type: MatTableExtService }] });
+
+class ColumnPinningComponent {
+    constructor() {
+        this.columnsChanged = new EventEmitter();
+        this.icons = {
+            left: 'pinLeft',
+            right: 'pinRight',
+            none: 'pinNone',
+        };
+    }
+    ngOnInit() { }
+    /**
+     * @description This method is called when pin value changes for a column.
+     * @param column column of which to set the pin value
+     */
+    changeValue(column) {
+        if (column.pinned) {
+            if (column.pinned == 'left') {
+                this.setColumnPinValue(column, 'right');
+            }
+            else if (column.pinned == 'right') {
+                this.setColumnPinValue(column, null);
+            }
+        }
+        else {
+            this.setColumnPinValue(column, 'left');
+        }
+        // Create a new array reference to trigger change detection
+        this.columnsChanged.emit([...this.columns]);
+    }
+    /**
+     * @description This method is used to set the column pin value.
+     * @param column column of which to set the pin value
+     * @param value pin value to set
+     */
+    setColumnPinValue(column, value) {
+        // Create a new array with updated column
+        this.columns = this.columns.map(col => {
+            if (column?.field == col.field) {
+                return { ...col, pinned: value };
+            }
+            return col;
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: ColumnPinningComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.5", type: ColumnPinningComponent, isStandalone: true, selector: "app-column-pinning", inputs: { columns: "columns" }, outputs: { columnsChanged: "columnsChanged" }, ngImport: i0, template: "@for (column of columns; track column.field) {\n    <div class=\"pinning-list-item\">\n        <button mat-icon-button (click)=\"changeValue(column)\">\n            <mat-icon matTooltip=\"{{column['pinned'] ? (column['pinned'] | titlecase) : 'None'}}\"\n                svgIcon=\"{{column['pinned'] == 'left' || column['pinned'] == 'right' ? icons[column['pinned']] : 'pinNone'}}\"\n                class=\"pinning-icon\"></mat-icon>\n        </button>\n        <span class=\"column-headers\">{{column.header}}</span>\n    </div>\n}", styles: [".pinning-list-item{display:flex;justify-content:flex-start;align-items:center;gap:12px;height:3em}.column-headers{font-family:Roboto,Helvetica Neue,sans-serif;font-size:14px}button[mat-icon-button]{background:none;border:none;outline:none;padding:0;line-height:normal;display:flex;align-items:center;justify-content:center}button[mat-icon-button]:focus{outline:none}.pinning-icon{font-size:24px;line-height:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: i6.TitleCasePipe, name: "titlecase" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: ColumnPinningComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-column-pinning', standalone: true, imports: [
+                        CommonModule,
+                        MatIconModule,
+                        MatTooltipModule,
+                        TitleCasePipe
+                    ], template: "@for (column of columns; track column.field) {\n    <div class=\"pinning-list-item\">\n        <button mat-icon-button (click)=\"changeValue(column)\">\n            <mat-icon matTooltip=\"{{column['pinned'] ? (column['pinned'] | titlecase) : 'None'}}\"\n                svgIcon=\"{{column['pinned'] == 'left' || column['pinned'] == 'right' ? icons[column['pinned']] : 'pinNone'}}\"\n                class=\"pinning-icon\"></mat-icon>\n        </button>\n        <span class=\"column-headers\">{{column.header}}</span>\n    </div>\n}", styles: [".pinning-list-item{display:flex;justify-content:flex-start;align-items:center;gap:12px;height:3em}.column-headers{font-family:Roboto,Helvetica Neue,sans-serif;font-size:14px}button[mat-icon-button]{background:none;border:none;outline:none;padding:0;line-height:normal;display:flex;align-items:center;justify-content:center}button[mat-icon-button]:focus{outline:none}.pinning-icon{font-size:24px;line-height:1}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { columns: [{
+                type: Input
+            }], columnsChanged: [{
+                type: Output
+            }] } });
+
+class FilterColumnsComponentComponent {
+    constructor() {
+        this.filterOutput = new EventEmitter();
+        this.stringCtrl = new FormControl();
+        this.numberCtrl = new FormControl();
+        this.dateCtrl = new FormControl();
+        this.textareaCtrl = new FormControl();
+        this.booleanCtrl = new FormControl();
+        this.selectionCtrl = new FormControl();
+    }
+    ngOnInit() {
+        this.stringCtrl.valueChanges.subscribe((value) => {
+            this.checkValue(value);
+        });
+        this.dateCtrl.valueChanges.subscribe((value) => {
+            this.checkValue(value);
+        });
+        this.textareaCtrl.valueChanges.subscribe((value) => {
+            this.checkValue(value);
+        });
+        this.numberCtrl.valueChanges.subscribe((value) => {
+            this.checkValue(value);
+        });
+        this.booleanCtrl.valueChanges.subscribe((value) => {
+            this.checkValue(value);
+        });
+        this.selectionCtrl.valueChanges.subscribe((value) => {
+            this.checkValue(value);
+        });
+    }
+    /**
+     * @description This method is make value is valid and not null.
+     * @param value value to check its type.
+     */
+    checkValue(value) {
+        if (value || value == '') {
+            this.emitOutput(value);
+        }
+        else if (value == null) {
+            this.emitOutput('');
+        }
+    }
+    /**
+     * @description This method will emit seach value to parent component.
+     * @param value value on which base table rows are filtered.
+     */
+    emitOutput(value) {
+        let obj = { [this.obj.field]: value };
+        this.filterOutput.emit(obj);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: FilterColumnsComponentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.5", type: FilterColumnsComponentComponent, isStandalone: true, selector: "app-filter-columns-component", inputs: { obj: "obj" }, outputs: { filterOutput: "filterOutput" }, ngImport: i0, template: "\n@if (obj) {\n    <!-- Number Type -->\n    @if (obj.type == 'number') {\n        <mat-form-field appearance=\"outline\" class=\"inline-editing-field\" >\n            <input matInput type=\"number\" [formControl]=\"numberCtrl\">\n        </mat-form-field>\n    }\n    \n    <!-- String Type -->\n    @if (obj.type == 'string') {\n        <mat-form-field appearance=\"outline\" class=\"inline-editing-field\">\n            <input matInput type=\"text\" [formControl]=\"stringCtrl\">\n        </mat-form-field>\n    }\n    @if (obj.type == 'textarea') {\n        <mat-form-field appearance=\"outline\" class=\"inline-editing-field\">\n            <textarea matInput rows=\"3\" [formControl]=\"textareaCtrl\"></textarea>\n        </mat-form-field>\n    }\n    @if (obj.type == 'date') {\n        <mat-form-field appearance=\"outline\" class=\"inline-editing-field\">\n            <input matInput type=\"date\" [formControl]=\"dateCtrl\">\n        </mat-form-field>\n    }\n        @if (obj.type == 'datepicker') {\n        <mat-form-field appearance=\"outline\" class=\"inline-editing-field\">\n            <input matInput [matDatepicker]=\"cellPicker\" [formControl]=\"dateCtrl\">\n            <mat-datepicker-toggle matIconSuffix [for]=\"cellPicker\"></mat-datepicker-toggle>\n            <mat-datepicker #cellPicker></mat-datepicker>\n        </mat-form-field>\n        }\n    <!-- Selection Type -->\n    @if (obj.type == 'selection') {\n        <mat-form-field appearance=\"outline\" class=\"inline-editing-field\">\n            <mat-select [value]=\"\" [formControl]=\"selectionCtrl\">\n                @for (option of obj.options; track option) {\n                    <mat-option [value]=\"option\">{{option}}</mat-option>\n                }\n            </mat-select>\n        </mat-form-field>\n    }\n    <!-- Boolean Type -->\n    @if (obj.type == 'boolean') {\n        <mat-checkbox (click)=\"$event.stopPropagation()\" color=\"primary\" [formControl]=\"booleanCtrl\"></mat-checkbox>\n    }\n}", styles: [".inline-editing-field{width:100%;min-width:none!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i6$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i7.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i7.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i8.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i10.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i10.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i10.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: FilterColumnsComponentComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-filter-columns-component', standalone: true, imports: [
+                        CommonModule,
+                        ReactiveFormsModule,
+                        MatFormFieldModule,
+                        MatInputModule,
+                        MatSelectModule,
+                        MatCheckboxModule,
+                        MatDatepickerModule
+                    ], template: "\n@if (obj) {\n    <!-- Number Type -->\n    @if (obj.type == 'number') {\n        <mat-form-field appearance=\"outline\" class=\"inline-editing-field\" >\n            <input matInput type=\"number\" [formControl]=\"numberCtrl\">\n        </mat-form-field>\n    }\n    \n    <!-- String Type -->\n    @if (obj.type == 'string') {\n        <mat-form-field appearance=\"outline\" class=\"inline-editing-field\">\n            <input matInput type=\"text\" [formControl]=\"stringCtrl\">\n        </mat-form-field>\n    }\n    @if (obj.type == 'textarea') {\n        <mat-form-field appearance=\"outline\" class=\"inline-editing-field\">\n            <textarea matInput rows=\"3\" [formControl]=\"textareaCtrl\"></textarea>\n        </mat-form-field>\n    }\n    @if (obj.type == 'date') {\n        <mat-form-field appearance=\"outline\" class=\"inline-editing-field\">\n            <input matInput type=\"date\" [formControl]=\"dateCtrl\">\n        </mat-form-field>\n    }\n        @if (obj.type == 'datepicker') {\n        <mat-form-field appearance=\"outline\" class=\"inline-editing-field\">\n            <input matInput [matDatepicker]=\"cellPicker\" [formControl]=\"dateCtrl\">\n            <mat-datepicker-toggle matIconSuffix [for]=\"cellPicker\"></mat-datepicker-toggle>\n            <mat-datepicker #cellPicker></mat-datepicker>\n        </mat-form-field>\n        }\n    <!-- Selection Type -->\n    @if (obj.type == 'selection') {\n        <mat-form-field appearance=\"outline\" class=\"inline-editing-field\">\n            <mat-select [value]=\"\" [formControl]=\"selectionCtrl\">\n                @for (option of obj.options; track option) {\n                    <mat-option [value]=\"option\">{{option}}</mat-option>\n                }\n            </mat-select>\n        </mat-form-field>\n    }\n    <!-- Boolean Type -->\n    @if (obj.type == 'boolean') {\n        <mat-checkbox (click)=\"$event.stopPropagation()\" color=\"primary\" [formControl]=\"booleanCtrl\"></mat-checkbox>\n    }\n}", styles: [".inline-editing-field{width:100%;min-width:none!important}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { obj: [{
+                type: Input
+            }], filterOutput: [{
+                type: Output
+            }] } });
+
+class ResizeColumnDirective {
+    set columnsResizable(val) {
+        this.columnsResizable$ = val;
+    }
+    get columnsResizable() {
+        return this.columnsResizable$;
+    }
+    constructor() {
+        this.renderer = inject(Renderer2);
+        this.elementRef = inject((ElementRef));
+        this.columnsResizable$ = false;
+        this.startX = 0;
+        this.startWidth = 0;
+        this.table = null;
+        this.pressed = false;
+        this.resizerElement = null;
+        this.onMouseDown = (event) => {
+            this.pressed = true;
+            this.startX = event.pageX;
+            this.startWidth = this.column.offsetWidth;
+        };
+        this.onMouseMove = (event) => {
+            const offset = 5;
+            if (this.pressed && event.buttons && this.table) {
+                this.renderer.addClass(this.table, "resizing");
+                // Calculate width of column
+                const width = this.startWidth + (event.pageX - this.startX - offset);
+                // Get table cells for this column index
+                const tableRows = this.table.querySelectorAll(".mat-mdc-row");
+                const tableCells = Array.from(tableRows).map((row) => row.querySelectorAll(".mat-mdc-cell").item(this.index));
+                // Set table header width
+                this.renderer.setStyle(this.column, "width", `${width}px`);
+                // Set table cells width
+                tableCells.forEach((cell) => {
+                    if (cell instanceof HTMLElement) {
+                        this.renderer.setStyle(cell, "width", `${width}px`);
+                    }
+                });
+            }
+        };
+        this.onMouseUp = (event) => {
+            if (this.pressed && this.table) {
+                this.pressed = false;
+                this.renderer.removeClass(this.table, "resizing");
+            }
+        };
+        this.column = this.elementRef.nativeElement;
+    }
+    ngOnInit() {
+        this.setupResizing();
+    }
+    ngOnChanges() {
+        this.setupResizing();
+    }
+    ngOnDestroy() {
+        this.cleanup();
+    }
+    setupResizing() {
+        if (this.columnsResizable$) {
+            this.initializeResizer();
+        }
+        else {
+            this.removeDragElementFromDom();
+        }
+    }
+    initializeResizer() {
+        const row = this.renderer.parentNode(this.column);
+        const thead = this.renderer.parentNode(row);
+        this.table = this.renderer.parentNode(thead);
+        this.resizerElement = this.renderer.createElement("span");
+        this.renderer.addClass(this.resizerElement, "resize-holder");
+        this.renderer.setAttribute(this.resizerElement, 'id', `resizeHolderSpan-${this.index}`);
+        this.renderer.appendChild(this.column, this.resizerElement);
+        this.renderer.listen(this.resizerElement, "mousedown", this.onMouseDown);
+        this.renderer.listen(this.table, "mousemove", this.onMouseMove);
+        this.renderer.listen("document", "mouseup", this.onMouseUp);
+    }
+    cleanup() {
+        this.removeDragElementFromDom();
+    }
+    /**
+     * @description This method is used to remove resizing handlers from the table headers when column resizing is disabled.
+     */
+    removeDragElementFromDom() {
+        if (this.resizerElement) {
+            this.renderer.removeChild(this.column, this.resizerElement);
+            this.resizerElement = null;
+        }
+        // Also remove any existing resizer elements with the old ID pattern
+        const existingElement = document.getElementById(`resizeHolderSpan-${this.index}`);
+        if (existingElement) {
+            this.renderer.removeChild(this.column, existingElement);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: ResizeColumnDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.5", type: ResizeColumnDirective, isStandalone: true, selector: "[columnsResizable]", inputs: { columnsResizable: "columnsResizable", index: "index" }, usesOnChanges: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: ResizeColumnDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[columnsResizable]",
+                    standalone: true
+                }]
+        }], ctorParameters: () => [], propDecorators: { columnsResizable: [{
+                type: Input
+            }], index: [{
+                type: Input
+            }] } });
+
+class MatTableExtComponent {
+    constructor(dialog, service, formBuilder, domSanitizer, matIconRegistry, cdr) {
+        this.dialog = dialog;
+        this.service = service;
+        this.formBuilder = formBuilder;
+        this.domSanitizer = domSanitizer;
+        this.matIconRegistry = matIconRegistry;
+        this.cdr = cdr;
+        this.columns = [];
+        this.columnResizable = false;
+        this.stripedRows = false;
+        this.rowHover = false;
+        this.inlineRowEditing = false;
+        this.inCellEditing = false;
+        this.cellPopupEditing = false;
+        this.popupRowEditing = false;
+        this.enableDelete = false;
+        this.rowSelection = false;
+        this.multiRowSelection = false;
+        this.stickyFooter = false;
+        this.stickyHeader = false;
+        this.showFooterRow = false;
+        this.columnFilter = false;
+        this.loadingIndicator = false;
+        this.sorting = false;
+        this.showToolbar = false;
+        this.toolbarTitle = '';
+        this.tableHeight = '';
+        this.toolbarHeight = '50px';
+        this.tableWidth = '100%';
+        this.scrollbarH = false;
+        this.columnHidable = false;
+        this.columnPinnable = false;
+        this.globalSearch = false;
+        this.expandRows = false;
+        this.dndColumns = false;
+        this.showPaginator = true;
+        this.showFirstLastButtons = false;
+        this.exportButtonEnable = false;
+        this.printButtonEnable = false;
+        this.pageSizeOptions = [10, 50, 100];
+        this.cellTemplateRefMap = {};
+        this.tableClassName = '';
+        this.columnGroups = [];
+        this.hiddenRowIndices = [];
+        this.enableRowHiding = false;
+        this.enableRowPinning = false;
+        this.topPinnedMaxHeight = ''; // Max height for top pinned table (e.g., '200px', '20vh')
+        this.bottomPinnedMaxHeight = ''; // Max height for bottom pinned table (e.g., '200px', '20vh')
+        this.pdfOrientation = 'portrait';
+        // Table outputs
+        this.inlineChange = new EventEmitter();
+        this.cellChange = new EventEmitter();
+        this.popupChange = new EventEmitter();
+        this.rowDeleted = new EventEmitter();
+        this.scroll = new EventEmitter();
+        this.selectionChanged = new EventEmitter();
+        this.expansionChange = new EventEmitter();
+        this.rowPinningChange = new EventEmitter();
+        this.tableID = new Date().getTime();
+        this.columnPinningOptions = [];
+        this.exportMenuCtrl = false;
+        this.columnPinMenuCtrl = false;
+        this.hideShowMenuCtrl = false;
+        this.rowDataTemp = {};
+        this.inlineEditingTemplateRefData = {};
+        this.displayedColumns = [];
+        this.showHideColumnsArray = [];
+        this.columnsList = [];
+        this.columnsArray = [];
+        this.headersFiltersIds = [];
+        this.columnsToDisplayWithExpand = [];
+        this.selection = new SelectionModel(false, []);
+        this.hiddenCtrl = new SelectionModel(true, []);
+        this.tableData = [];
+        this.filterValues = {};
+        this.pinnedTopRows = [];
+        this.pinnedBottomRows = [];
+        this.rowPinMenuPosition = { x: '0px', y: '0px' };
+        this.rowPinMenuRow = null;
+        this.globalFilter = '';
+        this.showHideFilter = '';
+        this.individualFilter = '';
+        this.toggleFilters = false;
+        this.hideRows = false;
+        this.currentRowIndex = -1;
+        this.currentRow = {};
+        this.cellEditing = {};
+        // Store original sizes before entering edit mode
+        this.originalSizesBeforeEdit = null;
+        this.hideShowMenuGroup = this.formBuilder.group({});
+        this.menuX = 0;
+        this.menuY = 0;
+        this.dynamicDisplayedColumns = [
+            { filter: false, name: 'select', show: false },
+            { filter: false, name: 'edit', show: false },
+            { filter: false, name: 'popup', show: false },
+            { filter: false, name: 'delete', show: false },
+            { filter: false, name: 'freeze', show: false },
+            { filter: false, name: 'hide', show: false },
+            { filter: false, name: 'pin', show: false },
+            { filter: false, name: 'expand', show: false },
+        ];
+        this.inputPropertyKeys = [
+            'dataSource',
+            'columns',
+            'inlineRowEditing',
+            'popupRowEditing',
+            'enableDelete',
+            'enableRowFreezing',
+            'enableRowHiding',
+            'enableRowPinning',
+            'rowSelection',
+            'multiRowSelection',
+            'stickyHeader',
+            'stickyFooter',
+            'columnFilter',
+            'globalSearch',
+            'expandRows',
+            'sorting',
+            'columnGroups',
+        ];
+        this.onWindowResizeBound = () => {
+            this.updatePinnedRowOffsets();
+            this.syncColumnSizesFromTop();
+        };
+        /**
+         * @description This mapping is used to set and update changesin the table.
+         */
+        this.setPropertiesMap = {
+            dataSource: (value) => this.setTableDataSource(value),
+            columns: (value) => this.setColumnsData(value.currentValue),
+            inlineRowEditing: (value) => this.showHideColumn('edit', value.currentValue),
+            popupRowEditing: (value) => this.showHideColumn('popup', value.currentValue),
+            enableDelete: (value) => this.showHideColumn('delete', value.currentValue),
+            enableRowFreezing: (value) => this.showHideColumn('freeze', value.currentValue),
+            enableRowHiding: (value) => this.showHideColumn('hide', value.currentValue),
+            enableRowPinning: (value) => {
+                this.showHideColumn('pin', value.currentValue);
+                if (value.currentValue) {
+                    this.initializePinnedRows();
+                }
+            },
+            rowSelection: (value) => this.setRowSelection(value.currentValue),
+            multiRowSelection: (value) => {
+                this.selection = new SelectionModel(value.currentValue, []);
+            },
+            stickyHeader: (value) => {
+                this.stickyHeader = value.currentValue;
+                // Recalculate pinned row offsets when sticky header changes
+                setTimeout(() => this.updatePinnedRowOffsets(), 100);
+            },
+            stickyFooter: (value) => {
+                this.stickyFooter = value.currentValue;
+                // Recalculate pinned row offsets when sticky footer changes
+                setTimeout(() => this.updatePinnedRowOffsets(), 100);
+            },
+            columnFilter: (value) => this.setColumnFilter(value.currentValue),
+            globalSearch: (value) => (this.dataSource.filterPredicate = this.createFilter()),
+            expandRows: (value) => {
+                this.loadingIndicator = true;
+                this.dataSource = new MatTableDataSource(this.tableData);
+                if (value.currentValue == true) {
+                    if (!this.displayedColumns.includes('expand')) {
+                        this.displayedColumns.push('expand');
+                        this.columnsToDisplayWithExpand = [...this.displayedColumns];
+                    }
+                }
+                else {
+                    this.columnsToDisplayWithExpand = [...this.displayedColumns];
+                    if (this.displayedColumns.includes('expand')) {
+                        let index = this.displayedColumns.indexOf('expand');
+                        this.displayedColumns.splice(index, 1);
+                    }
+                    this.expandedElement = null;
+                }
+                setTimeout(() => {
+                    this.loadingIndicator = false;
+                }, 200);
+            },
+            sorting: (value) => {
+                this.dataSource.sort = this.sort;
+                if (this.enableRowPinning) {
+                    this.pinnedTopDataSource.sort = this.sort;
+                    this.pinnedBtmDataSource.sort = this.sort;
+                }
+            },
+            columnGroups: (value) => {
+                this.columnGroups = value.currentValue || [];
+                this.cdr.detectChanges();
+                // When group headers change, re-sync column sizes for pinned tables
+                if (this.enableRowPinning) {
+                    setTimeout(() => this.syncColumnSizesFromTop(), 80);
+                }
+            },
+        };
+        /**
+         * @description Check if row is pinned to top (for CSS class binding)
+         */
+        this.isRowPinnedTop = (row) => {
+            return this.pinnedTopRows.includes(row);
+        };
+        /**
+         * @description Check if row is pinned to bottom (for CSS class binding)
+         */
+        this.isRowPinnedBottom = (row) => {
+            return this.pinnedBottomRows.includes(row);
+        };
+        /**
+         * @description This method will take data from inline editing template and update in table data source.
+         * @param row updated row from inline editing template.
+         */
+        this.updateInlineTemplateData = (row) => {
+            this.service.selectedRow.next(row);
+        };
+        this.addIconsToRegistry();
+        if (this.dataSource) {
+            this.tableData = this.dataSource.data;
+        }
+    }
+    /**
+     *
+     * @param changes changes captured each time user changes property value.
+     */
+    /**
+   * Handle column pinning changes from ColumnPinningComponent
+   * @param updatedColumns Updated columns array with new pinning states
+   */
+    updateColumns(updatedColumns) {
+        // Create a completely new columnsArray to trigger change detection
+        this.columnsArray = updatedColumns.map(col => ({ ...col }));
+        // Update showHideColumnsArray to keep it in sync
+        this.showHideColumnsArray = [...this.columnsArray];
+        // Re-apply column configurations
+        this.setColumnsList(this.columnsArray);
+        // Force complete table re-render by recreating the data source
+        if (this.dataSource) {
+            const currentData = [...this.dataSource.data];
+            this.dataSource = new MatTableDataSource(currentData);
+            this.pinnedTopDataSource = new MatTableDataSource(this.pinnedTopRows);
+            this.pinnedBtmDataSource = new MatTableDataSource(this.pinnedBottomRows);
+            this.reCal(); // Re-apply paginator, sort, and filter
+        }
+        if (this.columnFilter) {
+            this.setColumnFilter(true);
+        }
+        // Force change detection
+        this.cdr.markForCheck();
+        this.cdr.detectChanges();
+        // Re-sync column sizes in case column ordering/visibility changed
+        if (this.enableRowPinning) {
+            setTimeout(() => this.syncColumnSizesFromTop(), 80);
+        }
+    }
+    ngOnChanges(changes) {
+        this.setPropertyValue(changes);
+    }
+    ngOnInit() {
+        if (this.dataSource) {
+            this.dataSource.filterPredicate = this.createFilter();
+        }
+        // Initialize FormGroup if not already initialized
+        if (!this.hideShowMenuGroup || Object.keys(this.hideShowMenuGroup.controls).length === 0) {
+            this.hideShowMenuGroup = this.formBuilder.group({});
+        }
+        // Initialize pinned rows if function provided
+        if (this.enableRowPinning) {
+            this.initializePinnedRows();
+        }
+    }
+    ngAfterViewInit() {
+        if (this.dataSource) {
+            this.dataSource.paginator = this.paginator;
+            this.dataSource.sort = this.sort;
+            if (this.enableRowPinning) {
+                this.pinnedTopDataSource.sort = this.sort;
+                this.pinnedBtmDataSource.sort = this.sort;
+            }
+        }
+        // Calculate and set pinned row offsets
+        this.updatePinnedRowOffsets();
+        // Sync column sizes from top table to middle/bottom when pinning enabled
+        if (this.enableRowPinning) {
+            setTimeout(() => this.syncColumnSizesFromTop(), 150);
+            window.addEventListener('resize', this.onWindowResizeBound);
+        }
+    }
+    /**
+     * @description Calculate offsets for pinned rows based on sticky headers/footers
+     */
+    updatePinnedRowOffsets() {
+        if (!this.tableElement?.nativeElement || !this.enableRowPinning)
+            return;
+        setTimeout(() => {
+            const table = this.tableElement.nativeElement;
+            // Calculate top offset (sticky header + group header + filter row)
+            let topOffset = 0;
+            if (this.stickyHeader) {
+                // Get all header rows that are sticky
+                const headerRows = table.querySelectorAll('.mat-mdc-header-row');
+                headerRows.forEach((header) => {
+                    topOffset += header.offsetHeight;
+                });
+            }
+            // Calculate bottom offset (sticky footer + paginator)
+            let bottomOffset = 0;
+            if (this.stickyFooter) {
+                const footerRow = table.querySelector('.mat-mdc-footer-row');
+                if (footerRow) {
+                    bottomOffset += footerRow.offsetHeight;
+                }
+            }
+            // Set base offsets
+            table.style.setProperty('--pinned-top-base-offset', `${topOffset}px`);
+            table.style.setProperty('--pinned-bottom-base-offset', `${bottomOffset}px`);
+            // Calculate and set individual row offsets for stacked pinned rows
+            this.updateStackedPinnedRowOffsets(table, topOffset, bottomOffset);
+            // After offsets are updated, ensure column sizes are re-synced
+            if (this.enableRowPinning) {
+                setTimeout(() => this.syncColumnSizesFromTop(), 10);
+            }
+            console.log('Pinned row offsets:', { topOffset, bottomOffset });
+        }, 100);
+    }
+    /**
+     * @description Update offsets for each individual pinned row to stack them
+     */
+    updateStackedPinnedRowOffsets(table, baseTopOffset, baseBottomOffset) {
+        // Use setTimeout to ensure DOM is fully rendered with pinned classes
+        setTimeout(() => {
+            // Handle top pinned rows - stack them from top to bottom
+            const topPinnedRows = table.querySelectorAll('.pinned-top-row');
+            let currentTopOffset = baseTopOffset;
+            topPinnedRows.forEach((row, index) => {
+                const htmlRow = row;
+                htmlRow.style.setProperty('--pinned-row-top-offset', `${currentTopOffset}px`);
+                htmlRow.style.top = `${currentTopOffset}px`;
+                // Add current row height to offset for next row
+                if (index < topPinnedRows.length - 1) {
+                    currentTopOffset += htmlRow.offsetHeight;
+                }
+            });
+            // Handle bottom pinned rows - stack them from bottom to top
+            const bottomPinnedRows = table.querySelectorAll('.pinned-bottom-row');
+            let currentBottomOffset = baseBottomOffset;
+            // Process bottom rows in reverse order (from bottom to top)
+            for (let i = bottomPinnedRows.length - 1; i >= 0; i--) {
+                const htmlRow = bottomPinnedRows[i];
+                htmlRow.style.setProperty('--pinned-row-bottom-offset', `${currentBottomOffset}px`);
+                htmlRow.style.bottom = `${currentBottomOffset}px`;
+                // Add current row height to offset for next row (going upward)
+                if (i > 0) {
+                    currentBottomOffset += htmlRow.offsetHeight;
+                }
+            }
+            // After stacking offsets are applied, re-sync column sizes to handle any layout changes
+            if (this.enableRowPinning) {
+                setTimeout(() => this.syncColumnSizesFromTop(), 60);
+            }
+        }, 50);
+    }
+    /**
+     * Copy header cell widths/heights from the top table and apply them to middle and bottom tables.
+     * This ensures columns line up when the middle/bottom tables don't render headers.
+     */
+    syncColumnSizesFromTop() {
+        if (!this.enableRowPinning)
+            return;
+        try {
+            const topId = `matTableExtTop${this.tableID}`;
+            const bottomId = `matTableExtBtm${this.tableID}`;
+            const topTable = document.getElementById(topId);
+            const middleTable = document.getElementById(`matTableExt${this.tableID}`);
+            const bottomTable = document.getElementById(bottomId);
+            if (!topTable)
+                return;
+            const headerRow = topTable.querySelector('tr.mat-mdc-header-row:not(.group-header-row), tr.mat-header-row:not(.group-header-row), thead tr:not(.group-header-row)');
+            if (!headerRow)
+                return;
+            const headerCells = Array.from(headerRow.querySelectorAll('th, .mat-header-cell'));
+            if (!headerCells.length)
+                return;
+            const topTableWidth = topTable.getBoundingClientRect().width;
+            [middleTable, bottomTable].forEach(tbl => {
+                if (!tbl)
+                    return;
+                tbl.style.width = topTable.style.width && topTable.style.width !== '' ? topTable.style.width : `${topTableWidth}px`;
+            });
+            // Use the header row height as the canonical row height to apply
+            const headerRowHeight = Math.round(headerRow.getBoundingClientRect().height);
+            headerCells.forEach((hc, index) => {
+                const rect = hc.getBoundingClientRect();
+                const w = Math.round(rect.width);
+                [middleTable, bottomTable].forEach(tbl => {
+                    if (!tbl)
+                        return;
+                    // If a placeholder header exists in the target table, set its cell sizes
+                    const placeholderHeader = tbl.querySelector('tr.mat-mdc-header-row, tr.mat-header-row');
+                    if (placeholderHeader) {
+                        const phCells = placeholderHeader.querySelectorAll('th, .mat-header-cell');
+                        if (phCells && phCells[index]) {
+                            const el = phCells[index];
+                            el.style.minWidth = `${w}px`;
+                            el.style.maxWidth = `${w}px`;
+                            el.style.boxSizing = 'border-box';
+                            el.style.height = `${headerRowHeight}px`;
+                            el.style.minHeight = `${headerRowHeight}px`;
+                            el.style.maxHeight = `${headerRowHeight}px`;
+                        }
+                    }
+                    // Apply widths/heights directly to data cells (in case header placeholder is not present)
+                    const dataRow = tbl.querySelector('tr.mat-mdc-row, tr.mat-row');
+                    if (dataRow) {
+                        const dataCells = dataRow.querySelectorAll('td, .mat-cell');
+                        if (dataCells && dataCells[index]) {
+                            const cel = dataCells[index];
+                            cel.style.minWidth = `${w}px`;
+                            cel.style.maxWidth = `${w}px`;
+                            cel.style.boxSizing = 'border-box';
+                            cel.style.height = `${headerRowHeight}px`;
+                            cel.style.minHeight = `${headerRowHeight}px`;
+                            cel.style.maxHeight = `${headerRowHeight}px`;
+                        }
+                        // Set every data row's height to match the header row height for visual alignment
+                        const rows = tbl.querySelectorAll('tr.mat-mdc-row, tr.mat-row');
+                        rows.forEach((r) => {
+                            const reh = r;
+                            reh.style.height = `${headerRowHeight}px`;
+                            reh.style.minHeight = `${headerRowHeight}px`;
+                            reh.style.maxHeight = `${headerRowHeight}px`;
+                        });
+                    }
+                });
+            });
+        }
+        catch (err) {
+            console.warn('syncColumnSizesFromTop failed', err);
+        }
+    }
+    /**
+     * Sync column sizes from the currently edited row in the middle table to top/bottom tables.
+     * This ensures proper alignment when a row is in edit mode with different height.
+     */
+    syncColumnSizesFromEditedRow(editedRowIndex) {
+        if (!this.enableRowPinning)
+            return;
+        try {
+            const topTable = document.getElementById(`matTableExtTop${this.tableID}`);
+            if (!topTable)
+                return;
+            // Capture original sizes from the top table header before modifying
+            if (!this.originalSizesBeforeEdit) {
+                const headerRow = topTable.querySelector('tr.mat-mdc-header-row:not(.group-header-row), tr.mat-header-row:not(.group-header-row)');
+                if (headerRow) {
+                    const headerCells = Array.from(headerRow.querySelectorAll('th, .mat-header-cell'));
+                    const headerRowHeight = Math.round(headerRow.getBoundingClientRect().height);
+                    const columnWidths = headerCells.map(cell => Math.round(cell.getBoundingClientRect().width));
+                    this.originalSizesBeforeEdit = {
+                        columnWidths,
+                        rowHeight: headerRowHeight
+                    };
+                }
+            }
+            const middleTable = document.getElementById(`matTableExt${this.tableID}`);
+            const bottomTable = document.getElementById(`matTableExtBtm${this.tableID}`);
+            if (!middleTable || !topTable)
+                return;
+            // Find the edited row in the middle table
+            const editedRow = middleTable.querySelector(`tr.mat-mdc-row:nth-child(${editedRowIndex + 1})`);
+            if (!editedRow) {
+                // Fallback to normal sync if edited row not found
+                this.syncColumnSizesFromTop();
+                return;
+            }
+            const editedCells = Array.from(editedRow.querySelectorAll('td, .mat-cell'));
+            if (!editedCells.length)
+                return;
+            // Get the height of the edited row
+            const editedRowHeight = Math.round(editedRow.getBoundingClientRect().height);
+            // Sync widths and heights from edited row to top and bottom tables
+            // First, collect all widths in a single pass (layout read)
+            const cellWidths = editedCells.map(cell => Math.round(cell.getBoundingClientRect().width));
+            // Then, apply style changes in a separate pass (layout write)
+            cellWidths.forEach((w, index) => {
+                [topTable, bottomTable].forEach(tbl => {
+                    if (!tbl)
+                        return;
+                    // Update header cells in top table
+                    if (tbl === topTable) {
+                        const headerRow = tbl.querySelector('tr.mat-mdc-header-row:not(.group-header-row), tr.mat-header-row:not(.group-header-row)');
+                        if (headerRow) {
+                            const headerCells = headerRow.querySelectorAll('th, .mat-header-cell');
+                            if (headerCells && headerCells[index]) {
+                                const hc = headerCells[index];
+                                hc.style.minWidth = `${w}px`;
+                                hc.style.maxWidth = `${w}px`;
+                                hc.style.boxSizing = 'border-box';
+                            }
+                        }
+                    }
+                    // Update data cells in both tables
+                    const dataRow = tbl.querySelector('tr.mat-mdc-row, tr.mat-row');
+                    if (dataRow) {
+                        const dataCells = dataRow.querySelectorAll('td, .mat-cell');
+                        if (dataCells && dataCells[index]) {
+                            const dc = dataCells[index];
+                            dc.style.minWidth = `${w}px`;
+                            dc.style.maxWidth = `${w}px`;
+                            dc.style.boxSizing = 'border-box';
+                        }
+                        // Set all data rows' height to match the edited row height
+                        // const rows = tbl.querySelectorAll('tr.mat-mdc-row, tr.mat-row');
+                        // rows.forEach((r: Element) => {
+                        //   const reh = r as HTMLElement;
+                        //   reh.style.height = `${editedRowHeight}px`;
+                        //   reh.style.minHeight = `${editedRowHeight}px`;
+                        //   reh.style.maxHeight = `${editedRowHeight}px`;
+                        // });
+                    }
+                });
+            });
+        }
+        catch (err) {
+            console.warn('syncColumnSizesFromEditedRow failed', err);
+        }
+    }
+    /**
+     * Restore original column widths and row heights from before edit mode.
+     */
+    restoreOriginalSizes() {
+        if (!this.enableRowPinning || !this.originalSizesBeforeEdit)
+            return;
+        try {
+            const topTable = document.getElementById(`matTableExtTop${this.tableID}`);
+            const middleTable = document.getElementById(`matTableExt${this.tableID}`);
+            const bottomTable = document.getElementById(`matTableExtBtm${this.tableID}`);
+            if (!topTable)
+                return;
+            const { columnWidths, rowHeight } = this.originalSizesBeforeEdit;
+            [topTable, middleTable, bottomTable].forEach(tbl => {
+                if (!tbl)
+                    return;
+                // Restore header cells in top table
+                if (tbl === topTable) {
+                    const headerRow = tbl.querySelector('tr.mat-mdc-header-row:not(.group-header-row), tr.mat-header-row:not(.group-header-row)');
+                    if (headerRow) {
+                        const headerCells = Array.from(headerRow.querySelectorAll('th, .mat-header-cell'));
+                        headerCells.forEach((cell, index) => {
+                            if (columnWidths[index] !== undefined) {
+                                const w = columnWidths[index];
+                                cell.style.minWidth = `${w}px`;
+                                cell.style.maxWidth = `${w}px`;
+                                cell.style.boxSizing = 'border-box';
+                                cell.style.height = `${rowHeight}px`;
+                                cell.style.minHeight = `${rowHeight}px`;
+                                cell.style.maxHeight = `${rowHeight}px`;
+                            }
+                        });
+                    }
+                }
+                // Restore data cells
+                const dataRow = tbl.querySelector('tr.mat-mdc-row, tr.mat-row');
+                if (dataRow) {
+                    const dataCells = Array.from(dataRow.querySelectorAll('td, .mat-cell'));
+                    dataCells.forEach((cell, index) => {
+                        if (columnWidths[index] !== undefined) {
+                            const w = columnWidths[index];
+                            cell.style.minWidth = `${w}px`;
+                            cell.style.maxWidth = `${w}px`;
+                            cell.style.boxSizing = 'border-box';
+                            cell.style.height = `${rowHeight}px`;
+                            cell.style.minHeight = `${rowHeight}px`;
+                            cell.style.maxHeight = `${rowHeight}px`;
+                        }
+                    });
+                    // Restore all data rows' height
+                    const rows = tbl.querySelectorAll('tr.mat-mdc-row, tr.mat-row');
+                    rows.forEach((r) => {
+                        const reh = r;
+                        reh.style.height = `${rowHeight}px`;
+                        reh.style.minHeight = `${rowHeight}px`;
+                        reh.style.maxHeight = `${rowHeight}px`;
+                    });
+                }
+            });
+            // Clear the stored sizes
+            this.originalSizesBeforeEdit = null;
+        }
+        catch (err) {
+            console.warn('restoreOriginalSizes failed', err);
+        }
+    }
+    ngOnDestroy() {
+        window.removeEventListener('resize', this.onWindowResizeBound);
+    }
+    /**
+     * @description checks and updates the the column's hide and show properties.
+     */
+    setColumnHideShow() {
+        if (this.hideShowMenuGroup !== undefined &&
+            this.hideShowMenuGroup !== null) {
+            this.updateColumnsHideShow(this.hideShowMenuGroup.value);
+        }
+    }
+    /**
+     * @description set the properties of the table.
+     * @param changes changes captured each time user changes property value.
+     */
+    setPropertyValue(changes) {
+        let keys = Object.keys(changes);
+        keys.forEach((property) => {
+            if (this.inputPropertyKeys.includes(property)) {
+                this.setPropertiesMap[property](changes[property]);
+                setTimeout(() => this.syncColumnSizesFromTop(), 80);
+            }
+            else if (property == 'showToolbar') {
+                if (changes['columns']) {
+                    this.setToolbarMenuControls(changes['columns'].currentValue);
+                }
+                else {
+                    this.setToolbarMenuControls(this.columnsArray);
+                }
+            }
+        });
+    }
+    /**
+     * @description used set data source for table.
+     * @param value data source value from user.
+     */
+    setTableDataSource(value) {
+        if (value.currentValue) {
+            this.tableData = value.currentValue.data;
+            this.dataSource = value.currentValue;
+            this.reCal();
+        }
+        else {
+            this.dataSource = new MatTableDataSource([{}]);
+        }
+    }
+    /**
+     * @description used create seletion model and set selection column visibility.
+     * @param value boolean value to show or hide selection Column from table.
+     */
+    setRowSelection(value) {
+        this.selection = new SelectionModel(true, []);
+        this.updateSelectionColumnVisibility(value);
+    }
+    /**
+     * @description create filter header row and assigns filter predicate to table data source.
+     * @param value boolean value to change  visibility of column filter row.
+     */
+    setColumnFilter(value) {
+        if (value) {
+            let array = [];
+            this.columnsArray.forEach((column, i) => {
+                if (this.dynamicDisplayedColumns.filter((a) => a.name == column?.field)[0]
+                    .show) {
+                    array.push(column?.field + '_' + i);
+                }
+            });
+            this.headersFiltersIds = array;
+            this.dataSource.filterPredicate = this.createFilter();
+        }
+        else {
+            this.headersFiltersIds = [];
+            this.dataSource.filter = '';
+        }
+        this.toggleFilters = value;
+        setTimeout(() => this.syncColumnSizesFromTop(), 150);
+    }
+    /**
+     * @description This method returns the list of visible column names.
+     * @returns list of visible column names.
+     */
+    getDisplayedColumns() {
+        if (this.columnGroups.length === 0) {
+            // No groups, place select at start and other action columns at the end
+            const actionColumns = ['select', 'edit', 'popup', 'delete', 'freeze', 'hide', 'pin'];
+            const visibleColumns = this.dynamicDisplayedColumns.filter((cd) => cd.show);
+            const dataColumns = visibleColumns.filter((cd) => !actionColumns.includes(cd.name)).map((cd) => cd.name);
+            const selectCol = visibleColumns.find((cd) => cd.name === 'select');
+            const otherActionCols = visibleColumns.filter((cd) => actionColumns.includes(cd.name) && cd.name !== 'select').map((cd) => cd.name);
+            const result = [];
+            if (selectCol)
+                result.push('select');
+            result.push(...dataColumns);
+            result.push(...otherActionCols);
+            return result;
+        }
+        // When groups exist, reorder: select first, grouped columns, ungrouped columns, then other action columns
+        const actionColumns = ['select', 'edit', 'popup', 'delete', 'freeze', 'hide', 'pin'];
+        const groupedFields = new Set();
+        // Collect all fields that belong to groups
+        this.columnGroups.forEach(group => {
+            group.columns.forEach(colField => groupedFields.add(colField));
+        });
+        const result = [];
+        const visibleColumns = this.dynamicDisplayedColumns.filter((cd) => cd.show);
+        // Add select column first if visible
+        const selectCol = visibleColumns.find(c => c.name === 'select');
+        if (selectCol) {
+            result.push('select');
+        }
+        // Add grouped columns in the order they appear in groups
+        this.columnGroups.forEach(group => {
+            group.columns.forEach(colField => {
+                const col = visibleColumns.find(c => c.name === colField);
+                if (col && !result.includes(col.name)) {
+                    result.push(col.name);
+                }
+            });
+        });
+        // Add ungrouped data columns
+        visibleColumns.forEach(col => {
+            if (!actionColumns.includes(col.name) && !groupedFields.has(col.name) && !result.includes(col.name)) {
+                result.push(col.name);
+            }
+        });
+        // Add other action columns at the end (excluding select which is already at start)
+        visibleColumns.forEach(col => {
+            if (actionColumns.includes(col.name) && col.name !== 'select' && !result.includes(col.name)) {
+                result.push(col.name);
+            }
+        });
+        return result;
+    }
+    /**
+     * @description This method returns the grouped column header definitions.
+     * @returns list of grouped column definitions for header row.
+     */
+    getGroupedColumns() {
+        if (this.columnGroups.length === 0)
+            return [];
+        const grouped = [];
+        const groupedFields = new Set();
+        const actionColumns = ['select', 'edit', 'popup', 'delete', 'freeze', 'hide', 'pin'];
+        // Collect all fields that belong to groups
+        this.columnGroups.forEach(group => {
+            group.columns.forEach(colField => groupedFields.add(colField));
+        });
+        // Add group headers for groups with visible columns
+        this.columnGroups.forEach(group => {
+            const visibleColumnsInGroup = group.columns.filter(colField => {
+                const displayCol = this.dynamicDisplayedColumns.find(dc => dc.name === colField);
+                return displayCol && displayCol.show;
+            });
+            if (visibleColumnsInGroup.length > 0) {
+                grouped.push('group-' + group.name);
+            }
+        });
+        // Add empty header placeholders for ungrouped columns at the end
+        this.columnsArray.forEach(col => {
+            if (!groupedFields.has(col.field) && !actionColumns.includes(col.field)) {
+                const displayCol = this.dynamicDisplayedColumns.find(dc => dc.name === col.field);
+                if (displayCol && displayCol.show) {
+                    grouped.push('ungrouped-' + col.field);
+                }
+            }
+        });
+        // Add placeholders for visible action columns so group header row has cells to align with action columns
+        const actionPlaceholders = ['select', 'edit', 'popup', 'delete', 'freeze', 'hide', 'pin'];
+        actionPlaceholders.forEach(act => {
+            const display = this.dynamicDisplayedColumns.find(dc => dc.name === act);
+            if (display && display.show) {
+                grouped.push('ungrouped-' + act);
+            }
+        });
+        return grouped;
+    }
+    /**
+     * @description Returns filter column IDs including placeholders for action columns
+     * @returns Array of filter column IDs with action column placeholders
+     */
+    getFilterColumns() {
+        const filters = [];
+        const actionColumns = ['select', 'edit', 'popup', 'delete', 'freeze', 'hide', 'pin'];
+        // Get visible columns in display order
+        const displayedCols = this.getDisplayedColumns();
+        displayedCols.forEach(colName => {
+            if (actionColumns.includes(colName)) {
+                // Add filter placeholder for action column
+                filters.push('filter-' + colName);
+            }
+            else {
+                // Find the actual filter ID from headersFiltersIds
+                const filterCol = this.headersFiltersIds.find(id => id.startsWith(colName + '_'));
+                if (filterCol) {
+                    filters.push(filterCol);
+                }
+            }
+        });
+        return this.columnFilter ? filters : [];
+    }
+    /**
+     * @param menuType type of menu to open from toolbar.
+     * @param event mouse event to open menu on that location.
+     */
+    openMenu(menuType, event) {
+        this.menuX = event.clientX;
+        this.menuY = event.clientY;
+        switch (menuType) {
+            case 'export': {
+                this.exportMenuCtrl = true;
+                this.menuTrigger.openMenu();
+                break;
+            }
+            case 'hideShow': {
+                this.hideShowMenuCtrl = true;
+                this.openHideShowMenu(this.columnsArray);
+                break;
+            }
+            case 'columnPin': {
+                this.columnPinMenuCtrl = true;
+                this.openHideShowMenu(this.columnsArray);
+                break;
+            }
+        }
+    }
+    /**
+     * @description triggers when menu is closed and reset the required controls.
+     */
+    menuClosed() {
+        this.exportMenuCtrl = false;
+    }
+    /**
+     * @description set list of columns to display in table.
+     * @param columns columns array from user input.
+     */
+    setColumnsData(columns) {
+        if (columns.length) {
+            this.columnsArray = [...columns];
+            this.setColumnsList(columns);
+            this.setToolbarMenuControls(columns);
+        }
+    }
+    /**
+     * @description set list of columns to display in table.
+     * @param columns columns array from user input with configurations.
+     */
+    setColumnsList(columns) {
+        this.columnsList = [];
+        this.displayedColumns = ['select', 'edit', 'popup', 'delete', 'freeze', 'hide', 'pin'];
+        let columnsArray = [];
+        columns.forEach((col) => {
+            if (typeof col?.header == 'string') {
+                this.columnsList.push(col?.header);
+                this.displayedColumns.push(col?.field);
+                columnsArray.push({ filter: true, name: col?.field, show: !col.hide });
+            }
+        });
+        // Preserve the current state of action columns before resetting
+        const currentActionColumns = this.dynamicDisplayedColumns.filter(dc => ['select', 'edit', 'popup', 'delete', 'freeze', 'hide', 'pin'].includes(dc.name));
+        // Create new action columns array, preserving existing states
+        const newActionColumns = [
+            { filter: false, name: 'select', show: false },
+            { filter: false, name: 'edit', show: false },
+            { filter: false, name: 'popup', show: false },
+            { filter: false, name: 'delete', show: false },
+            { filter: false, name: 'freeze', show: false },
+            { filter: false, name: 'hide', show: false },
+            { filter: false, name: 'pin', show: false },
+        ].map(actionCol => {
+            const existing = currentActionColumns.find(c => c.name === actionCol.name);
+            return existing ? { ...existing } : actionCol;
+        });
+        this.dynamicDisplayedColumns = columnsArray.concat(newActionColumns);
+        // After updating columns, ensure sizes match the top header (if pinning enabled)
+        if (this.enableRowPinning) {
+            setTimeout(() => this.syncColumnSizesFromTop(), 80);
+        }
+    }
+    /**
+     * @description Take boolean value and name column and update its visibility status in table.
+     * @param name name of the column to set visibility.
+     * @param value boolean value to set visibility of the column.
+     */
+    showHideColumn(name, value) {
+        const column = this.dynamicDisplayedColumns.filter((a) => a.name == name)[0];
+        if (column) {
+            column.show = value;
+            if (this.enableRowPinning) {
+                this.syncColumnSizesFromTop();
+            }
+        }
+        if (this.columnFilter) {
+            this.setColumnFilter(true);
+        }
+    }
+    /**
+     * @description Toggle hide state for a specific row
+     * @param index The row index to hide/unhide
+     */
+    toggleRowHide(index) {
+        const hiddenIndex = this.hiddenRowIndices.indexOf(index);
+        if (hiddenIndex > -1) {
+            // Unhide the row
+            this.hiddenRowIndices.splice(hiddenIndex, 1);
+        }
+        else {
+            // Hide the row
+            this.hiddenRowIndices.push(index);
+        }
+        // Trigger change detection
+        this.hiddenRowIndices = [...this.hiddenRowIndices];
+    }
+    /**
+     * @description Check if a row index is in the hidden rows list or matches the filter function.
+     * @param index The row index to check
+     * @returns True if the row is hidden
+     */
+    isRowHidden(index) {
+        // Check explicit hidden indices
+        if (this.hiddenRowIndices.includes(index)) {
+            return true;
+        }
+        // Check filter function if provided
+        if (this.rowHidingFilterFn && this.dataSource?.data?.[index]) {
+            return this.rowHidingFilterFn(this.dataSource.data[index], index);
+        }
+        return false;
+    }
+    /**
+     * @description Unhide all hidden rows
+     */
+    unhideAllRows() {
+        this.hiddenRowIndices = [];
+    }
+    /**
+     * @description Open row pin menu
+     * @param event Mouse event
+     * @param row The row to pin
+     */
+    openRowPinMenu(event, row) {
+        event.stopPropagation();
+        this.rowPinMenuPosition = {
+            x: event.clientX + 'px',
+            y: event.clientY + 'px'
+        };
+        this.rowPinMenuRow = row;
+    }
+    /**
+     * @description Close row pin menu
+     */
+    closeRowPinMenu() {
+        this.rowPinMenuRow = null;
+    }
+    /**
+     * @description Pin row to top or bottom
+     * @param row The row to pin
+     * @param position 'top' or 'bottom'
+     */
+    pinRow(row, position) {
+        console.log('pinRow called:', { row, position, enableRowPinning: this.enableRowPinning });
+        // Remove from other position if exists
+        this.unpinRow(row);
+        // Mark the row with pinning metadata
+        row._pinnedPosition = position;
+        // Add to the selected position
+        if (position === 'top') {
+            if (!this.pinnedTopRows.includes(row)) {
+                this.pinnedTopRows.push(row);
+            }
+            this.pinnedTopDataSource = new MatTableDataSource(this.pinnedTopRows);
+        }
+        else {
+            if (!this.pinnedBottomRows.includes(row)) {
+                this.pinnedBottomRows.push(row);
+            }
+            this.pinnedBtmDataSource = new MatTableDataSource(this.pinnedBottomRows);
+        }
+        console.log('After pinning:', {
+            pinnedTopRows: this.pinnedTopRows,
+            pinnedBottomRows: this.pinnedBottomRows,
+            topLength: this.pinnedTopRows.length,
+            bottomLength: this.pinnedBottomRows.length
+        });
+        this.rowPinningChange.emit({ row, position });
+        this.closeRowPinMenu();
+        this.updateDataSourceForPinning();
+    }
+    /**
+     * @description Unpin row from any position
+     * @param row The row to unpin
+     */
+    unpinRow(row) {
+        const topIndex = this.pinnedTopRows.indexOf(row);
+        if (topIndex > -1) {
+            this.pinnedTopRows.splice(topIndex, 1);
+            this.pinnedTopDataSource = new MatTableDataSource(this.pinnedTopRows);
+        }
+        const bottomIndex = this.pinnedBottomRows.indexOf(row);
+        if (bottomIndex > -1) {
+            this.pinnedBottomRows.splice(bottomIndex, 1);
+            this.pinnedBtmDataSource = new MatTableDataSource(this.pinnedBottomRows);
+        }
+        // Clear pinning metadata
+        delete row._pinnedPosition;
+        // Update the data source to trigger re-render
+        this.updateDataSourceForPinning();
+        this.rowPinningChange.emit({ row, position: null });
+        this.closeRowPinMenu();
+    }
+    /**
+     * @description Check if a row is pinned
+     * @param row The row to check
+     * @returns true if pinned
+     */
+    isRowPinned(row) {
+        return this.pinnedTopRows.includes(row) || this.pinnedBottomRows.includes(row);
+    }
+    /**
+     * @description Get row pin position
+     * @param row The row to check
+     * @returns 'top', 'bottom', or null
+     */
+    getRowPinPosition(row) {
+        if (this.pinnedTopRows.includes(row))
+            return 'top';
+        if (this.pinnedBottomRows.includes(row))
+            return 'bottom';
+        return null;
+    }
+    /**
+     * @description Get rows for main data section (excluding pinned rows)
+     * @returns Array of non-pinned rows
+     */
+    getUnpinnedRows() {
+        if (!this.dataSource?.data)
+            return [];
+        return this.dataSource.data.filter(row => !this.pinnedTopRows.includes(row) && !this.pinnedBottomRows.includes(row));
+    }
+    /**
+     * @description Get combined data source with pinned rows
+     */
+    getCombinedDataSource() {
+        if (!this.enableRowPinning || !this.dataSource?.data) {
+            return this.dataSource?.data || [];
+        }
+        // Combine: pinnedTop + regular + pinnedBottom
+        return [
+            ...this.pinnedTopRows,
+            ...this.dataSource.data.filter(row => !this.isRowPinned(row)),
+            ...this.pinnedBottomRows
+        ];
+    }
+    /**
+     * @description Initialize pinned rows based on function
+     */
+    initializePinnedRows() {
+        if (!this.rowPinningFn || !this.dataSource?.data)
+            return;
+        this.pinnedTopRows = [];
+        this.pinnedBottomRows = [];
+        this.dataSource.data.forEach((row, index) => {
+            const position = this.rowPinningFn(row, index);
+            if (position === 'top') {
+                row._pinnedPosition = 'top';
+                this.pinnedTopRows.push(row);
+            }
+            else if (position === 'bottom') {
+                row._pinnedPosition = 'bottom';
+                this.pinnedBottomRows.push(row);
+            }
+        });
+        this.cdr.detectChanges();
+    }
+    /**
+     * @description Update data source and recalculate pinned row offsets
+     */
+    updateDataSourceForPinning() {
+        // Trigger change detection
+        this.cdr.detectChanges();
+        // Force table to re-render rows
+        if (this.table) {
+            this.table.renderRows();
+        }
+        // Update offsets for sticky positioning
+        this.updatePinnedRowOffsets();
+    }
+    /**
+     * @description This method will position the selection column to first and also update its visibility.
+     * @param value value used to set visibility of the selection column.
+     */
+    updateSelectionColumnVisibility(value) {
+        let columnName = 'select';
+        let column = this.dynamicDisplayedColumns.filter((a) => a.name == columnName)[0];
+        let index = this.dynamicDisplayedColumns.findIndex((column) => column.name == columnName);
+        if (index > -1) {
+            this.dynamicDisplayedColumns.splice(index, 1);
+            this.dynamicDisplayedColumns.unshift(column);
+            this.dynamicDisplayedColumns.filter((column) => column.name == columnName)[0].show = value;
+        }
+    }
+    /**
+     * @description This method is used to update the position of  column in columns array according to its dropped position.
+     * @param event CdkDragDrop used to update column position in columns array.
+     */
+    onDrop(event) {
+        if (this.dndColumns) {
+            let adjustedValue = 0;
+            if (this.dynamicDisplayedColumns[0].name == 'select' &&
+                this.dynamicDisplayedColumns[0].show == false) {
+                adjustedValue = 1;
+            }
+            moveItemInArray(this.dynamicDisplayedColumns, event.previousIndex + adjustedValue, event.currentIndex + adjustedValue);
+            if (this.enableRowPinning) {
+                setTimeout(() => this.syncColumnSizesFromTop(), 80);
+            }
+        }
+    }
+    /**
+     * @description This method create filter predicate function which will set search value to table filters
+     * for both global and individual colum filtering.
+     * @returns returns boolean value to filter rows in table.
+     */
+    createFilter() {
+        const tableFilterPredicate = (data, filter) => {
+            let result = true;
+            // search all column fields
+            if (this.globalFilter) {
+                let expression = '';
+                let keys = Object.keys(data);
+                keys.forEach((key) => {
+                    expression =
+                        expression +
+                            `data.${key}.toString().trim().toLowerCase().indexOf(this.globalFilter.toLowerCase()) !== -1 ||`;
+                });
+                if (expression.charAt(expression.length - 2) +
+                    expression.charAt(expression.length - 1) ==
+                    '||') {
+                    expression = expression.substring(0, expression.length - 2);
+                }
+                result = eval(expression);
+            }
+            if (!result) {
+                return false;
+            }
+            let searchString = JSON.parse(filter);
+            //search single column field
+            if (this.individualFilter) {
+                return (data[this.individualFilter]
+                    .toString()
+                    .trim()
+                    .toLowerCase()
+                    .indexOf(searchString[this.individualFilter].toString().toLowerCase()) !== -1);
+            }
+            return true;
+        };
+        return tableFilterPredicate;
+    }
+    /**
+     * @description assigns the search value to mat table data source to apply the filter.
+     * @param searchValue value to be searched from table rows.
+     */
+    applyGlobalFilter(searchValue) {
+        this.globalFilter = searchValue;
+        let columns = {};
+        this.columnsArray.forEach((column) => {
+            if (column.field)
+                columns[column.field] = searchValue;
+        });
+        this.dataSource.filter = JSON.stringify(columns);
+    }
+    /**
+     * @description This method is used to apply column based filtering
+     * @param searchValue value to be searched from table rows.
+     * @param column filter will be applied based on this column field.
+     */
+    applyColumnFilter(searchValue, column) {
+        this.individualFilter = column.field;
+        this.filterValues[column.field] = searchValue[column.field];
+        this.dataSource.filter = JSON.stringify(this.filterValues);
+        if (this.enableRowPinning) {
+            setTimeout(() => this.syncColumnSizesFromTop(), 80);
+        }
+    }
+    /**
+     * @description This method will take row and its index enable inline editing tools on that row.
+     * @param row row on which user wants to do edit.
+     * @param index index of the row where inline editing will be enabled.
+     */
+    enableInlineEditing(row, index) {
+        // Check if another row is currently in edit mode
+        const currentEditIndex = this.tableData.findIndex((r) => r.editable === true);
+        if (currentEditIndex !== -1 && currentEditIndex !== index) {
+            // Disable the previous row's edit mode
+            this.tableData[currentEditIndex]['editable'] = false;
+            // Clear the temporary data for the previous row
+            this.rowDataTemp['e' + currentEditIndex] = {};
+            // Restore original sizes when switching rows
+            if (this.enableRowPinning && this.originalSizesBeforeEdit) {
+                this.restoreOriginalSizes();
+            }
+        }
+        const rowData = {};
+        rowData['e' + index] = { ...row };
+        this.rowDataTemp = rowData;
+        setTimeout(() => {
+            const wasEditable = this.tableData[index]['editable'];
+            this.tableData[index]['editable'] = !this.tableData[index]['editable'];
+            // If row is now in edit mode, sync sizes from this edited row
+            if (this.tableData[index]['editable'] && this.enableRowPinning) {
+                // Wait for DOM to update with edit controls
+                setTimeout(() => {
+                    this.syncColumnSizesFromEditedRow(index);
+                }, 100);
+            }
+            else if (!this.tableData[index]['editable'] && this.enableRowPinning) {
+                // Row was disabled, restore original sizes
+                this.restoreOriginalSizes();
+            }
+        }, 0);
+    }
+    /**
+     * @description This method will create and return data to inline editing template.
+     * @param row row on which user wants to do edit.
+     * @param index index of the row where inline editing will be enabled.
+     * @param column current column of the table.
+     */
+    getInlineEditingData(row, index, column) {
+        this.inlineEditingTemplateRefData = {
+            row: { ...row },
+            column: { ...column },
+            index: index,
+            updateFunc: this.updateInlineTemplateData,
+        };
+        return this.inlineEditingTemplateRefData;
+    }
+    /**
+     * @description This method set data for in-cell editing.
+     * @param row row on which user wants to do edit.
+     * @param index index of the row where inline editing will be enabled.
+     */
+    setCellData(row, index) {
+        // If there's already an inline edit in progress, cancel it first
+        if (this.currentRowIndex !== -1 && this.currentRowIndex !== index) {
+            // Find and cancel the previous inline editing row
+            const previousEditableRow = this.tableData.find((r, i) => i === this.currentRowIndex && r.editable);
+            if (previousEditableRow) {
+                previousEditableRow['editable'] = false;
+            }
+            // Clear previous cell editing states
+            Object.keys(this.cellEditing).forEach(key => {
+                if (key.startsWith(this.currentRowIndex + '_')) {
+                    delete this.cellEditing[key];
+                }
+            });
+            this.rowDataTemp['e' + this.currentRowIndex] = {};
+            // Restore sizes when switching from previous cell editing
+            if (this.enableRowPinning) {
+                this.restoreOriginalSizes();
+            }
+        }
+        this.currentRow = { ...row };
+        this.currentRowIndex = index;
+        this.rowDataTemp['e' + index] = { ...row };
+        // Sync column sizes from the edited row when cell editing starts
+        if (this.enableRowPinning) {
+            setTimeout(() => {
+                this.syncColumnSizesFromEditedRow(index);
+            }, 50);
+        }
+    }
+    /**
+     * @description This will restore the data and cencel the inline editing.
+     * @param row row on which user wants to do edit.
+     * @param index index of the row where inline editing will be enabled.
+     */
+    cancelInlineEditing(row, index) {
+        this.tableData.filter((a, i) => i == index)[0]['editable'] =
+            !this.tableData.filter((a, i) => i == index)[0]['editable'];
+        this.dataSource = new MatTableDataSource(this.tableData);
+        this.rowDataTemp['e' + index] = {};
+        this.service.selectedRow.next(undefined);
+        // Restore original sizes after canceling edit mode
+        if (this.enableRowPinning) {
+            this.restoreOriginalSizes();
+        }
+    }
+    /**
+     * @description This method will save and update the inline editing data and emit the update row and index.
+     * @param row row on which user wants to do edit.
+     * @param index index of the row where inline editing will be enabled.
+     */
+    saveInlineEditing(row, index) {
+        if (!this.inlineEditingTemplateRef) {
+            this.tableData[index] = { ...this.rowDataTemp['e' + index] };
+            row = { ...this.rowDataTemp['e' + index] };
+        }
+        else {
+            let changedData = this.service.selectedRow.value;
+            if (changedData) {
+                this.tableData[index] = { ...changedData };
+            }
+        }
+        this.dataSource = new MatTableDataSource(this.tableData);
+        this.rowDataTemp['e' + index] = {};
+        let data = {
+            row: row,
+            index: index,
+        };
+        this.inlineChange.emit(data);
+        this.tableData[index]['editable'] = false;
+        // Restore original sizes after saving edit mode
+        if (this.enableRowPinning) {
+            this.restoreOriginalSizes();
+        }
+    }
+    /**
+     * @description This method will save and update the cell editing data and emit the update row and index.
+     */
+    saveCellEditing() {
+        this.cellEditing = {};
+        let index = this.currentRowIndex;
+        if (index > -1) {
+            if (this.cellEditingTemplateRef) {
+                let changedData = this.service.selectedRow.value;
+                if (changedData) {
+                    this.tableData[index] = { ...changedData };
+                }
+            }
+            else {
+                this.tableData[index] = { ...this.rowDataTemp['e' + index] };
+            }
+            this.dataSource = new MatTableDataSource(this.tableData);
+            this.rowDataTemp['e' + index] = {};
+            let data = {
+                row: { ...this.tableData[index] },
+                index: index,
+            };
+            this.currentRowIndex = -1;
+            this.cellChange.emit(data);
+            // Restore original sizes after saving cell edits
+            if (this.enableRowPinning) {
+                this.restoreOriginalSizes();
+            }
+        }
+    }
+    /**
+     * @description This method will delete the row from the given index and emit the deleted row and index.
+     * @param row row to be deleted.
+     * @param index index of the row to be deleted.
+     */
+    deleteRow(row, index) {
+        // this.tableData.splice(index, 1);
+        // this.dataSource = new MatTableDataSource(this.tableData);
+        // this.dataSource.paginator = this.paginator;
+        // this.dataSource.sort = this.sort;
+        this.rowDeleted.emit({ removedRow: row, fromIndex: index });
+    }
+    /**
+     * @description This method will expand or collapse the row and emit expand event.
+     * @param row row to be expanded or collapsed.
+     * @param expand value used to expand or collapse the row.
+     * @param index index of the row.
+     */
+    expandRow(row, expand, index) {
+        if (this.expandRows) {
+            this.expansionChange.emit({ data: row, expanded: expand, index: index });
+            this.expandedElement = this.expandedElement === row ? null : row;
+        }
+    }
+    /**
+     * @description This method is used to set data for popup component and open editing dialog.
+     * @param row row which used want to edit.
+     */
+    openEditingDialog(row) {
+        const dialogConfig = new MatDialogConfig();
+        dialogConfig.disableClose = true;
+        dialogConfig.width = '40%';
+        dialogConfig.height = '70%';
+        dialogConfig.maxWidth = '100%';
+        let rowData = { ...row };
+        dialogConfig.data = {
+            row: rowData,
+            columns: [...this.columnsArray],
+            templateRef: this.popupEditingTemplateRef,
+        };
+        this.dialog
+            .open(EditingComponent, dialogConfig)
+            .afterClosed()
+            .subscribe((data) => {
+            let index = this.tableData.indexOf(row);
+            if (data && index > -1) {
+                this.tableData[index] = data;
+                this.dataSource = new MatTableDataSource(this.tableData);
+                let dataChange = {
+                    row: data,
+                    index: index,
+                };
+                this.popupChange.emit(dataChange);
+                if (this.enableRowPinning) {
+                    setTimeout(() => this.syncColumnSizesFromTop(), 80);
+                }
+            }
+        });
+    }
+    /**
+     * @description This method is used to open cell popup editing dialog for a single cell.
+     * @param row row which contains the cell to edit.
+     * @param column column definition of the cell to edit.
+     * @param rowIndex index of the row.
+     */
+    openCellPopupDialog(row, column, rowIndex) {
+        const dialogConfig = new MatDialogConfig();
+        dialogConfig.disableClose = true;
+        dialogConfig.width = '400px';
+        dialogConfig.height = 'auto';
+        dialogConfig.maxWidth = '100%';
+        dialogConfig.data = {
+            row: { ...row },
+            column: column,
+            rowIndex: rowIndex,
+            isCellEdit: true,
+            templateRef: this.cellPopupEditingTemplateRef,
+        };
+        this.dialog
+            .open(EditingComponent, dialogConfig)
+            .afterClosed()
+            .subscribe((data) => {
+            if (data && data.field && rowIndex > -1) {
+                this.tableData[rowIndex][data.field] = data.value;
+                this.dataSource = new MatTableDataSource(this.tableData);
+                let dataChange = {
+                    row: { ...this.tableData[rowIndex] },
+                    index: rowIndex,
+                };
+                this.cellChange.emit(dataChange);
+                if (this.enableRowPinning) {
+                    setTimeout(() => this.syncColumnSizesFromTop(), 80);
+                }
+            }
+        });
+    }
+    /**
+     * @description used to check whether all rows are selected.
+     */
+    isAllSelected() {
+        const numSelected = this.selection.selected.length;
+        const numRows = this.dataSource.data.length;
+        return numSelected === numRows;
+    }
+    /**
+     * @description this method is used to toggle the all and no rows selection.
+     */
+    toggleAllRows() {
+        if (this.isAllSelected()) {
+            this.selection.clear();
+            return;
+        }
+        this.selection.select(...this.dataSource.data);
+    }
+    /**
+     * @description This method is used return aria-label for selection column checkboxs.
+     * @param row row from table.
+     * @returns labels for selection column checkboxs.
+     */
+    checkboxLabel(row) {
+        if (!row) {
+            return `${this.isAllSelected() ? 'deselect' : 'select'} all`;
+        }
+        return `${this.selection.isSelected(row) ? 'deselect' : 'select'} row ${row.position + 1}`;
+    }
+    /**
+     * @description create form control for columns for hiding and and pinning purpose
+     * @param columns list of columns to be displayed
+     */
+    setToolbarMenuControls(columns) {
+        if (columns.length > 0 && this.showToolbar) {
+            const group = this.formBuilder.group({});
+            columns.forEach((column) => {
+                const control = this.formBuilder.control(true);
+                group.addControl(column.field, control);
+            });
+            this.hideShowMenuGroup = group;
+        }
+    }
+    /**
+     * @param column current column
+     * @param event mouse event used to set the menu position
+     */
+    openPinnablePropertyMenu(column, event) {
+        this.menuX = event.clientX;
+        this.menuY = event.clientY;
+        let options = [
+            {
+                label: 'Pin Left',
+                value: 'left',
+                selected: false,
+                field: column.field,
+            },
+            {
+                label: 'Pin Right',
+                value: 'right',
+                selected: false,
+                field: column.field,
+            },
+            { label: 'No Pin', value: null, selected: false, field: column.field },
+        ];
+        if (column.pinned && column.pinned !== null) {
+            options.forEach((opt) => {
+                if (opt.value === column.pinned) {
+                    opt.selected = true;
+                }
+            });
+        }
+        else if (column.pinned == null || column.pinned == 'null') {
+            options[2].selected = true;
+        }
+        this.columnPinningOptions = options;
+        this.columnMenuTrigger.openMenu();
+    }
+    /**
+     * @description This method is used to reset menu checks when required.
+     */
+    resetMenuChecks() {
+        this.hideShowMenuCtrl = false;
+        this.showHideColumnsArray = [];
+        this.columnPinMenuCtrl = false;
+        this.columnPinningOptions = [];
+    }
+    /**
+     * @description This method is used to filter columns for menus like pinning or hide show menu.
+     * @param value search value to filter colunms
+     */
+    filterColumns(value) {
+        if (value !== '') {
+            this.showHideColumnsArray = this.columnsArray.filter((col) => {
+                return col.header.toLowerCase().includes(value.toLowerCase());
+            });
+        }
+        else {
+            this.showHideColumnsArray = this.columnsArray;
+        }
+    }
+    /**
+     * @description This method is used to open hide show column menu.
+     * @param columns columns array to display in hide show menu.
+     */
+    openHideShowMenu(columns) {
+        this.showHideColumnsArray = [...columns];
+        this.columnMenuTrigger.openMenu();
+    }
+    /**
+     * @param values columns
+     */
+    updateColumnsHideShow(values) {
+        let keys = Object.keys(values);
+        keys.forEach((key) => {
+            this.showHideColumn(key, values[key]);
+        });
+    }
+    /**
+     * @description This method is called when the table rows are scrolled.
+     * @param event scroll event
+     */
+    onScroll(event) {
+        this.scroll.emit(event);
+    }
+    /**
+     * @param row row to be toggled
+     * @param index index of toggled row
+     */
+    setSelectedRows(row, index) {
+        this.selection.toggle(row);
+        if (this.selection.isSelected(row)) {
+            this.selectionChanged.emit({ row: row, index: index, isSelected: true });
+        }
+        else {
+            this.selectionChanged.emit({ row: row, index: index, isSelected: false });
+        }
+    }
+    /**
+     * @description This method is used to display all hidden rows.
+     */
+    showHiddenRows() {
+        this.hideRows = false;
+        this.selection.clear();
+        this.hiddenCtrl.clear();
+    }
+    /**
+     * @description This method is used to hide all selected rows.
+     */
+    hideSelectedRows() {
+        if (!this.selection.isEmpty()) {
+            let values = [...this.selection.selected];
+            values.forEach((value) => {
+                if (!this.hiddenCtrl.isSelected(value)) {
+                    this.hiddenCtrl.toggle(value);
+                }
+            });
+            this.selection.clear();
+            this.hideRows = true;
+        }
+    }
+    /**
+     * @description This method is used to recalculate the required values for table.
+     */
+    reCal() {
+        if (this.showPaginator) {
+            this.dataSource.paginator = this.paginator;
+        }
+        if (this.sorting) {
+            this.dataSource.sort = this.sort;
+            if (this.enableRowPinning) {
+                this.pinnedTopDataSource.sort = this.sort;
+                this.pinnedBtmDataSource.sort = this.sort;
+            }
+        }
+        if (this.columnFilter) {
+            this.dataSource.filterPredicate = this.createFilter();
+            this.pinnedTopDataSource.filterPredicate = this.createFilter();
+            this.pinnedBtmDataSource.filterPredicate = this.createFilter();
+        }
+        this.cdr.detectChanges();
+    }
+    /**
+     * @description This method is called in constructor method to add SVGs into icon registration.
+     */
+    addIconsToRegistry() {
+        let y = this.domSanitizer.bypassSecurityTrustResourceUrl(`assets/pinRight.svg`);
+        let iconNames = ['pinLeft', 'pinRight', 'pinNone', 'pinned', 'pinIcon'];
+        iconNames.forEach((icon) => {
+            this.matIconRegistry.addSvgIcon(icon, this.domSanitizer.bypassSecurityTrustResourceUrl(`assets/${icon}.svg`));
+        });
+    }
+    /**
+     * @description This method is used to export table data.
+     * @param type type of file to be exported.
+     */
+    exportTable(type) {
+        const actionColumns = ['select', 'edit', 'popup', 'delete', 'freeze', 'hide', 'pin'];
+        // Get visible columns in the correct order (grouped first, ungrouped at end)
+        let visibleColumns = [];
+        if (this.columnGroups.length > 0) {
+            const groupedFields = new Set();
+            // Collect all fields that belong to groups
+            this.columnGroups.forEach(group => {
+                group.columns.forEach(colField => groupedFields.add(colField));
+            });
+            // Add grouped columns first (in group order)
+            this.columnGroups.forEach(group => {
+                group.columns.forEach(colField => {
+                    const col = this.columnsArray.find(c => c.field === colField);
+                    const displayCol = this.dynamicDisplayedColumns.find(dc => dc.name === colField);
+                    if (col && displayCol && displayCol.show && !visibleColumns.includes(col)) {
+                        visibleColumns.push(col);
+                    }
+                });
+            });
+            // Add ungrouped columns at the end
+            this.columnsArray.forEach(col => {
+                const displayCol = this.dynamicDisplayedColumns.find(dc => dc.name === col.field);
+                if (!groupedFields.has(col.field) && displayCol && displayCol.show &&
+                    !actionColumns.includes(col.field) && !visibleColumns.includes(col)) {
+                    visibleColumns.push(col);
+                }
+            });
+        }
+        else {
+            // No groups, use default order
+            visibleColumns = this.columnsArray.filter(col => {
+                const displayCol = this.dynamicDisplayedColumns.find(dc => dc.name === col.field);
+                return displayCol && displayCol.show && !actionColumns.includes(col.field);
+            });
+        }
+        const data = [];
+        // Add group headers if they exist
+        if (this.columnGroups.length > 0) {
+            const groupRow = [];
+            const columnIndexMap = {};
+            visibleColumns.forEach((col, idx) => {
+                columnIndexMap[col.field] = idx;
+            });
+            // Initialize group row with empty strings
+            for (let i = 0; i < visibleColumns.length; i++) {
+                groupRow.push('');
+            }
+            // Fill in group labels
+            this.columnGroups.forEach(group => {
+                const groupCols = group.columns.filter(colField => visibleColumns.find(vc => vc.field === colField));
+                if (groupCols.length > 0) {
+                    const firstColIndex = columnIndexMap[groupCols[0]];
+                    groupRow[firstColIndex] = group.label;
+                }
+            });
+            data.push(groupRow);
+        }
+        // Add column headers
+        data.push(visibleColumns.map(col => col.header || col.field));
+        // Add data rows (exclude hidden rows)
+        this.dataSource.data.forEach((row, index) => {
+            // Skip hidden rows
+            if (this.hiddenRowIndices.includes(index)) {
+                return;
+            }
+            const rowData = visibleColumns.map(col => {
+                const value = row[col.field];
+                if (value === null || value === undefined)
+                    return '';
+                if (typeof value === 'boolean')
+                    return value ? 'Yes' : 'No';
+                if (value instanceof Date)
+                    return new Intl.DateTimeFormat('en-US').format(value);
+                return value;
+            });
+            data.push(rowData);
+        });
+        const ws = XLSX.utils.aoa_to_sheet(data);
+        // Add merge cells for group headers if they exist
+        if (this.columnGroups.length > 0) {
+            if (!ws['!merges']) {
+                ws['!merges'] = [];
+            }
+            const columnIndexMap = {};
+            visibleColumns.forEach((col, idx) => {
+                columnIndexMap[col.field] = idx;
+            });
+            this.columnGroups.forEach(group => {
+                const groupCols = group.columns.filter(colField => visibleColumns.find(vc => vc.field === colField));
+                if (groupCols.length > 1 && ws['!merges']) {
+                    const firstColIndex = columnIndexMap[groupCols[0]];
+                    const lastColIndex = columnIndexMap[groupCols[groupCols.length - 1]];
+                    ws['!merges'].push({
+                        s: { r: 0, c: firstColIndex },
+                        e: { r: 0, c: lastColIndex }
+                    });
+                }
+            });
+        }
+        const wb = XLSX.utils.book_new();
+        XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');
+        XLSX.writeFile(wb, `tablesheets.${type}`);
+    }
+    /**
+     * @description This method is used to print the table with proper styling.
+     */
+    printTable() {
+        const printContent = document.getElementById('matTableExt' + this.tableID);
+        if (!printContent)
+            return;
+        const windowPrint = window.open('', '', 'width=900,height=650');
+        if (!windowPrint)
+            return;
+        windowPrint.document.write('<html><head><title>Print Table</title>');
+        windowPrint.document.write('<style>');
+        windowPrint.document.write(`
+      table { border-collapse: collapse; width: 100%; font-family: Arial, sans-serif; }
+      th, td { border: 1px solid #ddd; padding: 8px; text-align: left; }
+      th { background-color: #f2f2f2; font-weight: bold; }
+      tr:nth-child(even) { background-color: #f9f9f9; }
+      .mat-sort-header-container { display: inline; }
+      .mat-sort-header-arrow, .mat-sort-header-indicator { display: none !important; }
+      button, .mat-icon { display: none !important; }
+      @media print {
+        .mat-mdc-table { page-break-inside: auto; }
+        tr { page-break-inside: avoid; page-break-after: auto; }
+        thead { display: table-header-group; }
+      }
+    `);
+        windowPrint.document.write('</style></head><body>');
+        // Clone the table and remove all action columns
+        const tableClone = printContent.cloneNode(true);
+        // Define action column class selectors
+        const actionColumnSelectors = [
+            'th.action-column-cells',
+            'td.inline-edit-column-cell',
+            // Remove columns by checking for action column names
+            '[matColumnDef="select"]',
+            '[matColumnDef="edit"]',
+            '[matColumnDef="popup"]',
+            '[matColumnDef="delete"]',
+            '[matColumnDef="freeze"]',
+            '[matColumnDef="hide"]',
+        ];
+        // Remove all matching elements
+        actionColumnSelectors.forEach(selector => {
+            const elements = tableClone.querySelectorAll(selector);
+            elements.forEach(el => el.remove());
+        });
+        // Also remove cells by index for action columns
+        const actionColumnIndices = [];
+        const headerRow = tableClone.querySelector('tr.mat-mdc-header-row');
+        if (headerRow) {
+            const headers = Array.from(headerRow.querySelectorAll('th'));
+            headers.forEach((th, index) => {
+                if (th.classList.contains('action-column-cells')) {
+                    actionColumnIndices.push(index);
+                }
+            });
+        }
+        // Remove cells at action column indices from all rows
+        const rows = tableClone.querySelectorAll('tr');
+        rows.forEach((row, rowIndex) => {
+            // Remove hidden rows (accounting for header rows)
+            const dataIndex = rowIndex - 1; // Subtract 1 for header row
+            if (dataIndex >= 0 && this.hiddenRowIndices.includes(dataIndex)) {
+                row.remove();
+                return;
+            }
+            const cells = Array.from(row.querySelectorAll('th, td'));
+            // Remove in reverse order to maintain correct indices
+            for (let i = actionColumnIndices.length - 1; i >= 0; i--) {
+                const index = actionColumnIndices[i];
+                if (cells[index]) {
+                    cells[index].remove();
+                }
+            }
+        });
+        windowPrint.document.write(tableClone.outerHTML);
+        windowPrint.document.write('</body></html>');
+        windowPrint.document.close();
+        setTimeout(() => {
+            windowPrint.print();
+            windowPrint.close();
+        }, 250);
+    }
+    async exportToPDF() {
+        try {
+            // Correct jsPDF import
+            const JsPDF = (await import('jspdf')).default;
+            // Correct AutoTable import
+            const autoTableModule = await import('jspdf-autotable');
+            const autoTable = autoTableModule.autoTable || autoTableModule.default;
+            // Create PDF with user-specified orientation
+            const doc = new JsPDF({
+                orientation: this.pdfOrientation,
+                unit: 'mm',
+                format: 'a4'
+            });
+            const actionColumns = ['select', 'edit', 'popup', 'delete', 'freeze', 'hide', 'pin'];
+            // Get visible columns in the correct order (grouped first, ungrouped at end)
+            let visibleColumns = [];
+            if (this.columnGroups.length > 0) {
+                const groupedFields = new Set();
+                // Collect all fields that belong to groups
+                this.columnGroups.forEach(group => {
+                    group.columns.forEach(colField => groupedFields.add(colField));
+                });
+                // Add grouped columns first (in group order)
+                this.columnGroups.forEach(group => {
+                    group.columns.forEach(colField => {
+                        const col = this.columnsArray.find(c => c.field === colField);
+                        const displayCol = this.dynamicDisplayedColumns.find(dc => dc.name === colField);
+                        if (col && displayCol && displayCol.show && !visibleColumns.includes(col)) {
+                            visibleColumns.push(col);
+                        }
+                    });
+                });
+                // Add ungrouped columns at the end
+                this.columnsArray.forEach(col => {
+                    const displayCol = this.dynamicDisplayedColumns.find(dc => dc.name === col.field);
+                    if (!groupedFields.has(col.field) && displayCol && displayCol.show &&
+                        !actionColumns.includes(col.field) && !visibleColumns.includes(col)) {
+                        visibleColumns.push(col);
+                    }
+                });
+            }
+            else {
+                // No groups, use default order
+                visibleColumns = this.columnsArray.filter(col => {
+                    const displayCol = this.dynamicDisplayedColumns.find(dc => dc.name === col.field);
+                    return displayCol && displayCol.show && !actionColumns.includes(col.field);
+                });
+            }
+            // Prepare group headers if column groups exist
+            let groupHeaders = [];
+            let columnIndexMap = {};
+            let groupColSpans = {};
+            if (this.columnGroups.length > 0) {
+                // Build column index map
+                visibleColumns.forEach((col, idx) => {
+                    columnIndexMap[col.field] = idx;
+                });
+                // Create group header row
+                const groupRow = [];
+                let currentIndex = 0;
+                this.columnGroups.forEach(group => {
+                    const groupCols = group.columns.filter(colField => visibleColumns.find(vc => vc.field === colField));
+                    if (groupCols.length > 0) {
+                        const firstColIndex = columnIndexMap[groupCols[0]];
+                        // Add the group header cell with content and colspan
+                        groupRow.push({
+                            content: group.label,
+                            colSpan: groupCols.length,
+                            styles: { halign: 'center' }
+                        });
+                        groupColSpans[firstColIndex] = groupCols.length;
+                        currentIndex = firstColIndex + groupCols.length;
+                    }
+                });
+                // Add empty cells for ungrouped columns
+                const groupedFields = new Set();
+                this.columnGroups.forEach(group => {
+                    group.columns.forEach(colField => groupedFields.add(colField));
+                });
+                const ungroupedCount = visibleColumns.filter(col => !groupedFields.has(col.field)).length;
+                for (let i = 0; i < ungroupedCount; i++) {
+                    groupRow.push({
+                        content: '',
+                        styles: { halign: 'center' }
+                    });
+                }
+                groupHeaders = [groupRow];
+            }
+            const headers = visibleColumns.map(col => col.header || col.field);
+            const rows = this.dataSource.data
+                .map((row, index) => ({
+                row,
+                index
+            }))
+                .filter(({ index }) => !this.hiddenRowIndices.includes(index))
+                .map(({ row }) => visibleColumns.map(col => {
+                const value = row[col.field];
+                if (value === null || value === undefined)
+                    return '';
+                if (typeof value === 'boolean')
+                    return value ? 'Yes' : 'No';
+                if (value instanceof Date)
+                    return new Intl.DateTimeFormat('en-US').format(value);
+                return String(value);
+            }));
+            let startY = 10;
+            if (this.toolbarTitle) {
+                doc.text(this.toolbarTitle, 14, 15);
+                startY = 20;
+            }
+            // Extract header styles from actual mat-table
+            let headerStyles = {
+                fillColor: [245, 245, 245], // Default Material table header background (#f5f5f5)
+                textColor: [0, 0, 0], // Default Material table header text (black)
+                fontStyle: 'bold'
+            };
+            // If headerTemplateRef is defined, extract styles from the actual header cells
+            if (this.headerTemplateRef) {
+                const headerCells = this.tableElement?.nativeElement?.querySelectorAll('.mat-mdc-header-cell');
+                if (headerCells && headerCells.length > 0) {
+                    const firstHeader = headerCells[0];
+                    const computedStyles = window.getComputedStyle(firstHeader);
+                    // Extract background color
+                    const bgColor = computedStyles.backgroundColor;
+                    if (bgColor && bgColor !== 'rgba(0, 0, 0, 0)' && bgColor !== 'transparent') {
+                        const rgb = bgColor.match(/\d+/g);
+                        if (rgb && rgb.length >= 3) {
+                            headerStyles.fillColor = [parseInt(rgb[0]), parseInt(rgb[1]), parseInt(rgb[2])];
+                        }
+                    }
+                    // Extract text color
+                    const textColor = computedStyles.color;
+                    if (textColor) {
+                        const rgb = textColor.match(/\d+/g);
+                        if (rgb && rgb.length >= 3) {
+                            headerStyles.textColor = [parseInt(rgb[0]), parseInt(rgb[1]), parseInt(rgb[2])];
+                        }
+                    }
+                    // Extract font weight
+                    const fontWeight = computedStyles.fontWeight;
+                    if (fontWeight && (fontWeight === 'bold' || parseInt(fontWeight) >= 600)) {
+                        headerStyles.fontStyle = 'bold';
+                    }
+                    else {
+                        headerStyles.fontStyle = 'normal';
+                    }
+                }
+            }
+            // Extract group header styles if groups exist
+            let groupHeaderStyles = null;
+            if (groupHeaders.length > 0) {
+                // Extract from group-header-cell elements
+                const groupHeaderCells = this.tableElement?.nativeElement?.querySelectorAll('.group-header-cell');
+                if (groupHeaderCells && groupHeaderCells.length > 0) {
+                    const firstGroupHeader = groupHeaderCells[0];
+                    const computedStyles = window.getComputedStyle(firstGroupHeader);
+                    groupHeaderStyles = {};
+                    // Extract background color
+                    const bgColor = computedStyles.backgroundColor;
+                    if (bgColor && bgColor !== 'rgba(0, 0, 0, 0)' && bgColor !== 'transparent') {
+                        const rgb = bgColor.match(/\d+/g);
+                        if (rgb && rgb.length >= 3) {
+                            groupHeaderStyles.fillColor = [parseInt(rgb[0]), parseInt(rgb[1]), parseInt(rgb[2])];
+                        }
+                    }
+                    else {
+                        // Default to same as header background
+                        groupHeaderStyles.fillColor = headerStyles.fillColor;
+                    }
+                    // Extract text color
+                    const textColor = computedStyles.color;
+                    if (textColor) {
+                        const rgb = textColor.match(/\d+/g);
+                        if (rgb && rgb.length >= 3) {
+                            groupHeaderStyles.textColor = [parseInt(rgb[0]), parseInt(rgb[1]), parseInt(rgb[2])];
+                        }
+                    }
+                    else {
+                        // Default to same as header text
+                        groupHeaderStyles.textColor = headerStyles.textColor;
+                    }
+                    // Extract font weight
+                    const fontWeight = computedStyles.fontWeight;
+                    if (fontWeight && (fontWeight === 'bold' || parseInt(fontWeight) >= 600)) {
+                        groupHeaderStyles.fontStyle = 'bold';
+                    }
+                    else {
+                        groupHeaderStyles.fontStyle = 'normal';
+                    }
+                }
+                else {
+                    // No group header cells found, use same as regular headers
+                    groupHeaderStyles = { ...headerStyles };
+                }
+            }
+            // Build table config without default grid borders. We'll draw only
+            // bottom dividers manually in `didDrawCell` so there are no left/right borders.
+            const tableConfig = {
+                head: groupHeaders.length > 0 ? [...groupHeaders, headers] : [headers],
+                body: rows,
+                startY: startY,
+                // Use 'plain' so autowire doesn't draw full grid borders
+                theme: 'plain',
+                styles: {
+                    fontSize: 9,
+                    cellPadding: 3,
+                    // ensure autTable doesn't draw default lines
+                    lineWidth: 0
+                },
+                headStyles: headerStyles
+            };
+            // didParseCell: apply header/group header visual styles (background/text/font)
+            tableConfig.didParseCell = (data) => {
+                // Group header row styling (if present)
+                if (data.section === 'head' && groupHeaders.length > 0 && data.row.index === 0 && groupHeaderStyles) {
+                    if (groupHeaderStyles.fillColor)
+                        data.cell.styles.fillColor = groupHeaderStyles.fillColor;
+                    if (groupHeaderStyles.textColor)
+                        data.cell.styles.textColor = groupHeaderStyles.textColor;
+                    if (groupHeaderStyles.fontStyle)
+                        data.cell.styles.fontStyle = groupHeaderStyles.fontStyle;
+                    data.cell.styles.halign = 'center';
+                }
+                // Final header row (column labels) should use headerStyles
+                if (data.section === 'head' && data.row.index === (groupHeaders.length > 0 ? groupHeaders.length : 0)) {
+                    if (headerStyles.fillColor)
+                        data.cell.styles.fillColor = headerStyles.fillColor;
+                    if (headerStyles.textColor)
+                        data.cell.styles.textColor = headerStyles.textColor;
+                    if (headerStyles.fontStyle)
+                        data.cell.styles.fontStyle = headerStyles.fontStyle;
+                }
+            };
+            // didDrawCell: draw only the bottom divider line for each cell
+            tableConfig.didDrawCell = (data) => {
+                try {
+                    const cell = data.cell;
+                    const docRef = doc;
+                    // Determine stroke color and width for divider
+                    const lineColor = [200, 200, 200];
+                    const lineWidth = 0.5;
+                    // Coordinates: draw a horizontal line across the bottom of the cell
+                    const x1 = cell.x;
+                    const x2 = cell.x + cell.width;
+                    const y = cell.y + cell.height;
+                    docRef.setDrawColor(lineColor[0], lineColor[1], lineColor[2]);
+                    docRef.setLineWidth(lineWidth);
+                    docRef.line(x1, y, x2, y);
+                }
+                catch (err) {
+                    // don't block export on draw errors
+                }
+            };
+            autoTable(doc, tableConfig);
+            doc.save(`${this.toolbarTitle || 'table-export'}.pdf`);
+        }
+        catch (error) {
+            console.error('Error exporting to PDF:', error);
+        }
+    }
+    /**
+     * @description This method is used to split name of filter row header to get index.
+     * @param value value to be splited for index.
+     * @returns Will return index of column from value.
+     */
+    returnIndex(value) {
+        return Number(value.split('_')[1]);
+    }
+    /**
+     * @description This method is used to manage column filtering, expanded data for exporting.
+     * @param ws work sheet
+     * @returns custom generated worksheet to be used in export.
+     */
+    writeSheetData(ws) {
+        let displayedColumns = this.getDisplayedColumns();
+        var nMerges = this.getMergeIndex(ws['!merges'] || []);
+        var merges = ws['!merges'] || [];
+        let data = {
+            '!cols': [],
+            '!rows': [],
+            '!merges': nMerges,
+        };
+        var range = XLSX.utils.decode_range(ws['!ref'] || '');
+        let extracolumns = ['popup', 'delete', 'select', 'edit'];
+        let keys = Object.keys(ws);
+        let nKey = 'A';
+        keys.forEach((key, i) => {
+            if (ws[key]?.v && typeof ws[key]?.v === 'string') {
+                if (!extracolumns.includes(ws[key].v.toLowerCase()) &&
+                    displayedColumns.includes(ws[key].v.toLowerCase())) {
+                    let lastRowIndex = range?.e?.r;
+                    data[key] = ws[key];
+                    let chr = key.charAt(0);
+                    for (let j = 2; j <= lastRowIndex; j++) {
+                        if (ws[chr + (j + 1)] !== undefined &&
+                            (typeof ws[chr + (j + 1)].v === 'string' ||
+                                typeof ws[chr + (j + 1)].v === 'number')) {
+                            data[nKey + j] = ws[chr + (j + 1)];
+                        }
+                    }
+                    nKey = String.fromCharCode(nKey.charCodeAt(0) + 1);
+                }
+            }
+        });
+        if (this.rowSelection) {
+            let chr = 'A';
+            for (let i = 1; i < range.e.c + 1; i++) {
+                data[chr + 1] = data[String.fromCharCode(chr.charCodeAt(0) + 1) + 1];
+                chr = String.fromCharCode(chr.charCodeAt(0) + 1);
+                if (i == range.e.c) {
+                    data[chr + 1] = undefined;
+                }
+            }
+        }
+        if (this.rowSelection && this.expandRows) {
+            merges.forEach((merge) => {
+                data['A' + merge.s.r] = ws['A' + (merge.s.r + 1)];
+            });
+        }
+        range.e.r--;
+        let nRef = XLSX.utils.encode_range(range);
+        data['!ref'] = nRef;
+        data['!fullref'] = nRef;
+        return data;
+    }
+    getMergeIndex(merges) {
+        var arr = [];
+        merges.forEach((element) => {
+            arr.push({
+                e: {
+                    r: element.e.r == 0 ? element.e.r : element.e.r - 1,
+                    c: element.e.c,
+                },
+                s: {
+                    r: element.s.r == 0 ? element.s.r : element.s.r - 1,
+                    c: element.s.c,
+                },
+            });
+        });
+        return arr;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: MatTableExtComponent, deps: [{ token: i1$1.MatDialog }, { token: MatTableExtService }, { token: i3.FormBuilder }, { token: i4.DomSanitizer }, { token: i5$1.MatIconRegistry }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.5", type: MatTableExtComponent, isStandalone: true, selector: "mat-table-ext", inputs: { dataSource: "dataSource", columns: "columns", columnResizable: "columnResizable", stripedRows: "stripedRows", rowHover: "rowHover", inlineRowEditing: "inlineRowEditing", inCellEditing: "inCellEditing", cellPopupEditing: "cellPopupEditing", popupRowEditing: "popupRowEditing", enableDelete: "enableDelete", rowSelection: "rowSelection", multiRowSelection: "multiRowSelection", stickyFooter: "stickyFooter", stickyHeader: "stickyHeader", showFooterRow: "showFooterRow", columnFilter: "columnFilter", loadingIndicator: "loadingIndicator", sorting: "sorting", showToolbar: "showToolbar", toolbarTitle: "toolbarTitle", tableHeight: "tableHeight", toolbarHeight: "toolbarHeight", tableWidth: "tableWidth", scrollbarH: "scrollbarH", toolbarTemplate: "toolbarTemplate", columnHidable: "columnHidable", columnPinnable: "columnPinnable", globalSearch: "globalSearch", expandRows: "expandRows", dndColumns: "dndColumns", showPaginator: "showPaginator", showFirstLastButtons: "showFirstLastButtons", exportButtonEnable: "exportButtonEnable", printButtonEnable: "printButtonEnable", pageSizeOptions: "pageSizeOptions", toolbarTemplateRef: "toolbarTemplateRef", headerTemplateRef: "headerTemplateRef", cellTemplateRef: "cellTemplateRef", expansionTemplateRef: "expansionTemplateRef", popupEditingTemplateRef: "popupEditingTemplateRef", inlineEditingTemplateRef: "inlineEditingTemplateRef", cellEditingTemplateRef: "cellEditingTemplateRef", cellPopupEditingTemplateRef: "cellPopupEditingTemplateRef", cellTemplateRefMap: "cellTemplateRefMap", tableClassName: "tableClassName", columnGroups: "columnGroups", hiddenRowIndices: "hiddenRowIndices", enableRowHiding: "enableRowHiding", enableRowPinning: "enableRowPinning", topPinnedMaxHeight: "topPinnedMaxHeight", bottomPinnedMaxHeight: "bottomPinnedMaxHeight", rowPinningFn: "rowPinningFn", rowHidingFilterFn: "rowHidingFilterFn", pdfOrientation: "pdfOrientation" }, outputs: { inlineChange: "inlineChange", cellChange: "cellChange", popupChange: "popupChange", rowDeleted: "rowDeleted", scroll: "scroll", selectionChanged: "selectionChanged", expansionChange: "expansionChange", rowPinningChange: "rowPinningChange" }, viewQueries: [{ propertyName: "menuTrigger", first: true, predicate: MatMenuTrigger, descendants: true }, { propertyName: "columnMenuTrigger", first: true, predicate: ["columnMenuTrigger"], descendants: true }, { propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true }, { propertyName: "matTableRef", first: true, predicate: ["matTable"], descendants: true, read: ElementRef }, { propertyName: "table", first: true, predicate: ["MyTable"], descendants: true }, { propertyName: "tableElement", first: true, predicate: ["MyTable"], descendants: true, read: ElementRef }], usesOnChanges: true, ngImport: i0, template: "<div [style.width]=\"tableWidth\">\n    @if (globalSearch) {\n        <mat-form-field class=\"global-search-field\" appearance=\"fill\">\n            <mat-label>Search</mat-label>\n            <input matInput [ngModel]=\"globalFilter\" (ngModelChange)=\"applyGlobalFilter($event)\" placeholder=\"Ex. Mia\"\n                #input>\n        </mat-form-field>\n    }\n    @if (showToolbar) {\n        <mat-toolbar class=\"toolbar-container\" [style.height]=\"toolbarHeight?toolbarHeight:'50px'\">\n            @if (toolbarTitle) {\n                <span class=\"toolbar-title\">{{toolbarTitle}}</span>\n            }\n            @if (toolbarTemplateRef) {\n                <ng-container [ngTemplateOutlet]=\"toolbarTemplateRef\"></ng-container>\n            }\n            <span class=\"example-spacer\"></span>\n            @if (rowSelection || multiRowSelection) {\n                <button class=\"hide-button\" mat-stroked-button color=\"primary\" (click)=\"hideSelectedRows()\">\n                    Hide Rows\n                </button>\n                <button class=\"hide-button\" mat-stroked-button color=\"primary\" (click)=\"showHiddenRows()\">\n                    Show All Rows\n                </button>\n            }\n            @if (enableRowHiding && hiddenRowIndices.length > 0) {\n                <button class=\"hide-button custom-primary-color\" mat-stroked-button color=\"accent\" (click)=\"unhideAllRows()\"\n                    matTooltip=\"Unhide all hidden rows\" matTooltipPosition=\"above\">\n                    <mat-icon>visibility</mat-icon>\n                    <span>Unhide All ({{hiddenRowIndices.length}})</span>\n                </button>\n            }\n            @if (columnHidable) {\n                <button class=\"hide-button\" mat-stroked-button color=\"primary\"\n                    (click)=\"openMenu('hideShow',$event)\" matTooltip=\"Column Visibility\" matTooltipPosition=\"above\">\n                    <mat-icon>visibility</mat-icon>\n                </button>\n            }\n            @if (columnPinnable) {\n                <button class=\"pin-button\" mat-stroked-button color=\"primary\"\n                    (click)=\"openMenu('columnPin',$event)\" matTooltip=\"Column Pinning\">\n                    <mat-icon svgIcon=\"pinIcon\"></mat-icon>\n                </button>\n            }\n            @if (exportButtonEnable) {\n                <button class=\"export-button\" mat-stroked-button color=\"primary\"\n                    (click)=\"openMenu('export',$event)\" matTooltip=\"Table Data Export\">\n                    <mat-icon>import_export</mat-icon>\n                    <span>Export</span>\n                    <mat-icon iconPositionEnd>expand_more</mat-icon>\n                </button>\n              }\n            @if (printButtonEnable) {\n                <button class=\"print-button\" mat-icon-button color=\"primary\"\n                    (click)=\"printTable()\" matTooltip=\"Print Table\">\n                    <mat-icon>print</mat-icon>\n                </button>\n              }\n            <div style=\"visibility: hidden; position:fixed\" [matMenuTriggerFor]=\"menu\" [style.left.px]=\"menuX\"\n                [style.top.px]=\"menuY\"></div>\n        </mat-toolbar>\n    }\n    <mat-menu #menu=\"matMenu\" (closed)=\"menuClosed()\" id=\"exportMenu\">\n        @if (exportMenuCtrl) {\n            <mat-option (click)=\"exportTable('xlsx')\">Export to Excel</mat-option>\n            <mat-option (click)=\"exportTable('csv')\">Export to CSV</mat-option>\n            <mat-option (click)=\"exportToPDF()\">Export to PDF</mat-option>\n        }\n    </mat-menu>\n    <div style=\"visibility: hidden; position:fixed\" #columnMenuTrigger=\"matMenuTrigger\" [matMenuTriggerFor]=\"columnMenu\"\n        [style.left.px]=\"menuX\" [style.top.px]=\"menuY\">\n    </div>\n    <mat-menu #columnMenu=\"matMenu\" (closed)=\"resetMenuChecks()\">\n        @if (hideShowMenuCtrl) {\n            <div class=\"toolbar-menu-container\" [formGroup]=\"hideShowMenuGroup\"\n                (click)=\"$event.stopPropagation()\">\n                <h4 class=\"column-headers\">Visible Columns</h4>\n                <mat-form-field appearance=\"fill\" style=\"width: -webkit-fill-available;\">\n                    <mat-label>Filter Columns</mat-label>\n                    <input matInput [(ngModel)]=\"showHideFilter\" (ngModelChange)=\"filterColumns($event)\"\n                        [ngModelOptions]=\"{standalone: true}\">\n                </mat-form-field>\n                <div class=\"showHide-menu-columns-list\">\n                    @for (column of showHideColumnsArray; track column.field) {\n                        <div class=\"toolbar-menu-item\">\n                            <mat-checkbox color=\"primary\" class=\"toolbar-menu-checkbox\" style=\"width: max-content;\"\n                                [formControlName]=\"column.field\" (change)=\"setColumnHideShow()\">{{column.header}}</mat-checkbox>\n                        </div>\n                    }\n                </div>\n            </div>\n        }\n        @if (columnPinMenuCtrl) {\n            <div class=\"toolbar-menu-container\" (click)=\"$event.stopPropagation()\">\n                <h4 class=\"column-headers\">Pin Columns</h4>\n                <form class=\"example-form\">\n                    <mat-form-field appearance=\"fill\" style=\"width: -webkit-fill-available;\">\n                        <mat-label>Filter Columns</mat-label>\n                        <input matInput [(ngModel)]=\"showHideFilter\" (ngModelChange)=\"filterColumns($event)\"\n                            [ngModelOptions]=\"{standalone: true}\">\n                    </mat-form-field>\n                </form>\n                <div class=\"showHide-menu-columns-list\">\n                    <app-column-pinning [columns]=\"showHideColumnsArray\" (columnsChanged)=\"updateColumns($event)\"></app-column-pinning>\n                </div>\n            </div>\n        }\n    </mat-menu>\n\n    <!-- Row Pin Menu -->\n    <mat-menu #pinMenu=\"matMenu\" (closed)=\"closeRowPinMenu()\">\n        @if (rowPinMenuRow) {\n            @if (!isRowPinned(rowPinMenuRow)) {\n                <button mat-menu-item (click)=\"pinRow(rowPinMenuRow, 'top')\">\n                    <mat-icon>vertical_align_top</mat-icon>\n                    <span>Pin to Top</span>\n                </button>\n                <button mat-menu-item (click)=\"pinRow(rowPinMenuRow, 'bottom')\">\n                    <mat-icon>vertical_align_bottom</mat-icon>\n                    <span>Pin to Bottom</span>\n                </button>\n            }\n            @if (isRowPinned(rowPinMenuRow)) {\n                <button mat-menu-item (click)=\"unpinRow(rowPinMenuRow)\">\n                    <mat-icon>close</mat-icon>\n                    <span>Unpin Row</span>\n                </button>\n            }\n        }\n    </mat-menu>\n\n    @if (loadingIndicator) {\n        <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\n    }\n    <section id=\"tableContainer\" class=\"mat-table-ext-container\" (scroll)=\"onScroll($event)\"\n        [style.height]=\"tableHeight ? tableHeight :'max-content'\">\n        \n        @if(enableRowPinning){\n            <div [style.max-height]=\"topPinnedMaxHeight\" [style.overflow]=\"topPinnedMaxHeight ? 'auto' : 'visible'\" \n                 [style.position]=\"'sticky'\" [style.top]=\"'0'\" [style.z-index]=\"'111'\">\n            <table style=\"width: 100%;\" \n             mat-table #MyTableTop [id]=\"'matTableExtTop'+tableID\" [dataSource]=\"pinnedTopDataSource\" matSort cdkDropList\n                cdkDropListOrientation=\"horizontal\" multiTemplateDataRows (cdkDropListDropped)=\"onDrop($event)\"\n                (click)=\"saveCellEditing()\" [style.width]=\"scrollbarH?'max-content':'100%'\" \n                [class]=\"'mat-mdc-table' + (tableClassName ? ' ' + tableClassName : '')\">\n    \n                <!-- Row selection column -->\n                <ng-container matColumnDef=\"select\">\n                    <th mat-header-cell *matHeaderCellDef cdkDragLockAxis=\"x\" cdkDrag [cdkDragDisabled]=\"!dndColumns\">\n                        <mat-checkbox (change)=\"$event ? toggleAllRows() : null\"\n                            [checked]=\"selection.hasValue() && isAllSelected()\"\n                            [indeterminate]=\"selection.hasValue() && !isAllSelected()\" [aria-label]=\"checkboxLabel()\">\n                        </mat-checkbox>\n                    </th>\n                    <td mat-cell *matCellDef=\"let row;let i = dataIndex\">\n                        <mat-checkbox (click)=\"$event.stopPropagation()\" (change)=\"$event ? setSelectedRows(row,i) : null\"\n                            [checked]=\"selection.isSelected(row)\" [aria-label]=\"checkboxLabel(row)\">\n                        </mat-checkbox>\n                    </td>\n                    <ng-container *ngIf=\"showFooterRow\">\n                        <td mat-footer-cell *matFooterCellDef></td>\n                    </ng-container>\n                </ng-container>\n                <!--dynamic columns are being generated here-->\n                @for (column of columnsArray; track column.field + '_' + column.pinned; let i = $index) {\n                    <div matColumnDef=\"{{column['field']}}\" [sticky]=\"column.pinned === 'left'\" [stickyEnd]=\"column.pinned === 'right'\">\n                    <th mat-header-cell *matHeaderCellDef [style.minWidth]=\"column.width\" [style.maxWidth]=\"column.maxWidth?column.maxWidth:column.width\"\n                        [style.minWidth]=\"column.minWidth\" cdkDragLockAxis=\"x\" cdkDrag [cdkDragDisabled]=\"!dndColumns\"\n                        [columnsResizable]=\"columnResizable\" [index]=\"i\" class=\"mat-mdc-header-cell\"\n                        [mat-sort-header]=\"column.field\" [disabled]=\"!sorting || column.disabled === true\">\n    \n                        @if (column.headerTemplate || headerTemplateRef) {\n                            <ng-template [ngTemplateOutlet]=\"column.headerTemplate || headerTemplateRef\"\n                                [ngTemplateOutletContext]=\"{data:column}\"></ng-template>\n                        }\n                        @if (!headerTemplateRef && !column.headerTemplate) {\n                            <span matTooltip=\"{{column.headerTooltip?.value}}\"\n                                [matTooltipPosition]=\"column?.headerTooltip?.tooltipPosition!\"\n                                [class.disabled]=\"!sorting || column.disabled === true\">{{column.header}}</span>\n                        }\n                    </th>\n                    <td mat-cell *matCellDef=\"let row ;let i=dataIndex\" class=\"mat-mdc-cell\">\n                        @if (!row.editable && !cellEditing[i +'_'+column.field]) {\n                            <div [style.cursor]=\"'default'\"\n                                matTooltip=\"{{column.cellTooltip?.value}}\"\n                                [matTooltipPosition]=\"column?.cellTooltip?.tooltipPosition!\">\n                                @if (!cellTemplateRef && !column?.cellTemplate && !cellTemplateRefMap[column.field]) {\n                                    <span>{{row[column.field]}}</span>\n                                }\n                                @if (cellTemplateRefMap[column.field]) {\n                                    <ng-container [ngTemplateOutlet]=\"cellTemplateRefMap[column.field]\"\n                                        [ngTemplateOutletContext]=\"{row:row,column:column,index:i}\">\n                                    </ng-container>\n                                }\n                                @if (cellTemplateRef && column.cellTemplate && !cellTemplateRefMap[column.field]) {\n                                    <ng-container [ngTemplateOutlet]=\"column.cellTemplate\"\n                                        [ngTemplateOutletContext]=\"{row:row,column:column,index:i}\">\n                                    </ng-container>\n                                }\n                                @if (!cellTemplateRef && column.cellTemplate && !cellTemplateRefMap[column.field]) {\n                                    <ng-container [ngTemplateOutlet]=\"column.cellTemplate\"\n                                        [ngTemplateOutletContext]=\"{row:row,column:column,index:i}\">\n                                    </ng-container>\n                                }\n                                @if (cellTemplateRef && !column.cellTemplate && !cellTemplateRefMap[column.field]) {\n                                    <ng-container [ngTemplateOutlet]=\"cellTemplateRef\"\n                                        [ngTemplateOutletContext]=\"{row:row,column:column,index:i}\">\n                                    </ng-container>\n                                }\n                            </div>\n                        }\n                        @if (row.editable || cellEditing[i +'_'+column.field]) {\n                            <div (click)=\"$event.stopPropagation()\">\n                                @if (inlineEditingTemplateRef && !cellEditing[i +'_'+column.field]) {\n                                    <ng-container [ngTemplateOutlet]=\"inlineEditingTemplateRef\"\n                                        [ngTemplateOutletContext]=\"{data:getInlineEditingData(row,i,column)}\"></ng-container>\n                                }\n                                @if (cellEditingTemplateRef && !(row.editable)) {\n                                    <ng-container [ngTemplateOutlet]=\"cellEditingTemplateRef\"\n                                        [ngTemplateOutletContext]=\"{data:getInlineEditingData(row,i,column)}\"></ng-container>\n                                }\n                                @if (!inlineEditingTemplateRef && (row.editable) && rowDataTemp['e'+i]) {\n                                    @if (column.type == 'number') {\n                                        <mat-form-field appearance=\"outline\" class=\"inline-editing-field\">\n                                            <input matInput type=\"number\" [(ngModel)]=\"rowDataTemp['e'+i][column.field]\"\n                                                [ngModelOptions]=\"{standalone: true}\">\n                                        </mat-form-field>\n                                    }\n                                    @if (column.type == 'string') {\n                                        <mat-form-field style=\"width: 100%;\" appearance=\"outline\" class=\"inline-editing-field\">\n                                            <input matInput type=\"text\" [(ngModel)]=\"rowDataTemp['e'+i][column.field]\"\n                                                [ngModelOptions]=\"{standalone: true}\">\n                                        </mat-form-field>\n                                    }\n                                    @if (column.type == 'textarea') {\n                                        <mat-form-field style=\"width: 100%;\" appearance=\"outline\" class=\"inline-editing-field\">\n                                            <textarea matInput rows=\"3\" [(ngModel)]=\"rowDataTemp['e'+i][column.field]\"\n                                                [ngModelOptions]=\"{standalone: true}\"></textarea>\n                                        </mat-form-field>\n                                    }\n                                    @if (column.type == 'date') {\n                                        <mat-form-field appearance=\"outline\" class=\"inline-editing-field\">\n                                            <input matInput type=\"date\" [(ngModel)]=\"rowDataTemp['e'+i][column.field]\"\n                                                [ngModelOptions]=\"{standalone: true}\">\n                                        </mat-form-field>\n                                    }\n                                    @if (column.type == 'datepicker') {\n                                        <mat-form-field appearance=\"outline\" class=\"inline-editing-field\">\n                                            <input matInput [matDatepicker]=\"inlinePicker\" [(ngModel)]=\"rowDataTemp['e'+i][column.field]\"\n                                                [ngModelOptions]=\"{standalone: true}\">\n                                            <mat-datepicker-toggle matIconSuffix [for]=\"inlinePicker\"></mat-datepicker-toggle>\n                                            <mat-datepicker #inlinePicker></mat-datepicker>\n                                        </mat-form-field>\n                                    }\n                                    @if (column.type == 'selection') {\n                                        <mat-form-field appearance=\"outline\" class=\"inline-editing-field\">\n                                            <mat-select [value]=\"rowDataTemp['e'+i][column.field]\"\n                                                [(ngModel)]=\"rowDataTemp['e'+i][column.field]\">\n                                                @for (option of column.options; track option) {\n                                                    <mat-option [value]=\"option\">{{option}}</mat-option>\n                                                }\n                                            </mat-select>\n                                        </mat-form-field>\n                                    }\n                                    @if (column.type == 'boolean') {\n                                        <mat-checkbox (click)=\"$event.stopPropagation()\" color=\"primary\" [(ngModel)]=\"row[column.field]\"></mat-checkbox>\n                                    }\n                                }\n                                @if (!cellEditingTemplateRef && cellEditing[i +'_'+column.field]) {\n                                    @if (column.type == 'number') {\n                                        <mat-form-field appearance=\"outline\" class=\"inline-editing-field\">\n                                            <input matInput type=\"number\" [(ngModel)]=\"rowDataTemp['e'+i][column.field]\"\n                                                [ngModelOptions]=\"{standalone: true}\">\n                                        </mat-form-field>\n                                    }\n                                    @if (column.type == 'string') {\n                                        <mat-form-field appearance=\"outline\" class=\"inline-editing-field\">\n                                            <input matInput type=\"text\" [(ngModel)]=\"rowDataTemp['e'+i][column.field]\"\n                                                [ngModelOptions]=\"{standalone: true}\">\n                                        </mat-form-field>\n                                    }\n                                    @if (column.type == 'textarea') {\n                                        <mat-form-field appearance=\"outline\" class=\"inline-editing-field\">\n                                            <textarea matInput rows=\"3\" [(ngModel)]=\"rowDataTemp['e'+i][column.field]\"\n                                                [ngModelOptions]=\"{standalone: true}\"></textarea>\n                                        </mat-form-field>\n                                    }\n                                    @if (column.type == 'date') {\n                                        <mat-form-field appearance=\"outline\" class=\"inline-editing-field\">\n                                            <input matInput type=\"date\" [(ngModel)]=\"rowDataTemp['e'+i][column.field]\"\n                                                [ngModelOptions]=\"{standalone: true}\">\n                                        </mat-form-field>\n                                    }\n                                    @if (column.type == 'datepicker') {\n                                        <mat-form-field appearance=\"outline\" class=\"inline-editing-field\">\n                                            <input matInput [matDatepicker]=\"cellPicker\" [(ngModel)]=\"rowDataTemp['e'+i][column.field]\"\n                                                [ngModelOptions]=\"{standalone: true}\">\n                                            <mat-datepicker-toggle matIconSuffix [for]=\"cellPicker\"></mat-datepicker-toggle>\n                                            <mat-datepicker #cellPicker></mat-datepicker>\n                                        </mat-form-field>\n                                    }\n                                    @if (column.type == 'selection') {\n                                        <mat-form-field appearance=\"outline\" class=\"inline-editing-field\">\n                                            <mat-select [value]=\"rowDataTemp['e'+i][column.field]\"\n                                                [(ngModel)]=\"rowDataTemp['e'+i][column.field]\">\n                                                @for (option of column.options; track option) {\n                                                    <mat-option [value]=\"option\">{{option}}</mat-option>\n                                                }\n                                            </mat-select>\n                                        </mat-form-field>\n                                    }\n                                    @if (column.type == 'boolean') {\n                                        <mat-checkbox (click)=\"$event.stopPropagation()\" color=\"primary\" [(ngModel)]=\"row[column.field]\"></mat-checkbox>\n                                    }\n                                }\n                            </div>\n                        }\n                    </td>\n                    @if (showFooterRow) {\n                        <td mat-footer-cell *matFooterCellDef> {{column.footerText}} </td>\n                    }\n                    </div>\n                }\n                <ng-container matColumnDef=\"edit\" stickyEnd=\"false\">\n                    <th mat-header-cell cdkDragLockAxis=\"x\" cdkDrag [cdkDragDisabled]=\"true\" *matHeaderCellDef\n                        class=\"action-column-cells\"> Edit </th>\n                    <td mat-cell *matCellDef=\"let row; let i = dataIndex\" class=\"inline-edit-column-cell\">\n                        <!-- Edit disabled in pinned top table -->\n                    </td>\n                    <td mat-footer-cell *matFooterCellDef> edit </td>\n                </ng-container>\n                <ng-container matColumnDef=\"popup\" stickyEnd=\"false\">\n                    <th mat-header-cell cdkDragLockAxis=\"x\" cdkDrag [cdkDragDisabled]=\"true\" *matHeaderCellDef\n                        class=\"action-column-cells\"> Popup\n                    </th>\n                    <td mat-cell *matCellDef=\"let row; let i = index\">\n                        <!-- Popup edit disabled in pinned top table -->\n                    </td>\n                    <td mat-footer-cell *matFooterCellDef></td>\n                </ng-container>\n    \n                <ng-container matColumnDef=\"delete\">\n                    <th mat-header-cell cdkDragLockAxis=\"x\" cdkDrag [cdkDragDisabled]=\"true\" *matHeaderCellDef\n                        class=\"action-column-cells\"> Delete\n                    </th>\n                    <td mat-cell *matCellDef=\"let row;let i=dataIndex\">\n                        <mat-icon (click)=\"deleteRow(row,i)\" aria-hidden=\"false\" aria-label=\"Example home icon\"\n                            fontIcon=\"delete\">\n                        </mat-icon>\n                    </td>\n                    <td mat-footer-cell *matFooterCellDef></td>\n                </ng-container>\n    \n                <ng-container matColumnDef=\"hide\" stickyEnd=\"false\">\n                    <th mat-header-cell cdkDragLockAxis=\"x\" cdkDrag [cdkDragDisabled]=\"true\" *matHeaderCellDef\n                        class=\"action-column-cells\"> Hide\n                    </th>\n                    <td mat-cell *matCellDef=\"let row;let i=dataIndex\">\n                        <button mat-icon-button (click)=\"toggleRowHide(i)\" \n                            [matTooltip]=\"isRowHidden(i) ? 'Unhide Row' : 'Hide Row'\"\n                            matTooltipPosition=\"above\">\n                            <mat-icon [color]=\"isRowHidden(i) ? 'primary' : ''\" aria-hidden=\"false\">\n                                {{ isRowHidden(i) ? 'visibility_off' : 'visibility' }}\n                            </mat-icon>\n                        </button>\n                    </td>\n                    <td mat-footer-cell *matFooterCellDef></td>\n                </ng-container>\n    \n                <ng-container matColumnDef=\"pin\" stickyEnd=\"false\">\n                    <th mat-header-cell cdkDragLockAxis=\"x\" cdkDrag [cdkDragDisabled]=\"true\" *matHeaderCellDef\n                        class=\"action-column-cells\"> Pinning\n                    </th>\n                    <td mat-cell *matCellDef=\"let row;let i=dataIndex\">\n                        <button mat-icon-button \n                            [matMenuTriggerFor]=\"pinMenu\"\n                            (click)=\"openRowPinMenu($event, row)\"\n                            [matTooltip]=\"getRowPinPosition(row) ? 'Pinned ' + getRowPinPosition(row) : 'Pin Row'\"\n                            matTooltipPosition=\"above\">\n                            <mat-icon [color]=\"isRowPinned(row) ? 'primary' : ''\" aria-hidden=\"false\">\n                                {{ isRowPinned(row) ? 'push_pin' : 'push_pin' }}\n                            </mat-icon>\n                        </button>\n                    </td>\n                    <td mat-footer-cell *matFooterCellDef></td>\n                </ng-container>\n    \n                <!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->\n                @if (expandRows) {\n                    <ng-container matColumnDef=\"expandedDetail\">\n                        <td mat-cell *matCellDef=\"let element;let i=dataIndex \"\n                            [attr.colspan]=\"columnsToDisplayWithExpand.length\">\n                            <div class=\"example-element-detail\"\n                                [@detailExpand]=\"element == expandedElement ? 'expanded' : 'collapsed'\">\n                                @if (expansionTemplateRef) {\n                                    <ng-container [ngTemplateOutlet]=\"expansionTemplateRef\"\n                                        [ngTemplateOutletContext]=\"{$explicit:element,row:element,index:i}\">\n                                    </ng-container>\n                                }\n                            </div>\n                        </td>\n                    </ng-container>\n                }\n                <!-- Column group headers -->\n                @if (columnGroups.length > 0) {\n                    @for (group of columnGroups; track group.name) {\n                        <ng-container [matColumnDef]=\"'group-' + group.name\">\n                            <th mat-header-cell *matHeaderCellDef [attr.colspan]=\"group.colspan || group.columns.length\" \n                                class=\"group-header-cell\">\n                                <div class=\"group-header-content\">\n                                    <span class=\"group-label\">{{group.label}}</span>\n                                </div>\n                            </th>\n                        </ng-container>\n                    }\n                    <!-- Empty header cells for ungrouped columns -->\n                    @for (column of columnsArray; track column.field) {\n                        <ng-container [matColumnDef]=\"'ungrouped-' + column.field\">\n                            <th mat-header-cell *matHeaderCellDef class=\"group-header-cell ungrouped-header-cell\">\n                            </th>\n                        </ng-container>\n                    }\n                    <!-- Empty header cells for action columns to fill space in group header -->\n                    <ng-container [matColumnDef]=\"'ungrouped-select'\">\n                        <th mat-header-cell *matHeaderCellDef class=\"group-header-cell ungrouped-header-cell\"></th>\n                    </ng-container>\n                    <ng-container [matColumnDef]=\"'ungrouped-edit'\">\n                        <th mat-header-cell *matHeaderCellDef class=\"group-header-cell ungrouped-header-cell\"></th>\n                    </ng-container>\n                    <ng-container [matColumnDef]=\"'ungrouped-popup'\">\n                        <th mat-header-cell *matHeaderCellDef class=\"group-header-cell ungrouped-header-cell\"></th>\n                    </ng-container>\n                    <ng-container [matColumnDef]=\"'ungrouped-delete'\">\n                        <th mat-header-cell *matHeaderCellDef class=\"group-header-cell ungrouped-header-cell\"></th>\n                    </ng-container>\n                    <ng-container [matColumnDef]=\"'ungrouped-freeze'\">\n                        <th mat-header-cell *matHeaderCellDef class=\"group-header-cell ungrouped-header-cell\"></th>\n                    </ng-container>\n                    <ng-container [matColumnDef]=\"'ungrouped-hide'\">\n                        <th mat-header-cell *matHeaderCellDef class=\"group-header-cell ungrouped-header-cell\"></th>\n                    </ng-container>\n                    <ng-container [matColumnDef]=\"'ungrouped-pin'\">\n                        <th mat-header-cell *matHeaderCellDef class=\"group-header-cell ungrouped-header-cell\"></th>\n                    </ng-container>\n                }\n                <!-- Filter row columns for data columns -->\n                @for (ids of headersFiltersIds; track ids; let i = $index) {\n                    <ng-container [matColumnDef]=\"ids\" [sticky]=\"columnsArray[$index].pinned === 'left'\" [stickyEnd]=\"columnsArray[$index].pinned === 'right'\">\n                        <th mat-header-cell *matHeaderCellDef  [style.minWidth]=\"columnsArray[$index].width\" [style.maxWidth]=\"columnsArray[$index].maxWidth?columnsArray[$index].maxWidth:columnsArray[$index].width\"\n                        [style.minWidth]=\"columnsArray[$index].minWidth\" >\n                            <div style=\"display: block; width: 100%;\" class=\"filters-container\" [class.animate]=\"toggleFilters\">\n                                <app-filter-columns-component style=\"display: block; width: 100%;\" [obj]=\"columnsArray[returnIndex(ids)]\"\n                                    (filterOutput)=\"applyColumnFilter($event,columnsArray[returnIndex(ids)])\"></app-filter-columns-component>\n                            </div>\n                        </th>\n                    </ng-container>\n                }\n                <!-- Empty filter cells for action columns -->\n                <ng-container [matColumnDef]=\"'filter-select'\">\n                    <th mat-header-cell *matHeaderCellDef class=\"filter-placeholder-cell\"></th>\n                </ng-container>\n                <ng-container [matColumnDef]=\"'filter-edit'\">\n                    <th mat-header-cell *matHeaderCellDef class=\"filter-placeholder-cell\"></th>\n                </ng-container>\n                <ng-container [matColumnDef]=\"'filter-popup'\">\n                    <th mat-header-cell *matHeaderCellDef class=\"filter-placeholder-cell\"></th>\n                </ng-container>\n                <ng-container [matColumnDef]=\"'filter-delete'\">\n                    <th mat-header-cell *matHeaderCellDef class=\"filter-placeholder-cell\"></th>\n                </ng-container>\n                <ng-container [matColumnDef]=\"'filter-freeze'\">\n                    <th mat-header-cell *matHeaderCellDef class=\"filter-placeholder-cell\"></th>\n                </ng-container>\n                <ng-container [matColumnDef]=\"'filter-hide'\">\n                    <th mat-header-cell *matHeaderCellDef class=\"filter-placeholder-cell\"></th>\n                </ng-container>\n                <ng-container [matColumnDef]=\"'filter-pin'\">\n                    <th mat-header-cell *matHeaderCellDef class=\"filter-placeholder-cell\"></th>\n                </ng-container>\n                @if (columnGroups.length > 0) {\n                    <tr mat-header-row *matHeaderRowDef=\"getGroupedColumns(); sticky: stickyHeader\" class=\"mat-mdc-header-row group-header-row\"></tr>\n                }\n                <tr mat-header-row *matHeaderRowDef=\" getDisplayedColumns(); sticky: stickyHeader\" class=\"mat-mdc-header-row\"></tr>\n                <tr style=\"height: 0px;\" mat-header-row class=\"no-default-height\" *matHeaderRowDef=\"getFilterColumns()\">\n                </tr>\n                \n                <tr mat-row *matRowDef=\"let row; columns:getDisplayedColumns(); let i=dataIndex; \" \n                    class=\"mat-mdc-row data-row\"\n                    [ngClass]=\"{\n                      'data-row':expandRows,\n                      'stripedRows':(stripedRows &&  i % 2 == 1),\n                      'hoverClass':rowHover, \n                      'hidden':(hiddenCtrl.isSelected(row) && hideRows) || isRowHidden(i),\n                      'example-expanded-row':expandedElement === row,\n                      'pinned-row': isRowPinned(row),\n                      'mat-row-sticky-top': isRowPinnedTop(row),\n                      'mat-row-sticky-bottom': isRowPinnedBottom(row)\n                    }\"\n                    (click)=\"expandRow(row, row !== expandedElement,i)\">\n                </tr>\n           \n                @if (expandRows) {\n                    <tr mat-row *matRowDef=\"let row; columns: ['expandedDetail']; let i=dataIndex\"\n                        class=\"example-detail-row\"\n                        [ngClass]=\"{'hidden': isRowHidden(i)}\">\n                    </tr>\n                }\n                @if (showFooterRow) {\n                    <tr mat-footer-row *matFooterRowDef=\"getDisplayedColumns(); sticky: stickyFooter\"></tr>\n                }\n            </table>\n            </div>\n            \n            <table mat-table #matTable #MyTable [id]=\"'matTableExt'+tableID\" [dataSource]=\"dataSource\" matSort cdkDropList\n                cdkDropListOrientation=\"horizontal\" multiTemplateDataRows (cdkDropListDropped)=\"onDrop($event)\"\n                (click)=\"saveCellEditing()\" [style.width]=\"scrollbarH?'max-content':'100%'\" \n                [class]=\"'mat-mdc-table' + (tableClassName ? ' ' + tableClassName : '')\">\n    \n                <!-- Row selection column -->\n                <ng-container matColumnDef=\"select\">\n                    <th mat-header-cell *matHeaderCellDef cdkDragLockAxis=\"x\" cdkDrag [cdkDragDisabled]=\"!dndColumns\">\n                        <mat-checkbox (change)=\"$event ? toggleAllRows() : null\"\n                            [checked]=\"selection.hasValue() && isAllSelected()\"\n                            [indeterminate]=\"selection.hasValue() && !isAllSelected()\" [aria-label]=\"checkboxLabel()\">\n                        </mat-checkbox>\n                    </th>\n                    <td mat-cell *matCellDef=\"let row;let i = dataIndex\">\n                        <mat-checkbox (click)=\"$event.stopPropagation()\" (change)=\"$event ? setSelectedRows(row,i) : null\"\n                            [checked]=\"selection.isSelected(row)\" [aria-label]=\"checkboxLabel(row)\">\n                        </mat-checkbox>\n                    </td>\n                    <ng-container *ngIf=\"showFooterRow\">\n                        <td mat-footer-cell *matFooterCellDef></td>\n                    </ng-container>\n                </ng-container>\n                <!--dynamic columns are being generated here-->\n                @for (column of columnsArray; track column.field + '_' + column.pinned; let i = $index) {\n                    <div matColumnDef=\"{{column['field']}}\" [sticky]=\"column.pinned === 'left'\" [stickyEnd]=\"column.pinned === 'right'\">\n                    <th mat-header-cell *matHeaderCellDef [style.minWidth]=\"column.width\" [style.maxWidth]=\"column.maxWidth?column.maxWidth:column.width\"\n                        [style.minWidth]=\"column.minWidth\" cdkDragLockAxis=\"x\" cdkDrag [cdkDragDisabled]=\"!dndColumns\"\n                        [columnsResizable]=\"columnResizable\" [index]=\"i\" class=\"mat-mdc-header-cell\"\n                        [mat-sort-header]=\"column.field\" [disabled]=\"!sorting || column.disabled === true\">\n    \n                        @if (column.headerTemplate || headerTemplateRef) {\n                            <ng-template [ngTemplateOutlet]=\"column.headerTemplate || headerTemplateRef\"\n                                [ngTemplateOutletContext]=\"{data:column}\"></ng-template>\n                        }\n                        @if (!headerTemplateRef && !column.headerTemplate) {\n                            <span matTooltip=\"{{column.headerTooltip?.value}}\"\n                                [matTooltipPosition]=\"column?.headerTooltip?.tooltipPosition!\"\n                                [class.disabled]=\"!sorting || column.disabled === true\">{{column.header}}</span>\n                        }\n                    </th>\n                    <td mat-cell *matCellDef=\"let row ;let i=dataIndex\" class=\"mat-mdc-cell\">\n                        @if (!row.editable && !cellEditing[i +'_'+column.field]) {\n                            <div (dblclick)=\"cellEditing[i +'_'+column.field] = inCellEditing;setCellData(row,i)\"\n                                (click)=\"cellPopupEditing ? openCellPopupDialog(row, column, i) : null\"\n                                [style.cursor]=\"cellPopupEditing ? 'pointer' : 'default'\"\n                                matTooltip=\"{{column.cellTooltip?.value}}\"\n                                [matTooltipPosition]=\"column?.cellTooltip?.tooltipPosition!\">\n                                @if (!cellTemplateRef && !column?.cellTemplate && !cellTemplateRefMap[column.field]) {\n                                    <span>{{row[column.field]}}</span>\n                                }\n                                @if (cellTemplateRefMap[column.field]) {\n                                    <ng-container [ngTemplateOutlet]=\"cellTemplateRefMap[column.field]\"\n                                        [ngTemplateOutletContext]=\"{row:row,column:column,index:i}\">\n                                    </ng-container>\n                                }\n                                @if (cellTemplateRef && column.cellTemplate && !cellTemplateRefMap[column.field]) {\n                                    <ng-container [ngTemplateOutlet]=\"column.cellTemplate\"\n                                        [ngTemplateOutletContext]=\"{row:row,column:column,index:i}\">\n                                    </ng-container>\n                                }\n                                @if (!cellTemplateRef && column.cellTemplate && !cellTemplateRefMap[column.field]) {\n                                    <ng-container [ngTemplateOutlet]=\"column.cellTemplate\"\n                                        [ngTemplateOutletContext]=\"{row:row,column:column,index:i}\">\n                                    </ng-container>\n                                }\n                                @if (cellTemplateRef && !column.cellTemplate && !cellTemplateRefMap[column.field]) {\n                                    <ng-container [ngTemplateOutlet]=\"cellTemplateRef\"\n                                        [ngTemplateOutletContext]=\"{row:row,column:column,index:i}\">\n                                    </ng-container>\n                                }\n                            </div>\n                        }\n                        @if (row.editable || cellEditing[i +'_'+column.field]) {\n                            <div (click)=\"$event.stopPropagation()\">\n                                @if (inlineEditingTemplateRef && !cellEditing[i +'_'+column.field]) {\n                                    <ng-container [ngTemplateOutlet]=\"inlineEditingTemplateRef\"\n                                        [ngTemplateOutletContext]=\"{data:getInlineEditingData(row,i,column)}\"></ng-container>\n                                }\n                                @if (cellEditingTemplateRef && !(row.editable)) {\n                                    <ng-container [ngTemplateOutlet]=\"cellEditingTemplateRef\"\n                                        [ngTemplateOutletContext]=\"{data:getInlineEditingData(row,i,column)}\"></ng-container>\n                                }\n                                @if (!inlineEditingTemplateRef && (row.editable) && rowDataTemp['e'+i]) {\n                                    @if (column.type == 'number') {\n                                        <mat-form-field appearance=\"outline\" class=\"inline-editing-field\">\n                                            <input matInput type=\"number\" [(ngModel)]=\"rowDataTemp['e'+i][column.field]\"\n                                                [ngModelOptions]=\"{standalone: true}\">\n                                        </mat-form-field>\n                                    }\n                                    @if (column.type == 'string') {\n                                        <mat-form-field style=\"width: 100%;\" appearance=\"outline\" class=\"inline-editing-field\">\n                                            <input matInput type=\"text\" [(ngModel)]=\"rowDataTemp['e'+i][column.field]\"\n                                                [ngModelOptions]=\"{standalone: true}\">\n                                        </mat-form-field>\n                                    }\n                                    @if (column.type == 'textarea') {\n                                        <mat-form-field style=\"width: 100%;\" appearance=\"outline\" class=\"inline-editing-field\">\n                                            <textarea matInput rows=\"3\" [(ngModel)]=\"rowDataTemp['e'+i][column.field]\"\n                                                [ngModelOptions]=\"{standalone: true}\"></textarea>\n                                        </mat-form-field>\n                                    }\n                                    @if (column.type == 'date') {\n                                        <mat-form-field appearance=\"outline\" class=\"inline-editing-field\">\n                                            <input matInput type=\"date\" [(ngModel)]=\"rowDataTemp['e'+i][column.field]\"\n                                                [ngModelOptions]=\"{standalone: true}\">\n                                        </mat-form-field>\n                                    }\n                                    @if (column.type == 'datepicker') {\n                                        <mat-form-field appearance=\"outline\" class=\"inline-editing-field\">\n                                            <input matInput [matDatepicker]=\"inlinePicker\" [(ngModel)]=\"rowDataTemp['e'+i][column.field]\"\n                                                [ngModelOptions]=\"{standalone: true}\">\n                                            <mat-datepicker-toggle matIconSuffix [for]=\"inlinePicker\"></mat-datepicker-toggle>\n                                            <mat-datepicker #inlinePicker></mat-datepicker>\n                                        </mat-form-field>\n                                    }\n                                    @if (column.type == 'selection') {\n                                        <mat-form-field appearance=\"outline\" class=\"inline-editing-field\">\n                                            <mat-select [value]=\"rowDataTemp['e'+i][column.field]\"\n                                                [(ngModel)]=\"rowDataTemp['e'+i][column.field]\">\n                                                @for (option of column.options; track option) {\n                                                    <mat-option [value]=\"option\">{{option}}</mat-option>\n                                                }\n                                            </mat-select>\n                                        </mat-form-field>\n                                    }\n                                    @if (column.type == 'boolean') {\n                                        <mat-checkbox (click)=\"$event.stopPropagation()\" color=\"primary\" [(ngModel)]=\"row[column.field]\"></mat-checkbox>\n                                    }\n                                }\n                                @if (!cellEditingTemplateRef && cellEditing[i +'_'+column.field]) {\n                                    @if (column.type == 'number') {\n                                        <mat-form-field appearance=\"outline\" class=\"inline-editing-field\">\n                                            <input matInput type=\"number\" [(ngModel)]=\"rowDataTemp['e'+i][column.field]\"\n                                                [ngModelOptions]=\"{standalone: true}\">\n                                        </mat-form-field>\n                                    }\n                                    @if (column.type == 'string') {\n                                        <mat-form-field appearance=\"outline\" class=\"inline-editing-field\">\n                                            <input matInput type=\"text\" [(ngModel)]=\"rowDataTemp['e'+i][column.field]\"\n                                                [ngModelOptions]=\"{standalone: true}\">\n                                        </mat-form-field>\n                                    }\n                                    @if (column.type == 'textarea') {\n                                        <mat-form-field appearance=\"outline\" class=\"inline-editing-field\">\n                                            <textarea matInput rows=\"3\" [(ngModel)]=\"rowDataTemp['e'+i][column.field]\"\n                                                [ngModelOptions]=\"{standalone: true}\"></textarea>\n                                        </mat-form-field>\n                                    }\n                                    @if (column.type == 'date') {\n                                        <mat-form-field appearance=\"outline\" class=\"inline-editing-field\">\n                                            <input matInput type=\"date\" [(ngModel)]=\"rowDataTemp['e'+i][column.field]\"\n                                                [ngModelOptions]=\"{standalone: true}\">\n                                        </mat-form-field>\n                                    }\n                                    @if (column.type == 'datepicker') {\n                                        <mat-form-field appearance=\"outline\" class=\"inline-editing-field\">\n                                            <input matInput [matDatepicker]=\"cellPicker\" [(ngModel)]=\"rowDataTemp['e'+i][column.field]\"\n                                                [ngModelOptions]=\"{standalone: true}\">\n                                            <mat-datepicker-toggle matIconSuffix [for]=\"cellPicker\"></mat-datepicker-toggle>\n                                            <mat-datepicker #cellPicker></mat-datepicker>\n                                        </mat-form-field>\n                                    }\n                                    @if (column.type == 'selection') {\n                                        <mat-form-field appearance=\"outline\" class=\"inline-editing-field\">\n                                            <mat-select [value]=\"rowDataTemp['e'+i][column.field]\"\n                                                [(ngModel)]=\"rowDataTemp['e'+i][column.field]\">\n                                                @for (option of column.options; track option) {\n                                                    <mat-option [value]=\"option\">{{option}}</mat-option>\n                                                }\n                                            </mat-select>\n                                        </mat-form-field>\n                                    }\n                                    @if (column.type == 'boolean') {\n                                        <mat-checkbox (click)=\"$event.stopPropagation()\" color=\"primary\" [(ngModel)]=\"row[column.field]\"></mat-checkbox>\n                                    }\n                                }\n                            </div>\n                        }\n                    </td>\n                    @if (showFooterRow) {\n                        <td mat-footer-cell *matFooterCellDef> {{column.footerText}} </td>\n                    }\n                    </div>\n                }\n                <ng-container matColumnDef=\"edit\" stickyEnd=\"false\">\n                    <th mat-header-cell cdkDragLockAxis=\"x\" cdkDrag [cdkDragDisabled]=\"true\" *matHeaderCellDef\n                        class=\"action-column-cells\"> Edit </th>\n                    <td mat-cell *matCellDef=\"let row; let i = dataIndex\" class=\"inline-edit-column-cell\">\n                        @if (!row.editable && !row.editmodal) {\n                            <mat-icon class=\"edit-column-icons\" aria-hidden=\"false\"\n                                (click)=\"enableInlineEditing(row,i)\" fontIcon=\"edit_note\">\n                            </mat-icon>\n                        }\n                        @if (row.editable && !row.editmodal) {\n                            <div class=\"inline-editing-controls\">\n                                <mat-icon class=\"edit-column-icons\" aria-hidden=\"false\" (click)=\"saveInlineEditing(row,i)\"\n                                    fontIcon=\"done\"></mat-icon>\n                                <mat-icon class=\"edit-column-icons\" aria-hidden=\"false\" (click)=\"cancelInlineEditing(row,i)\"\n                                    fontIcon=\"close\"></mat-icon>\n                            </div>\n                        }\n                    </td>\n                    <td mat-footer-cell *matFooterCellDef> edit </td>\n                </ng-container>\n                <ng-container matColumnDef=\"popup\" stickyEnd=\"false\">\n                    <th mat-header-cell cdkDragLockAxis=\"x\" cdkDrag [cdkDragDisabled]=\"true\" *matHeaderCellDef\n                        class=\"action-column-cells\"> Popup\n                    </th>\n                    <td mat-cell *matCellDef=\"let row; let i = index\">\n                        <mat-icon aria-hidden=\"false\" (click)=\"openEditingDialog(row)\" fontIcon=\"edit\">\n                        </mat-icon>\n                    </td>\n                    <td mat-footer-cell *matFooterCellDef></td>\n                </ng-container>\n    \n                <ng-container matColumnDef=\"delete\">\n                    <th mat-header-cell cdkDragLockAxis=\"x\" cdkDrag [cdkDragDisabled]=\"true\" *matHeaderCellDef\n                        class=\"action-column-cells\"> Delete\n                    </th>\n                    <td mat-cell *matCellDef=\"let row;let i=dataIndex\">\n                        <mat-icon (click)=\"deleteRow(row,i)\" aria-hidden=\"false\" aria-label=\"Example home icon\"\n                            fontIcon=\"delete\">\n                        </mat-icon>\n                    </td>\n                    <td mat-footer-cell *matFooterCellDef></td>\n                </ng-container>\n    \n                <ng-container matColumnDef=\"hide\" stickyEnd=\"false\">\n                    <th mat-header-cell cdkDragLockAxis=\"x\" cdkDrag [cdkDragDisabled]=\"true\" *matHeaderCellDef\n                        class=\"action-column-cells\"> Hide\n                    </th>\n                    <td mat-cell *matCellDef=\"let row;let i=dataIndex\">\n                        <button mat-icon-button (click)=\"toggleRowHide(i)\" \n                            [matTooltip]=\"isRowHidden(i) ? 'Unhide Row' : 'Hide Row'\"\n                            matTooltipPosition=\"above\">\n                            <mat-icon [color]=\"isRowHidden(i) ? 'primary' : ''\" aria-hidden=\"false\">\n                                {{ isRowHidden(i) ? 'visibility_off' : 'visibility' }}\n                            </mat-icon>\n                        </button>\n                    </td>\n                    <td mat-footer-cell *matFooterCellDef></td>\n                </ng-container>\n    \n                <ng-container matColumnDef=\"pin\" stickyEnd=\"false\">\n                    <th mat-header-cell cdkDragLockAxis=\"x\" cdkDrag [cdkDragDisabled]=\"true\" *matHeaderCellDef\n                        class=\"action-column-cells\"> Pin\n                    </th>\n                    <td mat-cell *matCellDef=\"let row;let i=dataIndex\">\n                        <button mat-icon-button \n                            [matMenuTriggerFor]=\"pinMenu\"\n                            (click)=\"openRowPinMenu($event, row)\"\n                            [matTooltip]=\"getRowPinPosition(row) ? 'Pinned ' + getRowPinPosition(row) : 'Pin Row'\"\n                            matTooltipPosition=\"above\">\n                            <mat-icon [color]=\"isRowPinned(row) ? 'primary' : ''\" aria-hidden=\"false\">\n                                {{ isRowPinned(row) ? 'push_pin' : 'push_pin' }}\n                            </mat-icon>\n                        </button>\n                    </td>\n                    <td mat-footer-cell *matFooterCellDef></td>\n                </ng-container>\n    \n                <!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->\n                @if (expandRows) {\n                    <ng-container matColumnDef=\"expandedDetail\">\n                        <td mat-cell *matCellDef=\"let element;let i=dataIndex \"\n                            [attr.colspan]=\"columnsToDisplayWithExpand.length\">\n                            <div class=\"example-element-detail\"\n                                [@detailExpand]=\"element == expandedElement ? 'expanded' : 'collapsed'\">\n                                @if (expansionTemplateRef) {\n                                    <ng-container [ngTemplateOutlet]=\"expansionTemplateRef\"\n                                        [ngTemplateOutletContext]=\"{$explicit:element,row:element,index:i}\">\n                                    </ng-container>\n                                }\n                            </div>\n                        </td>\n                    </ng-container>\n                }\n                <!-- Column group headers -->\n                <!-- @if (columnGroups.length > 0) {\n                    @for (group of columnGroups; track group.name) {\n                        <ng-container [matColumnDef]=\"'group-' + group.name\">\n                            <th mat-header-cell *matHeaderCellDef [attr.colspan]=\"group.colspan || group.columns.length\" \n                                class=\"group-header-cell\">\n                                <div class=\"group-header-content\">\n                                    <span class=\"group-label\">{{group.label}}</span>\n                                </div>\n                            </th>\n                        </ng-container>\n                    }\n                    @for (column of columnsArray; track column.field) {\n                        <ng-container [matColumnDef]=\"'ungrouped-' + column.field\">\n                            <th mat-header-cell *matHeaderCellDef class=\"group-header-cell ungrouped-header-cell\">\n                            </th>\n                        </ng-container>\n                    }\n                } -->\n                <!-- @if (columnGroups.length > 0) {\n                    <tr mat-header-row *matHeaderRowDef=\"getGroupedColumns(); sticky: stickyHeader\" class=\"mat-mdc-header-row group-header-row\"></tr>\n                } -->\n                <tr style=\"display:none\" mat-header-row *matHeaderRowDef=\" getDisplayedColumns(); sticky: stickyHeader\" class=\"mat-mdc-header-row\"></tr>\n                \n                <!-- All Data Rows (with dynamic pinning classes) -->\n                <!-- <tr mat-row *matRowDef=\"let row; columns:getDisplayedColumns(); let i=dataIndex;\" \n                    class=\"mat-mdc-row data-row\"\n                    [ngClass]=\"{\n                      'data-row':expandRows,\n                      'stripedRows':(stripedRows &&  i % 2 == 1),\n                      'hoverClass':rowHover, \n                      'hidden':(hiddenCtrl.isSelected(row) && hideRows) || isRowHidden(i),\n                      'example-expanded-row':expandedElement === row,\n                      'pinned-row': isRowPinned(row),\n                      'pinned-top-row': isRowPinnedTop(row),\n                      'pinned-bottom-row': isRowPinnedBottom(row)\n                    }\"\n                    (click)=\"expandRow(row, row !== expandedElement,i)\">\n                </tr> -->\n                <tr mat-row *matRowDef=\"let row; columns:getDisplayedColumns(); let i=dataIndex; \" \n                    class=\"mat-mdc-row data-row\"\n                    [ngClass]=\"{\n                      'data-row':expandRows,\n                      'stripedRows':(stripedRows &&  i % 2 == 1),\n                      'hoverClass':rowHover, \n                      'hidden':(hiddenCtrl.isSelected(row) && hideRows) || isRowHidden(i),\n                      'example-expanded-row':expandedElement === row,\n                      'pinned-row': isRowPinned(row),\n                      'mat-row-sticky-top': isRowPinnedTop(row),\n                      'mat-row-sticky-bottom': isRowPinnedBottom(row)\n                    }\"\n                    (click)=\"expandRow(row, row !== expandedElement,i)\">\n                </tr>\n                <!-- <tr mat-header-row *matHeaderRowDef=\"let row; columns:getDisplayedColumns(); let i=dataIndex; when: isRowPinnedTop(row)\" \n                    class=\"mat-mdc-row data-row\"\n                    class=\"mat-mdc-header-row\"\n                    [ngClass]=\"{\n                      'data-row':expandRows,\n                      'stripedRows':(stripedRows &&  i % 2 == 1),\n                      'hoverClass':rowHover, \n                      'hidden':(hiddenCtrl.isSelected(row) && hideRows) || isRowHidden(i),\n                      'example-expanded-row':expandedElement === row,\n                      'pinned-row': isRowPinned(row),\n                      'pinned-top-row': isRowPinnedTop(row),\n                      'pinned-bottom-row': isRowPinnedBottom(row)\n                    }\"\n                    (click)=\"expandRow(row, row !== expandedElement,i)\">\n                </tr> -->\n           \n                @if (expandRows) {\n                    <tr mat-row *matRowDef=\"let row; columns: ['expandedDetail']; let i=dataIndex\"\n                        class=\"example-detail-row\"\n                        [ngClass]=\"{'hidden': isRowHidden(i)}\">\n                    </tr>\n                }\n                @if (showFooterRow) {\n                    <tr mat-footer-row *matFooterRowDef=\"getDisplayedColumns(); sticky: stickyFooter\"></tr>\n                }\n            </table>\n            @if (pinnedBtmDataSource && pinnedBtmDataSource.data.length > 0) {\n                <div [style.max-height]=\"bottomPinnedMaxHeight\" [style.overflow]=\"bottomPinnedMaxHeight ? 'auto' : 'visible'\" \n                     [style.position]=\"'sticky'\" [style.bottom]=\"'0'\" [style.z-index]=\"'111'\">\n                <table style=\"width: 100%;\"  mat-table #matTable #MyTable [id]=\"'matTableExtBtm'+tableID\" [dataSource]=\"pinnedBtmDataSource\" matSort cdkDropList\n                    cdkDropListOrientation=\"horizontal\" multiTemplateDataRows (cdkDropListDropped)=\"onDrop($event)\"\n                    (click)=\"saveCellEditing()\" [style.width]=\"scrollbarH?'max-content':'100%'\" \n                    [class]=\"'mat-mdc-table' + (tableClassName ? ' ' + tableClassName : '')\">\n        \n                    <!-- Row selection column -->\n                    <ng-container matColumnDef=\"select\">\n                        <th mat-header-cell *matHeaderCellDef cdkDragLockAxis=\"x\" cdkDrag [cdkDragDisabled]=\"!dndColumns\">\n                            <mat-checkbox (change)=\"$event ? toggleAllRows() : null\"\n                                [checked]=\"selection.hasValue() && isAllSelected()\"\n                                [indeterminate]=\"selection.hasValue() && !isAllSelected()\" [aria-label]=\"checkboxLabel()\">\n                            </mat-checkbox>\n                        </th>\n                        <td mat-cell *matCellDef=\"let row;let i = dataIndex\">\n                            <mat-checkbox (click)=\"$event.stopPropagation()\" (change)=\"$event ? setSelectedRows(row,i) : null\"\n                                [checked]=\"selection.isSelected(row)\" [aria-label]=\"checkboxLabel(row)\">\n                            </mat-checkbox>\n                        </td>\n                        <ng-container *ngIf=\"showFooterRow\">\n                            <td mat-footer-cell *matFooterCellDef></td>\n                        </ng-container>\n                    </ng-container>\n                    <!--dynamic columns are being generated here-->\n                    @for (column of columnsArray; track column.field + '_' + column.pinned; let i = $index) {\n                        <div matColumnDef=\"{{column['field']}}\" [sticky]=\"column.pinned === 'left'\" [stickyEnd]=\"column.pinned === 'right'\">\n                        <th mat-header-cell *matHeaderCellDef [style.minWidth]=\"column.width\" [style.maxWidth]=\"column.maxWidth?column.maxWidth:column.width\"\n                            [style.minWidth]=\"column.minWidth\" cdkDragLockAxis=\"x\" cdkDrag [cdkDragDisabled]=\"!dndColumns\"\n                            [columnsResizable]=\"columnResizable\" [index]=\"i\" class=\"mat-mdc-header-cell\"\n                            [mat-sort-header]=\"column.field\" [disabled]=\"!sorting || column.disabled === true\">\n        \n                            @if (column.headerTemplate || headerTemplateRef) {\n                                <ng-template [ngTemplateOutlet]=\"column.headerTemplate || headerTemplateRef\"\n                                    [ngTemplateOutletContext]=\"{data:column}\"></ng-template>\n                            }\n                            @if (!headerTemplateRef && !column.headerTemplate) {\n                                <span matTooltip=\"{{column.headerTooltip?.value}}\"\n                                    [matTooltipPosition]=\"column?.headerTooltip?.tooltipPosition!\"\n                                    [class.disabled]=\"!sorting || column.disabled === true\">{{column.header}}</span>\n                            }\n                        </th>\n                        <td mat-cell *matCellDef=\"let row ;let i=dataIndex\" class=\"mat-mdc-cell\">\n                            @if (!row.editable && !cellEditing[i +'_'+column.field]) {\n                                <div [style.cursor]=\"'default'\"\n                                    matTooltip=\"{{column.cellTooltip?.value}}\"\n                                    [matTooltipPosition]=\"column?.cellTooltip?.tooltipPosition!\">\n                                    @if (!cellTemplateRef && !column?.cellTemplate && !cellTemplateRefMap[column.field]) {\n                                        <span>{{row[column.field]}}</span>\n                                    }\n                                    @if (cellTemplateRefMap[column.field]) {\n                                        <ng-container [ngTemplateOutlet]=\"cellTemplateRefMap[column.field]\"\n                                            [ngTemplateOutletContext]=\"{row:row,column:column,index:i}\">\n                                        </ng-container>\n                                    }\n                                    @if (cellTemplateRef && column.cellTemplate && !cellTemplateRefMap[column.field]) {\n                                        <ng-container [ngTemplateOutlet]=\"column.cellTemplate\"\n                                            [ngTemplateOutletContext]=\"{row:row,column:column,index:i}\">\n                                        </ng-container>\n                                    }\n                                    @if (!cellTemplateRef && column.cellTemplate && !cellTemplateRefMap[column.field]) {\n                                        <ng-container [ngTemplateOutlet]=\"column.cellTemplate\"\n                                            [ngTemplateOutletContext]=\"{row:row,column:column,index:i}\">\n                                        </ng-container>\n                                    }\n                                    @if (cellTemplateRef && !column.cellTemplate && !cellTemplateRefMap[column.field]) {\n                                        <ng-container [ngTemplateOutlet]=\"cellTemplateRef\"\n                                            [ngTemplateOutletContext]=\"{row:row,column:column,index:i}\">\n                                        </ng-container>\n                                    }\n                                </div>\n                            }\n                            @if (row.editable || cellEditing[i +'_'+column.field]) {\n                                <div (click)=\"$event.stopPropagation()\">\n                                    @if (inlineEditingTemplateRef && !cellEditing[i +'_'+column.field]) {\n                                        <ng-container [ngTemplateOutlet]=\"inlineEditingTemplateRef\"\n                                            [ngTemplateOutletContext]=\"{data:getInlineEditingData(row,i,column)}\"></ng-container>\n                                    }\n                                    @if (cellEditingTemplateRef && !(row.editable)) {\n                                        <ng-container [ngTemplateOutlet]=\"cellEditingTemplateRef\"\n                                            [ngTemplateOutletContext]=\"{data:getInlineEditingData(row,i,column)}\"></ng-container>\n                                    }\n                                    @if (!inlineEditingTemplateRef && (row.editable) && rowDataTemp['e'+i]) {\n                                        @if (column.type == 'number') {\n                                            <mat-form-field appearance=\"outline\" class=\"inline-editing-field\">\n                                                <input matInput type=\"number\" [(ngModel)]=\"rowDataTemp['e'+i][column.field]\"\n                                                    [ngModelOptions]=\"{standalone: true}\">\n                                            </mat-form-field>\n                                        }\n                                        @if (column.type == 'string') {\n                                            <mat-form-field style=\"width: 100%;\" appearance=\"outline\" class=\"inline-editing-field\">\n                                                <input matInput type=\"text\" [(ngModel)]=\"rowDataTemp['e'+i][column.field]\"\n                                                    [ngModelOptions]=\"{standalone: true}\">\n                                            </mat-form-field>\n                                        }\n                                        @if (column.type == 'textarea') {\n                                            <mat-form-field style=\"width: 100%;\" appearance=\"outline\" class=\"inline-editing-field\">\n                                                <textarea matInput rows=\"3\" [(ngModel)]=\"rowDataTemp['e'+i][column.field]\"\n                                                    [ngModelOptions]=\"{standalone: true}\"></textarea>\n                                            </mat-form-field>\n                                        }\n                                        @if (column.type == 'date') {\n                                            <mat-form-field appearance=\"outline\" class=\"inline-editing-field\">\n                                                <input matInput type=\"date\" [(ngModel)]=\"rowDataTemp['e'+i][column.field]\"\n                                                    [ngModelOptions]=\"{standalone: true}\">\n                                            </mat-form-field>\n                                        }\n                                        @if (column.type == 'datepicker') {\n                                            <mat-form-field appearance=\"outline\" class=\"inline-editing-field\">\n                                                <input matInput [matDatepicker]=\"inlinePicker\" [(ngModel)]=\"rowDataTemp['e'+i][column.field]\"\n                                                    [ngModelOptions]=\"{standalone: true}\">\n                                                <mat-datepicker-toggle matIconSuffix [for]=\"inlinePicker\"></mat-datepicker-toggle>\n                                                <mat-datepicker #inlinePicker></mat-datepicker>\n                                            </mat-form-field>\n                                        }\n                                        @if (column.type == 'selection') {\n                                            <mat-form-field appearance=\"outline\" class=\"inline-editing-field\">\n                                                <mat-select [value]=\"rowDataTemp['e'+i][column.field]\"\n                                                    [(ngModel)]=\"rowDataTemp['e'+i][column.field]\">\n                                                    @for (option of column.options; track option) {\n                                                        <mat-option [value]=\"option\">{{option}}</mat-option>\n                                                    }\n                                                </mat-select>\n                                            </mat-form-field>\n                                        }\n                                        @if (column.type == 'boolean') {\n                                            <mat-checkbox (click)=\"$event.stopPropagation()\" color=\"primary\" [(ngModel)]=\"row[column.field]\"></mat-checkbox>\n                                        }\n                                    }\n                                    @if (!cellEditingTemplateRef && cellEditing[i +'_'+column.field]) {\n                                        @if (column.type == 'number') {\n                                            <mat-form-field appearance=\"outline\" class=\"inline-editing-field\">\n                                                <input matInput type=\"number\" [(ngModel)]=\"rowDataTemp['e'+i][column.field]\"\n                                                    [ngModelOptions]=\"{standalone: true}\">\n                                            </mat-form-field>\n                                        }\n                                        @if (column.type == 'string') {\n                                            <mat-form-field appearance=\"outline\" class=\"inline-editing-field\">\n                                                <input matInput type=\"text\" [(ngModel)]=\"rowDataTemp['e'+i][column.field]\"\n                                                    [ngModelOptions]=\"{standalone: true}\">\n                                            </mat-form-field>\n                                        }\n                                        @if (column.type == 'textarea') {\n                                            <mat-form-field appearance=\"outline\" class=\"inline-editing-field\">\n                                                <textarea matInput rows=\"3\" [(ngModel)]=\"rowDataTemp['e'+i][column.field]\"\n                                                    [ngModelOptions]=\"{standalone: true}\"></textarea>\n                                            </mat-form-field>\n                                        }\n                                        @if (column.type == 'date') {\n                                            <mat-form-field appearance=\"outline\" class=\"inline-editing-field\">\n                                                <input matInput type=\"date\" [(ngModel)]=\"rowDataTemp['e'+i][column.field]\"\n                                                    [ngModelOptions]=\"{standalone: true}\">\n                                            </mat-form-field>\n                                        }\n                                        @if (column.type == 'datepicker') {\n                                            <mat-form-field appearance=\"outline\" class=\"inline-editing-field\">\n                                                <input matInput [matDatepicker]=\"cellPicker\" [(ngModel)]=\"rowDataTemp['e'+i][column.field]\"\n                                                    [ngModelOptions]=\"{standalone: true}\">\n                                                <mat-datepicker-toggle matIconSuffix [for]=\"cellPicker\"></mat-datepicker-toggle>\n                                                <mat-datepicker #cellPicker></mat-datepicker>\n                                            </mat-form-field>\n                                        }\n                                        @if (column.type == 'selection') {\n                                            <mat-form-field appearance=\"outline\" class=\"inline-editing-field\">\n                                                <mat-select [value]=\"rowDataTemp['e'+i][column.field]\"\n                                                    [(ngModel)]=\"rowDataTemp['e'+i][column.field]\">\n                                                    @for (option of column.options; track option) {\n                                                        <mat-option [value]=\"option\">{{option}}</mat-option>\n                                                    }\n                                                </mat-select>\n                                            </mat-form-field>\n                                        }\n                                        @if (column.type == 'boolean') {\n                                            <mat-checkbox (click)=\"$event.stopPropagation()\" color=\"primary\" [(ngModel)]=\"row[column.field]\"></mat-checkbox>\n                                        }\n                                    }\n                                </div>\n                            }\n                        </td>\n                        @if (showFooterRow) {\n                            <td mat-footer-cell *matFooterCellDef> {{column.footerText}} </td>\n                        }\n                        </div>\n                    }\n                    <ng-container matColumnDef=\"edit\" stickyEnd=\"false\">\n                        <th mat-header-cell cdkDragLockAxis=\"x\" cdkDrag [cdkDragDisabled]=\"true\" *matHeaderCellDef\n                            class=\"action-column-cells\"> Edit </th>\n                        <td mat-cell *matCellDef=\"let row; let i = dataIndex\" class=\"inline-edit-column-cell\">\n                            <!-- Edit disabled in pinned bottom table -->\n                        </td>\n                        <td mat-footer-cell *matFooterCellDef> edit </td>\n                    </ng-container>\n                    <ng-container matColumnDef=\"popup\" stickyEnd=\"false\">\n                        <th mat-header-cell cdkDragLockAxis=\"x\" cdkDrag [cdkDragDisabled]=\"true\" *matHeaderCellDef\n                            class=\"action-column-cells\"> Popup\n                        </th>\n                        <td mat-cell *matCellDef=\"let row; let i = index\">\n                            <!-- Popup edit disabled in pinned bottom table -->\n                        </td>\n                        <td mat-footer-cell *matFooterCellDef></td>\n                    </ng-container>\n        \n                    <ng-container matColumnDef=\"delete\">\n                        <th mat-header-cell cdkDragLockAxis=\"x\" cdkDrag [cdkDragDisabled]=\"true\" *matHeaderCellDef\n                            class=\"action-column-cells\"> Delete\n                        </th>\n                        <td mat-cell *matCellDef=\"let row;let i=dataIndex\">\n                            <mat-icon (click)=\"deleteRow(row,i)\" aria-hidden=\"false\" aria-label=\"Example home icon\"\n                                fontIcon=\"delete\">\n                            </mat-icon>\n                        </td>\n                        <td mat-footer-cell *matFooterCellDef></td>\n                    </ng-container>\n        \n                    <ng-container matColumnDef=\"hide\" stickyEnd=\"false\">\n                        <th mat-header-cell cdkDragLockAxis=\"x\" cdkDrag [cdkDragDisabled]=\"true\" *matHeaderCellDef\n                            class=\"action-column-cells\"> Hide\n                        </th>\n                        <td mat-cell *matCellDef=\"let row;let i=dataIndex\">\n                            <button mat-icon-button (click)=\"toggleRowHide(i)\" \n                                [matTooltip]=\"isRowHidden(i) ? 'Unhide Row' : 'Hide Row'\"\n                                matTooltipPosition=\"above\">\n                                <mat-icon [color]=\"isRowHidden(i) ? 'primary' : ''\" aria-hidden=\"false\">\n                                    {{ isRowHidden(i) ? 'visibility_off' : 'visibility' }}\n                                </mat-icon>\n                            </button>\n                        </td>\n                        <td mat-footer-cell *matFooterCellDef></td>\n                    </ng-container>\n        \n                    <ng-container matColumnDef=\"pin\" stickyEnd=\"false\">\n                        <th mat-header-cell cdkDragLockAxis=\"x\" cdkDrag [cdkDragDisabled]=\"true\" *matHeaderCellDef\n                            class=\"action-column-cells\"> Pin\n                        </th>\n                        <td mat-cell *matCellDef=\"let row;let i=dataIndex\">\n                            <button mat-icon-button \n                                [matMenuTriggerFor]=\"pinMenu\"\n                                (click)=\"openRowPinMenu($event, row)\"\n                                [matTooltip]=\"getRowPinPosition(row) ? 'Pinned ' + getRowPinPosition(row) : 'Pin Row'\"\n                                matTooltipPosition=\"above\">\n                                <mat-icon [color]=\"isRowPinned(row) ? 'primary' : ''\" aria-hidden=\"false\">\n                                    {{ isRowPinned(row) ? 'push_pin' : 'push_pin' }}\n                                </mat-icon>\n                            </button>\n                        </td>\n                        <td mat-footer-cell *matFooterCellDef></td>\n                    </ng-container>\n        \n                    <!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->\n                    @if (expandRows) {\n                        <ng-container matColumnDef=\"expandedDetail\">\n                            <td mat-cell *matCellDef=\"let element;let i=dataIndex \"\n                                [attr.colspan]=\"columnsToDisplayWithExpand.length\">\n                                <div class=\"example-element-detail\"\n                                    [@detailExpand]=\"element == expandedElement ? 'expanded' : 'collapsed'\">\n                                    @if (expansionTemplateRef) {\n                                        <ng-container [ngTemplateOutlet]=\"expansionTemplateRef\"\n                                            [ngTemplateOutletContext]=\"{$explicit:element,row:element,index:i}\">\n                                        </ng-container>\n                                    }\n                                </div>\n                            </td>\n                        </ng-container>\n                    }\n                    <!-- Column group headers -->\n                    @if (columnGroups.length > 0) {\n                        @for (group of columnGroups; track group.name) {\n                            <ng-container [matColumnDef]=\"'group-' + group.name\">\n                                <th mat-header-cell *matHeaderCellDef [attr.colspan]=\"group.colspan || group.columns.length\" \n                                    class=\"group-header-cell\">\n                                    <div class=\"group-header-content\">\n                                        <span class=\"group-label\">{{group.label}}</span>\n                                    </div>\n                                </th>\n                            </ng-container>\n                        }\n                        <!-- Empty header cells for ungrouped columns -->\n                        @for (column of columnsArray; track column.field) {\n                            <ng-container [matColumnDef]=\"'ungrouped-' + column.field\">\n                                <th mat-header-cell *matHeaderCellDef class=\"group-header-cell ungrouped-header-cell\">\n                                </th>\n                            </ng-container>\n                        }\n                    }\n                    <!-- Empty filter cells for action columns -->\n                    <ng-container [matColumnDef]=\"'filter-select'\">\n                        <th mat-header-cell *matHeaderCellDef class=\"filter-placeholder-cell\"></th>\n                    </ng-container>\n                    <ng-container [matColumnDef]=\"'filter-edit'\">\n                        <th mat-header-cell *matHeaderCellDef class=\"filter-placeholder-cell\"></th>\n                    </ng-container>\n                    <ng-container [matColumnDef]=\"'filter-popup'\">\n                        <th mat-header-cell *matHeaderCellDef class=\"filter-placeholder-cell\"></th>\n                    </ng-container>\n                    <ng-container [matColumnDef]=\"'filter-delete'\">\n                        <th mat-header-cell *matHeaderCellDef class=\"filter-placeholder-cell\"></th>\n                    </ng-container>\n                    <ng-container [matColumnDef]=\"'filter-freeze'\">\n                        <th mat-header-cell *matHeaderCellDef class=\"filter-placeholder-cell\"></th>\n                    </ng-container>\n                    <ng-container [matColumnDef]=\"'filter-hide'\">\n                        <th mat-header-cell *matHeaderCellDef class=\"filter-placeholder-cell\"></th>\n                    </ng-container>\n                    <ng-container [matColumnDef]=\"'filter-pin'\">\n                        <th mat-header-cell *matHeaderCellDef class=\"filter-placeholder-cell\"></th>\n                    </ng-container>\n                    @if (columnGroups.length > 0) {\n                        <tr mat-header-row *matHeaderRowDef=\"getGroupedColumns(); sticky: stickyHeader\" class=\"mat-mdc-header-row group-header-row\"></tr>\n                    }\n                    <!-- <tr mat-header-row *matHeaderRowDef=\" getDisplayedColumns(); sticky: stickyHeader\" class=\"mat-mdc-header-row\"></tr> -->\n                    <tr style=\"display:none\" mat-header-row *matHeaderRowDef=\" getDisplayedColumns(); sticky: stickyHeader\" class=\"mat-mdc-header-row\"></tr>\n                    \n                    <!-- All Data Rows (with dynamic pinning classes) -->\n                    <!-- <tr mat-row *matRowDef=\"let row; columns:getDisplayedColumns(); let i=dataIndex;\" \n                        class=\"mat-mdc-row data-row\"\n                        [ngClass]=\"{\n                          'data-row':expandRows,\n                          'stripedRows':(stripedRows &&  i % 2 == 1),\n                          'hoverClass':rowHover, \n                          'hidden':(hiddenCtrl.isSelected(row) && hideRows) || isRowHidden(i),\n                          'example-expanded-row':expandedElement === row,\n                          'pinned-row': isRowPinned(row),\n                          'pinned-top-row': isRowPinnedTop(row),\n                          'pinned-bottom-row': isRowPinnedBottom(row)\n                        }\"\n                        (click)=\"expandRow(row, row !== expandedElement,i)\">\n                    </tr> -->\n                    <tr mat-row *matRowDef=\"let row; columns:getDisplayedColumns(); let i=dataIndex; \" \n                        class=\"mat-mdc-row data-row\"\n                        [ngClass]=\"{\n                          'data-row':expandRows,\n                          'stripedRows':(stripedRows &&  i % 2 == 1),\n                          'hoverClass':rowHover, \n                          'hidden':(hiddenCtrl.isSelected(row) && hideRows) || isRowHidden(i),\n                          'example-expanded-row':expandedElement === row,\n                          'pinned-row': isRowPinned(row),\n                          'mat-row-sticky-top': isRowPinnedTop(row),\n                          'mat-row-sticky-bottom': isRowPinnedBottom(row)\n                        }\"\n                        (click)=\"expandRow(row, row !== expandedElement,i)\">\n                    </tr>\n                    <!-- <tr mat-header-row *matHeaderRowDef=\"let row; columns:getDisplayedColumns(); let i=dataIndex; when: isRowPinnedTop(row)\" \n                        class=\"mat-mdc-row data-row\"\n                        class=\"mat-mdc-header-row\"\n                        [ngClass]=\"{\n                          'data-row':expandRows,\n                          'stripedRows':(stripedRows &&  i % 2 == 1),\n                          'hoverClass':rowHover, \n                          'hidden':(hiddenCtrl.isSelected(row) && hideRows) || isRowHidden(i),\n                          'example-expanded-row':expandedElement === row,\n                          'pinned-row': isRowPinned(row),\n                          'pinned-top-row': isRowPinnedTop(row),\n                          'pinned-bottom-row': isRowPinnedBottom(row)\n                        }\"\n                        (click)=\"expandRow(row, row !== expandedElement,i)\">\n                    </tr> -->\n               \n                    @if (expandRows) {\n                        <tr mat-row *matRowDef=\"let row; columns: ['expandedDetail']; let i=dataIndex\"\n                            class=\"example-detail-row\"\n                            [ngClass]=\"{'hidden': isRowHidden(i)}\">\n                        </tr>\n                    }\n                    @if (showFooterRow) {\n                        <tr mat-footer-row *matFooterRowDef=\"getDisplayedColumns(); sticky: stickyFooter\"></tr>\n                    }\n                </table>\n                </div>\n            }\n        }\n        @else{\n            <table mat-table #matTable #MyTable [id]=\"'matTableExt'+tableID\" [dataSource]=\"dataSource\" matSort cdkDropList\n                cdkDropListOrientation=\"horizontal\" multiTemplateDataRows (cdkDropListDropped)=\"onDrop($event)\"\n                (click)=\"saveCellEditing()\" [style.width]=\"scrollbarH?'max-content':'100%'\" \n                [class]=\"'mat-mdc-table' + (tableClassName ? ' ' + tableClassName : '')\">\n    \n                <!-- Row selection column -->\n                <ng-container matColumnDef=\"select\">\n                    <th mat-header-cell *matHeaderCellDef cdkDragLockAxis=\"x\" cdkDrag [cdkDragDisabled]=\"!dndColumns\">\n                        <mat-checkbox (change)=\"$event ? toggleAllRows() : null\"\n                            [checked]=\"selection.hasValue() && isAllSelected()\"\n                            [indeterminate]=\"selection.hasValue() && !isAllSelected()\" [aria-label]=\"checkboxLabel()\">\n                        </mat-checkbox>\n                    </th>\n                    <td mat-cell *matCellDef=\"let row;let i = dataIndex\">\n                        <mat-checkbox (click)=\"$event.stopPropagation()\" (change)=\"$event ? setSelectedRows(row,i) : null\"\n                            [checked]=\"selection.isSelected(row)\" [aria-label]=\"checkboxLabel(row)\">\n                        </mat-checkbox>\n                    </td>\n                    <ng-container *ngIf=\"showFooterRow\">\n                        <td mat-footer-cell *matFooterCellDef></td>\n                    </ng-container>\n                </ng-container>\n                <!--dynamic columns are being generated here-->\n                @for (column of columnsArray; track column.field + '_' + column.pinned; let i = $index) {\n                    <div matColumnDef=\"{{column['field']}}\" [sticky]=\"column.pinned === 'left'\" [stickyEnd]=\"column.pinned === 'right'\">\n                    <th mat-header-cell *matHeaderCellDef [style.minWidth]=\"column.width\" [style.maxWidth]=\"column.maxWidth?column.maxWidth:column.width\"\n                        [style.minWidth]=\"column.minWidth\" cdkDragLockAxis=\"x\" cdkDrag [cdkDragDisabled]=\"!dndColumns\"\n                        [columnsResizable]=\"columnResizable\" [index]=\"i\" class=\"mat-mdc-header-cell\"\n                        [mat-sort-header]=\"column.field\" [disabled]=\"!sorting || column.disabled === true\">\n    \n                        @if (column.headerTemplate || headerTemplateRef) {\n                            <ng-template [ngTemplateOutlet]=\"column.headerTemplate || headerTemplateRef\"\n                                [ngTemplateOutletContext]=\"{data:column}\"></ng-template>\n                        }\n                        @if (!headerTemplateRef && !column.headerTemplate) {\n                            <span matTooltip=\"{{column.headerTooltip?.value}}\"\n                                [matTooltipPosition]=\"column?.headerTooltip?.tooltipPosition!\"\n                                [class.disabled]=\"!sorting || column.disabled === true\">{{column.header}}</span>\n                        }\n                    </th>\n                    <td mat-cell *matCellDef=\"let row ;let i=dataIndex\" class=\"mat-mdc-cell\">\n                        @if (!row.editable && !cellEditing[i +'_'+column.field]) {\n                            <div (dblclick)=\"cellEditing[i +'_'+column.field] = inCellEditing;setCellData(row,i)\"\n                                (click)=\"cellPopupEditing ? openCellPopupDialog(row, column, i) : null\"\n                                [style.cursor]=\"cellPopupEditing ? 'pointer' : 'default'\"\n                                matTooltip=\"{{column.cellTooltip?.value}}\"\n                                [matTooltipPosition]=\"column?.cellTooltip?.tooltipPosition!\">\n                                @if (!cellTemplateRef && !column?.cellTemplate && !cellTemplateRefMap[column.field]) {\n                                    <span>{{row[column.field]}}</span>\n                                }\n                                @if (cellTemplateRefMap[column.field]) {\n                                    <ng-container [ngTemplateOutlet]=\"cellTemplateRefMap[column.field]\"\n                                        [ngTemplateOutletContext]=\"{row:row,column:column,index:i}\">\n                                    </ng-container>\n                                }\n                                @if (cellTemplateRef && column.cellTemplate && !cellTemplateRefMap[column.field]) {\n                                    <ng-container [ngTemplateOutlet]=\"column.cellTemplate\"\n                                        [ngTemplateOutletContext]=\"{row:row,column:column,index:i}\">\n                                    </ng-container>\n                                }\n                                @if (!cellTemplateRef && column.cellTemplate && !cellTemplateRefMap[column.field]) {\n                                    <ng-container [ngTemplateOutlet]=\"column.cellTemplate\"\n                                        [ngTemplateOutletContext]=\"{row:row,column:column,index:i}\">\n                                    </ng-container>\n                                }\n                                @if (cellTemplateRef && !column.cellTemplate && !cellTemplateRefMap[column.field]) {\n                                    <ng-container [ngTemplateOutlet]=\"cellTemplateRef\"\n                                        [ngTemplateOutletContext]=\"{row:row,column:column,index:i}\">\n                                    </ng-container>\n                                }\n                            </div>\n                        }\n                        @if (row.editable || cellEditing[i +'_'+column.field]) {\n                            <div (click)=\"$event.stopPropagation()\">\n                                @if (inlineEditingTemplateRef && !cellEditing[i +'_'+column.field]) {\n                                    <ng-container [ngTemplateOutlet]=\"inlineEditingTemplateRef\"\n                                        [ngTemplateOutletContext]=\"{data:getInlineEditingData(row,i,column)}\"></ng-container>\n                                }\n                                @if (cellEditingTemplateRef && !(row.editable)) {\n                                    <ng-container [ngTemplateOutlet]=\"cellEditingTemplateRef\"\n                                        [ngTemplateOutletContext]=\"{data:getInlineEditingData(row,i,column)}\"></ng-container>\n                                }\n                                @if (!inlineEditingTemplateRef && (row.editable) && rowDataTemp['e'+i]) {\n                                    @if (column.type == 'number') {\n                                        <mat-form-field appearance=\"outline\" class=\"inline-editing-field\">\n                                            <input matInput type=\"number\" [(ngModel)]=\"rowDataTemp['e'+i][column.field]\"\n                                                [ngModelOptions]=\"{standalone: true}\">\n                                        </mat-form-field>\n                                    }\n                                    @if (column.type == 'string') {\n                                        <mat-form-field style=\"width: 100%;\" appearance=\"outline\" class=\"inline-editing-field\">\n                                            <input matInput type=\"text\" [(ngModel)]=\"rowDataTemp['e'+i][column.field]\"\n                                                [ngModelOptions]=\"{standalone: true}\">\n                                        </mat-form-field>\n                                    }\n                                    @if (column.type == 'textarea') {\n                                        <mat-form-field style=\"width: 100%;\" appearance=\"outline\" class=\"inline-editing-field\">\n                                            <textarea matInput rows=\"3\" [(ngModel)]=\"rowDataTemp['e'+i][column.field]\"\n                                                [ngModelOptions]=\"{standalone: true}\"></textarea>\n                                        </mat-form-field>\n                                    }\n                                    @if (column.type == 'date') {\n                                        <mat-form-field appearance=\"outline\" class=\"inline-editing-field\">\n                                            <input matInput type=\"date\" [(ngModel)]=\"rowDataTemp['e'+i][column.field]\"\n                                                [ngModelOptions]=\"{standalone: true}\">\n                                        </mat-form-field>\n                                    }\n                                    @if (column.type == 'datepicker') {\n                                        <mat-form-field appearance=\"outline\" class=\"inline-editing-field\">\n                                            <input matInput [matDatepicker]=\"inlinePicker\" [(ngModel)]=\"rowDataTemp['e'+i][column.field]\"\n                                                [ngModelOptions]=\"{standalone: true}\">\n                                            <mat-datepicker-toggle matIconSuffix [for]=\"inlinePicker\"></mat-datepicker-toggle>\n                                            <mat-datepicker #inlinePicker></mat-datepicker>\n                                        </mat-form-field>\n                                    }\n                                    @if (column.type == 'selection') {\n                                        <mat-form-field appearance=\"outline\" class=\"inline-editing-field\">\n                                            <mat-select [value]=\"rowDataTemp['e'+i][column.field]\"\n                                                [(ngModel)]=\"rowDataTemp['e'+i][column.field]\">\n                                                @for (option of column.options; track option) {\n                                                    <mat-option [value]=\"option\">{{option}}</mat-option>\n                                                }\n                                            </mat-select>\n                                        </mat-form-field>\n                                    }\n                                    @if (column.type == 'boolean') {\n                                        <mat-checkbox (click)=\"$event.stopPropagation()\" color=\"primary\" [(ngModel)]=\"row[column.field]\"></mat-checkbox>\n                                    }\n                                }\n                                @if (!cellEditingTemplateRef && cellEditing[i +'_'+column.field]) {\n                                    @if (column.type == 'number') {\n                                        <mat-form-field appearance=\"outline\" class=\"inline-editing-field\">\n                                            <input matInput type=\"number\" [(ngModel)]=\"rowDataTemp['e'+i][column.field]\"\n                                                [ngModelOptions]=\"{standalone: true}\">\n                                        </mat-form-field>\n                                    }\n                                    @if (column.type == 'string') {\n                                        <mat-form-field appearance=\"outline\" class=\"inline-editing-field\">\n                                            <input matInput type=\"text\" [(ngModel)]=\"rowDataTemp['e'+i][column.field]\"\n                                                [ngModelOptions]=\"{standalone: true}\">\n                                        </mat-form-field>\n                                    }\n                                    @if (column.type == 'textarea') {\n                                        <mat-form-field appearance=\"outline\" class=\"inline-editing-field\">\n                                            <textarea matInput rows=\"3\" [(ngModel)]=\"rowDataTemp['e'+i][column.field]\"\n                                                [ngModelOptions]=\"{standalone: true}\"></textarea>\n                                        </mat-form-field>\n                                    }\n                                    @if (column.type == 'date') {\n                                        <mat-form-field appearance=\"outline\" class=\"inline-editing-field\">\n                                            <input matInput type=\"date\" [(ngModel)]=\"rowDataTemp['e'+i][column.field]\"\n                                                [ngModelOptions]=\"{standalone: true}\">\n                                        </mat-form-field>\n                                    }\n                                    @if (column.type == 'datepicker') {\n                                        <mat-form-field appearance=\"outline\" class=\"inline-editing-field\">\n                                            <input matInput [matDatepicker]=\"cellPicker\" [(ngModel)]=\"rowDataTemp['e'+i][column.field]\"\n                                                [ngModelOptions]=\"{standalone: true}\">\n                                            <mat-datepicker-toggle matIconSuffix [for]=\"cellPicker\"></mat-datepicker-toggle>\n                                            <mat-datepicker #cellPicker></mat-datepicker>\n                                        </mat-form-field>\n                                    }\n                                    @if (column.type == 'selection') {\n                                        <mat-form-field appearance=\"outline\" class=\"inline-editing-field\">\n                                            <mat-select [value]=\"rowDataTemp['e'+i][column.field]\"\n                                                [(ngModel)]=\"rowDataTemp['e'+i][column.field]\">\n                                                @for (option of column.options; track option) {\n                                                    <mat-option [value]=\"option\">{{option}}</mat-option>\n                                                }\n                                            </mat-select>\n                                        </mat-form-field>\n                                    }\n                                    @if (column.type == 'boolean') {\n                                        <mat-checkbox (click)=\"$event.stopPropagation()\" color=\"primary\" [(ngModel)]=\"row[column.field]\"></mat-checkbox>\n                                    }\n                                }\n                            </div>\n                        }\n                    </td>\n                    @if (showFooterRow) {\n                        <td mat-footer-cell *matFooterCellDef> {{column.footerText}} </td>\n                    }\n                    </div>\n                }\n                <ng-container matColumnDef=\"edit\" stickyEnd=\"false\">\n                    <th mat-header-cell cdkDragLockAxis=\"x\" cdkDrag [cdkDragDisabled]=\"true\" *matHeaderCellDef\n                        class=\"action-column-cells\"> Edit </th>\n                    <td mat-cell *matCellDef=\"let row; let i = dataIndex\" class=\"inline-edit-column-cell\">\n                        @if (!row.editable && !row.editmodal) {\n                            <mat-icon class=\"edit-column-icons\" aria-hidden=\"false\"\n                                (click)=\"enableInlineEditing(row,i)\" fontIcon=\"edit_note\">\n                            </mat-icon>\n                        }\n                        @if (row.editable && !row.editmodal) {\n                            <div class=\"inline-editing-controls\">\n                                <mat-icon class=\"edit-column-icons\" aria-hidden=\"false\" (click)=\"saveInlineEditing(row,i)\"\n                                    fontIcon=\"done\"></mat-icon>\n                                <mat-icon class=\"edit-column-icons\" aria-hidden=\"false\" (click)=\"cancelInlineEditing(row,i)\"\n                                    fontIcon=\"close\"></mat-icon>\n                            </div>\n                        }\n                    </td>\n                    <td mat-footer-cell *matFooterCellDef> edit </td>\n                </ng-container>\n                <ng-container matColumnDef=\"popup\" stickyEnd=\"false\">\n                    <th mat-header-cell cdkDragLockAxis=\"x\" cdkDrag [cdkDragDisabled]=\"true\" *matHeaderCellDef\n                        class=\"action-column-cells\"> Popup\n                    </th>\n                    <td mat-cell *matCellDef=\"let row; let i = index\">\n                        <mat-icon aria-hidden=\"false\" (click)=\"openEditingDialog(row)\" fontIcon=\"edit\">\n                        </mat-icon>\n                    </td>\n                    <td mat-footer-cell *matFooterCellDef></td>\n                </ng-container>\n    \n                <ng-container matColumnDef=\"delete\">\n                    <th mat-header-cell cdkDragLockAxis=\"x\" cdkDrag [cdkDragDisabled]=\"true\" *matHeaderCellDef\n                        class=\"action-column-cells\"> Delete\n                    </th>\n                    <td mat-cell *matCellDef=\"let row;let i=dataIndex\">\n                        <mat-icon (click)=\"deleteRow(row,i)\" aria-hidden=\"false\" aria-label=\"Example home icon\"\n                            fontIcon=\"delete\">\n                        </mat-icon>\n                    </td>\n                    <td mat-footer-cell *matFooterCellDef></td>\n                </ng-container>\n    \n                <ng-container matColumnDef=\"hide\" stickyEnd=\"false\">\n                    <th mat-header-cell cdkDragLockAxis=\"x\" cdkDrag [cdkDragDisabled]=\"true\" *matHeaderCellDef\n                        class=\"action-column-cells\"> Hide\n                    </th>\n                    <td mat-cell *matCellDef=\"let row;let i=dataIndex\">\n                        <button mat-icon-button (click)=\"toggleRowHide(i)\" \n                            [matTooltip]=\"isRowHidden(i) ? 'Unhide Row' : 'Hide Row'\"\n                            matTooltipPosition=\"above\">\n                            <mat-icon [color]=\"isRowHidden(i) ? 'primary' : ''\" aria-hidden=\"false\">\n                                {{ isRowHidden(i) ? 'visibility_off' : 'visibility' }}\n                            </mat-icon>\n                        </button>\n                    </td>\n                    <td mat-footer-cell *matFooterCellDef></td>\n                </ng-container>\n    \n                <ng-container matColumnDef=\"pin\" stickyEnd=\"false\">\n                    <th mat-header-cell cdkDragLockAxis=\"x\" cdkDrag [cdkDragDisabled]=\"true\" *matHeaderCellDef\n                        class=\"action-column-cells\"> Pinning\n                    </th>\n                    <td mat-cell *matCellDef=\"let row;let i=dataIndex\">\n                        <button mat-icon-button \n                            [matMenuTriggerFor]=\"pinMenu\"\n                            (click)=\"openRowPinMenu($event, row)\"\n                            [matTooltip]=\"getRowPinPosition(row) ? 'Pinned ' + getRowPinPosition(row) : 'Pin Row'\"\n                            matTooltipPosition=\"above\">\n                            <mat-icon [color]=\"isRowPinned(row) ? 'primary' : ''\" aria-hidden=\"false\">\n                                {{ isRowPinned(row) ? 'push_pin' : 'push_pin' }}\n                            </mat-icon>\n                        </button>\n                    </td>\n                    <td mat-footer-cell *matFooterCellDef></td>\n                </ng-container>\n    \n                <!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->\n                @if (expandRows) {\n                    <ng-container matColumnDef=\"expandedDetail\">\n                        <td mat-cell *matCellDef=\"let element;let i=dataIndex \"\n                            [attr.colspan]=\"columnsToDisplayWithExpand.length\">\n                            <div class=\"example-element-detail\"\n                                [@detailExpand]=\"element == expandedElement ? 'expanded' : 'collapsed'\">\n                                @if (expansionTemplateRef) {\n                                    <ng-container [ngTemplateOutlet]=\"expansionTemplateRef\"\n                                        [ngTemplateOutletContext]=\"{$explicit:element,row:element,index:i}\">\n                                    </ng-container>\n                                }\n                            </div>\n                        </td>\n                    </ng-container>\n                }\n                <!-- Column group headers -->\n                @if (columnGroups.length > 0) {\n                    @for (group of columnGroups; track group.name) {\n                        <ng-container [matColumnDef]=\"'group-' + group.name\">\n                            <th mat-header-cell *matHeaderCellDef [attr.colspan]=\"group.colspan || group.columns.length\" \n                                class=\"group-header-cell\">\n                                <div class=\"group-header-content\">\n                                    <span class=\"group-label\">{{group.label}}</span>\n                                </div>\n                            </th>\n                        </ng-container>\n                    }\n                    <!-- Empty header cells for ungrouped columns -->\n                    <ng-container *ngFor=\"let column of columnsArray\">\n                        <ng-container [matColumnDef]=\"'ungrouped-' + column.field\">\n                            <th mat-header-cell *matHeaderCellDef class=\"group-header-cell ungrouped-header-cell\">\n                            </th>\n                        </ng-container>\n                    </ng-container>\n                }\n                <!-- Filter row columns for data columns -->\n                <ng-container *ngFor=\"let ids of headersFiltersIds; let i = index\">\n                    <ng-container [matColumnDef]=\"ids\" [sticky]=\"columnsArray[returnIndex(ids)].pinned === 'left'\" [stickyEnd]=\"columnsArray[returnIndex(ids)].pinned === 'right'\">\n                        <th mat-header-cell *matHeaderCellDef  [style.minWidth]=\"columnsArray[returnIndex(ids)].width\" [style.maxWidth]=\"columnsArray[returnIndex(ids)].maxWidth?columnsArray[returnIndex(ids)].maxWidth:columnsArray[returnIndex(ids)].width\"\n                        [style.minWidth]=\"columnsArray[returnIndex(ids)].minWidth\" >\n                            <div style=\"display: block; width: 100%;\" class=\"filters-container\" [class.animate]=\"toggleFilters\">\n                                <app-filter-columns-component style=\"display: block; width: 100%;\" [obj]=\"columnsArray[returnIndex(ids)]\"\n                                    (filterOutput)=\"applyColumnFilter($event,columnsArray[returnIndex(ids)])\"></app-filter-columns-component>\n                            </div>\n                        </th>\n                    </ng-container>\n                </ng-container>\n\n                <!-- Empty filter cells for action columns -->\n                <ng-container [matColumnDef]=\"'filter-select'\">\n                    <th mat-header-cell *matHeaderCellDef class=\"filter-placeholder-cell\"></th>\n                </ng-container>\n                <ng-container [matColumnDef]=\"'filter-edit'\">\n                    <th mat-header-cell *matHeaderCellDef class=\"filter-placeholder-cell\"></th>\n                </ng-container>\n                <ng-container [matColumnDef]=\"'filter-popup'\">\n                    <th mat-header-cell *matHeaderCellDef class=\"filter-placeholder-cell\"></th>\n                </ng-container>\n                <ng-container [matColumnDef]=\"'filter-delete'\">\n                    <th mat-header-cell *matHeaderCellDef class=\"filter-placeholder-cell\"></th>\n                </ng-container>\n                <ng-container [matColumnDef]=\"'filter-freeze'\">\n                    <th mat-header-cell *matHeaderCellDef class=\"filter-placeholder-cell\"></th>\n                </ng-container>\n                <ng-container [matColumnDef]=\"'filter-hide'\">\n                    <th mat-header-cell *matHeaderCellDef class=\"filter-placeholder-cell\"></th>\n                </ng-container>\n                <ng-container [matColumnDef]=\"'filter-pin'\">\n                    <th mat-header-cell *matHeaderCellDef class=\"filter-placeholder-cell\"></th>\n                </ng-container>\n\n                <ng-container *ngIf=\"columnGroups.length > 0\">\n                    <tr mat-header-row *matHeaderRowDef=\"getGroupedColumns(); sticky: stickyHeader\" class=\"mat-mdc-header-row group-header-row\"></tr>\n                </ng-container>\n                <tr mat-header-row *matHeaderRowDef=\" getDisplayedColumns(); sticky: stickyHeader\" class=\"mat-mdc-header-row\"></tr>\n                <tr style=\"height: 0px;\" mat-header-row class=\"no-default-height\" *matHeaderRowDef=\"getFilterColumns()\">\n                </tr>\n                \n                <!-- All Data Rows (with dynamic pinning classes) -->\n                <!-- <tr mat-row *matRowDef=\"let row; columns:getDisplayedColumns(); let i=dataIndex;\" \n                    class=\"mat-mdc-row data-row\"\n                    [ngClass]=\"{\n                      'data-row':expandRows,\n                      'stripedRows':(stripedRows &&  i % 2 == 1),\n                      'hoverClass':rowHover, \n                      'hidden':(hiddenCtrl.isSelected(row) && hideRows) || isRowHidden(i),\n                      'example-expanded-row':expandedElement === row,\n                      'pinned-row': isRowPinned(row),\n                      'pinned-top-row': isRowPinnedTop(row),\n                      'pinned-bottom-row': isRowPinnedBottom(row)\n                    }\"\n                    (click)=\"expandRow(row, row !== expandedElement,i)\">\n                </tr> -->\n                <tr mat-row *matRowDef=\"let row; columns:getDisplayedColumns(); let i=dataIndex; \" \n                    class=\"mat-mdc-row data-row\"\n                    [ngClass]=\"{\n                      'data-row':expandRows,\n                      'stripedRows':(stripedRows &&  i % 2 == 1),\n                      'hoverClass':rowHover, \n                      'hidden':(hiddenCtrl.isSelected(row) && hideRows) || isRowHidden(i),\n                      'example-expanded-row':expandedElement === row,\n                      'pinned-row': isRowPinned(row),\n                      'mat-row-sticky-top': isRowPinnedTop(row),\n                      'mat-row-sticky-bottom': isRowPinnedBottom(row)\n                    }\"\n                    (click)=\"expandRow(row, row !== expandedElement,i)\">\n                </tr>\n                <!-- <tr mat-header-row *matHeaderRowDef=\"let row; columns:getDisplayedColumns(); let i=dataIndex; when: isRowPinnedTop(row)\" \n                    class=\"mat-mdc-row data-row\"\n                    class=\"mat-mdc-header-row\"\n                    [ngClass]=\"{\n                      'data-row':expandRows,\n                      'stripedRows':(stripedRows &&  i % 2 == 1),\n                      'hoverClass':rowHover, \n                      'hidden':(hiddenCtrl.isSelected(row) && hideRows) || isRowHidden(i),\n                      'example-expanded-row':expandedElement === row,\n                      'pinned-row': isRowPinned(row),\n                      'pinned-top-row': isRowPinnedTop(row),\n                      'pinned-bottom-row': isRowPinnedBottom(row)\n                    }\"\n                    (click)=\"expandRow(row, row !== expandedElement,i)\">\n                </tr> -->\n           \n                @if (expandRows) {\n                    <tr mat-row *matRowDef=\"let row; columns: ['expandedDetail']; let i=dataIndex\"\n                        class=\"example-detail-row\"\n                        [ngClass]=\"{'hidden': isRowHidden(i)}\">\n                    </tr>\n                }\n                @if (showFooterRow) {\n                    <tr mat-footer-row *matFooterRowDef=\"getDisplayedColumns(); sticky: stickyFooter\"></tr>\n                }\n            </table>\n\n        }\n        \n    </section>\n    @if (showPaginator) {\n        <mat-paginator [pageSizeOptions]=\"pageSizeOptions\"\n            [showFirstLastButtons]=\"showFirstLastButtons\" class=\"mat-mdc-paginator\">\n        </mat-paginator>\n    }\n</div>", styles: [".custom-primary-color{color:#3f51b5!important;border-color:#3f51b5!important}table{min-width:100%}.mat-mdc-table-sticky-border-elem-right{border-left:1px solid #e0e0e0}.mat-mdc-table-sticky-border-elem-left{border-right:1px solid #e0e0e0}tr.example-detail-row{height:0!important;overflow:hidden}.example-element-detail{overflow:hidden;display:flex;transition:height .3s cubic-bezier(.4,0,.2,1);padding:0}.example-element-detail[style*=\"height: auto\"],.example-element-detail[style*=\"height: 1\"]{padding:10px 0}.hidden{display:none}.stripedRows{background:var(--mat-table-row-hover-state-layer-color, #eaeaea)!important}.hoverClass:hover{background:var(--mat-table-row-hover-state-layer-color, #dbdbdb)!important}.filters-container{overflow:hidden;transition:height .5s ease-in-out}.animate{max-height:max-content!important}.cell-popup-indicator{font-size:18px;color:var(--mat-sys-color-primary, #1976d2);cursor:pointer;-webkit-user-select:none;user-select:none;display:inline-block;transition:transform .2s}.cell-popup-indicator:hover{transform:scale(1.3);color:var(--mat-sys-color-primary-container, #1565c0)}.resize-handle{display:inline-block;border-right:2px solid var(--mat-table-outline-color, rgb(140, 140, 140));position:absolute;top:0;right:0;height:100%;cursor:col-resize;opacity:0}.resize-handle:hover{width:20px}table th:hover .resize-handle{opacity:1;transition:.3s ease-in-out}.mat-mdc-table.resizing{-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;user-select:none;cursor:col-resize}.mat-mdc-table .mat-mdc-header-cell{position:relative}.mat-mdc-table .mat-mdc-header-cell:not(:last-child) .resize-holder{cursor:col-resize;width:20px;height:100%;position:absolute;right:-10px;top:0;z-index:1}.toolbar-container{display:flex;padding:0 15px;gap:1rem;grid-auto-rows:10px;justify-content:flex-end;align-items:center}.mat-table-ext-container{width:100%;max-width:100%;overflow:auto}.column-headers{font-family:Roboto,Helvetica Neue,sans-serif}.example-spacer{flex:1 1 auto}.export-button .export-button-content{display:flex!important;align-items:center;justify-content:space-between;gap:4px;width:100%;padding:0 4px}.export-button .mat-button-wrapper{display:flex!important;width:8em;justify-content:space-around;align-items:center}.toolbar-menu-container{display:flex;flex-direction:column;margin:auto .8em;width:15em;height:20em}.inline-editing-field{padding:8px 0}.inline-editing-field div.mat-mdc-form-field-subscript-wrapper{display:none}.toolbar-menu-item{display:flex;height:3em}.toolbar-menu-checkbox{margin-left:8%}.toolbar-menu-checkbox.mat-checkbox{width:max-content;display:flex;align-items:center}.hide-button .mat-button-wrapper,.pin-button .mat-button-wrapper{display:flex!important;align-items:center;gap:5px}.pin-button .mat-icon{margin-right:2px}.pin-button,.hide-button{padding-right:10px!important}.hide-button,.pin-button,.export-button,.print-button{height:3em;border:2px solid currentColor!important}.print-button .mat-button-wrapper{display:flex!important;align-items:center;gap:5px}.showHide-menu-columns-list{height:10em;max-height:10em;overflow-y:auto}.mat-column-select{width:50px!important}.data-row td,.example-expanded-row td{border-bottom-width:0!important}.action-column-cells{width:40px;height:inherit}.inline-editing-controls{display:flex}.global-search-field{width:-webkit-fill-available}.mat-mdc-table{--mat-table-container-elevation: 0;--mat-table-row-hover-state-layer-color: var(--mat-sys-color-surface-variant);--mat-table-row-hover-state-layer-opacity: .08}.group-header-row{background-color:var(--mat-sys-color-surface-container-low, #f5f5f5)}.group-header-row .group-header-cell{text-align:center!important;font-weight:600;font-size:13px;letter-spacing:.5px;text-transform:uppercase;padding:12px 16px;position:relative}.group-header-row .group-header-cell.ungrouped-header-cell{min-height:48px}.group-header-row .group-header-cell .group-header-content{display:flex;align-items:center;justify-content:center;gap:8px;text-align:center}.group-header-row .group-header-cell .group-header-content .group-label{font-weight:600;text-align:center}.group-header-row .group-header-cell:after{content:\"\";position:absolute;bottom:-2px;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent 0%,var(--mat-sys-color-primary, #1976d2) 50%,transparent 100%);opacity:.3}.frozen-row{position:sticky!important;z-index:10;background-color:var(--mat-sys-color-surface, #ffffff)!important;box-shadow:0 2px 4px #0000001a}.frozen-row:after{content:\"\";position:absolute;bottom:0;left:0;right:0;height:2px;background:linear-gradient(to right,var(--mat-sys-color-primary, #1976d2) 0%,transparent 100%)}.frozen-row-bottom{position:sticky!important;z-index:10;background-color:var(--mat-sys-color-surface, #ffffff)!important;box-shadow:0 -2px 4px #0000001a}.frozen-row-bottom:before{content:\"\";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(to right,var(--mat-sys-color-primary, #1976d2) 0%,transparent 100%)}.mat-mdc-header-cell{--mat-table-header-container-background-color: var(--mat-sys-color-surface);--mat-table-header-container-text-color: var(--mat-sys-color-on-surface)}.mat-mdc-cell{--mat-table-cell-container-background-color: var(--mat-sys-color-surface);--mat-table-cell-container-text-color: var(--mat-sys-color-on-surface)}.mat-mdc-row{--mat-table-row-container-background-color: var(--mat-sys-color-surface)}.mat-mdc-paginator{--mat-paginator-container-background-color: var(--mat-sys-color-surface);--mat-paginator-container-text-color: var(--mat-sys-color-on-surface)}.pinned-row{background:var(--mat-sys-color-surface, #ffffff);box-shadow:0 2px 4px #0000001a;position:sticky!important;z-index:10}.pinned-row.pinned-top-row{top:var(--pinned-row-top-offset, var(--pinned-top-base-offset, 0px))}.pinned-row.pinned-bottom-row{bottom:var(--pinned-row-bottom-offset, var(--pinned-bottom-base-offset, 0px))}.pinned-top-row:after{content:\"\";position:absolute;bottom:-2px;left:0;right:0;height:2px;background:linear-gradient(to bottom,rgba(0,0,0,.1),transparent)}.pinned-bottom-row:before{content:\"\";position:absolute;top:-2px;left:0;right:0;height:2px;background:linear-gradient(to top,rgba(0,0,0,.1),transparent)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i7$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i7$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i7$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i7$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i7$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i7$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i7$1.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i7$1.MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "directive", type: i7$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i7$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i7$1.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i7$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i7$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i7$1.MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i6$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i7.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i7.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i8.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i12.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: MatSortModule }, { kind: "directive", type: i13.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i13.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i14.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i14.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i14.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i9.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i9.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatToolbarModule }, { kind: "component", type: i17.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: i18.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i10.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i10.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i10.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "ngmodule", type: MatNativeDateModule }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i20.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i20.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: ColumnPinningComponent, selector: "app-column-pinning", inputs: ["columns"], outputs: ["columnsChanged"] }, { kind: "component", type: FilterColumnsComponentComponent, selector: "app-filter-columns-component", inputs: ["obj"], outputs: ["filterOutput"] }, { kind: "directive", type: ResizeColumnDirective, selector: "[columnsResizable]", inputs: ["columnsResizable", "index"] }], animations: [
+            trigger('detailExpand', [
+                state('collapsed', style({ height: '0px', minHeight: '0' })),
+                state('expanded', style({ height: '*' })),
+                transition('expanded <=> collapsed', animate('300ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
+            ]),
+        ], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: MatTableExtComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mat-table-ext', encapsulation: ViewEncapsulation.None, standalone: true, imports: [
+                        CommonModule,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        MatTableModule,
+                        MatFormFieldModule,
+                        MatInputModule,
+                        MatSelectModule,
+                        MatCheckboxModule,
+                        MatIconModule,
+                        MatPaginatorModule,
+                        MatSortModule,
+                        MatMenuModule,
+                        MatButtonModule,
+                        MatTooltipModule,
+                        MatToolbarModule,
+                        MatProgressBarModule,
+                        MatDatepickerModule,
+                        MatNativeDateModule,
+                        DragDropModule,
+                        ColumnPinningComponent,
+                        FilterColumnsComponentComponent,
+                        ResizeColumnDirective
+                    ], animations: [
+                        trigger('detailExpand', [
+                            state('collapsed', style({ height: '0px', minHeight: '0' })),
+                            state('expanded', style({ height: '*' })),
+                            transition('expanded <=> collapsed', animate('300ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
+                        ]),
+                    ], template: "<div [style.width]=\"tableWidth\">\n    @if (globalSearch) {\n        <mat-form-field class=\"global-search-field\" appearance=\"fill\">\n            <mat-label>Search</mat-label>\n            <input matInput [ngModel]=\"globalFilter\" (ngModelChange)=\"applyGlobalFilter($event)\" placeholder=\"Ex. Mia\"\n                #input>\n        </mat-form-field>\n    }\n    @if (showToolbar) {\n        <mat-toolbar class=\"toolbar-container\" [style.height]=\"toolbarHeight?toolbarHeight:'50px'\">\n            @if (toolbarTitle) {\n                <span class=\"toolbar-title\">{{toolbarTitle}}</span>\n            }\n            @if (toolbarTemplateRef) {\n                <ng-container [ngTemplateOutlet]=\"toolbarTemplateRef\"></ng-container>\n            }\n            <span class=\"example-spacer\"></span>\n            @if (rowSelection || multiRowSelection) {\n                <button class=\"hide-button\" mat-stroked-button color=\"primary\" (click)=\"hideSelectedRows()\">\n                    Hide Rows\n                </button>\n                <button class=\"hide-button\" mat-stroked-button color=\"primary\" (click)=\"showHiddenRows()\">\n                    Show All Rows\n                </button>\n            }\n            @if (enableRowHiding && hiddenRowIndices.length > 0) {\n                <button class=\"hide-button custom-primary-color\" mat-stroked-button color=\"accent\" (click)=\"unhideAllRows()\"\n                    matTooltip=\"Unhide all hidden rows\" matTooltipPosition=\"above\">\n                    <mat-icon>visibility</mat-icon>\n                    <span>Unhide All ({{hiddenRowIndices.length}})</span>\n                </button>\n            }\n            @if (columnHidable) {\n                <button class=\"hide-button\" mat-stroked-button color=\"primary\"\n                    (click)=\"openMenu('hideShow',$event)\" matTooltip=\"Column Visibility\" matTooltipPosition=\"above\">\n                    <mat-icon>visibility</mat-icon>\n                </button>\n            }\n            @if (columnPinnable) {\n                <button class=\"pin-button\" mat-stroked-button color=\"primary\"\n                    (click)=\"openMenu('columnPin',$event)\" matTooltip=\"Column Pinning\">\n                    <mat-icon svgIcon=\"pinIcon\"></mat-icon>\n                </button>\n            }\n            @if (exportButtonEnable) {\n                <button class=\"export-button\" mat-stroked-button color=\"primary\"\n                    (click)=\"openMenu('export',$event)\" matTooltip=\"Table Data Export\">\n                    <mat-icon>import_export</mat-icon>\n                    <span>Export</span>\n                    <mat-icon iconPositionEnd>expand_more</mat-icon>\n                </button>\n              }\n            @if (printButtonEnable) {\n                <button class=\"print-button\" mat-icon-button color=\"primary\"\n                    (click)=\"printTable()\" matTooltip=\"Print Table\">\n                    <mat-icon>print</mat-icon>\n                </button>\n              }\n            <div style=\"visibility: hidden; position:fixed\" [matMenuTriggerFor]=\"menu\" [style.left.px]=\"menuX\"\n                [style.top.px]=\"menuY\"></div>\n        </mat-toolbar>\n    }\n    <mat-menu #menu=\"matMenu\" (closed)=\"menuClosed()\" id=\"exportMenu\">\n        @if (exportMenuCtrl) {\n            <mat-option (click)=\"exportTable('xlsx')\">Export to Excel</mat-option>\n            <mat-option (click)=\"exportTable('csv')\">Export to CSV</mat-option>\n            <mat-option (click)=\"exportToPDF()\">Export to PDF</mat-option>\n        }\n    </mat-menu>\n    <div style=\"visibility: hidden; position:fixed\" #columnMenuTrigger=\"matMenuTrigger\" [matMenuTriggerFor]=\"columnMenu\"\n        [style.left.px]=\"menuX\" [style.top.px]=\"menuY\">\n    </div>\n    <mat-menu #columnMenu=\"matMenu\" (closed)=\"resetMenuChecks()\">\n        @if (hideShowMenuCtrl) {\n            <div class=\"toolbar-menu-container\" [formGroup]=\"hideShowMenuGroup\"\n                (click)=\"$event.stopPropagation()\">\n                <h4 class=\"column-headers\">Visible Columns</h4>\n                <mat-form-field appearance=\"fill\" style=\"width: -webkit-fill-available;\">\n                    <mat-label>Filter Columns</mat-label>\n                    <input matInput [(ngModel)]=\"showHideFilter\" (ngModelChange)=\"filterColumns($event)\"\n                        [ngModelOptions]=\"{standalone: true}\">\n                </mat-form-field>\n                <div class=\"showHide-menu-columns-list\">\n                    @for (column of showHideColumnsArray; track column.field) {\n                        <div class=\"toolbar-menu-item\">\n                            <mat-checkbox color=\"primary\" class=\"toolbar-menu-checkbox\" style=\"width: max-content;\"\n                                [formControlName]=\"column.field\" (change)=\"setColumnHideShow()\">{{column.header}}</mat-checkbox>\n                        </div>\n                    }\n                </div>\n            </div>\n        }\n        @if (columnPinMenuCtrl) {\n            <div class=\"toolbar-menu-container\" (click)=\"$event.stopPropagation()\">\n                <h4 class=\"column-headers\">Pin Columns</h4>\n                <form class=\"example-form\">\n                    <mat-form-field appearance=\"fill\" style=\"width: -webkit-fill-available;\">\n                        <mat-label>Filter Columns</mat-label>\n                        <input matInput [(ngModel)]=\"showHideFilter\" (ngModelChange)=\"filterColumns($event)\"\n                            [ngModelOptions]=\"{standalone: true}\">\n                    </mat-form-field>\n                </form>\n                <div class=\"showHide-menu-columns-list\">\n                    <app-column-pinning [columns]=\"showHideColumnsArray\" (columnsChanged)=\"updateColumns($event)\"></app-column-pinning>\n                </div>\n            </div>\n        }\n    </mat-menu>\n\n    <!-- Row Pin Menu -->\n    <mat-menu #pinMenu=\"matMenu\" (closed)=\"closeRowPinMenu()\">\n        @if (rowPinMenuRow) {\n            @if (!isRowPinned(rowPinMenuRow)) {\n                <button mat-menu-item (click)=\"pinRow(rowPinMenuRow, 'top')\">\n                    <mat-icon>vertical_align_top</mat-icon>\n                    <span>Pin to Top</span>\n                </button>\n                <button mat-menu-item (click)=\"pinRow(rowPinMenuRow, 'bottom')\">\n                    <mat-icon>vertical_align_bottom</mat-icon>\n                    <span>Pin to Bottom</span>\n                </button>\n            }\n            @if (isRowPinned(rowPinMenuRow)) {\n                <button mat-menu-item (click)=\"unpinRow(rowPinMenuRow)\">\n                    <mat-icon>close</mat-icon>\n                    <span>Unpin Row</span>\n                </button>\n            }\n        }\n    </mat-menu>\n\n    @if (loadingIndicator) {\n        <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\n    }\n    <section id=\"tableContainer\" class=\"mat-table-ext-container\" (scroll)=\"onScroll($event)\"\n        [style.height]=\"tableHeight ? tableHeight :'max-content'\">\n        \n        @if(enableRowPinning){\n            <div [style.max-height]=\"topPinnedMaxHeight\" [style.overflow]=\"topPinnedMaxHeight ? 'auto' : 'visible'\" \n                 [style.position]=\"'sticky'\" [style.top]=\"'0'\" [style.z-index]=\"'111'\">\n            <table style=\"width: 100%;\" \n             mat-table #MyTableTop [id]=\"'matTableExtTop'+tableID\" [dataSource]=\"pinnedTopDataSource\" matSort cdkDropList\n                cdkDropListOrientation=\"horizontal\" multiTemplateDataRows (cdkDropListDropped)=\"onDrop($event)\"\n                (click)=\"saveCellEditing()\" [style.width]=\"scrollbarH?'max-content':'100%'\" \n                [class]=\"'mat-mdc-table' + (tableClassName ? ' ' + tableClassName : '')\">\n    \n                <!-- Row selection column -->\n                <ng-container matColumnDef=\"select\">\n                    <th mat-header-cell *matHeaderCellDef cdkDragLockAxis=\"x\" cdkDrag [cdkDragDisabled]=\"!dndColumns\">\n                        <mat-checkbox (change)=\"$event ? toggleAllRows() : null\"\n                            [checked]=\"selection.hasValue() && isAllSelected()\"\n                            [indeterminate]=\"selection.hasValue() && !isAllSelected()\" [aria-label]=\"checkboxLabel()\">\n                        </mat-checkbox>\n                    </th>\n                    <td mat-cell *matCellDef=\"let row;let i = dataIndex\">\n                        <mat-checkbox (click)=\"$event.stopPropagation()\" (change)=\"$event ? setSelectedRows(row,i) : null\"\n                            [checked]=\"selection.isSelected(row)\" [aria-label]=\"checkboxLabel(row)\">\n                        </mat-checkbox>\n                    </td>\n                    <ng-container *ngIf=\"showFooterRow\">\n                        <td mat-footer-cell *matFooterCellDef></td>\n                    </ng-container>\n                </ng-container>\n                <!--dynamic columns are being generated here-->\n                @for (column of columnsArray; track column.field + '_' + column.pinned; let i = $index) {\n                    <div matColumnDef=\"{{column['field']}}\" [sticky]=\"column.pinned === 'left'\" [stickyEnd]=\"column.pinned === 'right'\">\n                    <th mat-header-cell *matHeaderCellDef [style.minWidth]=\"column.width\" [style.maxWidth]=\"column.maxWidth?column.maxWidth:column.width\"\n                        [style.minWidth]=\"column.minWidth\" cdkDragLockAxis=\"x\" cdkDrag [cdkDragDisabled]=\"!dndColumns\"\n                        [columnsResizable]=\"columnResizable\" [index]=\"i\" class=\"mat-mdc-header-cell\"\n                        [mat-sort-header]=\"column.field\" [disabled]=\"!sorting || column.disabled === true\">\n    \n                        @if (column.headerTemplate || headerTemplateRef) {\n                            <ng-template [ngTemplateOutlet]=\"column.headerTemplate || headerTemplateRef\"\n                                [ngTemplateOutletContext]=\"{data:column}\"></ng-template>\n                        }\n                        @if (!headerTemplateRef && !column.headerTemplate) {\n                            <span matTooltip=\"{{column.headerTooltip?.value}}\"\n                                [matTooltipPosition]=\"column?.headerTooltip?.tooltipPosition!\"\n                                [class.disabled]=\"!sorting || column.disabled === true\">{{column.header}}</span>\n                        }\n                    </th>\n                    <td mat-cell *matCellDef=\"let row ;let i=dataIndex\" class=\"mat-mdc-cell\">\n                        @if (!row.editable && !cellEditing[i +'_'+column.field]) {\n                            <div [style.cursor]=\"'default'\"\n                                matTooltip=\"{{column.cellTooltip?.value}}\"\n                                [matTooltipPosition]=\"column?.cellTooltip?.tooltipPosition!\">\n                                @if (!cellTemplateRef && !column?.cellTemplate && !cellTemplateRefMap[column.field]) {\n                                    <span>{{row[column.field]}}</span>\n                                }\n                                @if (cellTemplateRefMap[column.field]) {\n                                    <ng-container [ngTemplateOutlet]=\"cellTemplateRefMap[column.field]\"\n                                        [ngTemplateOutletContext]=\"{row:row,column:column,index:i}\">\n                                    </ng-container>\n                                }\n                                @if (cellTemplateRef && column.cellTemplate && !cellTemplateRefMap[column.field]) {\n                                    <ng-container [ngTemplateOutlet]=\"column.cellTemplate\"\n                                        [ngTemplateOutletContext]=\"{row:row,column:column,index:i}\">\n                                    </ng-container>\n                                }\n                                @if (!cellTemplateRef && column.cellTemplate && !cellTemplateRefMap[column.field]) {\n                                    <ng-container [ngTemplateOutlet]=\"column.cellTemplate\"\n                                        [ngTemplateOutletContext]=\"{row:row,column:column,index:i}\">\n                                    </ng-container>\n                                }\n                                @if (cellTemplateRef && !column.cellTemplate && !cellTemplateRefMap[column.field]) {\n                                    <ng-container [ngTemplateOutlet]=\"cellTemplateRef\"\n                                        [ngTemplateOutletContext]=\"{row:row,column:column,index:i}\">\n                                    </ng-container>\n                                }\n                            </div>\n                        }\n                        @if (row.editable || cellEditing[i +'_'+column.field]) {\n                            <div (click)=\"$event.stopPropagation()\">\n                                @if (inlineEditingTemplateRef && !cellEditing[i +'_'+column.field]) {\n                                    <ng-container [ngTemplateOutlet]=\"inlineEditingTemplateRef\"\n                                        [ngTemplateOutletContext]=\"{data:getInlineEditingData(row,i,column)}\"></ng-container>\n                                }\n                                @if (cellEditingTemplateRef && !(row.editable)) {\n                                    <ng-container [ngTemplateOutlet]=\"cellEditingTemplateRef\"\n                                        [ngTemplateOutletContext]=\"{data:getInlineEditingData(row,i,column)}\"></ng-container>\n                                }\n                                @if (!inlineEditingTemplateRef && (row.editable) && rowDataTemp['e'+i]) {\n                                    @if (column.type == 'number') {\n                                        <mat-form-field appearance=\"outline\" class=\"inline-editing-field\">\n                                            <input matInput type=\"number\" [(ngModel)]=\"rowDataTemp['e'+i][column.field]\"\n                                                [ngModelOptions]=\"{standalone: true}\">\n                                        </mat-form-field>\n                                    }\n                                    @if (column.type == 'string') {\n                                        <mat-form-field style=\"width: 100%;\" appearance=\"outline\" class=\"inline-editing-field\">\n                                            <input matInput type=\"text\" [(ngModel)]=\"rowDataTemp['e'+i][column.field]\"\n                                                [ngModelOptions]=\"{standalone: true}\">\n                                        </mat-form-field>\n                                    }\n                                    @if (column.type == 'textarea') {\n                                        <mat-form-field style=\"width: 100%;\" appearance=\"outline\" class=\"inline-editing-field\">\n                                            <textarea matInput rows=\"3\" [(ngModel)]=\"rowDataTemp['e'+i][column.field]\"\n                                                [ngModelOptions]=\"{standalone: true}\"></textarea>\n                                        </mat-form-field>\n                                    }\n                                    @if (column.type == 'date') {\n                                        <mat-form-field appearance=\"outline\" class=\"inline-editing-field\">\n                                            <input matInput type=\"date\" [(ngModel)]=\"rowDataTemp['e'+i][column.field]\"\n                                                [ngModelOptions]=\"{standalone: true}\">\n                                        </mat-form-field>\n                                    }\n                                    @if (column.type == 'datepicker') {\n                                        <mat-form-field appearance=\"outline\" class=\"inline-editing-field\">\n                                            <input matInput [matDatepicker]=\"inlinePicker\" [(ngModel)]=\"rowDataTemp['e'+i][column.field]\"\n                                                [ngModelOptions]=\"{standalone: true}\">\n                                            <mat-datepicker-toggle matIconSuffix [for]=\"inlinePicker\"></mat-datepicker-toggle>\n                                            <mat-datepicker #inlinePicker></mat-datepicker>\n                                        </mat-form-field>\n                                    }\n                                    @if (column.type == 'selection') {\n                                        <mat-form-field appearance=\"outline\" class=\"inline-editing-field\">\n                                            <mat-select [value]=\"rowDataTemp['e'+i][column.field]\"\n                                                [(ngModel)]=\"rowDataTemp['e'+i][column.field]\">\n                                                @for (option of column.options; track option) {\n                                                    <mat-option [value]=\"option\">{{option}}</mat-option>\n                                                }\n                                            </mat-select>\n                                        </mat-form-field>\n                                    }\n                                    @if (column.type == 'boolean') {\n                                        <mat-checkbox (click)=\"$event.stopPropagation()\" color=\"primary\" [(ngModel)]=\"row[column.field]\"></mat-checkbox>\n                                    }\n                                }\n                                @if (!cellEditingTemplateRef && cellEditing[i +'_'+column.field]) {\n                                    @if (column.type == 'number') {\n                                        <mat-form-field appearance=\"outline\" class=\"inline-editing-field\">\n                                            <input matInput type=\"number\" [(ngModel)]=\"rowDataTemp['e'+i][column.field]\"\n                                                [ngModelOptions]=\"{standalone: true}\">\n                                        </mat-form-field>\n                                    }\n                                    @if (column.type == 'string') {\n                                        <mat-form-field appearance=\"outline\" class=\"inline-editing-field\">\n                                            <input matInput type=\"text\" [(ngModel)]=\"rowDataTemp['e'+i][column.field]\"\n                                                [ngModelOptions]=\"{standalone: true}\">\n                                        </mat-form-field>\n                                    }\n                                    @if (column.type == 'textarea') {\n                                        <mat-form-field appearance=\"outline\" class=\"inline-editing-field\">\n                                            <textarea matInput rows=\"3\" [(ngModel)]=\"rowDataTemp['e'+i][column.field]\"\n                                                [ngModelOptions]=\"{standalone: true}\"></textarea>\n                                        </mat-form-field>\n                                    }\n                                    @if (column.type == 'date') {\n                                        <mat-form-field appearance=\"outline\" class=\"inline-editing-field\">\n                                            <input matInput type=\"date\" [(ngModel)]=\"rowDataTemp['e'+i][column.field]\"\n                                                [ngModelOptions]=\"{standalone: true}\">\n                                        </mat-form-field>\n                                    }\n                                    @if (column.type == 'datepicker') {\n                                        <mat-form-field appearance=\"outline\" class=\"inline-editing-field\">\n                                            <input matInput [matDatepicker]=\"cellPicker\" [(ngModel)]=\"rowDataTemp['e'+i][column.field]\"\n                                                [ngModelOptions]=\"{standalone: true}\">\n                                            <mat-datepicker-toggle matIconSuffix [for]=\"cellPicker\"></mat-datepicker-toggle>\n                                            <mat-datepicker #cellPicker></mat-datepicker>\n                                        </mat-form-field>\n                                    }\n                                    @if (column.type == 'selection') {\n                                        <mat-form-field appearance=\"outline\" class=\"inline-editing-field\">\n                                            <mat-select [value]=\"rowDataTemp['e'+i][column.field]\"\n                                                [(ngModel)]=\"rowDataTemp['e'+i][column.field]\">\n                                                @for (option of column.options; track option) {\n                                                    <mat-option [value]=\"option\">{{option}}</mat-option>\n                                                }\n                                            </mat-select>\n                                        </mat-form-field>\n                                    }\n                                    @if (column.type == 'boolean') {\n                                        <mat-checkbox (click)=\"$event.stopPropagation()\" color=\"primary\" [(ngModel)]=\"row[column.field]\"></mat-checkbox>\n                                    }\n                                }\n                            </div>\n                        }\n                    </td>\n                    @if (showFooterRow) {\n                        <td mat-footer-cell *matFooterCellDef> {{column.footerText}} </td>\n                    }\n                    </div>\n                }\n                <ng-container matColumnDef=\"edit\" stickyEnd=\"false\">\n                    <th mat-header-cell cdkDragLockAxis=\"x\" cdkDrag [cdkDragDisabled]=\"true\" *matHeaderCellDef\n                        class=\"action-column-cells\"> Edit </th>\n                    <td mat-cell *matCellDef=\"let row; let i = dataIndex\" class=\"inline-edit-column-cell\">\n                        <!-- Edit disabled in pinned top table -->\n                    </td>\n                    <td mat-footer-cell *matFooterCellDef> edit </td>\n                </ng-container>\n                <ng-container matColumnDef=\"popup\" stickyEnd=\"false\">\n                    <th mat-header-cell cdkDragLockAxis=\"x\" cdkDrag [cdkDragDisabled]=\"true\" *matHeaderCellDef\n                        class=\"action-column-cells\"> Popup\n                    </th>\n                    <td mat-cell *matCellDef=\"let row; let i = index\">\n                        <!-- Popup edit disabled in pinned top table -->\n                    </td>\n                    <td mat-footer-cell *matFooterCellDef></td>\n                </ng-container>\n    \n                <ng-container matColumnDef=\"delete\">\n                    <th mat-header-cell cdkDragLockAxis=\"x\" cdkDrag [cdkDragDisabled]=\"true\" *matHeaderCellDef\n                        class=\"action-column-cells\"> Delete\n                    </th>\n                    <td mat-cell *matCellDef=\"let row;let i=dataIndex\">\n                        <mat-icon (click)=\"deleteRow(row,i)\" aria-hidden=\"false\" aria-label=\"Example home icon\"\n                            fontIcon=\"delete\">\n                        </mat-icon>\n                    </td>\n                    <td mat-footer-cell *matFooterCellDef></td>\n                </ng-container>\n    \n                <ng-container matColumnDef=\"hide\" stickyEnd=\"false\">\n                    <th mat-header-cell cdkDragLockAxis=\"x\" cdkDrag [cdkDragDisabled]=\"true\" *matHeaderCellDef\n                        class=\"action-column-cells\"> Hide\n                    </th>\n                    <td mat-cell *matCellDef=\"let row;let i=dataIndex\">\n                        <button mat-icon-button (click)=\"toggleRowHide(i)\" \n                            [matTooltip]=\"isRowHidden(i) ? 'Unhide Row' : 'Hide Row'\"\n                            matTooltipPosition=\"above\">\n                            <mat-icon [color]=\"isRowHidden(i) ? 'primary' : ''\" aria-hidden=\"false\">\n                                {{ isRowHidden(i) ? 'visibility_off' : 'visibility' }}\n                            </mat-icon>\n                        </button>\n                    </td>\n                    <td mat-footer-cell *matFooterCellDef></td>\n                </ng-container>\n    \n                <ng-container matColumnDef=\"pin\" stickyEnd=\"false\">\n                    <th mat-header-cell cdkDragLockAxis=\"x\" cdkDrag [cdkDragDisabled]=\"true\" *matHeaderCellDef\n                        class=\"action-column-cells\"> Pinning\n                    </th>\n                    <td mat-cell *matCellDef=\"let row;let i=dataIndex\">\n                        <button mat-icon-button \n                            [matMenuTriggerFor]=\"pinMenu\"\n                            (click)=\"openRowPinMenu($event, row)\"\n                            [matTooltip]=\"getRowPinPosition(row) ? 'Pinned ' + getRowPinPosition(row) : 'Pin Row'\"\n                            matTooltipPosition=\"above\">\n                            <mat-icon [color]=\"isRowPinned(row) ? 'primary' : ''\" aria-hidden=\"false\">\n                                {{ isRowPinned(row) ? 'push_pin' : 'push_pin' }}\n                            </mat-icon>\n                        </button>\n                    </td>\n                    <td mat-footer-cell *matFooterCellDef></td>\n                </ng-container>\n    \n                <!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->\n                @if (expandRows) {\n                    <ng-container matColumnDef=\"expandedDetail\">\n                        <td mat-cell *matCellDef=\"let element;let i=dataIndex \"\n                            [attr.colspan]=\"columnsToDisplayWithExpand.length\">\n                            <div class=\"example-element-detail\"\n                                [@detailExpand]=\"element == expandedElement ? 'expanded' : 'collapsed'\">\n                                @if (expansionTemplateRef) {\n                                    <ng-container [ngTemplateOutlet]=\"expansionTemplateRef\"\n                                        [ngTemplateOutletContext]=\"{$explicit:element,row:element,index:i}\">\n                                    </ng-container>\n                                }\n                            </div>\n                        </td>\n                    </ng-container>\n                }\n                <!-- Column group headers -->\n                @if (columnGroups.length > 0) {\n                    @for (group of columnGroups; track group.name) {\n                        <ng-container [matColumnDef]=\"'group-' + group.name\">\n                            <th mat-header-cell *matHeaderCellDef [attr.colspan]=\"group.colspan || group.columns.length\" \n                                class=\"group-header-cell\">\n                                <div class=\"group-header-content\">\n                                    <span class=\"group-label\">{{group.label}}</span>\n                                </div>\n                            </th>\n                        </ng-container>\n                    }\n                    <!-- Empty header cells for ungrouped columns -->\n                    @for (column of columnsArray; track column.field) {\n                        <ng-container [matColumnDef]=\"'ungrouped-' + column.field\">\n                            <th mat-header-cell *matHeaderCellDef class=\"group-header-cell ungrouped-header-cell\">\n                            </th>\n                        </ng-container>\n                    }\n                    <!-- Empty header cells for action columns to fill space in group header -->\n                    <ng-container [matColumnDef]=\"'ungrouped-select'\">\n                        <th mat-header-cell *matHeaderCellDef class=\"group-header-cell ungrouped-header-cell\"></th>\n                    </ng-container>\n                    <ng-container [matColumnDef]=\"'ungrouped-edit'\">\n                        <th mat-header-cell *matHeaderCellDef class=\"group-header-cell ungrouped-header-cell\"></th>\n                    </ng-container>\n                    <ng-container [matColumnDef]=\"'ungrouped-popup'\">\n                        <th mat-header-cell *matHeaderCellDef class=\"group-header-cell ungrouped-header-cell\"></th>\n                    </ng-container>\n                    <ng-container [matColumnDef]=\"'ungrouped-delete'\">\n                        <th mat-header-cell *matHeaderCellDef class=\"group-header-cell ungrouped-header-cell\"></th>\n                    </ng-container>\n                    <ng-container [matColumnDef]=\"'ungrouped-freeze'\">\n                        <th mat-header-cell *matHeaderCellDef class=\"group-header-cell ungrouped-header-cell\"></th>\n                    </ng-container>\n                    <ng-container [matColumnDef]=\"'ungrouped-hide'\">\n                        <th mat-header-cell *matHeaderCellDef class=\"group-header-cell ungrouped-header-cell\"></th>\n                    </ng-container>\n                    <ng-container [matColumnDef]=\"'ungrouped-pin'\">\n                        <th mat-header-cell *matHeaderCellDef class=\"group-header-cell ungrouped-header-cell\"></th>\n                    </ng-container>\n                }\n                <!-- Filter row columns for data columns -->\n                @for (ids of headersFiltersIds; track ids; let i = $index) {\n                    <ng-container [matColumnDef]=\"ids\" [sticky]=\"columnsArray[$index].pinned === 'left'\" [stickyEnd]=\"columnsArray[$index].pinned === 'right'\">\n                        <th mat-header-cell *matHeaderCellDef  [style.minWidth]=\"columnsArray[$index].width\" [style.maxWidth]=\"columnsArray[$index].maxWidth?columnsArray[$index].maxWidth:columnsArray[$index].width\"\n                        [style.minWidth]=\"columnsArray[$index].minWidth\" >\n                            <div style=\"display: block; width: 100%;\" class=\"filters-container\" [class.animate]=\"toggleFilters\">\n                                <app-filter-columns-component style=\"display: block; width: 100%;\" [obj]=\"columnsArray[returnIndex(ids)]\"\n                                    (filterOutput)=\"applyColumnFilter($event,columnsArray[returnIndex(ids)])\"></app-filter-columns-component>\n                            </div>\n                        </th>\n                    </ng-container>\n                }\n                <!-- Empty filter cells for action columns -->\n                <ng-container [matColumnDef]=\"'filter-select'\">\n                    <th mat-header-cell *matHeaderCellDef class=\"filter-placeholder-cell\"></th>\n                </ng-container>\n                <ng-container [matColumnDef]=\"'filter-edit'\">\n                    <th mat-header-cell *matHeaderCellDef class=\"filter-placeholder-cell\"></th>\n                </ng-container>\n                <ng-container [matColumnDef]=\"'filter-popup'\">\n                    <th mat-header-cell *matHeaderCellDef class=\"filter-placeholder-cell\"></th>\n                </ng-container>\n                <ng-container [matColumnDef]=\"'filter-delete'\">\n                    <th mat-header-cell *matHeaderCellDef class=\"filter-placeholder-cell\"></th>\n                </ng-container>\n                <ng-container [matColumnDef]=\"'filter-freeze'\">\n                    <th mat-header-cell *matHeaderCellDef class=\"filter-placeholder-cell\"></th>\n                </ng-container>\n                <ng-container [matColumnDef]=\"'filter-hide'\">\n                    <th mat-header-cell *matHeaderCellDef class=\"filter-placeholder-cell\"></th>\n                </ng-container>\n                <ng-container [matColumnDef]=\"'filter-pin'\">\n                    <th mat-header-cell *matHeaderCellDef class=\"filter-placeholder-cell\"></th>\n                </ng-container>\n                @if (columnGroups.length > 0) {\n                    <tr mat-header-row *matHeaderRowDef=\"getGroupedColumns(); sticky: stickyHeader\" class=\"mat-mdc-header-row group-header-row\"></tr>\n                }\n                <tr mat-header-row *matHeaderRowDef=\" getDisplayedColumns(); sticky: stickyHeader\" class=\"mat-mdc-header-row\"></tr>\n                <tr style=\"height: 0px;\" mat-header-row class=\"no-default-height\" *matHeaderRowDef=\"getFilterColumns()\">\n                </tr>\n                \n                <tr mat-row *matRowDef=\"let row; columns:getDisplayedColumns(); let i=dataIndex; \" \n                    class=\"mat-mdc-row data-row\"\n                    [ngClass]=\"{\n                      'data-row':expandRows,\n                      'stripedRows':(stripedRows &&  i % 2 == 1),\n                      'hoverClass':rowHover, \n                      'hidden':(hiddenCtrl.isSelected(row) && hideRows) || isRowHidden(i),\n                      'example-expanded-row':expandedElement === row,\n                      'pinned-row': isRowPinned(row),\n                      'mat-row-sticky-top': isRowPinnedTop(row),\n                      'mat-row-sticky-bottom': isRowPinnedBottom(row)\n                    }\"\n                    (click)=\"expandRow(row, row !== expandedElement,i)\">\n                </tr>\n           \n                @if (expandRows) {\n                    <tr mat-row *matRowDef=\"let row; columns: ['expandedDetail']; let i=dataIndex\"\n                        class=\"example-detail-row\"\n                        [ngClass]=\"{'hidden': isRowHidden(i)}\">\n                    </tr>\n                }\n                @if (showFooterRow) {\n                    <tr mat-footer-row *matFooterRowDef=\"getDisplayedColumns(); sticky: stickyFooter\"></tr>\n                }\n            </table>\n            </div>\n            \n            <table mat-table #matTable #MyTable [id]=\"'matTableExt'+tableID\" [dataSource]=\"dataSource\" matSort cdkDropList\n                cdkDropListOrientation=\"horizontal\" multiTemplateDataRows (cdkDropListDropped)=\"onDrop($event)\"\n                (click)=\"saveCellEditing()\" [style.width]=\"scrollbarH?'max-content':'100%'\" \n                [class]=\"'mat-mdc-table' + (tableClassName ? ' ' + tableClassName : '')\">\n    \n                <!-- Row selection column -->\n                <ng-container matColumnDef=\"select\">\n                    <th mat-header-cell *matHeaderCellDef cdkDragLockAxis=\"x\" cdkDrag [cdkDragDisabled]=\"!dndColumns\">\n                        <mat-checkbox (change)=\"$event ? toggleAllRows() : null\"\n                            [checked]=\"selection.hasValue() && isAllSelected()\"\n                            [indeterminate]=\"selection.hasValue() && !isAllSelected()\" [aria-label]=\"checkboxLabel()\">\n                        </mat-checkbox>\n                    </th>\n                    <td mat-cell *matCellDef=\"let row;let i = dataIndex\">\n                        <mat-checkbox (click)=\"$event.stopPropagation()\" (change)=\"$event ? setSelectedRows(row,i) : null\"\n                            [checked]=\"selection.isSelected(row)\" [aria-label]=\"checkboxLabel(row)\">\n                        </mat-checkbox>\n                    </td>\n                    <ng-container *ngIf=\"showFooterRow\">\n                        <td mat-footer-cell *matFooterCellDef></td>\n                    </ng-container>\n                </ng-container>\n                <!--dynamic columns are being generated here-->\n                @for (column of columnsArray; track column.field + '_' + column.pinned; let i = $index) {\n                    <div matColumnDef=\"{{column['field']}}\" [sticky]=\"column.pinned === 'left'\" [stickyEnd]=\"column.pinned === 'right'\">\n                    <th mat-header-cell *matHeaderCellDef [style.minWidth]=\"column.width\" [style.maxWidth]=\"column.maxWidth?column.maxWidth:column.width\"\n                        [style.minWidth]=\"column.minWidth\" cdkDragLockAxis=\"x\" cdkDrag [cdkDragDisabled]=\"!dndColumns\"\n                        [columnsResizable]=\"columnResizable\" [index]=\"i\" class=\"mat-mdc-header-cell\"\n                        [mat-sort-header]=\"column.field\" [disabled]=\"!sorting || column.disabled === true\">\n    \n                        @if (column.headerTemplate || headerTemplateRef) {\n                            <ng-template [ngTemplateOutlet]=\"column.headerTemplate || headerTemplateRef\"\n                                [ngTemplateOutletContext]=\"{data:column}\"></ng-template>\n                        }\n                        @if (!headerTemplateRef && !column.headerTemplate) {\n                            <span matTooltip=\"{{column.headerTooltip?.value}}\"\n                                [matTooltipPosition]=\"column?.headerTooltip?.tooltipPosition!\"\n                                [class.disabled]=\"!sorting || column.disabled === true\">{{column.header}}</span>\n                        }\n                    </th>\n                    <td mat-cell *matCellDef=\"let row ;let i=dataIndex\" class=\"mat-mdc-cell\">\n                        @if (!row.editable && !cellEditing[i +'_'+column.field]) {\n                            <div (dblclick)=\"cellEditing[i +'_'+column.field] = inCellEditing;setCellData(row,i)\"\n                                (click)=\"cellPopupEditing ? openCellPopupDialog(row, column, i) : null\"\n                                [style.cursor]=\"cellPopupEditing ? 'pointer' : 'default'\"\n                                matTooltip=\"{{column.cellTooltip?.value}}\"\n                                [matTooltipPosition]=\"column?.cellTooltip?.tooltipPosition!\">\n                                @if (!cellTemplateRef && !column?.cellTemplate && !cellTemplateRefMap[column.field]) {\n                                    <span>{{row[column.field]}}</span>\n                                }\n                                @if (cellTemplateRefMap[column.field]) {\n                                    <ng-container [ngTemplateOutlet]=\"cellTemplateRefMap[column.field]\"\n                                        [ngTemplateOutletContext]=\"{row:row,column:column,index:i}\">\n                                    </ng-container>\n                                }\n                                @if (cellTemplateRef && column.cellTemplate && !cellTemplateRefMap[column.field]) {\n                                    <ng-container [ngTemplateOutlet]=\"column.cellTemplate\"\n                                        [ngTemplateOutletContext]=\"{row:row,column:column,index:i}\">\n                                    </ng-container>\n                                }\n                                @if (!cellTemplateRef && column.cellTemplate && !cellTemplateRefMap[column.field]) {\n                                    <ng-container [ngTemplateOutlet]=\"column.cellTemplate\"\n                                        [ngTemplateOutletContext]=\"{row:row,column:column,index:i}\">\n                                    </ng-container>\n                                }\n                                @if (cellTemplateRef && !column.cellTemplate && !cellTemplateRefMap[column.field]) {\n                                    <ng-container [ngTemplateOutlet]=\"cellTemplateRef\"\n                                        [ngTemplateOutletContext]=\"{row:row,column:column,index:i}\">\n                                    </ng-container>\n                                }\n                            </div>\n                        }\n                        @if (row.editable || cellEditing[i +'_'+column.field]) {\n                            <div (click)=\"$event.stopPropagation()\">\n                                @if (inlineEditingTemplateRef && !cellEditing[i +'_'+column.field]) {\n                                    <ng-container [ngTemplateOutlet]=\"inlineEditingTemplateRef\"\n                                        [ngTemplateOutletContext]=\"{data:getInlineEditingData(row,i,column)}\"></ng-container>\n                                }\n                                @if (cellEditingTemplateRef && !(row.editable)) {\n                                    <ng-container [ngTemplateOutlet]=\"cellEditingTemplateRef\"\n                                        [ngTemplateOutletContext]=\"{data:getInlineEditingData(row,i,column)}\"></ng-container>\n                                }\n                                @if (!inlineEditingTemplateRef && (row.editable) && rowDataTemp['e'+i]) {\n                                    @if (column.type == 'number') {\n                                        <mat-form-field appearance=\"outline\" class=\"inline-editing-field\">\n                                            <input matInput type=\"number\" [(ngModel)]=\"rowDataTemp['e'+i][column.field]\"\n                                                [ngModelOptions]=\"{standalone: true}\">\n                                        </mat-form-field>\n                                    }\n                                    @if (column.type == 'string') {\n                                        <mat-form-field style=\"width: 100%;\" appearance=\"outline\" class=\"inline-editing-field\">\n                                            <input matInput type=\"text\" [(ngModel)]=\"rowDataTemp['e'+i][column.field]\"\n                                                [ngModelOptions]=\"{standalone: true}\">\n                                        </mat-form-field>\n                                    }\n                                    @if (column.type == 'textarea') {\n                                        <mat-form-field style=\"width: 100%;\" appearance=\"outline\" class=\"inline-editing-field\">\n                                            <textarea matInput rows=\"3\" [(ngModel)]=\"rowDataTemp['e'+i][column.field]\"\n                                                [ngModelOptions]=\"{standalone: true}\"></textarea>\n                                        </mat-form-field>\n                                    }\n                                    @if (column.type == 'date') {\n                                        <mat-form-field appearance=\"outline\" class=\"inline-editing-field\">\n                                            <input matInput type=\"date\" [(ngModel)]=\"rowDataTemp['e'+i][column.field]\"\n                                                [ngModelOptions]=\"{standalone: true}\">\n                                        </mat-form-field>\n                                    }\n                                    @if (column.type == 'datepicker') {\n                                        <mat-form-field appearance=\"outline\" class=\"inline-editing-field\">\n                                            <input matInput [matDatepicker]=\"inlinePicker\" [(ngModel)]=\"rowDataTemp['e'+i][column.field]\"\n                                                [ngModelOptions]=\"{standalone: true}\">\n                                            <mat-datepicker-toggle matIconSuffix [for]=\"inlinePicker\"></mat-datepicker-toggle>\n                                            <mat-datepicker #inlinePicker></mat-datepicker>\n                                        </mat-form-field>\n                                    }\n                                    @if (column.type == 'selection') {\n                                        <mat-form-field appearance=\"outline\" class=\"inline-editing-field\">\n                                            <mat-select [value]=\"rowDataTemp['e'+i][column.field]\"\n                                                [(ngModel)]=\"rowDataTemp['e'+i][column.field]\">\n                                                @for (option of column.options; track option) {\n                                                    <mat-option [value]=\"option\">{{option}}</mat-option>\n                                                }\n                                            </mat-select>\n                                        </mat-form-field>\n                                    }\n                                    @if (column.type == 'boolean') {\n                                        <mat-checkbox (click)=\"$event.stopPropagation()\" color=\"primary\" [(ngModel)]=\"row[column.field]\"></mat-checkbox>\n                                    }\n                                }\n                                @if (!cellEditingTemplateRef && cellEditing[i +'_'+column.field]) {\n                                    @if (column.type == 'number') {\n                                        <mat-form-field appearance=\"outline\" class=\"inline-editing-field\">\n                                            <input matInput type=\"number\" [(ngModel)]=\"rowDataTemp['e'+i][column.field]\"\n                                                [ngModelOptions]=\"{standalone: true}\">\n                                        </mat-form-field>\n                                    }\n                                    @if (column.type == 'string') {\n                                        <mat-form-field appearance=\"outline\" class=\"inline-editing-field\">\n                                            <input matInput type=\"text\" [(ngModel)]=\"rowDataTemp['e'+i][column.field]\"\n                                                [ngModelOptions]=\"{standalone: true}\">\n                                        </mat-form-field>\n                                    }\n                                    @if (column.type == 'textarea') {\n                                        <mat-form-field appearance=\"outline\" class=\"inline-editing-field\">\n                                            <textarea matInput rows=\"3\" [(ngModel)]=\"rowDataTemp['e'+i][column.field]\"\n                                                [ngModelOptions]=\"{standalone: true}\"></textarea>\n                                        </mat-form-field>\n                                    }\n                                    @if (column.type == 'date') {\n                                        <mat-form-field appearance=\"outline\" class=\"inline-editing-field\">\n                                            <input matInput type=\"date\" [(ngModel)]=\"rowDataTemp['e'+i][column.field]\"\n                                                [ngModelOptions]=\"{standalone: true}\">\n                                        </mat-form-field>\n                                    }\n                                    @if (column.type == 'datepicker') {\n                                        <mat-form-field appearance=\"outline\" class=\"inline-editing-field\">\n                                            <input matInput [matDatepicker]=\"cellPicker\" [(ngModel)]=\"rowDataTemp['e'+i][column.field]\"\n                                                [ngModelOptions]=\"{standalone: true}\">\n                                            <mat-datepicker-toggle matIconSuffix [for]=\"cellPicker\"></mat-datepicker-toggle>\n                                            <mat-datepicker #cellPicker></mat-datepicker>\n                                        </mat-form-field>\n                                    }\n                                    @if (column.type == 'selection') {\n                                        <mat-form-field appearance=\"outline\" class=\"inline-editing-field\">\n                                            <mat-select [value]=\"rowDataTemp['e'+i][column.field]\"\n                                                [(ngModel)]=\"rowDataTemp['e'+i][column.field]\">\n                                                @for (option of column.options; track option) {\n                                                    <mat-option [value]=\"option\">{{option}}</mat-option>\n                                                }\n                                            </mat-select>\n                                        </mat-form-field>\n                                    }\n                                    @if (column.type == 'boolean') {\n                                        <mat-checkbox (click)=\"$event.stopPropagation()\" color=\"primary\" [(ngModel)]=\"row[column.field]\"></mat-checkbox>\n                                    }\n                                }\n                            </div>\n                        }\n                    </td>\n                    @if (showFooterRow) {\n                        <td mat-footer-cell *matFooterCellDef> {{column.footerText}} </td>\n                    }\n                    </div>\n                }\n                <ng-container matColumnDef=\"edit\" stickyEnd=\"false\">\n                    <th mat-header-cell cdkDragLockAxis=\"x\" cdkDrag [cdkDragDisabled]=\"true\" *matHeaderCellDef\n                        class=\"action-column-cells\"> Edit </th>\n                    <td mat-cell *matCellDef=\"let row; let i = dataIndex\" class=\"inline-edit-column-cell\">\n                        @if (!row.editable && !row.editmodal) {\n                            <mat-icon class=\"edit-column-icons\" aria-hidden=\"false\"\n                                (click)=\"enableInlineEditing(row,i)\" fontIcon=\"edit_note\">\n                            </mat-icon>\n                        }\n                        @if (row.editable && !row.editmodal) {\n                            <div class=\"inline-editing-controls\">\n                                <mat-icon class=\"edit-column-icons\" aria-hidden=\"false\" (click)=\"saveInlineEditing(row,i)\"\n                                    fontIcon=\"done\"></mat-icon>\n                                <mat-icon class=\"edit-column-icons\" aria-hidden=\"false\" (click)=\"cancelInlineEditing(row,i)\"\n                                    fontIcon=\"close\"></mat-icon>\n                            </div>\n                        }\n                    </td>\n                    <td mat-footer-cell *matFooterCellDef> edit </td>\n                </ng-container>\n                <ng-container matColumnDef=\"popup\" stickyEnd=\"false\">\n                    <th mat-header-cell cdkDragLockAxis=\"x\" cdkDrag [cdkDragDisabled]=\"true\" *matHeaderCellDef\n                        class=\"action-column-cells\"> Popup\n                    </th>\n                    <td mat-cell *matCellDef=\"let row; let i = index\">\n                        <mat-icon aria-hidden=\"false\" (click)=\"openEditingDialog(row)\" fontIcon=\"edit\">\n                        </mat-icon>\n                    </td>\n                    <td mat-footer-cell *matFooterCellDef></td>\n                </ng-container>\n    \n                <ng-container matColumnDef=\"delete\">\n                    <th mat-header-cell cdkDragLockAxis=\"x\" cdkDrag [cdkDragDisabled]=\"true\" *matHeaderCellDef\n                        class=\"action-column-cells\"> Delete\n                    </th>\n                    <td mat-cell *matCellDef=\"let row;let i=dataIndex\">\n                        <mat-icon (click)=\"deleteRow(row,i)\" aria-hidden=\"false\" aria-label=\"Example home icon\"\n                            fontIcon=\"delete\">\n                        </mat-icon>\n                    </td>\n                    <td mat-footer-cell *matFooterCellDef></td>\n                </ng-container>\n    \n                <ng-container matColumnDef=\"hide\" stickyEnd=\"false\">\n                    <th mat-header-cell cdkDragLockAxis=\"x\" cdkDrag [cdkDragDisabled]=\"true\" *matHeaderCellDef\n                        class=\"action-column-cells\"> Hide\n                    </th>\n                    <td mat-cell *matCellDef=\"let row;let i=dataIndex\">\n                        <button mat-icon-button (click)=\"toggleRowHide(i)\" \n                            [matTooltip]=\"isRowHidden(i) ? 'Unhide Row' : 'Hide Row'\"\n                            matTooltipPosition=\"above\">\n                            <mat-icon [color]=\"isRowHidden(i) ? 'primary' : ''\" aria-hidden=\"false\">\n                                {{ isRowHidden(i) ? 'visibility_off' : 'visibility' }}\n                            </mat-icon>\n                        </button>\n                    </td>\n                    <td mat-footer-cell *matFooterCellDef></td>\n                </ng-container>\n    \n                <ng-container matColumnDef=\"pin\" stickyEnd=\"false\">\n                    <th mat-header-cell cdkDragLockAxis=\"x\" cdkDrag [cdkDragDisabled]=\"true\" *matHeaderCellDef\n                        class=\"action-column-cells\"> Pin\n                    </th>\n                    <td mat-cell *matCellDef=\"let row;let i=dataIndex\">\n                        <button mat-icon-button \n                            [matMenuTriggerFor]=\"pinMenu\"\n                            (click)=\"openRowPinMenu($event, row)\"\n                            [matTooltip]=\"getRowPinPosition(row) ? 'Pinned ' + getRowPinPosition(row) : 'Pin Row'\"\n                            matTooltipPosition=\"above\">\n                            <mat-icon [color]=\"isRowPinned(row) ? 'primary' : ''\" aria-hidden=\"false\">\n                                {{ isRowPinned(row) ? 'push_pin' : 'push_pin' }}\n                            </mat-icon>\n                        </button>\n                    </td>\n                    <td mat-footer-cell *matFooterCellDef></td>\n                </ng-container>\n    \n                <!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->\n                @if (expandRows) {\n                    <ng-container matColumnDef=\"expandedDetail\">\n                        <td mat-cell *matCellDef=\"let element;let i=dataIndex \"\n                            [attr.colspan]=\"columnsToDisplayWithExpand.length\">\n                            <div class=\"example-element-detail\"\n                                [@detailExpand]=\"element == expandedElement ? 'expanded' : 'collapsed'\">\n                                @if (expansionTemplateRef) {\n                                    <ng-container [ngTemplateOutlet]=\"expansionTemplateRef\"\n                                        [ngTemplateOutletContext]=\"{$explicit:element,row:element,index:i}\">\n                                    </ng-container>\n                                }\n                            </div>\n                        </td>\n                    </ng-container>\n                }\n                <!-- Column group headers -->\n                <!-- @if (columnGroups.length > 0) {\n                    @for (group of columnGroups; track group.name) {\n                        <ng-container [matColumnDef]=\"'group-' + group.name\">\n                            <th mat-header-cell *matHeaderCellDef [attr.colspan]=\"group.colspan || group.columns.length\" \n                                class=\"group-header-cell\">\n                                <div class=\"group-header-content\">\n                                    <span class=\"group-label\">{{group.label}}</span>\n                                </div>\n                            </th>\n                        </ng-container>\n                    }\n                    @for (column of columnsArray; track column.field) {\n                        <ng-container [matColumnDef]=\"'ungrouped-' + column.field\">\n                            <th mat-header-cell *matHeaderCellDef class=\"group-header-cell ungrouped-header-cell\">\n                            </th>\n                        </ng-container>\n                    }\n                } -->\n                <!-- @if (columnGroups.length > 0) {\n                    <tr mat-header-row *matHeaderRowDef=\"getGroupedColumns(); sticky: stickyHeader\" class=\"mat-mdc-header-row group-header-row\"></tr>\n                } -->\n                <tr style=\"display:none\" mat-header-row *matHeaderRowDef=\" getDisplayedColumns(); sticky: stickyHeader\" class=\"mat-mdc-header-row\"></tr>\n                \n                <!-- All Data Rows (with dynamic pinning classes) -->\n                <!-- <tr mat-row *matRowDef=\"let row; columns:getDisplayedColumns(); let i=dataIndex;\" \n                    class=\"mat-mdc-row data-row\"\n                    [ngClass]=\"{\n                      'data-row':expandRows,\n                      'stripedRows':(stripedRows &&  i % 2 == 1),\n                      'hoverClass':rowHover, \n                      'hidden':(hiddenCtrl.isSelected(row) && hideRows) || isRowHidden(i),\n                      'example-expanded-row':expandedElement === row,\n                      'pinned-row': isRowPinned(row),\n                      'pinned-top-row': isRowPinnedTop(row),\n                      'pinned-bottom-row': isRowPinnedBottom(row)\n                    }\"\n                    (click)=\"expandRow(row, row !== expandedElement,i)\">\n                </tr> -->\n                <tr mat-row *matRowDef=\"let row; columns:getDisplayedColumns(); let i=dataIndex; \" \n                    class=\"mat-mdc-row data-row\"\n                    [ngClass]=\"{\n                      'data-row':expandRows,\n                      'stripedRows':(stripedRows &&  i % 2 == 1),\n                      'hoverClass':rowHover, \n                      'hidden':(hiddenCtrl.isSelected(row) && hideRows) || isRowHidden(i),\n                      'example-expanded-row':expandedElement === row,\n                      'pinned-row': isRowPinned(row),\n                      'mat-row-sticky-top': isRowPinnedTop(row),\n                      'mat-row-sticky-bottom': isRowPinnedBottom(row)\n                    }\"\n                    (click)=\"expandRow(row, row !== expandedElement,i)\">\n                </tr>\n                <!-- <tr mat-header-row *matHeaderRowDef=\"let row; columns:getDisplayedColumns(); let i=dataIndex; when: isRowPinnedTop(row)\" \n                    class=\"mat-mdc-row data-row\"\n                    class=\"mat-mdc-header-row\"\n                    [ngClass]=\"{\n                      'data-row':expandRows,\n                      'stripedRows':(stripedRows &&  i % 2 == 1),\n                      'hoverClass':rowHover, \n                      'hidden':(hiddenCtrl.isSelected(row) && hideRows) || isRowHidden(i),\n                      'example-expanded-row':expandedElement === row,\n                      'pinned-row': isRowPinned(row),\n                      'pinned-top-row': isRowPinnedTop(row),\n                      'pinned-bottom-row': isRowPinnedBottom(row)\n                    }\"\n                    (click)=\"expandRow(row, row !== expandedElement,i)\">\n                </tr> -->\n           \n                @if (expandRows) {\n                    <tr mat-row *matRowDef=\"let row; columns: ['expandedDetail']; let i=dataIndex\"\n                        class=\"example-detail-row\"\n                        [ngClass]=\"{'hidden': isRowHidden(i)}\">\n                    </tr>\n                }\n                @if (showFooterRow) {\n                    <tr mat-footer-row *matFooterRowDef=\"getDisplayedColumns(); sticky: stickyFooter\"></tr>\n                }\n            </table>\n            @if (pinnedBtmDataSource && pinnedBtmDataSource.data.length > 0) {\n                <div [style.max-height]=\"bottomPinnedMaxHeight\" [style.overflow]=\"bottomPinnedMaxHeight ? 'auto' : 'visible'\" \n                     [style.position]=\"'sticky'\" [style.bottom]=\"'0'\" [style.z-index]=\"'111'\">\n                <table style=\"width: 100%;\"  mat-table #matTable #MyTable [id]=\"'matTableExtBtm'+tableID\" [dataSource]=\"pinnedBtmDataSource\" matSort cdkDropList\n                    cdkDropListOrientation=\"horizontal\" multiTemplateDataRows (cdkDropListDropped)=\"onDrop($event)\"\n                    (click)=\"saveCellEditing()\" [style.width]=\"scrollbarH?'max-content':'100%'\" \n                    [class]=\"'mat-mdc-table' + (tableClassName ? ' ' + tableClassName : '')\">\n        \n                    <!-- Row selection column -->\n                    <ng-container matColumnDef=\"select\">\n                        <th mat-header-cell *matHeaderCellDef cdkDragLockAxis=\"x\" cdkDrag [cdkDragDisabled]=\"!dndColumns\">\n                            <mat-checkbox (change)=\"$event ? toggleAllRows() : null\"\n                                [checked]=\"selection.hasValue() && isAllSelected()\"\n                                [indeterminate]=\"selection.hasValue() && !isAllSelected()\" [aria-label]=\"checkboxLabel()\">\n                            </mat-checkbox>\n                        </th>\n                        <td mat-cell *matCellDef=\"let row;let i = dataIndex\">\n                            <mat-checkbox (click)=\"$event.stopPropagation()\" (change)=\"$event ? setSelectedRows(row,i) : null\"\n                                [checked]=\"selection.isSelected(row)\" [aria-label]=\"checkboxLabel(row)\">\n                            </mat-checkbox>\n                        </td>\n                        <ng-container *ngIf=\"showFooterRow\">\n                            <td mat-footer-cell *matFooterCellDef></td>\n                        </ng-container>\n                    </ng-container>\n                    <!--dynamic columns are being generated here-->\n                    @for (column of columnsArray; track column.field + '_' + column.pinned; let i = $index) {\n                        <div matColumnDef=\"{{column['field']}}\" [sticky]=\"column.pinned === 'left'\" [stickyEnd]=\"column.pinned === 'right'\">\n                        <th mat-header-cell *matHeaderCellDef [style.minWidth]=\"column.width\" [style.maxWidth]=\"column.maxWidth?column.maxWidth:column.width\"\n                            [style.minWidth]=\"column.minWidth\" cdkDragLockAxis=\"x\" cdkDrag [cdkDragDisabled]=\"!dndColumns\"\n                            [columnsResizable]=\"columnResizable\" [index]=\"i\" class=\"mat-mdc-header-cell\"\n                            [mat-sort-header]=\"column.field\" [disabled]=\"!sorting || column.disabled === true\">\n        \n                            @if (column.headerTemplate || headerTemplateRef) {\n                                <ng-template [ngTemplateOutlet]=\"column.headerTemplate || headerTemplateRef\"\n                                    [ngTemplateOutletContext]=\"{data:column}\"></ng-template>\n                            }\n                            @if (!headerTemplateRef && !column.headerTemplate) {\n                                <span matTooltip=\"{{column.headerTooltip?.value}}\"\n                                    [matTooltipPosition]=\"column?.headerTooltip?.tooltipPosition!\"\n                                    [class.disabled]=\"!sorting || column.disabled === true\">{{column.header}}</span>\n                            }\n                        </th>\n                        <td mat-cell *matCellDef=\"let row ;let i=dataIndex\" class=\"mat-mdc-cell\">\n                            @if (!row.editable && !cellEditing[i +'_'+column.field]) {\n                                <div [style.cursor]=\"'default'\"\n                                    matTooltip=\"{{column.cellTooltip?.value}}\"\n                                    [matTooltipPosition]=\"column?.cellTooltip?.tooltipPosition!\">\n                                    @if (!cellTemplateRef && !column?.cellTemplate && !cellTemplateRefMap[column.field]) {\n                                        <span>{{row[column.field]}}</span>\n                                    }\n                                    @if (cellTemplateRefMap[column.field]) {\n                                        <ng-container [ngTemplateOutlet]=\"cellTemplateRefMap[column.field]\"\n                                            [ngTemplateOutletContext]=\"{row:row,column:column,index:i}\">\n                                        </ng-container>\n                                    }\n                                    @if (cellTemplateRef && column.cellTemplate && !cellTemplateRefMap[column.field]) {\n                                        <ng-container [ngTemplateOutlet]=\"column.cellTemplate\"\n                                            [ngTemplateOutletContext]=\"{row:row,column:column,index:i}\">\n                                        </ng-container>\n                                    }\n                                    @if (!cellTemplateRef && column.cellTemplate && !cellTemplateRefMap[column.field]) {\n                                        <ng-container [ngTemplateOutlet]=\"column.cellTemplate\"\n                                            [ngTemplateOutletContext]=\"{row:row,column:column,index:i}\">\n                                        </ng-container>\n                                    }\n                                    @if (cellTemplateRef && !column.cellTemplate && !cellTemplateRefMap[column.field]) {\n                                        <ng-container [ngTemplateOutlet]=\"cellTemplateRef\"\n                                            [ngTemplateOutletContext]=\"{row:row,column:column,index:i}\">\n                                        </ng-container>\n                                    }\n                                </div>\n                            }\n                            @if (row.editable || cellEditing[i +'_'+column.field]) {\n                                <div (click)=\"$event.stopPropagation()\">\n                                    @if (inlineEditingTemplateRef && !cellEditing[i +'_'+column.field]) {\n                                        <ng-container [ngTemplateOutlet]=\"inlineEditingTemplateRef\"\n                                            [ngTemplateOutletContext]=\"{data:getInlineEditingData(row,i,column)}\"></ng-container>\n                                    }\n                                    @if (cellEditingTemplateRef && !(row.editable)) {\n                                        <ng-container [ngTemplateOutlet]=\"cellEditingTemplateRef\"\n                                            [ngTemplateOutletContext]=\"{data:getInlineEditingData(row,i,column)}\"></ng-container>\n                                    }\n                                    @if (!inlineEditingTemplateRef && (row.editable) && rowDataTemp['e'+i]) {\n                                        @if (column.type == 'number') {\n                                            <mat-form-field appearance=\"outline\" class=\"inline-editing-field\">\n                                                <input matInput type=\"number\" [(ngModel)]=\"rowDataTemp['e'+i][column.field]\"\n                                                    [ngModelOptions]=\"{standalone: true}\">\n                                            </mat-form-field>\n                                        }\n                                        @if (column.type == 'string') {\n                                            <mat-form-field style=\"width: 100%;\" appearance=\"outline\" class=\"inline-editing-field\">\n                                                <input matInput type=\"text\" [(ngModel)]=\"rowDataTemp['e'+i][column.field]\"\n                                                    [ngModelOptions]=\"{standalone: true}\">\n                                            </mat-form-field>\n                                        }\n                                        @if (column.type == 'textarea') {\n                                            <mat-form-field style=\"width: 100%;\" appearance=\"outline\" class=\"inline-editing-field\">\n                                                <textarea matInput rows=\"3\" [(ngModel)]=\"rowDataTemp['e'+i][column.field]\"\n                                                    [ngModelOptions]=\"{standalone: true}\"></textarea>\n                                            </mat-form-field>\n                                        }\n                                        @if (column.type == 'date') {\n                                            <mat-form-field appearance=\"outline\" class=\"inline-editing-field\">\n                                                <input matInput type=\"date\" [(ngModel)]=\"rowDataTemp['e'+i][column.field]\"\n                                                    [ngModelOptions]=\"{standalone: true}\">\n                                            </mat-form-field>\n                                        }\n                                        @if (column.type == 'datepicker') {\n                                            <mat-form-field appearance=\"outline\" class=\"inline-editing-field\">\n                                                <input matInput [matDatepicker]=\"inlinePicker\" [(ngModel)]=\"rowDataTemp['e'+i][column.field]\"\n                                                    [ngModelOptions]=\"{standalone: true}\">\n                                                <mat-datepicker-toggle matIconSuffix [for]=\"inlinePicker\"></mat-datepicker-toggle>\n                                                <mat-datepicker #inlinePicker></mat-datepicker>\n                                            </mat-form-field>\n                                        }\n                                        @if (column.type == 'selection') {\n                                            <mat-form-field appearance=\"outline\" class=\"inline-editing-field\">\n                                                <mat-select [value]=\"rowDataTemp['e'+i][column.field]\"\n                                                    [(ngModel)]=\"rowDataTemp['e'+i][column.field]\">\n                                                    @for (option of column.options; track option) {\n                                                        <mat-option [value]=\"option\">{{option}}</mat-option>\n                                                    }\n                                                </mat-select>\n                                            </mat-form-field>\n                                        }\n                                        @if (column.type == 'boolean') {\n                                            <mat-checkbox (click)=\"$event.stopPropagation()\" color=\"primary\" [(ngModel)]=\"row[column.field]\"></mat-checkbox>\n                                        }\n                                    }\n                                    @if (!cellEditingTemplateRef && cellEditing[i +'_'+column.field]) {\n                                        @if (column.type == 'number') {\n                                            <mat-form-field appearance=\"outline\" class=\"inline-editing-field\">\n                                                <input matInput type=\"number\" [(ngModel)]=\"rowDataTemp['e'+i][column.field]\"\n                                                    [ngModelOptions]=\"{standalone: true}\">\n                                            </mat-form-field>\n                                        }\n                                        @if (column.type == 'string') {\n                                            <mat-form-field appearance=\"outline\" class=\"inline-editing-field\">\n                                                <input matInput type=\"text\" [(ngModel)]=\"rowDataTemp['e'+i][column.field]\"\n                                                    [ngModelOptions]=\"{standalone: true}\">\n                                            </mat-form-field>\n                                        }\n                                        @if (column.type == 'textarea') {\n                                            <mat-form-field appearance=\"outline\" class=\"inline-editing-field\">\n                                                <textarea matInput rows=\"3\" [(ngModel)]=\"rowDataTemp['e'+i][column.field]\"\n                                                    [ngModelOptions]=\"{standalone: true}\"></textarea>\n                                            </mat-form-field>\n                                        }\n                                        @if (column.type == 'date') {\n                                            <mat-form-field appearance=\"outline\" class=\"inline-editing-field\">\n                                                <input matInput type=\"date\" [(ngModel)]=\"rowDataTemp['e'+i][column.field]\"\n                                                    [ngModelOptions]=\"{standalone: true}\">\n                                            </mat-form-field>\n                                        }\n                                        @if (column.type == 'datepicker') {\n                                            <mat-form-field appearance=\"outline\" class=\"inline-editing-field\">\n                                                <input matInput [matDatepicker]=\"cellPicker\" [(ngModel)]=\"rowDataTemp['e'+i][column.field]\"\n                                                    [ngModelOptions]=\"{standalone: true}\">\n                                                <mat-datepicker-toggle matIconSuffix [for]=\"cellPicker\"></mat-datepicker-toggle>\n                                                <mat-datepicker #cellPicker></mat-datepicker>\n                                            </mat-form-field>\n                                        }\n                                        @if (column.type == 'selection') {\n                                            <mat-form-field appearance=\"outline\" class=\"inline-editing-field\">\n                                                <mat-select [value]=\"rowDataTemp['e'+i][column.field]\"\n                                                    [(ngModel)]=\"rowDataTemp['e'+i][column.field]\">\n                                                    @for (option of column.options; track option) {\n                                                        <mat-option [value]=\"option\">{{option}}</mat-option>\n                                                    }\n                                                </mat-select>\n                                            </mat-form-field>\n                                        }\n                                        @if (column.type == 'boolean') {\n                                            <mat-checkbox (click)=\"$event.stopPropagation()\" color=\"primary\" [(ngModel)]=\"row[column.field]\"></mat-checkbox>\n                                        }\n                                    }\n                                </div>\n                            }\n                        </td>\n                        @if (showFooterRow) {\n                            <td mat-footer-cell *matFooterCellDef> {{column.footerText}} </td>\n                        }\n                        </div>\n                    }\n                    <ng-container matColumnDef=\"edit\" stickyEnd=\"false\">\n                        <th mat-header-cell cdkDragLockAxis=\"x\" cdkDrag [cdkDragDisabled]=\"true\" *matHeaderCellDef\n                            class=\"action-column-cells\"> Edit </th>\n                        <td mat-cell *matCellDef=\"let row; let i = dataIndex\" class=\"inline-edit-column-cell\">\n                            <!-- Edit disabled in pinned bottom table -->\n                        </td>\n                        <td mat-footer-cell *matFooterCellDef> edit </td>\n                    </ng-container>\n                    <ng-container matColumnDef=\"popup\" stickyEnd=\"false\">\n                        <th mat-header-cell cdkDragLockAxis=\"x\" cdkDrag [cdkDragDisabled]=\"true\" *matHeaderCellDef\n                            class=\"action-column-cells\"> Popup\n                        </th>\n                        <td mat-cell *matCellDef=\"let row; let i = index\">\n                            <!-- Popup edit disabled in pinned bottom table -->\n                        </td>\n                        <td mat-footer-cell *matFooterCellDef></td>\n                    </ng-container>\n        \n                    <ng-container matColumnDef=\"delete\">\n                        <th mat-header-cell cdkDragLockAxis=\"x\" cdkDrag [cdkDragDisabled]=\"true\" *matHeaderCellDef\n                            class=\"action-column-cells\"> Delete\n                        </th>\n                        <td mat-cell *matCellDef=\"let row;let i=dataIndex\">\n                            <mat-icon (click)=\"deleteRow(row,i)\" aria-hidden=\"false\" aria-label=\"Example home icon\"\n                                fontIcon=\"delete\">\n                            </mat-icon>\n                        </td>\n                        <td mat-footer-cell *matFooterCellDef></td>\n                    </ng-container>\n        \n                    <ng-container matColumnDef=\"hide\" stickyEnd=\"false\">\n                        <th mat-header-cell cdkDragLockAxis=\"x\" cdkDrag [cdkDragDisabled]=\"true\" *matHeaderCellDef\n                            class=\"action-column-cells\"> Hide\n                        </th>\n                        <td mat-cell *matCellDef=\"let row;let i=dataIndex\">\n                            <button mat-icon-button (click)=\"toggleRowHide(i)\" \n                                [matTooltip]=\"isRowHidden(i) ? 'Unhide Row' : 'Hide Row'\"\n                                matTooltipPosition=\"above\">\n                                <mat-icon [color]=\"isRowHidden(i) ? 'primary' : ''\" aria-hidden=\"false\">\n                                    {{ isRowHidden(i) ? 'visibility_off' : 'visibility' }}\n                                </mat-icon>\n                            </button>\n                        </td>\n                        <td mat-footer-cell *matFooterCellDef></td>\n                    </ng-container>\n        \n                    <ng-container matColumnDef=\"pin\" stickyEnd=\"false\">\n                        <th mat-header-cell cdkDragLockAxis=\"x\" cdkDrag [cdkDragDisabled]=\"true\" *matHeaderCellDef\n                            class=\"action-column-cells\"> Pin\n                        </th>\n                        <td mat-cell *matCellDef=\"let row;let i=dataIndex\">\n                            <button mat-icon-button \n                                [matMenuTriggerFor]=\"pinMenu\"\n                                (click)=\"openRowPinMenu($event, row)\"\n                                [matTooltip]=\"getRowPinPosition(row) ? 'Pinned ' + getRowPinPosition(row) : 'Pin Row'\"\n                                matTooltipPosition=\"above\">\n                                <mat-icon [color]=\"isRowPinned(row) ? 'primary' : ''\" aria-hidden=\"false\">\n                                    {{ isRowPinned(row) ? 'push_pin' : 'push_pin' }}\n                                </mat-icon>\n                            </button>\n                        </td>\n                        <td mat-footer-cell *matFooterCellDef></td>\n                    </ng-container>\n        \n                    <!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->\n                    @if (expandRows) {\n                        <ng-container matColumnDef=\"expandedDetail\">\n                            <td mat-cell *matCellDef=\"let element;let i=dataIndex \"\n                                [attr.colspan]=\"columnsToDisplayWithExpand.length\">\n                                <div class=\"example-element-detail\"\n                                    [@detailExpand]=\"element == expandedElement ? 'expanded' : 'collapsed'\">\n                                    @if (expansionTemplateRef) {\n                                        <ng-container [ngTemplateOutlet]=\"expansionTemplateRef\"\n                                            [ngTemplateOutletContext]=\"{$explicit:element,row:element,index:i}\">\n                                        </ng-container>\n                                    }\n                                </div>\n                            </td>\n                        </ng-container>\n                    }\n                    <!-- Column group headers -->\n                    @if (columnGroups.length > 0) {\n                        @for (group of columnGroups; track group.name) {\n                            <ng-container [matColumnDef]=\"'group-' + group.name\">\n                                <th mat-header-cell *matHeaderCellDef [attr.colspan]=\"group.colspan || group.columns.length\" \n                                    class=\"group-header-cell\">\n                                    <div class=\"group-header-content\">\n                                        <span class=\"group-label\">{{group.label}}</span>\n                                    </div>\n                                </th>\n                            </ng-container>\n                        }\n                        <!-- Empty header cells for ungrouped columns -->\n                        @for (column of columnsArray; track column.field) {\n                            <ng-container [matColumnDef]=\"'ungrouped-' + column.field\">\n                                <th mat-header-cell *matHeaderCellDef class=\"group-header-cell ungrouped-header-cell\">\n                                </th>\n                            </ng-container>\n                        }\n                    }\n                    <!-- Empty filter cells for action columns -->\n                    <ng-container [matColumnDef]=\"'filter-select'\">\n                        <th mat-header-cell *matHeaderCellDef class=\"filter-placeholder-cell\"></th>\n                    </ng-container>\n                    <ng-container [matColumnDef]=\"'filter-edit'\">\n                        <th mat-header-cell *matHeaderCellDef class=\"filter-placeholder-cell\"></th>\n                    </ng-container>\n                    <ng-container [matColumnDef]=\"'filter-popup'\">\n                        <th mat-header-cell *matHeaderCellDef class=\"filter-placeholder-cell\"></th>\n                    </ng-container>\n                    <ng-container [matColumnDef]=\"'filter-delete'\">\n                        <th mat-header-cell *matHeaderCellDef class=\"filter-placeholder-cell\"></th>\n                    </ng-container>\n                    <ng-container [matColumnDef]=\"'filter-freeze'\">\n                        <th mat-header-cell *matHeaderCellDef class=\"filter-placeholder-cell\"></th>\n                    </ng-container>\n                    <ng-container [matColumnDef]=\"'filter-hide'\">\n                        <th mat-header-cell *matHeaderCellDef class=\"filter-placeholder-cell\"></th>\n                    </ng-container>\n                    <ng-container [matColumnDef]=\"'filter-pin'\">\n                        <th mat-header-cell *matHeaderCellDef class=\"filter-placeholder-cell\"></th>\n                    </ng-container>\n                    @if (columnGroups.length > 0) {\n                        <tr mat-header-row *matHeaderRowDef=\"getGroupedColumns(); sticky: stickyHeader\" class=\"mat-mdc-header-row group-header-row\"></tr>\n                    }\n                    <!-- <tr mat-header-row *matHeaderRowDef=\" getDisplayedColumns(); sticky: stickyHeader\" class=\"mat-mdc-header-row\"></tr> -->\n                    <tr style=\"display:none\" mat-header-row *matHeaderRowDef=\" getDisplayedColumns(); sticky: stickyHeader\" class=\"mat-mdc-header-row\"></tr>\n                    \n                    <!-- All Data Rows (with dynamic pinning classes) -->\n                    <!-- <tr mat-row *matRowDef=\"let row; columns:getDisplayedColumns(); let i=dataIndex;\" \n                        class=\"mat-mdc-row data-row\"\n                        [ngClass]=\"{\n                          'data-row':expandRows,\n                          'stripedRows':(stripedRows &&  i % 2 == 1),\n                          'hoverClass':rowHover, \n                          'hidden':(hiddenCtrl.isSelected(row) && hideRows) || isRowHidden(i),\n                          'example-expanded-row':expandedElement === row,\n                          'pinned-row': isRowPinned(row),\n                          'pinned-top-row': isRowPinnedTop(row),\n                          'pinned-bottom-row': isRowPinnedBottom(row)\n                        }\"\n                        (click)=\"expandRow(row, row !== expandedElement,i)\">\n                    </tr> -->\n                    <tr mat-row *matRowDef=\"let row; columns:getDisplayedColumns(); let i=dataIndex; \" \n                        class=\"mat-mdc-row data-row\"\n                        [ngClass]=\"{\n                          'data-row':expandRows,\n                          'stripedRows':(stripedRows &&  i % 2 == 1),\n                          'hoverClass':rowHover, \n                          'hidden':(hiddenCtrl.isSelected(row) && hideRows) || isRowHidden(i),\n                          'example-expanded-row':expandedElement === row,\n                          'pinned-row': isRowPinned(row),\n                          'mat-row-sticky-top': isRowPinnedTop(row),\n                          'mat-row-sticky-bottom': isRowPinnedBottom(row)\n                        }\"\n                        (click)=\"expandRow(row, row !== expandedElement,i)\">\n                    </tr>\n                    <!-- <tr mat-header-row *matHeaderRowDef=\"let row; columns:getDisplayedColumns(); let i=dataIndex; when: isRowPinnedTop(row)\" \n                        class=\"mat-mdc-row data-row\"\n                        class=\"mat-mdc-header-row\"\n                        [ngClass]=\"{\n                          'data-row':expandRows,\n                          'stripedRows':(stripedRows &&  i % 2 == 1),\n                          'hoverClass':rowHover, \n                          'hidden':(hiddenCtrl.isSelected(row) && hideRows) || isRowHidden(i),\n                          'example-expanded-row':expandedElement === row,\n                          'pinned-row': isRowPinned(row),\n                          'pinned-top-row': isRowPinnedTop(row),\n                          'pinned-bottom-row': isRowPinnedBottom(row)\n                        }\"\n                        (click)=\"expandRow(row, row !== expandedElement,i)\">\n                    </tr> -->\n               \n                    @if (expandRows) {\n                        <tr mat-row *matRowDef=\"let row; columns: ['expandedDetail']; let i=dataIndex\"\n                            class=\"example-detail-row\"\n                            [ngClass]=\"{'hidden': isRowHidden(i)}\">\n                        </tr>\n                    }\n                    @if (showFooterRow) {\n                        <tr mat-footer-row *matFooterRowDef=\"getDisplayedColumns(); sticky: stickyFooter\"></tr>\n                    }\n                </table>\n                </div>\n            }\n        }\n        @else{\n            <table mat-table #matTable #MyTable [id]=\"'matTableExt'+tableID\" [dataSource]=\"dataSource\" matSort cdkDropList\n                cdkDropListOrientation=\"horizontal\" multiTemplateDataRows (cdkDropListDropped)=\"onDrop($event)\"\n                (click)=\"saveCellEditing()\" [style.width]=\"scrollbarH?'max-content':'100%'\" \n                [class]=\"'mat-mdc-table' + (tableClassName ? ' ' + tableClassName : '')\">\n    \n                <!-- Row selection column -->\n                <ng-container matColumnDef=\"select\">\n                    <th mat-header-cell *matHeaderCellDef cdkDragLockAxis=\"x\" cdkDrag [cdkDragDisabled]=\"!dndColumns\">\n                        <mat-checkbox (change)=\"$event ? toggleAllRows() : null\"\n                            [checked]=\"selection.hasValue() && isAllSelected()\"\n                            [indeterminate]=\"selection.hasValue() && !isAllSelected()\" [aria-label]=\"checkboxLabel()\">\n                        </mat-checkbox>\n                    </th>\n                    <td mat-cell *matCellDef=\"let row;let i = dataIndex\">\n                        <mat-checkbox (click)=\"$event.stopPropagation()\" (change)=\"$event ? setSelectedRows(row,i) : null\"\n                            [checked]=\"selection.isSelected(row)\" [aria-label]=\"checkboxLabel(row)\">\n                        </mat-checkbox>\n                    </td>\n                    <ng-container *ngIf=\"showFooterRow\">\n                        <td mat-footer-cell *matFooterCellDef></td>\n                    </ng-container>\n                </ng-container>\n                <!--dynamic columns are being generated here-->\n                @for (column of columnsArray; track column.field + '_' + column.pinned; let i = $index) {\n                    <div matColumnDef=\"{{column['field']}}\" [sticky]=\"column.pinned === 'left'\" [stickyEnd]=\"column.pinned === 'right'\">\n                    <th mat-header-cell *matHeaderCellDef [style.minWidth]=\"column.width\" [style.maxWidth]=\"column.maxWidth?column.maxWidth:column.width\"\n                        [style.minWidth]=\"column.minWidth\" cdkDragLockAxis=\"x\" cdkDrag [cdkDragDisabled]=\"!dndColumns\"\n                        [columnsResizable]=\"columnResizable\" [index]=\"i\" class=\"mat-mdc-header-cell\"\n                        [mat-sort-header]=\"column.field\" [disabled]=\"!sorting || column.disabled === true\">\n    \n                        @if (column.headerTemplate || headerTemplateRef) {\n                            <ng-template [ngTemplateOutlet]=\"column.headerTemplate || headerTemplateRef\"\n                                [ngTemplateOutletContext]=\"{data:column}\"></ng-template>\n                        }\n                        @if (!headerTemplateRef && !column.headerTemplate) {\n                            <span matTooltip=\"{{column.headerTooltip?.value}}\"\n                                [matTooltipPosition]=\"column?.headerTooltip?.tooltipPosition!\"\n                                [class.disabled]=\"!sorting || column.disabled === true\">{{column.header}}</span>\n                        }\n                    </th>\n                    <td mat-cell *matCellDef=\"let row ;let i=dataIndex\" class=\"mat-mdc-cell\">\n                        @if (!row.editable && !cellEditing[i +'_'+column.field]) {\n                            <div (dblclick)=\"cellEditing[i +'_'+column.field] = inCellEditing;setCellData(row,i)\"\n                                (click)=\"cellPopupEditing ? openCellPopupDialog(row, column, i) : null\"\n                                [style.cursor]=\"cellPopupEditing ? 'pointer' : 'default'\"\n                                matTooltip=\"{{column.cellTooltip?.value}}\"\n                                [matTooltipPosition]=\"column?.cellTooltip?.tooltipPosition!\">\n                                @if (!cellTemplateRef && !column?.cellTemplate && !cellTemplateRefMap[column.field]) {\n                                    <span>{{row[column.field]}}</span>\n                                }\n                                @if (cellTemplateRefMap[column.field]) {\n                                    <ng-container [ngTemplateOutlet]=\"cellTemplateRefMap[column.field]\"\n                                        [ngTemplateOutletContext]=\"{row:row,column:column,index:i}\">\n                                    </ng-container>\n                                }\n                                @if (cellTemplateRef && column.cellTemplate && !cellTemplateRefMap[column.field]) {\n                                    <ng-container [ngTemplateOutlet]=\"column.cellTemplate\"\n                                        [ngTemplateOutletContext]=\"{row:row,column:column,index:i}\">\n                                    </ng-container>\n                                }\n                                @if (!cellTemplateRef && column.cellTemplate && !cellTemplateRefMap[column.field]) {\n                                    <ng-container [ngTemplateOutlet]=\"column.cellTemplate\"\n                                        [ngTemplateOutletContext]=\"{row:row,column:column,index:i}\">\n                                    </ng-container>\n                                }\n                                @if (cellTemplateRef && !column.cellTemplate && !cellTemplateRefMap[column.field]) {\n                                    <ng-container [ngTemplateOutlet]=\"cellTemplateRef\"\n                                        [ngTemplateOutletContext]=\"{row:row,column:column,index:i}\">\n                                    </ng-container>\n                                }\n                            </div>\n                        }\n                        @if (row.editable || cellEditing[i +'_'+column.field]) {\n                            <div (click)=\"$event.stopPropagation()\">\n                                @if (inlineEditingTemplateRef && !cellEditing[i +'_'+column.field]) {\n                                    <ng-container [ngTemplateOutlet]=\"inlineEditingTemplateRef\"\n                                        [ngTemplateOutletContext]=\"{data:getInlineEditingData(row,i,column)}\"></ng-container>\n                                }\n                                @if (cellEditingTemplateRef && !(row.editable)) {\n                                    <ng-container [ngTemplateOutlet]=\"cellEditingTemplateRef\"\n                                        [ngTemplateOutletContext]=\"{data:getInlineEditingData(row,i,column)}\"></ng-container>\n                                }\n                                @if (!inlineEditingTemplateRef && (row.editable) && rowDataTemp['e'+i]) {\n                                    @if (column.type == 'number') {\n                                        <mat-form-field appearance=\"outline\" class=\"inline-editing-field\">\n                                            <input matInput type=\"number\" [(ngModel)]=\"rowDataTemp['e'+i][column.field]\"\n                                                [ngModelOptions]=\"{standalone: true}\">\n                                        </mat-form-field>\n                                    }\n                                    @if (column.type == 'string') {\n                                        <mat-form-field style=\"width: 100%;\" appearance=\"outline\" class=\"inline-editing-field\">\n                                            <input matInput type=\"text\" [(ngModel)]=\"rowDataTemp['e'+i][column.field]\"\n                                                [ngModelOptions]=\"{standalone: true}\">\n                                        </mat-form-field>\n                                    }\n                                    @if (column.type == 'textarea') {\n                                        <mat-form-field style=\"width: 100%;\" appearance=\"outline\" class=\"inline-editing-field\">\n                                            <textarea matInput rows=\"3\" [(ngModel)]=\"rowDataTemp['e'+i][column.field]\"\n                                                [ngModelOptions]=\"{standalone: true}\"></textarea>\n                                        </mat-form-field>\n                                    }\n                                    @if (column.type == 'date') {\n                                        <mat-form-field appearance=\"outline\" class=\"inline-editing-field\">\n                                            <input matInput type=\"date\" [(ngModel)]=\"rowDataTemp['e'+i][column.field]\"\n                                                [ngModelOptions]=\"{standalone: true}\">\n                                        </mat-form-field>\n                                    }\n                                    @if (column.type == 'datepicker') {\n                                        <mat-form-field appearance=\"outline\" class=\"inline-editing-field\">\n                                            <input matInput [matDatepicker]=\"inlinePicker\" [(ngModel)]=\"rowDataTemp['e'+i][column.field]\"\n                                                [ngModelOptions]=\"{standalone: true}\">\n                                            <mat-datepicker-toggle matIconSuffix [for]=\"inlinePicker\"></mat-datepicker-toggle>\n                                            <mat-datepicker #inlinePicker></mat-datepicker>\n                                        </mat-form-field>\n                                    }\n                                    @if (column.type == 'selection') {\n                                        <mat-form-field appearance=\"outline\" class=\"inline-editing-field\">\n                                            <mat-select [value]=\"rowDataTemp['e'+i][column.field]\"\n                                                [(ngModel)]=\"rowDataTemp['e'+i][column.field]\">\n                                                @for (option of column.options; track option) {\n                                                    <mat-option [value]=\"option\">{{option}}</mat-option>\n                                                }\n                                            </mat-select>\n                                        </mat-form-field>\n                                    }\n                                    @if (column.type == 'boolean') {\n                                        <mat-checkbox (click)=\"$event.stopPropagation()\" color=\"primary\" [(ngModel)]=\"row[column.field]\"></mat-checkbox>\n                                    }\n                                }\n                                @if (!cellEditingTemplateRef && cellEditing[i +'_'+column.field]) {\n                                    @if (column.type == 'number') {\n                                        <mat-form-field appearance=\"outline\" class=\"inline-editing-field\">\n                                            <input matInput type=\"number\" [(ngModel)]=\"rowDataTemp['e'+i][column.field]\"\n                                                [ngModelOptions]=\"{standalone: true}\">\n                                        </mat-form-field>\n                                    }\n                                    @if (column.type == 'string') {\n                                        <mat-form-field appearance=\"outline\" class=\"inline-editing-field\">\n                                            <input matInput type=\"text\" [(ngModel)]=\"rowDataTemp['e'+i][column.field]\"\n                                                [ngModelOptions]=\"{standalone: true}\">\n                                        </mat-form-field>\n                                    }\n                                    @if (column.type == 'textarea') {\n                                        <mat-form-field appearance=\"outline\" class=\"inline-editing-field\">\n                                            <textarea matInput rows=\"3\" [(ngModel)]=\"rowDataTemp['e'+i][column.field]\"\n                                                [ngModelOptions]=\"{standalone: true}\"></textarea>\n                                        </mat-form-field>\n                                    }\n                                    @if (column.type == 'date') {\n                                        <mat-form-field appearance=\"outline\" class=\"inline-editing-field\">\n                                            <input matInput type=\"date\" [(ngModel)]=\"rowDataTemp['e'+i][column.field]\"\n                                                [ngModelOptions]=\"{standalone: true}\">\n                                        </mat-form-field>\n                                    }\n                                    @if (column.type == 'datepicker') {\n                                        <mat-form-field appearance=\"outline\" class=\"inline-editing-field\">\n                                            <input matInput [matDatepicker]=\"cellPicker\" [(ngModel)]=\"rowDataTemp['e'+i][column.field]\"\n                                                [ngModelOptions]=\"{standalone: true}\">\n                                            <mat-datepicker-toggle matIconSuffix [for]=\"cellPicker\"></mat-datepicker-toggle>\n                                            <mat-datepicker #cellPicker></mat-datepicker>\n                                        </mat-form-field>\n                                    }\n                                    @if (column.type == 'selection') {\n                                        <mat-form-field appearance=\"outline\" class=\"inline-editing-field\">\n                                            <mat-select [value]=\"rowDataTemp['e'+i][column.field]\"\n                                                [(ngModel)]=\"rowDataTemp['e'+i][column.field]\">\n                                                @for (option of column.options; track option) {\n                                                    <mat-option [value]=\"option\">{{option}}</mat-option>\n                                                }\n                                            </mat-select>\n                                        </mat-form-field>\n                                    }\n                                    @if (column.type == 'boolean') {\n                                        <mat-checkbox (click)=\"$event.stopPropagation()\" color=\"primary\" [(ngModel)]=\"row[column.field]\"></mat-checkbox>\n                                    }\n                                }\n                            </div>\n                        }\n                    </td>\n                    @if (showFooterRow) {\n                        <td mat-footer-cell *matFooterCellDef> {{column.footerText}} </td>\n                    }\n                    </div>\n                }\n                <ng-container matColumnDef=\"edit\" stickyEnd=\"false\">\n                    <th mat-header-cell cdkDragLockAxis=\"x\" cdkDrag [cdkDragDisabled]=\"true\" *matHeaderCellDef\n                        class=\"action-column-cells\"> Edit </th>\n                    <td mat-cell *matCellDef=\"let row; let i = dataIndex\" class=\"inline-edit-column-cell\">\n                        @if (!row.editable && !row.editmodal) {\n                            <mat-icon class=\"edit-column-icons\" aria-hidden=\"false\"\n                                (click)=\"enableInlineEditing(row,i)\" fontIcon=\"edit_note\">\n                            </mat-icon>\n                        }\n                        @if (row.editable && !row.editmodal) {\n                            <div class=\"inline-editing-controls\">\n                                <mat-icon class=\"edit-column-icons\" aria-hidden=\"false\" (click)=\"saveInlineEditing(row,i)\"\n                                    fontIcon=\"done\"></mat-icon>\n                                <mat-icon class=\"edit-column-icons\" aria-hidden=\"false\" (click)=\"cancelInlineEditing(row,i)\"\n                                    fontIcon=\"close\"></mat-icon>\n                            </div>\n                        }\n                    </td>\n                    <td mat-footer-cell *matFooterCellDef> edit </td>\n                </ng-container>\n                <ng-container matColumnDef=\"popup\" stickyEnd=\"false\">\n                    <th mat-header-cell cdkDragLockAxis=\"x\" cdkDrag [cdkDragDisabled]=\"true\" *matHeaderCellDef\n                        class=\"action-column-cells\"> Popup\n                    </th>\n                    <td mat-cell *matCellDef=\"let row; let i = index\">\n                        <mat-icon aria-hidden=\"false\" (click)=\"openEditingDialog(row)\" fontIcon=\"edit\">\n                        </mat-icon>\n                    </td>\n                    <td mat-footer-cell *matFooterCellDef></td>\n                </ng-container>\n    \n                <ng-container matColumnDef=\"delete\">\n                    <th mat-header-cell cdkDragLockAxis=\"x\" cdkDrag [cdkDragDisabled]=\"true\" *matHeaderCellDef\n                        class=\"action-column-cells\"> Delete\n                    </th>\n                    <td mat-cell *matCellDef=\"let row;let i=dataIndex\">\n                        <mat-icon (click)=\"deleteRow(row,i)\" aria-hidden=\"false\" aria-label=\"Example home icon\"\n                            fontIcon=\"delete\">\n                        </mat-icon>\n                    </td>\n                    <td mat-footer-cell *matFooterCellDef></td>\n                </ng-container>\n    \n                <ng-container matColumnDef=\"hide\" stickyEnd=\"false\">\n                    <th mat-header-cell cdkDragLockAxis=\"x\" cdkDrag [cdkDragDisabled]=\"true\" *matHeaderCellDef\n                        class=\"action-column-cells\"> Hide\n                    </th>\n                    <td mat-cell *matCellDef=\"let row;let i=dataIndex\">\n                        <button mat-icon-button (click)=\"toggleRowHide(i)\" \n                            [matTooltip]=\"isRowHidden(i) ? 'Unhide Row' : 'Hide Row'\"\n                            matTooltipPosition=\"above\">\n                            <mat-icon [color]=\"isRowHidden(i) ? 'primary' : ''\" aria-hidden=\"false\">\n                                {{ isRowHidden(i) ? 'visibility_off' : 'visibility' }}\n                            </mat-icon>\n                        </button>\n                    </td>\n                    <td mat-footer-cell *matFooterCellDef></td>\n                </ng-container>\n    \n                <ng-container matColumnDef=\"pin\" stickyEnd=\"false\">\n                    <th mat-header-cell cdkDragLockAxis=\"x\" cdkDrag [cdkDragDisabled]=\"true\" *matHeaderCellDef\n                        class=\"action-column-cells\"> Pinning\n                    </th>\n                    <td mat-cell *matCellDef=\"let row;let i=dataIndex\">\n                        <button mat-icon-button \n                            [matMenuTriggerFor]=\"pinMenu\"\n                            (click)=\"openRowPinMenu($event, row)\"\n                            [matTooltip]=\"getRowPinPosition(row) ? 'Pinned ' + getRowPinPosition(row) : 'Pin Row'\"\n                            matTooltipPosition=\"above\">\n                            <mat-icon [color]=\"isRowPinned(row) ? 'primary' : ''\" aria-hidden=\"false\">\n                                {{ isRowPinned(row) ? 'push_pin' : 'push_pin' }}\n                            </mat-icon>\n                        </button>\n                    </td>\n                    <td mat-footer-cell *matFooterCellDef></td>\n                </ng-container>\n    \n                <!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->\n                @if (expandRows) {\n                    <ng-container matColumnDef=\"expandedDetail\">\n                        <td mat-cell *matCellDef=\"let element;let i=dataIndex \"\n                            [attr.colspan]=\"columnsToDisplayWithExpand.length\">\n                            <div class=\"example-element-detail\"\n                                [@detailExpand]=\"element == expandedElement ? 'expanded' : 'collapsed'\">\n                                @if (expansionTemplateRef) {\n                                    <ng-container [ngTemplateOutlet]=\"expansionTemplateRef\"\n                                        [ngTemplateOutletContext]=\"{$explicit:element,row:element,index:i}\">\n                                    </ng-container>\n                                }\n                            </div>\n                        </td>\n                    </ng-container>\n                }\n                <!-- Column group headers -->\n                @if (columnGroups.length > 0) {\n                    @for (group of columnGroups; track group.name) {\n                        <ng-container [matColumnDef]=\"'group-' + group.name\">\n                            <th mat-header-cell *matHeaderCellDef [attr.colspan]=\"group.colspan || group.columns.length\" \n                                class=\"group-header-cell\">\n                                <div class=\"group-header-content\">\n                                    <span class=\"group-label\">{{group.label}}</span>\n                                </div>\n                            </th>\n                        </ng-container>\n                    }\n                    <!-- Empty header cells for ungrouped columns -->\n                    <ng-container *ngFor=\"let column of columnsArray\">\n                        <ng-container [matColumnDef]=\"'ungrouped-' + column.field\">\n                            <th mat-header-cell *matHeaderCellDef class=\"group-header-cell ungrouped-header-cell\">\n                            </th>\n                        </ng-container>\n                    </ng-container>\n                }\n                <!-- Filter row columns for data columns -->\n                <ng-container *ngFor=\"let ids of headersFiltersIds; let i = index\">\n                    <ng-container [matColumnDef]=\"ids\" [sticky]=\"columnsArray[returnIndex(ids)].pinned === 'left'\" [stickyEnd]=\"columnsArray[returnIndex(ids)].pinned === 'right'\">\n                        <th mat-header-cell *matHeaderCellDef  [style.minWidth]=\"columnsArray[returnIndex(ids)].width\" [style.maxWidth]=\"columnsArray[returnIndex(ids)].maxWidth?columnsArray[returnIndex(ids)].maxWidth:columnsArray[returnIndex(ids)].width\"\n                        [style.minWidth]=\"columnsArray[returnIndex(ids)].minWidth\" >\n                            <div style=\"display: block; width: 100%;\" class=\"filters-container\" [class.animate]=\"toggleFilters\">\n                                <app-filter-columns-component style=\"display: block; width: 100%;\" [obj]=\"columnsArray[returnIndex(ids)]\"\n                                    (filterOutput)=\"applyColumnFilter($event,columnsArray[returnIndex(ids)])\"></app-filter-columns-component>\n                            </div>\n                        </th>\n                    </ng-container>\n                </ng-container>\n\n                <!-- Empty filter cells for action columns -->\n                <ng-container [matColumnDef]=\"'filter-select'\">\n                    <th mat-header-cell *matHeaderCellDef class=\"filter-placeholder-cell\"></th>\n                </ng-container>\n                <ng-container [matColumnDef]=\"'filter-edit'\">\n                    <th mat-header-cell *matHeaderCellDef class=\"filter-placeholder-cell\"></th>\n                </ng-container>\n                <ng-container [matColumnDef]=\"'filter-popup'\">\n                    <th mat-header-cell *matHeaderCellDef class=\"filter-placeholder-cell\"></th>\n                </ng-container>\n                <ng-container [matColumnDef]=\"'filter-delete'\">\n                    <th mat-header-cell *matHeaderCellDef class=\"filter-placeholder-cell\"></th>\n                </ng-container>\n                <ng-container [matColumnDef]=\"'filter-freeze'\">\n                    <th mat-header-cell *matHeaderCellDef class=\"filter-placeholder-cell\"></th>\n                </ng-container>\n                <ng-container [matColumnDef]=\"'filter-hide'\">\n                    <th mat-header-cell *matHeaderCellDef class=\"filter-placeholder-cell\"></th>\n                </ng-container>\n                <ng-container [matColumnDef]=\"'filter-pin'\">\n                    <th mat-header-cell *matHeaderCellDef class=\"filter-placeholder-cell\"></th>\n                </ng-container>\n\n                <ng-container *ngIf=\"columnGroups.length > 0\">\n                    <tr mat-header-row *matHeaderRowDef=\"getGroupedColumns(); sticky: stickyHeader\" class=\"mat-mdc-header-row group-header-row\"></tr>\n                </ng-container>\n                <tr mat-header-row *matHeaderRowDef=\" getDisplayedColumns(); sticky: stickyHeader\" class=\"mat-mdc-header-row\"></tr>\n                <tr style=\"height: 0px;\" mat-header-row class=\"no-default-height\" *matHeaderRowDef=\"getFilterColumns()\">\n                </tr>\n                \n                <!-- All Data Rows (with dynamic pinning classes) -->\n                <!-- <tr mat-row *matRowDef=\"let row; columns:getDisplayedColumns(); let i=dataIndex;\" \n                    class=\"mat-mdc-row data-row\"\n                    [ngClass]=\"{\n                      'data-row':expandRows,\n                      'stripedRows':(stripedRows &&  i % 2 == 1),\n                      'hoverClass':rowHover, \n                      'hidden':(hiddenCtrl.isSelected(row) && hideRows) || isRowHidden(i),\n                      'example-expanded-row':expandedElement === row,\n                      'pinned-row': isRowPinned(row),\n                      'pinned-top-row': isRowPinnedTop(row),\n                      'pinned-bottom-row': isRowPinnedBottom(row)\n                    }\"\n                    (click)=\"expandRow(row, row !== expandedElement,i)\">\n                </tr> -->\n                <tr mat-row *matRowDef=\"let row; columns:getDisplayedColumns(); let i=dataIndex; \" \n                    class=\"mat-mdc-row data-row\"\n                    [ngClass]=\"{\n                      'data-row':expandRows,\n                      'stripedRows':(stripedRows &&  i % 2 == 1),\n                      'hoverClass':rowHover, \n                      'hidden':(hiddenCtrl.isSelected(row) && hideRows) || isRowHidden(i),\n                      'example-expanded-row':expandedElement === row,\n                      'pinned-row': isRowPinned(row),\n                      'mat-row-sticky-top': isRowPinnedTop(row),\n                      'mat-row-sticky-bottom': isRowPinnedBottom(row)\n                    }\"\n                    (click)=\"expandRow(row, row !== expandedElement,i)\">\n                </tr>\n                <!-- <tr mat-header-row *matHeaderRowDef=\"let row; columns:getDisplayedColumns(); let i=dataIndex; when: isRowPinnedTop(row)\" \n                    class=\"mat-mdc-row data-row\"\n                    class=\"mat-mdc-header-row\"\n                    [ngClass]=\"{\n                      'data-row':expandRows,\n                      'stripedRows':(stripedRows &&  i % 2 == 1),\n                      'hoverClass':rowHover, \n                      'hidden':(hiddenCtrl.isSelected(row) && hideRows) || isRowHidden(i),\n                      'example-expanded-row':expandedElement === row,\n                      'pinned-row': isRowPinned(row),\n                      'pinned-top-row': isRowPinnedTop(row),\n                      'pinned-bottom-row': isRowPinnedBottom(row)\n                    }\"\n                    (click)=\"expandRow(row, row !== expandedElement,i)\">\n                </tr> -->\n           \n                @if (expandRows) {\n                    <tr mat-row *matRowDef=\"let row; columns: ['expandedDetail']; let i=dataIndex\"\n                        class=\"example-detail-row\"\n                        [ngClass]=\"{'hidden': isRowHidden(i)}\">\n                    </tr>\n                }\n                @if (showFooterRow) {\n                    <tr mat-footer-row *matFooterRowDef=\"getDisplayedColumns(); sticky: stickyFooter\"></tr>\n                }\n            </table>\n\n        }\n        \n    </section>\n    @if (showPaginator) {\n        <mat-paginator [pageSizeOptions]=\"pageSizeOptions\"\n            [showFirstLastButtons]=\"showFirstLastButtons\" class=\"mat-mdc-paginator\">\n        </mat-paginator>\n    }\n</div>", styles: [".custom-primary-color{color:#3f51b5!important;border-color:#3f51b5!important}table{min-width:100%}.mat-mdc-table-sticky-border-elem-right{border-left:1px solid #e0e0e0}.mat-mdc-table-sticky-border-elem-left{border-right:1px solid #e0e0e0}tr.example-detail-row{height:0!important;overflow:hidden}.example-element-detail{overflow:hidden;display:flex;transition:height .3s cubic-bezier(.4,0,.2,1);padding:0}.example-element-detail[style*=\"height: auto\"],.example-element-detail[style*=\"height: 1\"]{padding:10px 0}.hidden{display:none}.stripedRows{background:var(--mat-table-row-hover-state-layer-color, #eaeaea)!important}.hoverClass:hover{background:var(--mat-table-row-hover-state-layer-color, #dbdbdb)!important}.filters-container{overflow:hidden;transition:height .5s ease-in-out}.animate{max-height:max-content!important}.cell-popup-indicator{font-size:18px;color:var(--mat-sys-color-primary, #1976d2);cursor:pointer;-webkit-user-select:none;user-select:none;display:inline-block;transition:transform .2s}.cell-popup-indicator:hover{transform:scale(1.3);color:var(--mat-sys-color-primary-container, #1565c0)}.resize-handle{display:inline-block;border-right:2px solid var(--mat-table-outline-color, rgb(140, 140, 140));position:absolute;top:0;right:0;height:100%;cursor:col-resize;opacity:0}.resize-handle:hover{width:20px}table th:hover .resize-handle{opacity:1;transition:.3s ease-in-out}.mat-mdc-table.resizing{-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;user-select:none;cursor:col-resize}.mat-mdc-table .mat-mdc-header-cell{position:relative}.mat-mdc-table .mat-mdc-header-cell:not(:last-child) .resize-holder{cursor:col-resize;width:20px;height:100%;position:absolute;right:-10px;top:0;z-index:1}.toolbar-container{display:flex;padding:0 15px;gap:1rem;grid-auto-rows:10px;justify-content:flex-end;align-items:center}.mat-table-ext-container{width:100%;max-width:100%;overflow:auto}.column-headers{font-family:Roboto,Helvetica Neue,sans-serif}.example-spacer{flex:1 1 auto}.export-button .export-button-content{display:flex!important;align-items:center;justify-content:space-between;gap:4px;width:100%;padding:0 4px}.export-button .mat-button-wrapper{display:flex!important;width:8em;justify-content:space-around;align-items:center}.toolbar-menu-container{display:flex;flex-direction:column;margin:auto .8em;width:15em;height:20em}.inline-editing-field{padding:8px 0}.inline-editing-field div.mat-mdc-form-field-subscript-wrapper{display:none}.toolbar-menu-item{display:flex;height:3em}.toolbar-menu-checkbox{margin-left:8%}.toolbar-menu-checkbox.mat-checkbox{width:max-content;display:flex;align-items:center}.hide-button .mat-button-wrapper,.pin-button .mat-button-wrapper{display:flex!important;align-items:center;gap:5px}.pin-button .mat-icon{margin-right:2px}.pin-button,.hide-button{padding-right:10px!important}.hide-button,.pin-button,.export-button,.print-button{height:3em;border:2px solid currentColor!important}.print-button .mat-button-wrapper{display:flex!important;align-items:center;gap:5px}.showHide-menu-columns-list{height:10em;max-height:10em;overflow-y:auto}.mat-column-select{width:50px!important}.data-row td,.example-expanded-row td{border-bottom-width:0!important}.action-column-cells{width:40px;height:inherit}.inline-editing-controls{display:flex}.global-search-field{width:-webkit-fill-available}.mat-mdc-table{--mat-table-container-elevation: 0;--mat-table-row-hover-state-layer-color: var(--mat-sys-color-surface-variant);--mat-table-row-hover-state-layer-opacity: .08}.group-header-row{background-color:var(--mat-sys-color-surface-container-low, #f5f5f5)}.group-header-row .group-header-cell{text-align:center!important;font-weight:600;font-size:13px;letter-spacing:.5px;text-transform:uppercase;padding:12px 16px;position:relative}.group-header-row .group-header-cell.ungrouped-header-cell{min-height:48px}.group-header-row .group-header-cell .group-header-content{display:flex;align-items:center;justify-content:center;gap:8px;text-align:center}.group-header-row .group-header-cell .group-header-content .group-label{font-weight:600;text-align:center}.group-header-row .group-header-cell:after{content:\"\";position:absolute;bottom:-2px;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent 0%,var(--mat-sys-color-primary, #1976d2) 50%,transparent 100%);opacity:.3}.frozen-row{position:sticky!important;z-index:10;background-color:var(--mat-sys-color-surface, #ffffff)!important;box-shadow:0 2px 4px #0000001a}.frozen-row:after{content:\"\";position:absolute;bottom:0;left:0;right:0;height:2px;background:linear-gradient(to right,var(--mat-sys-color-primary, #1976d2) 0%,transparent 100%)}.frozen-row-bottom{position:sticky!important;z-index:10;background-color:var(--mat-sys-color-surface, #ffffff)!important;box-shadow:0 -2px 4px #0000001a}.frozen-row-bottom:before{content:\"\";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(to right,var(--mat-sys-color-primary, #1976d2) 0%,transparent 100%)}.mat-mdc-header-cell{--mat-table-header-container-background-color: var(--mat-sys-color-surface);--mat-table-header-container-text-color: var(--mat-sys-color-on-surface)}.mat-mdc-cell{--mat-table-cell-container-background-color: var(--mat-sys-color-surface);--mat-table-cell-container-text-color: var(--mat-sys-color-on-surface)}.mat-mdc-row{--mat-table-row-container-background-color: var(--mat-sys-color-surface)}.mat-mdc-paginator{--mat-paginator-container-background-color: var(--mat-sys-color-surface);--mat-paginator-container-text-color: var(--mat-sys-color-on-surface)}.pinned-row{background:var(--mat-sys-color-surface, #ffffff);box-shadow:0 2px 4px #0000001a;position:sticky!important;z-index:10}.pinned-row.pinned-top-row{top:var(--pinned-row-top-offset, var(--pinned-top-base-offset, 0px))}.pinned-row.pinned-bottom-row{bottom:var(--pinned-row-bottom-offset, var(--pinned-bottom-base-offset, 0px))}.pinned-top-row:after{content:\"\";position:absolute;bottom:-2px;left:0;right:0;height:2px;background:linear-gradient(to bottom,rgba(0,0,0,.1),transparent)}.pinned-bottom-row:before{content:\"\";position:absolute;top:-2px;left:0;right:0;height:2px;background:linear-gradient(to top,rgba(0,0,0,.1),transparent)}\n"] }]
+        }], ctorParameters: () => [{ type: i1$1.MatDialog }, { type: MatTableExtService }, { type: i3.FormBuilder }, { type: i4.DomSanitizer }, { type: i5$1.MatIconRegistry }, { type: i0.ChangeDetectorRef }], propDecorators: { menuTrigger: [{
+                type: ViewChild,
+                args: [MatMenuTrigger]
+            }], columnMenuTrigger: [{
+                type: ViewChild,
+                args: ['columnMenuTrigger']
+            }], paginator: [{
+                type: ViewChild,
+                args: [MatPaginator]
+            }], sort: [{
+                type: ViewChild,
+                args: [MatSort]
+            }], matTableRef: [{
+                type: ViewChild,
+                args: ['matTable', { read: ElementRef }]
+            }], table: [{
+                type: ViewChild,
+                args: ['MyTable']
+            }], tableElement: [{
+                type: ViewChild,
+                args: ['MyTable', { read: ElementRef }]
+            }], dataSource: [{
+                type: Input
+            }], columns: [{
+                type: Input
+            }], columnResizable: [{
+                type: Input
+            }], stripedRows: [{
+                type: Input
+            }], rowHover: [{
+                type: Input
+            }], inlineRowEditing: [{
+                type: Input
+            }], inCellEditing: [{
+                type: Input
+            }], cellPopupEditing: [{
+                type: Input
+            }], popupRowEditing: [{
+                type: Input
+            }], enableDelete: [{
+                type: Input
+            }], rowSelection: [{
+                type: Input
+            }], multiRowSelection: [{
+                type: Input
+            }], stickyFooter: [{
+                type: Input
+            }], stickyHeader: [{
+                type: Input
+            }], showFooterRow: [{
+                type: Input
+            }], columnFilter: [{
+                type: Input
+            }], loadingIndicator: [{
+                type: Input
+            }], sorting: [{
+                type: Input
+            }], showToolbar: [{
+                type: Input
+            }], toolbarTitle: [{
+                type: Input
+            }], tableHeight: [{
+                type: Input
+            }], toolbarHeight: [{
+                type: Input
+            }], tableWidth: [{
+                type: Input
+            }], scrollbarH: [{
+                type: Input
+            }], toolbarTemplate: [{
+                type: Input
+            }], columnHidable: [{
+                type: Input
+            }], columnPinnable: [{
+                type: Input
+            }], globalSearch: [{
+                type: Input
+            }], expandRows: [{
+                type: Input
+            }], dndColumns: [{
+                type: Input
+            }], showPaginator: [{
+                type: Input
+            }], showFirstLastButtons: [{
+                type: Input
+            }], exportButtonEnable: [{
+                type: Input
+            }], printButtonEnable: [{
+                type: Input
+            }], pageSizeOptions: [{
+                type: Input
+            }], toolbarTemplateRef: [{
+                type: Input
+            }], headerTemplateRef: [{
+                type: Input
+            }], cellTemplateRef: [{
+                type: Input
+            }], expansionTemplateRef: [{
+                type: Input
+            }], popupEditingTemplateRef: [{
+                type: Input
+            }], inlineEditingTemplateRef: [{
+                type: Input
+            }], cellEditingTemplateRef: [{
+                type: Input
+            }], cellPopupEditingTemplateRef: [{
+                type: Input
+            }], cellTemplateRefMap: [{
+                type: Input
+            }], tableClassName: [{
+                type: Input
+            }], columnGroups: [{
+                type: Input
+            }], hiddenRowIndices: [{
+                type: Input
+            }], enableRowHiding: [{
+                type: Input
+            }], enableRowPinning: [{
+                type: Input
+            }], topPinnedMaxHeight: [{
+                type: Input
+            }], bottomPinnedMaxHeight: [{
+                type: Input
+            }], rowPinningFn: [{
+                type: Input
+            }], rowHidingFilterFn: [{
+                type: Input
+            }], pdfOrientation: [{
+                type: Input
+            }], inlineChange: [{
+                type: Output
+            }], cellChange: [{
+                type: Output
+            }], popupChange: [{
+                type: Output
+            }], rowDeleted: [{
+                type: Output
+            }], scroll: [{
+                type: Output
+            }], selectionChanged: [{
+                type: Output
+            }], expansionChange: [{
+                type: Output
+            }], rowPinningChange: [{
+                type: Output
+            }] } });
+
+class MatTableExtModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: MatTableExtModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.5", ngImport: i0, type: MatTableExtModule, imports: [CommonModule, i1$2.TranslateModule, MatTableModule,
+            FormsModule,
+            ReactiveFormsModule,
+            MatNativeDateModule,
+            A11yModule,
+            CdkAccordionModule,
+            ClipboardModule,
+            CdkStepperModule,
+            CdkTableModule,
+            CdkTreeModule,
+            DragDropModule,
+            MatAutocompleteModule,
+            MatBadgeModule,
+            MatBottomSheetModule,
+            MatButtonModule,
+            MatButtonToggleModule,
+            MatCardModule,
+            MatCheckboxModule,
+            MatChipsModule,
+            MatStepperModule,
+            MatDatepickerModule,
+            MatDialogModule,
+            MatDividerModule,
+            MatExpansionModule,
+            MatGridListModule,
+            MatIconModule,
+            MatInputModule,
+            MatListModule,
+            MatMenuModule,
+            MatNativeDateModule,
+            MatPaginatorModule,
+            MatProgressBarModule,
+            MatProgressSpinnerModule,
+            MatRadioModule,
+            MatRippleModule,
+            MatSelectModule,
+            MatSidenavModule,
+            MatSliderModule,
+            MatSlideToggleModule,
+            MatSnackBarModule,
+            MatSortModule,
+            MatTabsModule,
+            MatToolbarModule,
+            MatTooltipModule,
+            MatTreeModule,
+            PortalModule,
+            ScrollingModule,
+            MatFormFieldModule,
+            MatTableExtComponent,
+            ResizeColumnDirective,
+            ColumnPinningComponent,
+            EditingComponent,
+            FilterColumnsComponentComponent], exports: [MatTableExtComponent,
+            ResizeColumnDirective,
+            ColumnPinningComponent,
+            EditingComponent,
+            FilterColumnsComponentComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: MatTableExtModule, imports: [CommonModule,
+            TranslateModule.forChild(),
+            MatTableModule,
+            FormsModule,
+            ReactiveFormsModule,
+            MatNativeDateModule,
+            A11yModule,
+            CdkAccordionModule,
+            ClipboardModule,
+            CdkStepperModule,
+            CdkTableModule,
+            CdkTreeModule,
+            DragDropModule,
+            MatAutocompleteModule,
+            MatBadgeModule,
+            MatBottomSheetModule,
+            MatButtonModule,
+            MatButtonToggleModule,
+            MatCardModule,
+            MatCheckboxModule,
+            MatChipsModule,
+            MatStepperModule,
+            MatDatepickerModule,
+            MatDialogModule,
+            MatDividerModule,
+            MatExpansionModule,
+            MatGridListModule,
+            MatIconModule,
+            MatInputModule,
+            MatListModule,
+            MatMenuModule,
+            MatNativeDateModule,
+            MatPaginatorModule,
+            MatProgressBarModule,
+            MatProgressSpinnerModule,
+            MatRadioModule,
+            MatRippleModule,
+            MatSelectModule,
+            MatSidenavModule,
+            MatSliderModule,
+            MatSlideToggleModule,
+            MatSnackBarModule,
+            MatSortModule,
+            MatTabsModule,
+            MatToolbarModule,
+            MatTooltipModule,
+            MatTreeModule,
+            PortalModule,
+            ScrollingModule,
+            MatFormFieldModule,
+            MatTableExtComponent,
+            ColumnPinningComponent,
+            EditingComponent,
+            FilterColumnsComponentComponent] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: MatTableExtModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [],
+                    imports: [
+                        CommonModule,
+                        TranslateModule.forChild(),
+                        MatTableModule,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        MatNativeDateModule,
+                        A11yModule,
+                        CdkAccordionModule,
+                        ClipboardModule,
+                        CdkStepperModule,
+                        CdkTableModule,
+                        CdkTreeModule,
+                        DragDropModule,
+                        MatAutocompleteModule,
+                        MatBadgeModule,
+                        MatBottomSheetModule,
+                        MatButtonModule,
+                        MatButtonToggleModule,
+                        MatCardModule,
+                        MatCheckboxModule,
+                        MatChipsModule,
+                        MatStepperModule,
+                        MatDatepickerModule,
+                        MatDialogModule,
+                        MatDividerModule,
+                        MatExpansionModule,
+                        MatGridListModule,
+                        MatIconModule,
+                        MatInputModule,
+                        MatListModule,
+                        MatMenuModule,
+                        MatNativeDateModule,
+                        MatPaginatorModule,
+                        MatProgressBarModule,
+                        MatProgressSpinnerModule,
+                        MatRadioModule,
+                        MatRippleModule,
+                        MatSelectModule,
+                        MatSidenavModule,
+                        MatSliderModule,
+                        MatSlideToggleModule,
+                        MatSnackBarModule,
+                        MatSortModule,
+                        MatTabsModule,
+                        MatToolbarModule,
+                        MatTooltipModule,
+                        MatTreeModule,
+                        PortalModule,
+                        ScrollingModule,
+                        MatFormFieldModule,
+                        MatTableExtComponent,
+                        ResizeColumnDirective,
+                        ColumnPinningComponent,
+                        EditingComponent,
+                        FilterColumnsComponentComponent,
+                    ],
+                    exports: [
+                        MatTableExtComponent,
+                        ResizeColumnDirective,
+                        ColumnPinningComponent,
+                        EditingComponent,
+                        FilterColumnsComponentComponent,
+                    ],
+                }]
+        }] });
+
+/*
+ * Public API Surface of mat-table-ext
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ColumnPinningComponent, EditingComponent, FilterColumnsComponentComponent, MatTableExtComponent, MatTableExtModule, MatTableExtService, ResizeColumnDirective };
+//# sourceMappingURL=mat-table-ext-test1.mjs.map