feat: proper types for rows (#46)

* feat: use proper type for row related properties

* fix: detect update in rows automatically if row identity changed

* perf: only detect changes in rows on real changes

* docs: use row related types in examples

Author: spike-rabbit

projects/ngx-datatable/src/lib/components/body/body-cell.component.ts

@@ -18,6 +18,8 @@ import {
 import { TableColumn } from '../../types/table-column.type';
 import { SortDirection } from '../../types/sort-direction.type';
 import { Keys } from '../../utils/keys';
+import { RowOrGroup } from "../../types/group.type";
+import { BehaviorSubject } from "rxjs";
 
 export type TreeStatus = 'collapsed' | 'expanded' | 'loading' | 'disabled';
 
@@ -70,19 +72,19 @@ export type TreeStatus = 'collapsed' | 'expanded' | 'loading' | 'disabled';
   </ng-template>
   `
 })
-export class DataTableBodyCellComponent implements DoCheck, OnDestroy {
-  @Input() displayCheck: (row: any, column?: TableColumn, value?: any) => boolean;
+export class DataTableBodyCellComponent<TRow extends {level?: number} = any> implements DoCheck, OnDestroy {
+  @Input() displayCheck: (row: RowOrGroup<TRow>, column?: TableColumn, value?: any) => boolean;
 
-  _disable$;
-  @Input() set disable$(val: any) {
+  _disable$: BehaviorSubject<boolean>;
+  @Input() set disable$(val: BehaviorSubject<boolean>) {
     this._disable$ = val;
     this.cellContext.disable$ = val;
   };
   get disable$() {
     return this._disable$;
   }
 
-  @Input() set group(group: any) {
+  @Input() set group(group: TRow[]) {
     this._group = group;
     this.cellContext.group = group;
     this.checkValueUpdates();
@@ -146,14 +148,14 @@ export class DataTableBodyCellComponent implements DoCheck, OnDestroy {
     return this._column;
   }
 
-  @Input() set row(row: any) {
+  @Input() set row(row: RowOrGroup<TRow>) {
     this._row = row;
     this.cellContext.row = row;
     this.checkValueUpdates();
     this.cd.markForCheck();
   }
 
-  get row(): any {
+  get row(): RowOrGroup<TRow> {
     return this._row;
   }
 
@@ -275,15 +277,15 @@ export class DataTableBodyCellComponent implements DoCheck, OnDestroy {
   private _isSelected: boolean;
   private _sorts: any[];
   private _column: TableColumn;
-  private _row: any;
-  private _group: any;
+  private _row: RowOrGroup<TRow>;
+  private _group: TRow[];
   private _rowHeight: number;
   private _rowIndex: number;
   private _expanded: boolean;
-  private _element: any;
+  private _element: HTMLElement;
   private _treeStatus: TreeStatus;
 
-  constructor(element: ElementRef, private cd: ChangeDetectorRef) {
+  constructor(element: ElementRef<HTMLElement>, private cd: ChangeDetectorRef) {
     this.cellContext = {
       onCheckboxChangeFn: this.onCheckboxChangeFn,
       activateFn: this.activateFn,
@@ -444,8 +446,8 @@ export class DataTableBodyCellComponent implements DoCheck, OnDestroy {
     this.treeAction.emit(this.row);
   }
 
-  calcLeftMargin(column: any, row: any) {
+  calcLeftMargin(column: any, row: RowOrGroup<TRow>) {
     const levelIndent = column.treeLevelIndent != null ? column.treeLevelIndent : 50;
-    return column.isTreeColumn ? row.level * levelIndent : 0;
+    return column.isTreeColumn ? (row as TRow).level * levelIndent : 0;
   }
 }

projects/ngx-datatable/src/lib/components/body/body-row-wrapper.component.ts

@@ -12,6 +12,7 @@ import {
   Output
 } from '@angular/core';
 import { BehaviorSubject } from 'rxjs';
+import { RowOrGroup } from "../../types/group.type";
 
 @Component({
   selector: 'datatable-row-wrapper',
@@ -44,16 +45,16 @@ import { BehaviorSubject } from 'rxjs';
     class: 'datatable-row-wrapper'
   }
 })
-export class DataTableRowWrapperComponent implements DoCheck, OnInit {
+export class DataTableRowWrapperComponent<TRow = any> implements DoCheck, OnInit {
   @Input() innerWidth: number;
   @Input() rowDetail: any;
   @Input() groupHeader: any;
   @Input() offsetX: number;
   @Input() detailRowHeight: any;
-  @Input() row: any;
+  @Input() row: RowOrGroup<TRow>;
   @Input() groupedRows: any;
-  @Input() disableCheck: (row: any) => boolean;
-  @Output() rowContextmenu = new EventEmitter<{ event: MouseEvent; row: any }>(false);
+  @Input() disableCheck: (row: RowOrGroup<TRow>) => boolean;
+  @Output() rowContextmenu = new EventEmitter<{ event: MouseEvent; row: RowOrGroup<TRow> }>(false);
 
   @Input() set rowIndex(val: number) {
     this._rowIndex = val;
@@ -81,11 +82,11 @@ export class DataTableRowWrapperComponent implements DoCheck, OnInit {
   rowContext: any;
   disable$: BehaviorSubject<boolean>;
 
-  private rowDiffer: KeyValueDiffer<unknown, unknown>;
+  private rowDiffer: KeyValueDiffer<keyof RowOrGroup<TRow>, any>;
   private _expanded = false;
   private _rowIndex: number;
 
-  constructor(private cd: ChangeDetectorRef, private differs: KeyValueDiffers) {
+  constructor(private cd: ChangeDetectorRef, differs: KeyValueDiffers) {
     this.groupContext = {
       group: this.row,
       expanded: this.expanded,
@@ -112,9 +113,12 @@ export class DataTableRowWrapperComponent implements DoCheck, OnInit {
   ngDoCheck(): void {
     if (this.disableCheck) {
       const isRowDisabled = this.disableCheck(this.row);
-      this.disable$.next(isRowDisabled);
-      this.cd.markForCheck();
+      if (isRowDisabled !== this.disable$.value) {
+        this.disable$.next(isRowDisabled);
+        this.cd.markForCheck();
+      }
     }
+
     if (this.rowDiffer.diff(this.row)) {
       this.rowContext.row = this.row;
       this.groupContext.group = this.row;

projects/ngx-datatable/src/lib/components/body/body-row.component.ts

@@ -21,6 +21,7 @@ import { ScrollbarHelper } from '../../services/scrollbar-helper.service';
 import { translateXY } from '../../utils/translate';
 import { BehaviorSubject } from 'rxjs';
 import { DataTableRowWrapperComponent } from './body-row-wrapper.component';
+import { RowOrGroup } from "../../types/group.type";
 
 @Component({
   selector: 'datatable-body-row',
@@ -54,7 +55,7 @@ import { DataTableRowWrapperComponent } from './body-row-wrapper.component';
     </div>
   `
 })
-export class DataTableBodyRowComponent implements DoCheck {
+export class DataTableBodyRowComponent<TRow = any> implements DoCheck {
   @Input() set columns(val: any[]) {
     this._columns = val;
     this.recalculateColumns(val);
@@ -82,12 +83,12 @@ export class DataTableBodyRowComponent implements DoCheck {
 
   @Input() expanded: boolean;
   @Input() rowClass: any;
-  @Input() row: any;
-  @Input() group: any;
+  @Input() row: RowOrGroup<TRow>;
+  @Input() group: TRow[];
   @Input() isSelected: boolean;
   @Input() rowIndex: number;
   @Input() displayCheck: any;
-  @Input() treeStatus: TreeStatus = 'collapsed';
+  @Input() treeStatus?: TreeStatus = 'collapsed';
   @Input() ghostLoadingIndicator = false;
 
   @Input() disable$: BehaviorSubject<boolean>;
@@ -145,7 +146,7 @@ export class DataTableBodyRowComponent implements DoCheck {
   @Output() activate: EventEmitter<any> = new EventEmitter();
   @Output() treeAction: EventEmitter<any> = new EventEmitter();
 
-  _element: any;
+  _element: HTMLElement;
   _columnGroupWidths: any;
   _columnsByPin: any;
   _offsetX: number;
@@ -157,13 +158,13 @@ export class DataTableBodyRowComponent implements DoCheck {
     right: {}
   };
 
-  private _rowDiffer: KeyValueDiffer<unknown, unknown>;
+  private _rowDiffer: KeyValueDiffer<keyof RowOrGroup<TRow>, any>;
 
   constructor(
-    private differs: KeyValueDiffers,
+    differs: KeyValueDiffers,
     @SkipSelf() private scrollbarHelper: ScrollbarHelper,
     private cd: ChangeDetectorRef,
-    element: ElementRef
+    element: ElementRef<HTMLElement>
   ) {
     this._element = element.nativeElement;
     this._rowDiffer = differs.find({}).create();