mat-table-ext 0.0.0

package/.editorconfig

@@ -0,0 +1,16 @@
+# Editor configuration, see https://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.ts]
+quote_type = single
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false

package/.vscode/extensions.json

@@ -0,0 +1,4 @@
+{
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=827846
+  "recommendations": ["angular.ng-template"]
+}

package/.vscode/launch.json

@@ -0,0 +1,20 @@
+{
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "ng serve",
+      "type": "pwa-chrome",
+      "request": "launch",
+      "preLaunchTask": "npm: start",
+      "url": "http://localhost:4200/"
+    },
+    {
+      "name": "ng test",
+      "type": "chrome",
+      "request": "launch",
+      "preLaunchTask": "npm: test",
+      "url": "http://localhost:9876/debug.html"
+    }
+  ]
+}

package/.vscode/tasks.json

@@ -0,0 +1,42 @@
+{
+  // For more information, visit: https://go.microsoft.com/fwlink/?LinkId=733558
+  "version": "2.0.0",
+  "tasks": [
+    {
+      "type": "npm",
+      "script": "start",
+      "isBackground": true,
+      "problemMatcher": {
+        "owner": "typescript",
+        "pattern": "$tsc",
+        "background": {
+          "activeOnStart": true,
+          "beginsPattern": {
+            "regexp": "(.*?)"
+          },
+          "endsPattern": {
+            "regexp": "bundle generation complete"
+          }
+        }
+      }
+    },
+    {
+      "type": "npm",
+      "script": "test",
+      "isBackground": true,
+      "problemMatcher": {
+        "owner": "typescript",
+        "pattern": "$tsc",
+        "background": {
+          "activeOnStart": true,
+          "beginsPattern": {
+            "regexp": "(.*?)"
+          },
+          "endsPattern": {
+            "regexp": "bundle generation complete"
+          }
+        }
+      }
+    }
+  ]
+}

package/README.md

@@ -0,0 +1,27 @@
+# MatTableExt
+
+This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 13.2.5.
+
+## Development server
+
+Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
+
+## Code scaffolding
+
+Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
+
+## Build
+
+Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.
+
+## Running unit tests
+
+Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Running end-to-end tests
+
+Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.

package/angular.json

@@ -0,0 +1,150 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "mat-table-ext": {
+      "projectType": "library",
+      "root": "projects/mat-table-ext",
+      "sourceRoot": "projects/mat-table-ext/src",
+      "prefix": "lib",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:ng-packagr",
+          "options": {
+            "project": "projects/mat-table-ext/ng-package.json"
+          },
+          "configurations": {
+            "production": {
+              "tsConfig": "projects/mat-table-ext/tsconfig.lib.prod.json"
+            },
+            "development": {
+              "tsConfig": "projects/mat-table-ext/tsconfig.lib.json"
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "projects/mat-table-ext/src/test.ts",
+            "tsConfig": "projects/mat-table-ext/tsconfig.spec.json",
+            "karmaConfig": "projects/mat-table-ext/karma.conf.js"
+          }
+        }
+      }
+    },
+    "mat-table-ext-example": {
+      "projectType": "application",
+      "schematics": {
+        "@schematics/angular:component": {
+          "style": "scss"
+        },
+        "@schematics/angular:application": {
+          "strict": true
+        }
+      },
+      "root": "projects/mat-table-ext-example",
+      "sourceRoot": "projects/mat-table-ext-example/src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist/mat-table-ext-example",
+            "index": "projects/mat-table-ext-example/src/index.html",
+            "main": "projects/mat-table-ext-example/src/main.ts",
+            "polyfills": "projects/mat-table-ext-example/src/polyfills.ts",
+            "tsConfig": "projects/mat-table-ext-example/tsconfig.app.json",
+            "inlineStyleLanguage": "scss",
+            "assets": [
+              "projects/mat-table-ext-example/src/favicon.ico",
+              "projects/mat-table-ext-example/src/assets",
+              {
+                "glob": "**/*",
+                "input": "projects/mat-table-ext/assets",
+                "output": "/assets/"
+              }
+            ],
+            "styles": [
+              "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
+              "projects/mat-table-ext-example/src/styles.scss"
+            ],
+            "scripts": []
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kb",
+                  "maximumError": "1mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "2kb",
+                  "maximumError": "4kb"
+                }
+              ],
+              "fileReplacements": [
+                {
+                  "replace": "projects/mat-table-ext-example/src/environments/environment.ts",
+                  "with": "projects/mat-table-ext-example/src/environments/environment.prod.ts"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "buildOptimizer": false,
+              "optimization": false,
+              "vendorChunk": true,
+              "extractLicenses": false,
+              "sourceMap": true,
+              "namedChunks": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "configurations": {
+            "production": {
+              "browserTarget": "mat-table-ext-example:build:production"
+            },
+            "development": {
+              "browserTarget": "mat-table-ext-example:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "options": {
+            "browserTarget": "mat-table-ext-example:build"
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "projects/mat-table-ext-example/src/test.ts",
+            "polyfills": "projects/mat-table-ext-example/src/polyfills.ts",
+            "tsConfig": "projects/mat-table-ext-example/tsconfig.spec.json",
+            "karmaConfig": "projects/mat-table-ext-example/karma.conf.js",
+            "inlineStyleLanguage": "scss",
+            "assets": [
+              "projects/mat-table-ext-example/src/favicon.ico",
+              "projects/mat-table-ext-example/src/assets"
+            ],
+            "styles": [
+              "projects/mat-table-ext-example/src/styles.scss"
+            ],
+            "scripts": []
+          }
+        }
+      }
+    }
+  },
+  "cli": {
+    "analytics": false
+  }
+}

package/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "mat-table-ext",
+  "version": "0.0.0",
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve",
+    "build": "ng build",
+    "watch": "ng build --watch --configuration development",
+    "test": "ng test"
+  },
+  "dependencies": {
+    "@angular/animations": "^14.2.12",
+    "@angular/cdk": "^14.2.7",
+    "@angular/common": "^14.2.12",
+    "@angular/compiler": "^14.2.12",
+    "@angular/core": "^14.2.12",
+    "@angular/forms": "^14.2.12",
+    "@angular/material": "^14.2.7",
+    "@angular/platform-browser": "^14.2.12",
+    "@angular/platform-browser-dynamic": "^14.2.12",
+    "@angular/router": "^14.2.12",
+    "@ngx-translate/core": "^14.0.0",
+    "ngx-translate": "^0.0.1-security",
+    "rxjs": "~7.5.0",
+    "xlsx": "^0.18.5",
+    "zone.js": "~0.11.4"
+  },
+  "devDependencies": {
+    "@angular-devkit/build-angular": "^14.2.10",
+    "@angular/cli": "^14.2.10",
+    "@angular/compiler-cli": "^14.2.12",
+    "@types/file-saver": "^2.0.5",
+    "@types/jasmine": "~3.10.0",
+    "@types/node": "^12.11.1",
+    "jasmine-core": "~4.0.0",
+    "karma": "~6.3.0",
+    "karma-chrome-launcher": "~3.1.0",
+    "karma-coverage": "~2.1.0",
+    "karma-jasmine": "~4.0.0",
+    "karma-jasmine-html-reporter": "~1.7.0",
+    "ng-packagr": "^14.2.2",
+    "tslib": "^2.4.1",
+    "typescript": "~4.8.4"
+  }
+}

package/projects/mat-table-ext/.browserslistrc

@@ -0,0 +1,16 @@
+# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
+# For additional information regarding the format and rule options, please see:
+# https://github.com/browserslist/browserslist#queries
+
+# For the full list of supported browsers by the Angular framework, please see:
+# https://angular.io/guide/browser-support
+
+# You can see what browsers were selected by your queries by running:
+#   npx browserslist
+
+last 1 Chrome version
+last 1 Firefox version
+last 2 Edge major versions
+last 2 Safari major versions
+last 2 iOS major versions
+Firefox ESR

package/projects/mat-table-ext/README.md

@@ -0,0 +1,24 @@
+# MatTableExt
+
+This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 14.2.10.
+
+## Code scaffolding
+
+Run `ng generate component component-name --project mat-table-ext` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project mat-table-ext`.
+> Note: Don't forget to add `--project mat-table-ext` or else it will be added to the default project in your `angular.json` file. 
+
+## Build
+
+Run `ng build mat-table-ext` to build the project. The build artifacts will be stored in the `dist/` directory.
+
+## Publishing
+
+After building your library with `ng build mat-table-ext`, go to the dist folder `cd dist/mat-table-ext` and run `npm publish`.
+
+## Running unit tests
+
+Run `ng test mat-table-ext` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.

package/projects/mat-table-ext/assets/pinIcon.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="utf-8"?><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="122.879px" height="122.867px" viewBox="0 0 122.879 122.867" enable-background="new 0 0 122.879 122.867" xml:space="preserve"><g><path fill-rule="evenodd" clip-rule="evenodd" d="M83.88,0.451L122.427,39c0.603,0.601,0.603,1.585,0,2.188l-13.128,13.125 c-0.602,0.604-1.586,0.604-2.187,0l-3.732-3.73l-17.303,17.3c3.882,14.621,0.095,30.857-11.37,42.32 c-0.266,0.268-0.535,0.529-0.808,0.787c-1.004,0.955-0.843,0.949-1.813-0.021L47.597,86.48L0,122.867l36.399-47.584L11.874,50.76 c-0.978-0.98-0.896-0.826,0.066-1.837c0.24-0.251,0.485-0.503,0.734-0.753C24.137,36.707,40.376,32.917,54.996,36.8l17.301-17.3 l-3.733-3.732c-0.601-0.601-0.601-1.585,0-2.188L81.691,0.451C82.295-0.15,83.279-0.15,83.88,0.451L83.88,0.451z"/></g></svg>

package/projects/mat-table-ext/assets/pinLeft.svg

@@ -0,0 +1,11 @@
+<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_4_286)">
+<rect width="24" height="24" transform="translate(0.380142)" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.954 3.4573C13.7197 3.22299 13.3398 3.22299 13.1055 3.4573C12.8715 3.69133 12.8712 4.07058 13.1046 4.30496L4.79663 10.3308L4.78896 10.3231C4.55464 10.0888 4.17474 10.0888 3.94043 10.3231C3.70611 10.5575 3.70611 10.9374 3.94043 11.1717L8.12586 15.3571L3.1986 20.2844L3.23319 21.1766L4.12545 21.2112L9.05271 16.2839L13.2085 20.4397C13.4428 20.674 13.8227 20.674 14.057 20.4397C14.2913 20.2054 14.2913 19.8255 14.057 19.5912L14.0567 19.5909L20.0752 11.2755C20.3096 11.509 20.6888 11.5087 20.9228 11.2747C21.1572 11.0403 21.1572 10.6604 20.9228 10.4261L13.954 3.4573Z" fill="black"/>
+</g>
+<defs>
+<clipPath id="clip0_4_286">
+<rect width="24" height="24" fill="white" transform="translate(0.380142)"/>
+</clipPath>
+</defs>
+</svg>

package/projects/mat-table-ext/assets/pinNone.svg

@@ -0,0 +1,5 @@
+<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="24" height="24" transform="translate(0.380142)" fill="white"/>
+<path d="M17.819 1.82727C18.9664 1.82727 18.6781 3.26539 17.819 3.17225L19.3836 11.9539C19.4541 12.3501 19.5725 12.8388 19.2602 13.0926C19.169 13.1666 19.0589 13.2025 18.9443 13.2131C18.5579 13.2488 18.2393 12.958 17.9746 12.6742C14.986 9.47047 9.59492 3.6323 9.12197 2.88175C8.62711 2.09642 9.22058 1.85155 9.57918 1.82727H17.819Z" fill="black"/>
+<path d="M19.3054 15.6543L7.7861 3.07306L7.78306 3.06975C7.47521 2.73351 7.10289 2.32686 6.65801 2.42349C6.48523 2.46102 6.35964 2.57044 6.2748 2.71196C6.05558 3.07764 6.28533 3.51939 6.56097 3.84465L7.48139 4.93074L5.98874 13.2546C4.78545 13.4558 5.31219 14.6417 5.98874 14.6417H12.161V21.2852L12.8738 22.1727L13.5671 21.2852V14.6417H16.3404L18.217 16.5055C19.2879 16.9154 19.3888 16.1088 19.3054 15.6543Z" fill="black"/>
+</svg>

package/projects/mat-table-ext/assets/pinRight.svg

@@ -0,0 +1,11 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_5_313)">
+<rect width="24" height="24" transform="matrix(-1 0 0 1 24 0)" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.4573 10.4261C3.22298 10.6604 3.22298 11.0403 3.4573 11.2747C3.69132 11.5087 4.07057 11.509 4.30496 11.2755L10.3308 19.5835L10.3231 19.5912C10.0888 19.8255 10.0888 20.2054 10.3231 20.4397C10.5575 20.674 10.9373 20.674 11.1717 20.4397L15.3571 16.2543L20.2844 21.1815L21.1766 21.147L21.2112 20.2547L16.2839 15.3274L20.4397 11.1717C20.674 10.9374 20.674 10.5575 20.4397 10.3231C20.2054 10.0888 19.8255 10.0888 19.5912 10.3231L19.5909 10.3235L11.2755 4.30494C11.509 4.07056 11.5087 3.69132 11.2746 3.4573C11.0403 3.22299 10.6604 3.22299 10.4261 3.4573L3.4573 10.4261Z" fill="black"/>
+</g>
+<defs>
+<clipPath id="clip0_5_313">
+<rect width="24" height="24" fill="white" transform="matrix(-1 0 0 1 24 0)"/>
+</clipPath>
+</defs>
+</svg>

package/projects/mat-table-ext/assets/pinned.svg

@@ -0,0 +1,2 @@
+<svg viewBox="0 0 20 20" width="20px" height="20px" fill="currentColor" focusable="false" >
+<path d="M16,12V4H17V2H7V4H8V12L6,14V16H11.2V22H12.8V16H18V14L16,12Z"></path></svg>

package/projects/mat-table-ext/karma.conf.js

@@ -0,0 +1,44 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage'),
+      require('@angular-devkit/build-angular/plugins/karma')
+    ],
+    client: {
+      jasmine: {
+        // you can add configuration options for Jasmine here
+        // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
+        // for example, you can disable the random execution with `random: false`
+        // or set a specific seed with `seed: 4321`
+      },
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    jasmineHtmlReporter: {
+      suppressAll: true // removes the duplicated traces
+    },
+    coverageReporter: {
+      dir: require('path').join(__dirname, '../../coverage/mat-table-ext'),
+      subdir: '.',
+      reporters: [
+        { type: 'html' },
+        { type: 'text-summary' }
+      ]
+    },
+    reporters: ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false,
+    restartOnFileChange: true
+  });
+};

package/projects/mat-table-ext/ng-package.json

@@ -0,0 +1,9 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/mat-table-ext",
+  "assets": ["assets"],
+  "lib": {
+    "entryFile": "src/public-api.ts",
+    "cssUrl": "inline"
+  }
+}

package/projects/mat-table-ext/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "mat-table-sample",
+  "version": "0.0.63",
+  "description": "this is a sample table of material.",
+  "keywords": [
+    "Hamza"
+  ],
+  "author": {
+    "name": "Samples Contribute",
+    "email": "abc@gmail.com",
+    "url": "http://blog.sample.me/"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/sample/tableSample"
+  },
+  "peerDependencies": {
+    "@angular/animations": "^14.2.0",
+    "@angular/cdk": "^14.2.4",
+    "@angular/common": "^14.2.0",
+    "@angular/compiler": "^14.2.0",
+    "@angular/core": "^14.2.0",
+    "@angular/forms": "^14.2.0",
+    "@angular/material": "^14.2.4",
+    "@angular/platform-browser": "^14.2.0",
+    "@angular/platform-browser-dynamic": "^14.2.0",
+    "@angular/router": "^14.2.0",
+    "@ngx-translate/core": "^14.0.0",
+    "xlsx": "^0.18.5"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  }
+}

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

@@ -0,0 +1,7 @@
+<div class="pinning-list-item" *ngFor="let column of columns" style="display: flex; ">
+    <button mat-icon-button >
+        <mat-icon (click)="changeValue(column)" matTooltip="{{column['pinned'] ? (column['pinned'] | titlecase):'None'}}"
+            svgIcon="{{column['pinned'] =='left'|| column['pinned'] =='right' ? icons[column['pinned']]:'pinNone'}}" class="pinning-icon"></mat-icon>
+    </button>
+    <span class="column-headers">{{column.header}}</span>
+</div>

package/projects/mat-table-ext/src/lib/components/column-pinning/column-pinning.component.scss

@@ -0,0 +1,9 @@
+.pinning-list-item {
+  display: flex;
+  justify-content: flex-start;
+  align-items: baseline;
+  height: 3em;
+}
+.column-headers {
+  font-family: Roboto, "Helvetica Neue", sans-serif;
+}

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

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

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

@@ -0,0 +1,48 @@
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { MTExColumn } from '../../models/tableExtModels';
+
+@Component({
+  selector: 'app-column-pinning',
+  templateUrl: './column-pinning.component.html',
+  styleUrls: ['./column-pinning.component.scss'],
+})
+export class ColumnPinningComponent implements OnInit {
+  @Input() columns!: MTExColumn[];
+  @Output() columnsChanged: EventEmitter<MTExColumn[]> = new EventEmitter();
+  public icons = {
+    left: 'pinLeft',
+    right: 'pinRight',
+    none: 'pinNone',
+  };
+
+  constructor() {}
+  ngOnInit(): void {}
+  /**
+   * @description This method is called when pin value changes for a column.
+   * @param column column of which to set the pin value
+   */
+  changeValue(column: MTExColumn) {
+    if (column.pinned) {
+      if (column.pinned == 'left') {
+        this.setColumnPinValue(column, 'right');
+      } else if (column.pinned == 'right') {
+        this.setColumnPinValue(column, undefined);
+      }
+    } else {
+      this.setColumnPinValue(column, 'left');
+    }
+    this.columnsChanged.emit(this.columns);
+  }
+  /**
+   * @description This method is used to set the column pin value.
+   * @param column column of which to set the pin value
+   * @param value pin value to set
+   */
+  setColumnPinValue(column: MTExColumn, value: 'left' | 'right' | undefined) {
+    this.columns.forEach((col) => {
+      if (column?.header == col.header) {
+        col.pinned = value;
+      }
+    });
+  }
+}

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

@@ -0,0 +1,55 @@
+<div *ngIf="!templateRef" style="height: 100%;" class="main-dialog-container">
+    <div mat-dialog-title class="dialog-title-container">
+        <h2 style="margin: 0;">Edit Row</h2>
+        <span class="example-spacer"></span>
+        <button mat-icon-button aria-label="Example icon button with a vertical three dot icon">
+            <mat-icon mat-dialog-close style="cursor: pointer;" fxFlex="5">close</mat-icon>
+        </button>
+    </div>
+    <mat-dialog-content style="margin-right: 20px;">
+        <div style="display: flex; flex-direction: column;">
+            <ng-container *ngFor="let key of keys">
+                <!-- Number Type -->
+                <mat-form-field *ngIf="types[key] == 'number'" appearance="outline" class="inline-editing-field">
+                    <mat-label>{{key | titlecase}}</mat-label>
+                    <input matInput type="number" [(ngModel)]="dialogData['row'][key]" [ngModelOptions]="{standalone: true}">
+                </mat-form-field>
+        
+                <!-- String Type -->
+        
+                <mat-form-field *ngIf="types[key] == 'string'" appearance="outline" class="inline-editing-field">
+                    <mat-label>{{key | titlecase}}</mat-label>
+                    <input matInput type="text" [(ngModel)]="dialogData['row'][key]" [ngModelOptions]="{standalone: true}">
+                </mat-form-field>
+                <mat-form-field *ngIf="types[key] == 'date'" appearance="outline" class="inline-editing-field">
+                    <mat-label>{{key | titlecase}}</mat-label>
+                    <input matInput type="text" [(ngModel)]="dialogData['row'][key]" [ngModelOptions]="{standalone: true}">
+                </mat-form-field>
+                <!-- Selection Type -->
+        
+                <mat-form-field *ngIf="types[key] == 'selection'" appearance="outline" class="inline-editing-field">
+                    <mat-label>{{key | titlecase}}</mat-label>
+                    <mat-select [value]="dialogData['row'][key].value" [(ngModel)]="dialogData['row'][key].value">
+                        <mat-option *ngFor="let option of dialogData['row'][key].options" [value]="option">
+                            {{option}}
+                        </mat-option>
+                    </mat-select>
+                </mat-form-field>
+                <!-- Boolean Type -->
+                <p>
+                    <mat-checkbox *ngIf="types[key] == 'boolean'" color="primary" [(ngModel)]="dialogData['row'][key]">
+                        <mat-label>{{key | titlecase}}</mat-label>
+                    </mat-checkbox>
+                </p>
+            </ng-container>
+        </div>
+    </mat-dialog-content>
+    <div class="spacer"></div>
+    <mat-dialog-actions style="margin-top: 20px;" align="end">
+        <button mat-raised-button color="warn" mat-dialog-close>
+            Cancel
+        </button>
+        <button mat-raised-button color="primary" (click)="closeDialog()">Save</button>
+    </mat-dialog-actions>
+</div>
+<ng-container *ngIf="templateRef" [ngTemplateOutlet]="templateRef" [ngTemplateOutletContext]="{data:{row:templateRow,columns:columns,columnKeys:templateKeys,columnTypes:templateTypes,closeDialog:closeTemplateDialog}}"></ng-container>

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

@@ -0,0 +1,19 @@
+.main-dialog-container {
+    display: flex;
+    flex-direction: column;
+}
+
+.main-dialog-container mat-dialog-content {
+    overflow-y: auto;
+    margin: 0px;
+    padding: 0 0 0 20px;
+}
+
+.dialog-title-container {
+    display: flex;
+    align-items: center;
+}
+
+.spacer {
+    flex-grow: 1;
+}