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

package/fesm2022/{mat-table-ext-test1.mjs → mat-table-ext.mjs}

@@ -275,7 +275,7 @@ class ColumnPinningComponent {
         // Create a new array with updated column
         this.columns = this.columns.map(col => {
             if (column?.field == col.field) {
-                return { ...col, pinned: value };
+                return { ...col, pinned: value === null ? undefined : value };
             }
             return col;
         });
@@ -672,6 +672,8 @@ class MatTableExtComponent {
                 }
             },
         };
+        this.pinnedTopDataSource = new MatTableDataSource([]);
+        this.pinnedBtmDataSource = new MatTableDataSource([]);
         /**
          * @description Check if row is pinned to top (for CSS class binding)
          */
@@ -750,10 +752,7 @@ class MatTableExtComponent {
         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;
-            }
+            this.setSorting();
         }
         // Calculate and set pinned row offsets
         this.updatePinnedRowOffsets();
@@ -763,6 +762,20 @@ class MatTableExtComponent {
             window.addEventListener('resize', this.onWindowResizeBound);
         }
     }
+    setSorting() {
+        if (this.enableRowPinning) {
+            if (this.pinnedTopDataSource) {
+                if (this.pinnedTopDataSource.sort) {
+                    this.pinnedTopDataSource.sort = this.sort;
+                }
+            }
+            if (this.pinnedBtmDataSource) {
+                if (this.pinnedBtmDataSource.sort) {
+                    this.pinnedBtmDataSource.sort = this.sort;
+                }
+            }
+        }
+    }
     /**
      * @description Calculate offsets for pinned rows based on sticky headers/footers
      */
@@ -2087,8 +2100,16 @@ class MatTableExtComponent {
         }
         if (this.columnFilter) {
             this.dataSource.filterPredicate = this.createFilter();
-            this.pinnedTopDataSource.filterPredicate = this.createFilter();
-            this.pinnedBtmDataSource.filterPredicate = this.createFilter();
+            if (this.pinnedTopDataSource) {
+                if (this.pinnedTopDataSource.filterPredicate) {
+                    this.pinnedTopDataSource.filterPredicate = this.createFilter();
+                }
+            }
+            if (this.pinnedBtmDataSource) {
+                if (this.pinnedBtmDataSource.filterPredicate) {
+                    this.pinnedBtmDataSource.filterPredicate = this.createFilter();
+                }
+            }
         }
         this.cdr.detectChanges();
     }
@@ -2635,7 +2656,7 @@ class MatTableExtComponent {
         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: [
+    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-stroked-button color=\"primary\"\n                    (click)=\"printTable()\" matTooltip=\"Print Table\">\n                    <mat-icon style=\"margin:unset;\">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: '*' })),
@@ -2674,7 +2695,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.5", ngImpor
                             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"] }]
+                    ], 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-stroked-button color=\"primary\"\n                    (click)=\"printTable()\" matTooltip=\"Print Table\">\n                    <mat-icon style=\"margin:unset;\">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]
@@ -3016,4 +3037,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.5", ngImpor
  */
 
 export { ColumnPinningComponent, EditingComponent, FilterColumnsComponentComponent, MatTableExtComponent, MatTableExtModule, MatTableExtService, ResizeColumnDirective };
-//# sourceMappingURL=mat-table-ext-test1.mjs.map
+//# sourceMappingURL=mat-table-ext.mjs.map