Fixes#12

Author: sowvikroy-asl

README.md

@@ -36,6 +36,18 @@ and include css in src/styles.scss
 ### Pagination
 * **pagination [boolean]:** Enable pagination for the table.
 * **pageSize [number]:** Enable pagination for the table.
+### Events
+> **dataChanged [function]** 
+>> Get data change event with parameters.
+>> ```html
+>>   <data-grid [pagination]="pagination" [theme]="theme"
+>>                   [columnDefs]="columnDefs" [rowData]="rowData" (dataChanged)="valueChanged($event)" ></data-grid>
+>>   ```
+>> ```javascript
+>>   valueChanged (valueChanged){
+         console.log("Row: ",valueChanged.row,"Column: ",valueChanged.column, "Data: ",,valueChanged.data );
+       }
+>>   ```
 ### Themes
 * **theme [string]:** Themebased table. The available themes are as follows
 1. Matrial Theme (metrial-theme)

projects/angular-open-datagrid/README.md

@@ -36,6 +36,18 @@ and include css in src/styles.scss
 ### Pagination
 * **pagination [boolean]:** Enable pagination for the table.
 * **pageSize [number]:** Enable pagination for the table.
+### Events
+> **dataChanged [function]** 
+>> Get data change event with parameters.
+>> ```html
+>>   <data-grid [pagination]="pagination" [theme]="theme"
+>>                   [columnDefs]="columnDefs" [rowData]="rowData" (dataChanged)="valueChanged($event)" ></data-grid>
+>>   ```
+>> ```javascript
+>>   valueChanged (valueChanged){
+         console.log("Row: ",valueChanged.row,"Column: ",valueChanged.column, "Data: ",,valueChanged.data );
+       }
+>>   ```
 ### Themes
 * **theme [string]:** Themebased table. The available themes are as follows
 1. Matrial Theme (metrial-theme)

projects/angular-open-datagrid/package.json

@@ -1,6 +1,6 @@
 {
   "name": "angular-open-datagrid",
-  "version": "1.2.4",
+  "version": "1.2.7",
   "license": "(MIT)",
   "homepage": "https://github.com/sowvikr/angular-open-datagrid-lilb",
   "bugs": {

projects/angular-open-datagrid/src/lib/data-table/data-table.component.ts

@@ -1,4 +1,4 @@
-import {Component, OnInit, Input, ChangeDetectorRef} from '@angular/core';
+import {Component, OnInit, Input, Output, EventEmitter, ChangeDetectorRef} from '@angular/core';
 import {trigger, style, animate, transition} from '@angular/animations';
 import {moveItemInArray} from '@angular/cdk/drag-drop';
 import {filter} from 'rxjs/internal/operators/filter';
@@ -55,6 +55,13 @@ interface ContextMenuData {
   data: any;
 }
 
+interface  DataChangeEventData{
+  row: number,
+  column: number,
+  data: any
+}
+
+
 @Component({
   selector: 'data-grid',
   templateUrl: './data-table.component.html',
@@ -77,6 +84,8 @@ interface ContextMenuData {
 })
 export class DataTableComponent implements OnInit {
 
+
+  @Output() dataChanged = new EventEmitter<DataChangeEventData>();
   @Input() pagination;
   private pageSize;
   public dragTheme;
@@ -121,7 +130,7 @@ export class DataTableComponent implements OnInit {
   public selectAllRows:boolean = false;
 
   // Convert row data to a 2D array.
-  createTableData1(filteredData?:Array<any>, currentPage?:number) {
+  createTableData(filteredData?:Array<any>, currentPage?:number) {
     this.TableRows = new Array<any>();
     this.contextMenuData = [];
     if (!(this._rowData && this._rowData.length)) {
@@ -437,7 +446,7 @@ export class DataTableComponent implements OnInit {
     this.previousIndex = undefined;
     moveItemInArray(this.columnDefs, event.previousIndex, event.currentIndex);
     moveItemInArray(this.FilterData, event.previousIndex, event.currentIndex);
-    this.createTableData1(this.FilterData, this.CurrentPage);
+    this.createTableData(this.FilterData, this.CurrentPage);
 
   }
 
@@ -458,7 +467,7 @@ export class DataTableComponent implements OnInit {
     this.TableRows[changeValue.row].data[changeValue.column] = changeValue.value;
     this.pagedRows();
     this.setPagedRow(this.CurrentPage);
-
+    this.dataChanged.emit(changeValue);
   }
 
   private selectedRowsCount():number {
@@ -797,7 +806,7 @@ export class DataTableComponent implements OnInit {
     this.FilterRowCount = this._rowData.length;
     this.TotalRows = this._rowData.length;
     this.FilterData = new Array<FilterOptions>(this.columnDefs.length);
-    this.createTableData1();
+    this.createTableData();
     this.TotalPages = Math.ceil(this._rowData.length / this.pageSize);
     this.ToRecord = this.pageSize;
 

src/app/pages/dark-theme/dark-theme.component.html

@@ -1,5 +1,5 @@
 
 <div *ngFor="let dataTable of dataTables">
   <data-grid [commonSearch]="commonSearch" [pagination]="dataTable.pagination" [theme]="dataTable.theme"
-                  [columnDefs]="dataTable.columnDefs" [rowData]="dataTable.rowData"></data-grid>
+                  [columnDefs]="dataTable.columnDefs" [rowData]="dataTable.rowData" (dataChanged)="valueChanged($event)"></data-grid>
 </div>

src/app/pages/dark-theme/dark-theme.component.ts

@@ -6,6 +6,11 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./dark-theme.component.scss']
 })
 export class DarkThemeComponent implements OnInit {
+
+  valueChanged (valueChanged){
+    console.log("Change Triggered",valueChanged);
+  }
+
   dataTables: Array<any> = [
     {
       pagination: true, theme: 'dark-theme',