on click handler for cell

Author: borsch

projects/angular-datatable-advanced-examples/src/app/app.component.ts

@@ -39,15 +39,21 @@ export class AppComponent {
       filterInPromise: this.loadRecordClass()
     }, {
       columnKey: 'geolocation.type',
-      columnName: 'Geolocation type'
+      columnName: 'Geolocation type',
+      onClick: row => {
+        console.log('Geolocation', row);
+      }
     }, {
       columnKey: 'coords',
       columnName: 'Coordinates',
       cellRender: (row) => row.geolocation && row.geolocation.coordinates
         ? `LNG: ${row.geolocation.coordinates[0]}, LAT: ${row.geolocation.coordinates[1]}`
         : '-',
       sortable: true,
-      filterable: true
+      filterable: true,
+      onClick: row => {
+        console.log('coords', row);
+      }
     }, {
       columnKey: 'test',
       columnName: 'Test date time picker',

projects/angular-datatable-advanced/src/lib/angular-datatable-advanced.component.html

@@ -12,7 +12,7 @@
         <span mat-sort-header class="ada-sort" [disabled]="!column.column.sortable"></span>
         <ada-filter [column]="column" [filterUpdateSubject]="filterUpdateSubject" *ngIf="column.column.filterable"></ada-filter>
       </mat-header-cell>
-      <mat-cell class="ada-td" *matCellDef="let row" [innerHTML]="renderCell(row, column.column)"></mat-cell>
+      <mat-cell class="ada-td" *matCellDef="let row" [innerHTML]="renderCell(row, column.column)" (click)="column.column.onClick && column.column.onClick(row)"></mat-cell>
     </ng-container>
 
     <mat-header-row class="ada-header-row" *matHeaderRowDef="getColumns()"></mat-header-row>

projects/angular-datatable-advanced/src/lib/model/column.ts

@@ -12,6 +12,7 @@ export class Column {
   filterIn?: Array<FilterIn> = [];
   filterInPromise?: Observable<Array<FilterIn>> = null;
   filterDateOptions?: FlatpickrDefaultsInterface;
+  onClick?: (row: any) => void;
 }
 
 export class ExtendedColumn {