mat-table-ext 0.0.9 → 0.0.10

package/projects/mat-table-ext/src/lib/components/editing/editing.component.ts

@@ -1,110 +0,0 @@
-import { Component, Inject, OnInit, TemplateRef } from '@angular/core';
-import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
-import { MTExColumn } from '../../models/tableExtModels';
-import { MatTableExtService } from '../../mat-table-ext.service';
-
-@Component({
-  selector: 'app-editing',
-  templateUrl: './editing.component.html',
-  styleUrls: ['./editing.component.scss'],
-})
-export class EditingComponent implements OnInit {
-  public templateRef!: TemplateRef<any>;
-  public keys: string[] = [];
-  public templateKeys: string[] = [];
-  public types: any = {};
-  public templateTypes: any = {};
-  public columns: MTExColumn[] = [];
-  public templateRow: any = {};
-  
-  constructor(
-    public dialogRef: MatDialogRef<EditingComponent>,
-    @Inject(MAT_DIALOG_DATA) public dialogData: any,
-    public service: MatTableExtService
-  ) { }
-  
-  ngOnInit(): void {
-    this.setData(this.dialogData);
-  }
-/**
- * @description This method is used to set data for editing.
- * @param value dialog Data
- */
-  setData(value: any) {
-    let row = value.row;
-    let types: any = {};
-    this.keys = [];
-    this.columns = value.columns;
-    this.columns.forEach((column) => {
-      this.keys.push(column.field);
-      if (column.type == 'selection') {
-        types[column.field] = column.type;
-        let temp = row[column.field];
-        row[column.field] = {
-          value: temp,
-          options: column.options,
-        };
-      } else {
-        types[column.field] = column.type;
-      }
-    });
-    this.types = types;
-    this.setTemplateRef(value);
-  }
-/**
- * @description This method is used to set the data when data comes in from cus template.
- * @param value template value
- */
-  setTemplateRef(value: any) {
-    if (value.templateRef !== undefined) {
-      this.templateRow = { ...value.row };
-      let types: any = {};
-      this.templateKeys = [];
-      this.columns.forEach((column) => {
-        this.templateKeys.push(column.field);
-        if (column.type == 'selection') {
-          types[column.field] = column.type;
-          let temp = this.templateRow[column.field];
-          this.templateRow[column.field] = {
-            value: temp,
-            options: column.options,
-          };
-        } else {
-          types[column.field] = column.type;
-        }
-      });
-      this.templateTypes = types;
-      this.templateRef = value.templateRef;
-    }
-  }
-/**
- * @description This method is triggered when dialog is closed and also emits the dialog closed event data.
- */
-  closeDialog() {
-    let rowData = { ...this.dialogData.row };
-    this.keys.forEach((key: any) => {
-      if (this.types[key] === 'selection') {
-        let temp = rowData[key].value;
-        rowData[key] = temp;
-      }
-    });
-    this.dialogRef.close(rowData);
-  }
-
-  /**
-   * @description This method is called when the dialog is closed custom template action.
-   * @param row row to be edited.
-   * @param keys keys of columns
-   * @param types column types
-   */
-  closeTemplateDialog(row: any, keys: string[], types: string[]) {
-    let rowData = { ...row };
-    keys.forEach((key: any) => {
-      if (types[key] === 'selection') {
-        let temp = rowData[key].value;
-        rowData[key] = temp;
-      }
-    });
-    this.dialogRef.close(rowData);
-  }
-}

package/projects/mat-table-ext/src/lib/components/filter-columns-component/filter-columns-component.component.html

@@ -1,26 +0,0 @@
-
-    <ng-container *ngIf="obj">
-        <!-- Number Type -->
-        <mat-form-field *ngIf="obj.type == 'number'" appearance="outline" class="inline-editing-field" >
-            <input matInput type="number" [formControl]="numberCtrl">
-        </mat-form-field>
-        
-        <!-- String Type -->
-        <mat-form-field *ngIf="obj.type == 'string'" appearance="outline" class="inline-editing-field">
-            <input matInput type="text" [formControl]="stringCtrl">
-        </mat-form-field>
-        <mat-form-field *ngIf="obj.type == 'date'" appearance="outline" class="inline-editing-field">
-            <input matInput type="date" [formControl]="dateCtrl">
-        </mat-form-field>
-        <!-- Selection Type -->
-        <mat-form-field *ngIf="obj.type == 'selection'" appearance="outline" class="inline-editing-field">
-            <mat-select [value]="" [formControl]="selectionCtrl">
-                <mat-option *ngFor="let option of obj.options" [value]="option">
-                    {{option}}
-                </mat-option>
-            </mat-select>
-        </mat-form-field>
-        <!-- Boolean Type -->
-        <mat-checkbox (click)="$event.stopPropagation()" *ngIf="obj.type == 'boolean'" color="primary" [formControl]="booleanCtrl"></mat-checkbox>
-
-    </ng-container>

package/projects/mat-table-ext/src/lib/components/filter-columns-component/filter-columns-component.component.spec.ts

@@ -1,23 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { FilterColumnsComponentComponent } from './filter-columns-component.component';
-
-describe('FilterColumnsComponentComponent', () => {
-  let component: FilterColumnsComponentComponent;
-  let fixture: ComponentFixture<FilterColumnsComponentComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [ FilterColumnsComponentComponent ]
-    })
-    .compileComponents();
-
-    fixture = TestBed.createComponent(FilterColumnsComponentComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

package/projects/mat-table-ext/src/lib/components/filter-columns-component/filter-columns-component.component.ts

@@ -1,54 +0,0 @@
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
-import { FormControl } from '@angular/forms';
-
-@Component({
-  selector: 'app-filter-columns-component',
-  templateUrl: './filter-columns-component.component.html',
-  styleUrls: ['./filter-columns-component.component.scss'],
-})
-export class FilterColumnsComponentComponent implements OnInit {
-  @Input() obj!: any;
-  @Output() filterOutput: EventEmitter<any> = new EventEmitter<any>();
-  stringCtrl: FormControl = new FormControl();
-  numberCtrl: FormControl = new FormControl();
-  dateCtrl: FormControl = new FormControl();
-  booleanCtrl: FormControl = new FormControl();
-  selectionCtrl: FormControl = new FormControl();
-  constructor() {}
-  ngOnInit(): void {
-    this.stringCtrl.valueChanges.subscribe((value) => {
-      this.checkValue(value);
-    });
-    this.dateCtrl.valueChanges.subscribe((value) => {
-      this.checkValue(value);
-    });
-    this.numberCtrl.valueChanges.subscribe((value) => {
-      this.checkValue(value);
-    });
-    this.booleanCtrl.valueChanges.subscribe((value) => {
-      this.checkValue(value);
-    });
-    this.selectionCtrl.valueChanges.subscribe((value) => {
-      this.checkValue(value);
-    });
-  }
-  /**
-   * @description This method is make value is valid and not null.
-   * @param value value to check its type.
-   */
-  checkValue(value: any) {
-    if (value || value == '') {
-      this.emitOutput(value);
-    } else if (value == null) {
-      this.emitOutput('');
-    }
-  }
-/**
- * @description This method will emit seach value to parent component.
- * @param value value on which base table rows are filtered. 
- */
-  emitOutput(value: any) {
-    let obj = { [this.obj.field]: value };
-    this.filterOutput.emit(obj);
-  }
-}

package/projects/mat-table-ext/src/lib/directives/resize-column.directive.ts

@@ -1,103 +0,0 @@
-import { Directive, OnInit, Renderer2, Input, ElementRef, OnChanges } from "@angular/core";
-
-@Directive({
-    selector: "[columnsResizable]"
-})
-export class ResizeColumnDirective implements OnInit, OnChanges {
-    columnsResizable$: boolean = false;
-    @Input() set columnsResizable(val: boolean) {
-        this.columnsResizable$ = val;
-    }
-    get columnsResizable() {
-        return this.columnsResizable$;
-    }
-    @Input() index!: number;
-    private startX!: number;
-    private startWidth!: number;
-    private column: HTMLElement;
-    private table!: HTMLElement;
-    private pressed!: boolean;
-
-    constructor(private renderer: Renderer2, private el: ElementRef) {
-        this.column = this.el.nativeElement;
-    }
-
-    ngOnInit() {
-        if (this.columnsResizable$) {
-            const row = this.renderer.parentNode(this.column);
-            const thead = this.renderer.parentNode(row);
-            this.table = this.renderer.parentNode(thead);
-
-            const resizer = this.renderer.createElement("span");
-            this.renderer.addClass(resizer, "resize-holder");
-            this.renderer.setAttribute(resizer, 'id', "resizeHolderSpan");
-            this.renderer.appendChild(this.column, resizer);
-            this.renderer.listen(resizer, "mousedown", this.onMouseDown);
-            this.renderer.listen(this.table, "mousemove", this.onMouseMove);
-            this.renderer.listen("document", "mouseup", this.onMouseUp);
-        }
-        else {
-            this.removeDragElementFromDom();
-        }
-    }
-    ngOnChanges() {
-        if (this.columnsResizable$) {
-            const row = this.renderer.parentNode(this.column);
-            const thead = this.renderer.parentNode(row);
-            const resizer = this.renderer.createElement("span");
-            this.table = this.renderer.parentNode(thead);
-            this.renderer.addClass(resizer, "resize-holder");
-            this.renderer.setAttribute(resizer, 'id', "resizeHolderSpan");
-            this.renderer.appendChild(this.column, resizer);
-            this.renderer.listen(resizer, "mousedown", this.onMouseDown);
-            this.renderer.listen(this.table, "mousemove", this.onMouseMove);
-            this.renderer.listen("document", "mouseup", this.onMouseUp);
-        }
-        else {
-            this.removeDragElementFromDom();
-        }
-    }
-    
-    onMouseDown = (event: MouseEvent) => {
-        this.pressed = true;
-        this.startX = event.pageX;
-        this.startWidth = this.column.offsetWidth;
-    };
-
-    onMouseMove = (event: MouseEvent) => {
-        const offset = 5;
-        if (this.pressed && event.buttons) {
-            this.renderer.addClass(this.table, "resizing");
-            // Calculate width of column
-            let width =
-                this.startWidth + (event.pageX - this.startX - offset);
-            const tableCells = Array.from(this.table.querySelectorAll(".mat-row")).map(
-                (row: any) => row.querySelectorAll(".mat-cell").item(this.index)
-            );
-            // Set table header width
-            this.renderer.setStyle(this.column, "width", `${width}px`);
-            // Set table cells width
-            for (const cell of tableCells) {
-                if (cell && cell !== null)
-                this.renderer.setStyle(cell, "width", `${width}px`);
-            }
-        }
-    };
-
-    onMouseUp = (event: MouseEvent) => {
-        if (this.pressed) {
-            this.pressed = false;
-            this.renderer.removeClass(this.table, "resizing");
-        }
-    };
-    /**
-     * @description This method is used remove resizing handlers from the table headers when column resizing is disabled.
-     */
-    removeDragElementFromDom() {
-        let ele = document.getElementById('resizeHolderSpan')
-        if (ele && ele !== null && ele !== undefined) {
-            this.renderer.removeChild(this.column, ele);
-        }
-    }
-}
-

package/projects/mat-table-ext/src/lib/mat-table-ext.component.html

@@ -1,285 +0,0 @@
-<div  [style.width]="tableWidth">
-    <mat-form-field class="global-search-field" appearance="fill" *ngIf="globalSearch">
-        <mat-label>Search</mat-label>
-        <input matInput [ngModel]="globalFilter" (ngModelChange)="applyGlobalFilter($event)" placeholder="Ex. Mia" #input>
-    </mat-form-field>
-    <mat-toolbar class="toolbar-container" *ngIf="showToolbar" [style.height]="toolbarHeight?toolbarHeight:'50px'">
-        <span class="toolbar-title" *ngIf="toolbarTitle">{{toolbarTitle}}</span>
-        <ng-container *ngIf="toolbarTemplateRef" [ngTemplateOutlet]="toolbarTemplateRef"></ng-container>
-        <span class="example-spacer"></span>
-        <ng-container *ngIf="rowSelection || multiRowSelection">
-            <button class="hide-button" mat-stroked-button color="primary" (click)="hideSelectedRows()">
-                Hide Rows
-            </button>
-            <button class="hide-button" mat-stroked-button color="primary" (click)="showHiddenRows()">
-                Show All Rows
-            </button>
-        </ng-container>
-        <button *ngIf="columnHidable" class="hide-button" mat-stroked-button color="primary"
-            (click)="openMenu('hideShow',$event)" matTooltip="Column Visibility" matTooltipPosition="above">
-            <mat-icon>visibility</mat-icon>
-        </button>
-        <button *ngIf="columnPinnable" class="pin-button" mat-stroked-button color="primary"
-            (click)="openMenu('columnPin',$event)" matTooltip="Column Pinning">
-            <mat-icon svgIcon="pinIcon"></mat-icon>
-        </button>
-        <button *ngIf="exportButtonEnable" class="export-button" mat-stroked-button color="primary"
-            (click)="openMenu('export',$event)" matTooltip="Table Data Export">
-            <mat-icon>import_export</mat-icon> <span>Export</span>
-            <mat-icon>expand_more</mat-icon>
-        </button>
-        <div style="visibility: hidden; position:fixed" [matMenuTriggerFor]="menu" [style.left.px]="menuX"
-            [style.top.px]="menuY"></div>
-    </mat-toolbar>
-    <mat-menu #menu="matMenu" (closed)="menuClosed()" id="exportMenu">
-        <ng-container *ngIf="exportMenuCtrl">
-            <mat-option (click)="exportTable('xlsx')">Export to Excel</mat-option>
-            <mat-option (click)="exportTable('csv')">Export to CSV</mat-option>
-        </ng-container>
-    </mat-menu>
-    <div style="visibility: hidden; position:fixed" #columnMenuTrigger="matMenuTrigger" [matMenuTriggerFor]="columnMenu"
-        [style.left.px]="menuX" [style.top.px]="menuY">
-    </div>
-    <mat-menu #columnMenu="matMenu" (closed)="resetMenuChecks()">
-        <div class="toolbar-menu-container" *ngIf="hideShowMenuCtrl" [formGroup]="hideShowMenuGroup"
-            (click)="$event.stopPropagation()">
-            <h4 class="column-headers">Visible Columns</h4>
-            <mat-form-field appearance="fill" style="width: -webkit-fill-available;">
-                <mat-label>Filter Columns</mat-label>
-                <input matInput [(ngModel)]="showHideFilter" (ngModelChange)="filterColumns($event)"
-                    [ngModelOptions]="{standalone: true}">
-            </mat-form-field>
-            <div class="showHide-menu-columns-list">
-                <div class="toolbar-menu-item" *ngFor="let column of showHideColumnsArray">
-                    <mat-checkbox color="primary" class="toolbar-menu-checkbox" style="width: max-content;"
-                        [formControlName]="column.field" (change)="setColumnHideShow()">{{column.header}}</mat-checkbox>
-                </div>
-            </div>
-        </div>
-        <div class="toolbar-menu-container" *ngIf="columnPinMenuCtrl" (click)="$event.stopPropagation()">
-            <h4 class="column-headers">Pin Columns</h4>
-            <form class="example-form">
-                <mat-form-field appearance="fill" style="width: -webkit-fill-available;">
-                    <mat-label>Filter Columns</mat-label>
-                    <input matInput [(ngModel)]="showHideFilter" (ngModelChange)="filterColumns($event)"
-                        [ngModelOptions]="{standalone: true}">
-                </mat-form-field>
-            </form>
-            <div class="showHide-menu-columns-list">
-                <app-column-pinning [columns]="showHideColumnsArray"></app-column-pinning>
-            </div>
-        </div>
-    </mat-menu>
-
-    <mat-progress-bar *ngIf="loadingIndicator" mode="indeterminate"></mat-progress-bar>
-    <section id="tableContainer" class="mat-table-ext-container" (scroll)="onScroll($event)"
-        [style.height]="tableHeight ? tableHeight :'max-content'">
-        <table mat-table [id]="'matTableExt'+tableID" [dataSource]="dataSource" matSort cdkDropList
-            cdkDropListOrientation="horizontal" multiTemplateDataRows (cdkDropListDropped)="onDrop($event)"
-            (click)="saveCellEditing()" [style.width]="scrollbarH?'max-content':'100%'">
-            <!-- Row selection column -->
-            <ng-container matColumnDef="select">
-                <th mat-header-cell *matHeaderCellDef cdkDragLockAxis="x" cdkDrag [cdkDragDisabled]="!dndColumns">
-                    <mat-checkbox (change)="$event ? toggleAllRows() : null"
-                        [checked]="selection.hasValue() && isAllSelected()"
-                        [indeterminate]="selection.hasValue() && !isAllSelected()" [aria-label]="checkboxLabel()">
-                    </mat-checkbox>
-                </th>
-                <td mat-cell *matCellDef="let row;let i = dataIndex">
-                    <mat-checkbox (click)="$event.stopPropagation()" (change)="$event ? setSelectedRows(row,i) : null"
-                        [checked]="selection.isSelected(row)" [aria-label]="checkboxLabel(row)">
-                    </mat-checkbox>
-                </td>
-                <ng-container *ngIf="showFooterRow">
-                    <td mat-footer-cell *matFooterCellDef></td>
-                </ng-container>
-            </ng-container>
-            <!--dynamic columns are being generated here-->
-            <div matColumnDef="{{column['field']}}" [sticky]="column.pinned == 'left' ? true:false"
-                [stickyEnd]="column.pinned == 'right' ? true:false" *ngFor="let column of columnsArray; let i = index">
-                <th mat-header-cell *matHeaderCellDef [style.width]="column.width" [style.maxWidth]="column.maxWidth"
-                    [style.minWidth]="column.minWidth" cdkDragLockAxis="x" cdkDrag [cdkDragDisabled]="!dndColumns"
-                    [columnsResizable]="columnResizable" [index]="i">
-                    <span *ngIf="!headerTemplateRef" matTooltip="{{column.headerTooltip?.value}}"
-                        [matTooltipPosition]="column?.headerTooltip?.tooltipPosition!" mat-sort-header
-                        [disabled]="!sorting || column.disabled === true">{{column.header}}</span>
-                    <ng-container *ngIf="headerTemplateRef" [ngTemplateOutlet]="headerTemplateRef"
-                        [ngTemplateOutletContext]="{data:column}"></ng-container>
-                    <ng-container *ngIf="column.headerTemplate" [ngTemplateOutlet]="column.headerTemplate"
-                        [ngTemplateOutletContext]="{data:column}"></ng-container>
-                </th>
-                <td mat-cell *matCellDef="let row ;let i=dataIndex">
-                    <div *ngIf="!row.editable && !cellEditing[i +'_'+column.field]"
-                        (dblclick)="cellEditing[i +'_'+column.field] = inCellEditing;setCellData(row,i)"
-                        matTooltip="{{column.cellTooltip?.value}}"
-                        [matTooltipPosition]="column?.cellTooltip?.tooltipPosition!">
-                        <span
-                            *ngIf="!cellTemplateRef && !column?.cellTemplate && !cellTemplateRefMap[column.field]">{{row[column.field]}}</span>
-                        <ng-container *ngIf="cellTemplateRefMap[column.field]"
-                            [ngTemplateOutlet]="cellTemplateRefMap[column.field]"
-                            [ngTemplateOutletContext]="{row:row,column:column,index:i}">
-                        </ng-container>
-                        <ng-container
-                            *ngIf="cellTemplateRef && column.cellTemplate && !cellTemplateRefMap[column.field]"
-                            [ngTemplateOutlet]="column.cellTemplate"
-                            [ngTemplateOutletContext]="{row:row,column:column,index:i}">
-                        </ng-container>
-                        <ng-container
-                            *ngIf="!cellTemplateRef && column.cellTemplate && !cellTemplateRefMap[column.field]"
-                            [ngTemplateOutlet]="column.cellTemplate"
-                            [ngTemplateOutletContext]="{row:row,column:column,index:i}">
-                        </ng-container>
-                        <ng-container
-                            *ngIf="cellTemplateRef && !column.cellTemplate && !cellTemplateRefMap[column.field]"
-                            [ngTemplateOutlet]="cellTemplateRef"
-                            [ngTemplateOutletContext]="{row:row,column:column,index:i}">
-                        </ng-container>
-                    </div>
-                    <div *ngIf="row.editable || cellEditing[i +'_'+column.field]" (click)="$event.stopPropagation()">
-                        <ng-container *ngIf="inlineEditingTemplateRef && !cellEditing[i +'_'+column.field]"
-                            [ngTemplateOutlet]="inlineEditingTemplateRef"
-                            [ngTemplateOutletContext]="{data:getInlineEditingData(row,i,column)}"></ng-container>
-                        <ng-container *ngIf="cellEditingTemplateRef && !(row.editable)"
-                            [ngTemplateOutlet]="cellEditingTemplateRef"
-                            [ngTemplateOutletContext]="{data:getInlineEditingData(row,i,column)}"></ng-container>
-                        <ng-container *ngIf="!inlineEditingTemplateRef && (row.editable) && rowDataTemp['e'+i]">
-                            <mat-form-field *ngIf="column.type == 'number'" appearance="outline"
-                                class="inline-editing-field">
-                                <input matInput type="number" [(ngModel)]="rowDataTemp['e'+i][column.field]"
-                                    [ngModelOptions]="{standalone: true}">
-                            </mat-form-field>
-                            <mat-form-field style="width: 100%;" *ngIf="column.type == 'string'" appearance="outline"
-                                class="inline-editing-field">
-                                <input matInput type="text" [(ngModel)]="rowDataTemp['e'+i][column.field]"
-                                    [ngModelOptions]="{standalone: true}">
-                            </mat-form-field>
-                            <mat-form-field *ngIf="column.type == 'date'" appearance="outline"
-                                class="inline-editing-field">
-                                <input matInput type="date" [(ngModel)]="rowDataTemp['e'+i][column.field]"
-                                    [ngModelOptions]="{standalone: true}">
-                            </mat-form-field>
-                            <mat-form-field *ngIf="column.type == 'selection'" appearance="outline"
-                                class="inline-editing-field">
-                                <mat-select [value]="rowDataTemp['e'+i][column.field]"
-                                    [(ngModel)]="rowDataTemp['e'+i][column.field]">
-                                    <mat-option *ngFor="let option of column.options" [value]="option">
-                                        {{option}}
-                                    </mat-option>
-                                </mat-select>
-                            </mat-form-field>
-                            <mat-checkbox (click)="$event.stopPropagation()" *ngIf="column.type == 'boolean'"
-                                color="primary" [(ngModel)]="row[column.field]"></mat-checkbox>
-                        </ng-container>
-                        <ng-container *ngIf="!cellEditingTemplateRef && cellEditing[i +'_'+column.field]">
-                            <mat-form-field *ngIf="column.type == 'number'" appearance="outline"
-                                class="inline-editing-field">
-                                <input matInput type="number" [(ngModel)]="rowDataTemp['e'+i][column.field]"
-                                    [ngModelOptions]="{standalone: true}">
-                            </mat-form-field>
-                            <mat-form-field *ngIf="column.type == 'string'" appearance="outline"
-                                class="inline-editing-field">
-                                <input matInput type="text" [(ngModel)]="rowDataTemp['e'+i][column.field]"
-                                    [ngModelOptions]="{standalone: true}">
-                            </mat-form-field>
-                            <mat-form-field *ngIf="column.type == 'date'" appearance="outline"
-                                class="inline-editing-field">
-                                <input matInput type="date" [(ngModel)]="rowDataTemp['e'+i][column.field]"
-                                    [ngModelOptions]="{standalone: true}">
-                            </mat-form-field>
-                            <mat-form-field *ngIf="column.type == 'selection'" appearance="outline"
-                                class="inline-editing-field">
-                                <mat-select [value]="rowDataTemp['e'+i][column.field]"
-                                    [(ngModel)]="rowDataTemp['e'+i][column.field]">
-                                    <mat-option *ngFor="let option of column.options" [value]="option">
-                                        {{option}}
-                                    </mat-option>
-                                </mat-select>
-                            </mat-form-field>
-                            <mat-checkbox (click)="$event.stopPropagation()" *ngIf="column.type == 'boolean'"
-                                color="primary" [(ngModel)]="row[column.field]"></mat-checkbox>
-                        </ng-container>
-                    </div>
-                </td>
-                <ng-container *ngIf="showFooterRow">
-                    <td mat-footer-cell *matFooterCellDef> {{column.footerText}} </td>
-                </ng-container>
-            </div>
-            <ng-container matColumnDef="edit" stickyEnd="false">
-                <th mat-header-cell cdkDragLockAxis="x" cdkDrag [cdkDragDisabled]="true" *matHeaderCellDef
-                    class="action-column-cells"> Edit </th>
-                <td mat-cell *matCellDef="let row; let i = dataIndex" class="inline-edit-column-cell">
-                    <mat-icon class="edit-column-icons" *ngIf="!row.editable && !row.editmodal" aria-hidden="false"
-                        (click)="enableInlineEditing(row,i)" fontIcon="edit_note">
-                    </mat-icon>
-                    <div class="inline-editing-controls" *ngIf="row.editable && !row.editmodal">
-                        <mat-icon class="edit-column-icons" aria-hidden="false" (click)="saveInlineEditing(row,i)"
-                            fontIcon="done"></mat-icon>
-                        <mat-icon class="edit-column-icons" aria-hidden="false" (click)="cancelInlineEditing(row,i)"
-                            fontIcon="close"></mat-icon>
-                    </div>
-                </td>
-                <td mat-footer-cell *matFooterCellDef> edit </td>
-            </ng-container>
-            <ng-container matColumnDef="popup" stickyEnd="false">
-                <th mat-header-cell cdkDragLockAxis="x" cdkDrag [cdkDragDisabled]="true" *matHeaderCellDef
-                    class="action-column-cells"> Popup
-                </th>
-                <td mat-cell *matCellDef="let row; let i = index">
-                    <mat-icon aria-hidden="false" (click)="openEditingDialog(row)" fontIcon="edit">
-                    </mat-icon>
-                </td>
-                <td mat-footer-cell *matFooterCellDef></td>
-            </ng-container>
-
-            <ng-container matColumnDef="delete">
-                <th mat-header-cell cdkDragLockAxis="x" cdkDrag [cdkDragDisabled]="true" *matHeaderCellDef
-                    class="action-column-cells"> Delete
-                </th>
-                <td mat-cell *matCellDef="let row;let i=dataIndex">
-                    <mat-icon (click)="deleteRow(row,i)" aria-hidden="false" aria-label="Example home icon"
-                        fontIcon="delete">
-                    </mat-icon>
-                </td>
-                <td mat-footer-cell *matFooterCellDef></td>
-            </ng-container>
-            <!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->
-            <ng-container *ngIf="expandRows" matColumnDef="expandedDetail">
-                <td mat-cell *matCellDef="let element;let i=dataIndex "
-                    [attr.colspan]="columnsToDisplayWithExpand.length">
-                    <div class="example-element-detail"
-                        [@detailExpand]="element == expandedElement ? 'expanded' : 'collapsed'">
-                        <ng-container *ngIf="expansionTemplateRef" [ngTemplateOutlet]="expansionTemplateRef"
-                            [ngTemplateOutletContext]="{$explicit:element,row:element,index:i}">
-                        </ng-container>
-                    </div>
-                </td>
-            </ng-container>
-            <ng-container *ngFor="let ids of headersFiltersIds; let i=index" [matColumnDef]="ids">
-                <th mat-header-cell *matHeaderCellDef>
-                    <div class="filters-container" [class.animate]="toggleFilters">
-                        <app-filter-columns-component [obj]="columnsArray[returnIndex(ids)]"
-                            (filterOutput)="applyColumnFilter($event,columnsArray[returnIndex(ids)])"></app-filter-columns-component>
-                    </div>
-                </th>
-            </ng-container>
-            <tr mat-header-row *matHeaderRowDef=" getDisplayedColumns(); sticky: stickyHeader"></tr>
-            <tr mat-row *matRowDef="let row; columns:getDisplayedColumns(); let i=dataIndex;" class="data-row"
-                [ngClass]="{'data-row':expandRows,'stripedRows':(stripedRows &&  i % 2 == 1),'hoverClass':rowHover, 'hidden':hiddenCtrl.isSelected(row) && hideRows,'example-expanded-row':expandedElement === row}"
-                (click)="expandRow(row, row !== expandedElement,i)">
-            </tr>
-            <tr style="height: 0px;" mat-header-row class="no-default-height" *matHeaderRowDef="headersFiltersIds">
-            </tr>
-            <ng-container *ngIf="expandRows">
-                <tr style="height: 0px;" mat-row *matRowDef="let row; columns: ['expandedDetail']"
-                    [ngClass]="{'example-detail-row': (expandRows && row === expandedElement),'expand-row':row !== expandedElement}">
-                </tr>
-            </ng-container>
-            <ng-container *ngIf="showFooterRow">
-                <tr mat-footer-row *matFooterRowDef="getDisplayedColumns(); sticky: stickyFooter"></tr>
-            </ng-container>
-        </table>
-    </section>
-    <mat-paginator *ngIf="showPaginator" [pageSizeOptions]="pageSizeOptions"
-        [showFirstLastButtons]="showFirstLastButtons">
-    </mat-paginator>
-</div>

package/projects/mat-table-ext/src/lib/mat-table-ext.component.spec.ts

@@ -1,25 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { MatTableExtComponent } from './mat-table-ext.component';
-
-describe('MatTableExtComponent', () => {
-  let component: MatTableExtComponent;
-  let fixture: ComponentFixture<MatTableExtComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [ MatTableExtComponent ]
-    })
-    .compileComponents();
-  });
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(MatTableExtComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});