diff --git a/projects/ngx-datatable/src/lib/components/body/body-cell.component.ts b/projects/ngx-datatable/src/lib/components/body/body-cell.component.ts
index 693238fe3..d525c8568 100644
--- a/projects/ngx-datatable/src/lib/components/body/body-cell.component.ts
+++ b/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,11 +72,11 @@ 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;
   };
@@ -82,7 +84,7 @@ export class DataTableBodyCellComponent implements DoCheck, OnDestroy {
     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;
   }
 }
diff --git a/projects/ngx-datatable/src/lib/components/body/body-row-wrapper.component.ts b/projects/ngx-datatable/src/lib/components/body/body-row-wrapper.component.ts
index 1c897ae4e..59076044e 100644
--- a/projects/ngx-datatable/src/lib/components/body/body-row-wrapper.component.ts
+++ b/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;
diff --git a/projects/ngx-datatable/src/lib/components/body/body-row.component.ts b/projects/ngx-datatable/src/lib/components/body/body-row.component.ts
index db0201ad6..92ce59dcb 100644
--- a/projects/ngx-datatable/src/lib/components/body/body-row.component.ts
+++ b/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();
diff --git a/projects/ngx-datatable/src/lib/components/body/body.component.ts b/projects/ngx-datatable/src/lib/components/body/body.component.ts
index 11e3b2088..14e711237 100644
--- a/projects/ngx-datatable/src/lib/components/body/body.component.ts
+++ b/projects/ngx-datatable/src/lib/components/body/body.component.ts
@@ -8,6 +8,7 @@ import {
   OnDestroy,
   OnInit,
   Output,
+  TrackByFunction,
   ViewChild
 } from '@angular/core';
 import { ScrollerComponent } from './scroller.component';
@@ -16,6 +17,8 @@ import { columnGroupWidths, columnsByPin } from '../../utils/column';
 import { RowHeightCache } from '../../utils/row-height-cache';
 import { translateXY } from '../../utils/translate';
 import { DragEventData } from '../../types/drag-events.type';
+import { TreeStatus } from "./body-cell.component";
+import { Group, RowOrGroup } from "../../types/group.type";
 
 @Component({
   selector: 'datatable-body',
@@ -84,7 +87,7 @@ import { DragEventData } from '../../types/drag-events.type';
         >
           <datatable-body-row
             role="row"
-            *ngIf="!groupedRows; else groupedRowsTemplate"
+            *ngIf="isRow(group)"
             tabindex="-1"
             #rowElement
             [disable$]="rowWrapper.disable$"
@@ -98,7 +101,7 @@ import { DragEventData } from '../../types/drag-events.type';
             [expanded]="getRowExpanded(group)"
             [rowClass]="rowClass"
             [displayCheck]="displayCheck"
-            [treeStatus]="group && group.treeStatus"
+            [treeStatus]="group?.treeStatus"
             [ghostLoadingIndicator]="ghostLoadingIndicator"
             [draggable]="rowDraggable"
             (treeAction)="onTreeAction(group)"
@@ -111,7 +114,7 @@ import { DragEventData } from '../../types/drag-events.type';
             (dragend)="dragEnd($event, group)"
           >
           </datatable-body-row>
-          <ng-template #groupedRowsTemplate>
+          <ng-container *ngIf="isGroup(group)">
             <datatable-body-row
               role="row"
               [disable$]="rowWrapper.disable$"
@@ -139,7 +142,7 @@ import { DragEventData } from '../../types/drag-events.type';
               (dragend)="dragEnd($event, row)"
             >
             </datatable-body-row>
-          </ng-template>
+          </ng-container>
         </datatable-row-wrapper>
         <datatable-summary-row
           role="row"
@@ -154,14 +157,14 @@ import { DragEventData } from '../../types/drag-events.type';
         </datatable-summary-row>
       </datatable-scroller>
       <ng-container *ngIf="!rows?.length && !loadingIndicator && !ghostLoadingIndicator">
-      <div
-        class="empty-row"
-        *ngIf="!customEmptyContent?.children.length"
-        [innerHTML]="emptyMessage"
-      ></div>
-      <div #customEmptyContent>
-        <ng-content select="[empty-content]"></ng-content>
-      </div>
+        <div
+          class="empty-row"
+          *ngIf="!customEmptyContent?.children.length"
+          [innerHTML]="emptyMessage"
+        ></div>
+        <div #customEmptyContent>
+          <ng-content select="[empty-content]"></ng-content>
+        </div>
       </ng-container>
     </datatable-selection>
   `,
@@ -170,7 +173,7 @@ import { DragEventData } from '../../types/drag-events.type';
     class: 'datatable-body'
   }
 })
-export class DataTableBodyComponent implements OnInit, OnDestroy {
+export class DataTableBodyComponent<TRow extends {treeStatus?: TreeStatus} = any> implements OnInit, OnDestroy {
   @Input() scrollbarV: boolean;
   @Input() scrollbarH: boolean;
   @Input() loadingIndicator: boolean;
@@ -179,7 +182,8 @@ export class DataTableBodyComponent implements OnInit, OnDestroy {
     this._ghostLoadingIndicator = val;
     if (!val) {
       // remove placeholder rows once ghostloading is set to false
-      this.temp = this.temp.filter(item => !!item);
+      // typescript is cannot detect the type --> casting
+      this.temp = this.temp.filter(item => !!item) as any;
     }
   };
   get ghostLoadingIndicator() {
@@ -201,7 +205,7 @@ export class DataTableBodyComponent implements OnInit, OnDestroy {
   @Input() groupedRows: any;
   @Input() groupExpansionDefault: boolean;
   @Input() innerWidth: number;
-  @Input() groupRowsBy: string;
+  @Input() groupRowsBy: keyof TRow;
   @Input() virtualization: boolean;
   @Input() summaryRow: boolean;
   @Input() summaryPosition: string;
@@ -226,14 +230,14 @@ export class DataTableBodyComponent implements OnInit, OnDestroy {
     return this._pageSize;
   }
 
-  @Input() set rows(val: any[]) {
+  @Input() set rows(val: TRow[]) {
     if (val !== this._rows) {
       this._rows = val;
       this.recalcLayout();
     }
   }
 
-  get rows(): any[] {
+  get rows(): TRow[] {
     return this._rows;
   }
 
@@ -306,7 +310,7 @@ export class DataTableBodyComponent implements OnInit, OnDestroy {
   @Output() activate: EventEmitter<any> = new EventEmitter();
   @Output() select: EventEmitter<any> = new EventEmitter();
   @Output() detailToggle: EventEmitter<any> = new EventEmitter();
-  @Output() rowContextmenu = new EventEmitter<{ event: MouseEvent; row: any }>(false);
+  @Output() rowContextmenu = new EventEmitter<{ event: MouseEvent; row: TRow }>(false);
   @Output() treeAction: EventEmitter<any> = new EventEmitter();
 
   @ViewChild(ScrollerComponent) scroller: ScrollerComponent;
@@ -332,17 +336,17 @@ export class DataTableBodyComponent implements OnInit, OnDestroy {
   }
 
   rowHeightsCache: RowHeightCache = new RowHeightCache();
-  temp: any[] = [];
+  temp: RowOrGroup<TRow>[] = [];
   offsetY = 0;
   indexes: any = {};
   columnGroupWidths: any;
   columnGroupWidthsWithoutGroup: any;
-  rowTrackingFn: any;
+  rowTrackingFn: TrackByFunction<RowOrGroup<TRow>>;
   listener: any;
   rowIndexes: any = new WeakMap<any, string>();
   rowExpansions: any[] = [];
 
-  _rows: any[];
+  _rows: TRow[];
   _bodyHeight: any;
   _columns: any[];
   _rowCount: number;
@@ -350,7 +354,7 @@ export class DataTableBodyComponent implements OnInit, OnDestroy {
   _pageSize: number;
   _offsetEvent = -1;
 
-  private _draggedRow: any;
+  private _draggedRow: RowOrGroup<TRow>;
   private _draggedRowElement: HTMLElement;
 
   /**
@@ -358,7 +362,7 @@ export class DataTableBodyComponent implements OnInit, OnDestroy {
    */
   constructor(public cd: ChangeDetectorRef) {
     // declare fn here so we can get access to the `this` property
-    this.rowTrackingFn = (index: number, row: any): any => {
+    this.rowTrackingFn = (index, row) => {
       const idx = this.getRowIndex(row);
       if (this.trackByProp) {
         return row[this.trackByProp];
@@ -553,7 +557,7 @@ export class DataTableBodyComponent implements OnInit, OnDestroy {
   /**
    * Get the row height
    */
-  getRowHeight(row: any): number {
+  getRowHeight(row: RowOrGroup<TRow>): number {
     // if its a function return it
     if (typeof this.rowHeight === 'function') {
       return this.rowHeight(row);
@@ -565,7 +569,7 @@ export class DataTableBodyComponent implements OnInit, OnDestroy {
   /**
    * @param group the group with all rows
    */
-  getGroupHeight(group: any): number {
+  getGroupHeight(group: Group<TRow>): number {
     let rowHeight = 0;
 
     if (group.value) {
@@ -581,7 +585,7 @@ export class DataTableBodyComponent implements OnInit, OnDestroy {
   /**
    * Calculate row height based on the expanded state of the row.
    */
-  getRowAndDetailHeight(row: any): number {
+  getRowAndDetailHeight(row: TRow): number {
     let rowHeight = this.getRowHeight(row);
     const expanded = this.getRowExpanded(row);
 
@@ -596,7 +600,7 @@ export class DataTableBodyComponent implements OnInit, OnDestroy {
   /**
    * Get the height of the detail row.
    */
-  getDetailRowHeight = (row?: any, index?: any): number => {
+  getDetailRowHeight = (row?: TRow, index?: number): number => {
     if (!this.rowDetail) {
       return 0;
     }
@@ -625,7 +629,7 @@ export class DataTableBodyComponent implements OnInit, OnDestroy {
    *
    * @memberOf DataTableBodyComponent
    */
-  getRowsStyles(rows: any, index = 0): any {
+  getRowsStyles(rows: RowOrGroup<TRow> | TRow[], index = 0): any {
     const styles: any = {};
 
     // only add styles for the group if there is a group
@@ -636,7 +640,7 @@ export class DataTableBodyComponent implements OnInit, OnDestroy {
     if (this.scrollbarV && this.virtualization) {
       let idx = 0;
 
-      if (this.groupedRows) {
+      if (rows instanceof Array) {
         // Get the latest row rowindex in a group
         const row = rows[rows.length - 1];
         idx = row ? this.getRowIndex(row) : 0;
@@ -738,7 +742,7 @@ export class DataTableBodyComponent implements OnInit, OnDestroy {
 
     // Initialize the tree only if there are rows inside the tree.
     if (this.rows && this.rows.length) {
-      const rowExpansions = new Set();
+      const rowExpansions = new Set<TRow>();
       for (const row of this.rows) {
         if (this.getRowExpanded(row)) {
           rowExpansions.add(row);
@@ -780,7 +784,7 @@ export class DataTableBodyComponent implements OnInit, OnDestroy {
    * a part of the row object itself as we have to preserve the expanded row
    * status in case of sorting and filtering of the row set.
    */
-  toggleRowExpansion(row: any): void {
+  toggleRowExpansion(row: TRow): void {
     // Capture the row index of the first row that is visible on the viewport.
     const viewPortFirstRowIndex = this.getAdjustedViewPortIndex();
     const rowExpandedIdx = this.getRowExpandedIdx(row, this.rowExpansions);
@@ -878,7 +882,7 @@ export class DataTableBodyComponent implements OnInit, OnDestroy {
   /**
    * Returns if the row was expanded and set default row expansion when row expansion is empty
    */
-  getRowExpanded(row: any): boolean {
+  getRowExpanded(row: RowOrGroup<TRow>): boolean {
     if (this.rowExpansions.length === 0 && this.groupExpansionDefault) {
       for (const group of this.groupedRows) {
         this.rowExpansions.push(group);
@@ -888,7 +892,7 @@ export class DataTableBodyComponent implements OnInit, OnDestroy {
     return this.getRowExpandedIdx(row, this.rowExpansions) > -1;
   }
 
-  getRowExpandedIdx(row: any, expanded: any[]): number {
+  getRowExpandedIdx(row: RowOrGroup<TRow>, expanded: RowOrGroup<TRow>[]): number {
     if (!expanded || !expanded.length) {return -1;}
 
     const rowId = this.rowIdentity(row);
@@ -901,15 +905,15 @@ export class DataTableBodyComponent implements OnInit, OnDestroy {
   /**
    * Gets the row index given a row
    */
-  getRowIndex(row: any): number {
+  getRowIndex(row: RowOrGroup<TRow>): number {
     return this.rowIndexes.get(row) || 0;
   }
 
-  onTreeAction(row: any) {
+  onTreeAction(row: TRow) {
     this.treeAction.emit({ row });
   }
 
-  dragOver(event: DragEvent, dropRow) {
+  dragOver(event: DragEvent, dropRow: RowOrGroup<TRow>) {
     event.preventDefault();
     this.rowDragEvents.emit({
       event,
@@ -920,7 +924,7 @@ export class DataTableBodyComponent implements OnInit, OnDestroy {
     });
   }
 
-  drag(event: DragEvent, dragRow, rowComponent) {
+  drag(event: DragEvent, dragRow: RowOrGroup<TRow>, rowComponent) {
     this._draggedRow = dragRow;
     this._draggedRowElement = rowComponent._element;
     this.rowDragEvents.emit({
@@ -931,7 +935,7 @@ export class DataTableBodyComponent implements OnInit, OnDestroy {
     });
   }
 
-  drop(event: DragEvent, dropRow, rowComponent) {
+  drop(event: DragEvent, dropRow: RowOrGroup<TRow>, rowComponent) {
     event.preventDefault();
     this.rowDragEvents.emit({
       event,
@@ -943,7 +947,7 @@ export class DataTableBodyComponent implements OnInit, OnDestroy {
     });
   }
 
-  dragEnter(event: DragEvent, dropRow, rowComponent) {
+  dragEnter(event: DragEvent, dropRow: RowOrGroup<TRow>, rowComponent) {
     event.preventDefault();
     this.rowDragEvents.emit({
       event,
@@ -955,7 +959,7 @@ export class DataTableBodyComponent implements OnInit, OnDestroy {
     });
   }
 
-  dragLeave(event: DragEvent, dropRow, rowComponent) {
+  dragLeave(event: DragEvent, dropRow: RowOrGroup<TRow>, rowComponent) {
     event.preventDefault();
     this.rowDragEvents.emit({
       event,
@@ -967,7 +971,7 @@ export class DataTableBodyComponent implements OnInit, OnDestroy {
     });
   }
 
-  dragEnd(event: DragEvent, dragRow) {
+  dragEnd(event: DragEvent, dragRow: RowOrGroup<TRow>) {
     event.preventDefault();
     this.rowDragEvents.emit({
       event,
@@ -978,4 +982,14 @@ export class DataTableBodyComponent implements OnInit, OnDestroy {
     this._draggedRow = undefined;
     this._draggedRowElement = undefined;
   }
+
+  protected isGroup(row: RowOrGroup<TRow>[]): row is Group<TRow>[];
+  protected isGroup(row: RowOrGroup<TRow>): row is Group<TRow>;
+  protected isGroup(row: RowOrGroup<TRow> | RowOrGroup<TRow>[]): boolean {
+    return this.groupedRows;
+  }
+
+  protected isRow(row: RowOrGroup<TRow>): row is TRow {
+    return !this.groupedRows;
+  }
 }
diff --git a/projects/ngx-datatable/src/lib/components/body/selection.component.ts b/projects/ngx-datatable/src/lib/components/body/selection.component.ts
index 133157983..1457eb665 100644
--- a/projects/ngx-datatable/src/lib/components/body/selection.component.ts
+++ b/projects/ngx-datatable/src/lib/components/body/selection.component.ts
@@ -3,12 +3,12 @@ import { SelectionType } from '../../types/selection.type';
 import { selectRows, selectRowsBetween } from '../../utils/selection';
 import { Keys } from '../../utils/keys';
 
-export interface Model {
+export interface Model<TRow> {
   type: string;
   event: MouseEvent | KeyboardEvent;
-  row: any;
-  rowElement: any;
-  cellElement: any;
+  row: TRow;
+  rowElement: HTMLElement;
+  cellElement: HTMLElement;
   cellIndex: number;
 }
 
@@ -17,9 +17,9 @@ export interface Model {
   template: ` <ng-content></ng-content> `,
   changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class DataTableSelectionComponent {
-  @Input() rows: any[];
-  @Input() selected: any[];
+export class DataTableSelectionComponent<TRow = any> {
+  @Input() rows: TRow[];
+  @Input() selected: TRow[];
   @Input() selectEnabled: boolean;
   @Input() selectionType: SelectionType;
   @Input() rowIdentity: any;
@@ -31,7 +31,7 @@ export class DataTableSelectionComponent {
 
   prevIndex: number;
 
-  selectRow(event: KeyboardEvent | MouseEvent, index: number, row: any): void {
+  selectRow(event: KeyboardEvent | MouseEvent, index: number, row: TRow): void {
     if (!this.selectEnabled) {return;}
 
     const chkbox = this.selectionType === SelectionType.checkbox;
@@ -72,7 +72,7 @@ export class DataTableSelectionComponent {
     });
   }
 
-  onActivate(model: Model, index: number): void {
+  onActivate(model: Model<TRow>, index: number): void {
     const { type, event, row } = model;
     const chkbox = this.selectionType === SelectionType.checkbox;
     const select = (!chkbox && (type === 'click' || type === 'dblclick')) || (chkbox && type === 'checkbox');
@@ -91,7 +91,7 @@ export class DataTableSelectionComponent {
     this.activate.emit(model);
   }
 
-  onKeyboardFocus(model: Model): void {
+  onKeyboardFocus(model: Model<TRow>): void {
     const { keyCode } = model.event as KeyboardEvent;
     const shouldFocus = keyCode === Keys.up || keyCode === Keys.down || keyCode === Keys.right || keyCode === Keys.left;
 
@@ -111,16 +111,16 @@ export class DataTableSelectionComponent {
     }
   }
 
-  focusRow(rowElement: any, keyCode: number): void {
+  focusRow(rowElement: HTMLElement, keyCode: number): void {
     const nextRowElement = this.getPrevNextRow(rowElement, keyCode);
     if (nextRowElement) {nextRowElement.focus();}
   }
 
-  getPrevNextRow(rowElement: any, keyCode: number): any {
+  getPrevNextRow(rowElement: HTMLElement, keyCode: number): any {
     const parentElement = rowElement.parentElement;
 
     if (parentElement) {
-      let focusElement: HTMLElement;
+      let focusElement: Element;
       if (keyCode === Keys.up) {
         focusElement = parentElement.previousElementSibling;
       } else if (keyCode === Keys.down) {
@@ -133,8 +133,8 @@ export class DataTableSelectionComponent {
     }
   }
 
-  focusCell(cellElement: any, rowElement: any, keyCode: number, cellIndex: number): void {
-    let nextCellElement: HTMLElement;
+  focusCell(cellElement: HTMLElement, rowElement: HTMLElement, keyCode: number, cellIndex: number): void {
+    let nextCellElement: Element;
 
     if (keyCode === Keys.left) {
       nextCellElement = cellElement.previousElementSibling;
@@ -148,14 +148,14 @@ export class DataTableSelectionComponent {
       }
     }
 
-    if (nextCellElement) {nextCellElement.focus();}
+    if (nextCellElement && 'focus' in nextCellElement && typeof nextCellElement.focus === 'function') {nextCellElement.focus();}
   }
 
-  getRowSelected(row: any): boolean {
+  getRowSelected(row: TRow): boolean {
     return this.getRowSelectedIdx(row, this.selected) > -1;
   }
 
-  getRowSelectedIdx(row: any, selected: any[]): number {
+  getRowSelectedIdx(row: TRow, selected: any[]): number {
     if (!selected || !selected.length) {return -1;}
 
     const rowId = this.rowIdentity(row);
diff --git a/projects/ngx-datatable/src/lib/components/datatable.component.ts b/projects/ngx-datatable/src/lib/components/datatable.component.ts
index c4bc8865d..6acc6474b 100644
--- a/projects/ngx-datatable/src/lib/components/datatable.component.ts
+++ b/projects/ngx-datatable/src/lib/components/datatable.component.ts
@@ -13,14 +13,15 @@ import {
   HostListener,
   Inject,
   Input,
-  KeyValueDiffer,
-  KeyValueDiffers,
+  IterableDiffer,
+  IterableDiffers,
   OnDestroy,
   OnInit,
   Optional,
   Output,
   QueryList,
   SkipSelf,
+  TemplateRef,
   ViewChild,
   ViewEncapsulation
 } from '@angular/core';
@@ -30,7 +31,7 @@ import { DatatableGroupHeaderDirective } from './body/body-group-header.directiv
 import { BehaviorSubject, Subscription } from 'rxjs';
 import { INgxDatatableConfig } from '../ngx-datatable.module';
 import { groupRowsByParents, optionalGetterForProp } from '../utils/tree';
-import { TableColumn } from '../types/table-column.type';
+import { TableColumn, TableColumnProp } from '../types/table-column.type';
 import { setColumnDefaults, translateTemplates } from '../utils/column-helper';
 import { ColumnMode } from '../types/column-mode.type';
 import { DragEventData } from '../types/drag-events.type';
@@ -48,6 +49,8 @@ import { DimensionsHelper } from '../services/dimensions-helper.service';
 import { throttleable } from '../utils/throttle';
 import { adjustColumnWidths, forceFillColumnWidths } from '../utils/math';
 import { sortRows } from '../utils/sort';
+import { Group } from "../types/group.type";
+import { SortPropDir } from "../types/sort-prop-dir.type";
 
 @Component({
   selector: 'ngx-datatable',
@@ -60,16 +63,16 @@ import { sortRows } from '../utils/sort';
     class: 'ngx-datatable'
   }
 })
-export class DatatableComponent implements OnInit, DoCheck, AfterViewInit, AfterContentInit, OnDestroy {
+export class DatatableComponent<TRow = any> implements OnInit, DoCheck, AfterViewInit, AfterContentInit, OnDestroy {
   /**
    * Template for the target marker of drag target columns.
    */
-  @Input() targetMarkerTemplate: any;
+  @Input() targetMarkerTemplate: TemplateRef<unknown>;
 
   /**
    * Rows that are displayed in the table.
    */
-  @Input() set rows(val: any) {
+  @Input() set rows(val: TRow[]) {
     this._rows = val;
 
     if (val) {
@@ -102,18 +105,18 @@ export class DatatableComponent implements OnInit, DoCheck, AfterViewInit, After
   /**
    * Gets the rows.
    */
-  get rows(): any {
+  get rows(): TRow[] {
     return this._rows;
   }
 
   /**
    * This attribute allows the user to set the name of the column to group the data with
    */
-  @Input() set groupRowsBy(val: string) {
+  @Input() set groupRowsBy(val: keyof TRow) {
     if (val) {
       this._groupRowsBy = val;
       if (this._rows && this._groupRowsBy) {
-        // cretes a new array with the data grouped
+        // creates a new array with the data grouped
         this.groupedRows = this.groupArrayBy(this._rows, this._groupRowsBy);
       }
     }
@@ -138,7 +141,7 @@ export class DatatableComponent implements OnInit, DoCheck, AfterViewInit, After
    *    ]}
    *  ]
    */
-  @Input() groupedRows: any[];
+  @Input() groupedRows: Group<TRow>[];
 
   /**
    * Columns to be displayed.
@@ -165,7 +168,7 @@ export class DatatableComponent implements OnInit, DoCheck, AfterViewInit, After
    * represented as selected in the grid.
    * Default value: `[]`
    */
-  @Input() selected: any[] = [];
+  @Input() selected: TRow[] = [];
 
   /**
    * Enable vertical scrollbars
@@ -189,7 +192,7 @@ export class DatatableComponent implements OnInit, DoCheck, AfterViewInit, After
    * The row height; which is necessary
    * to calculate the height for the lazy rendering.
    */
-  @Input() rowHeight: number | 'auto' | ((row?: any) => number) = 30;
+  @Input() rowHeight: number | 'auto' | ((row?: TRow) => number) = 30;
 
   /**
    * Type of column width distribution formula.
@@ -324,12 +327,12 @@ export class DatatableComponent implements OnInit, DoCheck, AfterViewInit, After
    * Array of sorted columns by property and type.
    * Default value: `[]`
    */
-  @Input() sorts: any[] = [];
+  @Input() sorts: SortPropDir[] = [];
 
   /**
    * Css class overrides
    */
-  @Input() cssClasses: any = {
+  @Input() cssClasses: INgxDatatableConfig['cssClasses'] = {
     sortAscending: 'datatable-icon-up',
     sortDescending: 'datatable-icon-down',
     sortUnset: 'datatable-icon-sort-unset',
@@ -346,7 +349,7 @@ export class DatatableComponent implements OnInit, DoCheck, AfterViewInit, After
    * totalMessage     [default] = 'total'
    * selectedMessage  [default] = 'selected'
    */
-  @Input() messages: any = {
+  @Input() messages: INgxDatatableConfig['messages'] = {
     // Message to show when array is presented
     // but contains no values
     emptyMessage: 'No data to display',
@@ -375,7 +378,7 @@ export class DatatableComponent implements OnInit, DoCheck, AfterViewInit, After
    *      return selection !== 'Ethel Price';
    *    }
    */
-  @Input() selectCheck: any;
+  @Input() selectCheck: (value: TRow, index: number, array: TRow[]) => boolean;
 
   /**
    * A function you can use to check whether you want
@@ -385,7 +388,7 @@ export class DatatableComponent implements OnInit, DoCheck, AfterViewInit, After
    *      return row.name !== 'Ethel Price';
    *    }
    */
-  @Input() displayCheck: (row: any, column?: any, value?: any) => boolean;
+  @Input() displayCheck: (row: TRow, column?: any, value?: any) => boolean;
 
   /**
    * A boolean you can use to set the detault behaviour of rows and groups
@@ -446,7 +449,7 @@ export class DatatableComponent implements OnInit, DoCheck, AfterViewInit, After
    *      return row.name !== 'Ethel Price';
    *    }
    */
-  @Input() disableRowCheck: (row: any) => boolean;
+  @Input() disableRowCheck: (row: TRow) => boolean;
 
   /**
    * A flag to enable drag behavior of native HTML5 drag and drop API on rows.
@@ -672,15 +675,15 @@ export class DatatableComponent implements OnInit, DoCheck, AfterViewInit, After
   pageSize: number;
   bodyHeight: number;
   rowCount = 0;
-  rowDiffer: KeyValueDiffer<unknown, unknown>;
+  rowDiffer: IterableDiffer<TRow>;
 
   _offsetX = new BehaviorSubject(0);
   _limit: number | undefined;
   _count = 0;
   _offset = 0;
-  _rows: any[];
-  _groupRowsBy: string;
-  _internalRows: any[];
+  _rows: TRow[];
+  _groupRowsBy: keyof TRow;
+  _internalRows: TRow[];
   _internalColumns: TableColumn[];
   _columns: TableColumn[];
   _columnTemplates: QueryList<DataTableColumnDirective>;
@@ -692,13 +695,13 @@ export class DatatableComponent implements OnInit, DoCheck, AfterViewInit, After
     @SkipSelf() private dimensionsHelper: DimensionsHelper,
     private cd: ChangeDetectorRef,
     element: ElementRef,
-    differs: KeyValueDiffers,
+    differs: IterableDiffers,
     private columnChangesService: ColumnChangesService,
     @Optional() @Inject('configuration') private configuration: INgxDatatableConfig
   ) {
     // get ref to elm for measuring
     this.element = element.nativeElement;
-    this.rowDiffer = differs.find({}).create();
+    this.rowDiffer = differs.find([]).create();
 
     // apply global settings from Module.forRoot
     if (this.configuration) {
@@ -802,14 +805,15 @@ export class DatatableComponent implements OnInit, DoCheck, AfterViewInit, After
    * Creates a map with the data grouped by the user choice of grouping index
    *
    * @param originalArray the original array passed via parameter
-   * @param groupByIndex  the index of the column to group the data by
+   * @param groupBy  the key of the column to group the data by
    */
-  groupArrayBy(originalArray: any, groupBy: any) {
+  groupArrayBy(originalArray: TRow[], groupBy: keyof TRow) {
     // create a map to hold groups with their corresponding results
-    const map = new Map();
+    const map = new Map<TRow[keyof TRow], TRow[]>();
     let i = 0;
 
-    originalArray.forEach((item: any) => {
+    originalArray.forEach(item => {
+      // We know, that groupKey will only return properties of type TableColumnProp. Typescript does not, unfortunately.
       const key = item[groupBy];
       if (!map.has(key)) {
         map.set(key, [item]);
@@ -819,7 +823,7 @@ export class DatatableComponent implements OnInit, DoCheck, AfterViewInit, After
       i++;
     });
 
-    const addGroup = (key: any, value: any) => ({ key, value });
+    const addGroup = (key: TRow[keyof TRow], value: TRow[]) => ({ key, value });
 
     // convert map back to a simple array of objects
     return Array.from(map, x => addGroup(x[0], x[1]));
diff --git a/projects/ngx-datatable/src/lib/types/group.type.ts b/projects/ngx-datatable/src/lib/types/group.type.ts
new file mode 100644
index 000000000..99f767a4f
--- /dev/null
+++ b/projects/ngx-datatable/src/lib/types/group.type.ts
@@ -0,0 +1,10 @@
+/** A Group row */
+export interface Group<TRow> {
+  /** The value by which to rows are grouped. */
+  key: TRow[keyof TRow];
+  /** All rows that are part of the group. */
+  value: TRow[];
+}
+
+/** Type for either a row or a group */
+export type RowOrGroup<TRow> = TRow | Group<TRow>;
diff --git a/projects/ngx-datatable/src/lib/types/sort-prop-dir.type.ts b/projects/ngx-datatable/src/lib/types/sort-prop-dir.type.ts
index 3bfe9d2d2..7d4e1989e 100644
--- a/projects/ngx-datatable/src/lib/types/sort-prop-dir.type.ts
+++ b/projects/ngx-datatable/src/lib/types/sort-prop-dir.type.ts
@@ -2,6 +2,6 @@ import { SortDirection } from './sort-direction.type';
 import { TableColumnProp } from './table-column.type';
 
 export interface SortPropDir {
-  dir: SortDirection;
+  dir: SortDirection | 'desc' | 'asc';
   prop: TableColumnProp;
 }
diff --git a/src/app/basic/basic-auto.component.ts b/src/app/basic/basic-auto.component.ts
index ab793b4cb..df60b731b 100644
--- a/src/app/basic/basic-auto.component.ts
+++ b/src/app/basic/basic-auto.component.ts
@@ -1,5 +1,6 @@
 import { Component } from '@angular/core';
-import { ColumnMode } from 'projects/ngx-datatable/src/public-api';
+import { ColumnMode, TableColumn } from 'projects/ngx-datatable/src/public-api';
+import { Employee } from "../data.model";
 
 @Component({
   selector: 'basic-auto-demo',
@@ -32,11 +33,11 @@ import { ColumnMode } from 'projects/ngx-datatable/src/public-api';
   `
 })
 export class BasicAutoComponent {
-  rows = [];
+  rows: Employee[] = [];
   loadingIndicator = true;
   reorderable = true;
 
-  columns = [{ prop: 'name' }, { name: 'Gender' }, { name: 'Company', sortable: false }];
+  columns: TableColumn[] = [{ prop: 'name' }, { name: 'Gender' }, { name: 'Company', sortable: false }];
 
   ColumnMode = ColumnMode;
 
diff --git a/src/app/basic/basic-fixed.component.ts b/src/app/basic/basic-fixed.component.ts
index 9f7f5ac3d..e73238007 100644
--- a/src/app/basic/basic-fixed.component.ts
+++ b/src/app/basic/basic-fixed.component.ts
@@ -1,5 +1,6 @@
 import { Component } from '@angular/core';
-import { ColumnMode } from 'projects/ngx-datatable/src/public-api';
+import { ColumnMode, TableColumn } from 'projects/ngx-datatable/src/public-api';
+import { Employee } from "../data.model";
 
 @Component({
   selector: 'basic-fixed-demo',
@@ -30,8 +31,8 @@ import { ColumnMode } from 'projects/ngx-datatable/src/public-api';
   `
 })
 export class BasicFixedComponent {
-  rows = [];
-  columns = [{ prop: 'name' }, { name: 'Company' }, { name: 'Gender' }];
+  rows: Employee[] = [];
+  columns: TableColumn[] = [{ prop: 'name' }, { name: 'Company' }, { name: 'Gender' }];
 
   ColumnMode = ColumnMode;
 
diff --git a/src/app/basic/bootstrap.component.ts b/src/app/basic/bootstrap.component.ts
index 6922bf7a7..ee0da49bd 100644
--- a/src/app/basic/bootstrap.component.ts
+++ b/src/app/basic/bootstrap.component.ts
@@ -1,5 +1,6 @@
 import { Component } from '@angular/core';
-import { ColumnMode } from 'projects/ngx-datatable/src/public-api';
+import { ColumnMode, TableColumn } from 'projects/ngx-datatable/src/public-api';
+import { Employee } from "../data.model";
 
 @Component({
   selector: 'basic-bootstrap-theme-demo',
@@ -35,11 +36,11 @@ import { ColumnMode } from 'projects/ngx-datatable/src/public-api';
   `
 })
 export class BootstrapThemeComponent {
-  rows = [];
+  rows: Employee[] = [];
   loadingIndicator = true;
   reorderable = true;
 
-  columns = [
+  columns: TableColumn[] = [
     { prop: 'name', summaryFunc: () => null },
     { name: 'Gender', summaryFunc: cells => this.summaryForGender(cells) },
     { name: 'Company', summaryFunc: () => null }
diff --git a/src/app/basic/contextmenu.component.ts b/src/app/basic/contextmenu.component.ts
index 9555810d0..9c0dbc72e 100644
--- a/src/app/basic/contextmenu.component.ts
+++ b/src/app/basic/contextmenu.component.ts
@@ -1,5 +1,6 @@
 import { Component } from '@angular/core';
-import { ColumnMode } from 'projects/ngx-datatable/src/public-api';
+import { ColumnMode, TableColumn } from 'projects/ngx-datatable/src/public-api';
+import { Employee } from "../data.model";
 
 @Component({
   selector: 'contextmenu-demo',
@@ -44,9 +45,9 @@ import { ColumnMode } from 'projects/ngx-datatable/src/public-api';
   `
 })
 export class ContextMenuDemoComponent {
-  rows = [];
+  rows: Employee[] = [];
 
-  columns = [{ prop: 'name' }, { name: 'Gender' }, { name: 'Company' }];
+  columns: TableColumn[] = [{ prop: 'name' }, { name: 'Gender' }, { name: 'Company' }];
 
   rawEvent: any;
   contextmenuRow: any;
diff --git a/src/app/basic/css.component.ts b/src/app/basic/css.component.ts
index e7012bbdf..a36ecf7ec 100644
--- a/src/app/basic/css.component.ts
+++ b/src/app/basic/css.component.ts
@@ -1,5 +1,6 @@
 import { Component } from '@angular/core';
 import { ColumnMode } from 'projects/ngx-datatable/src/public-api';
+import { FullEmployee } from "../data.model";
 
 @Component({
   selector: 'row-css-demo',
@@ -33,9 +34,8 @@ import { ColumnMode } from 'projects/ngx-datatable/src/public-api';
   `
 })
 export class RowCssComponent {
-  rows = [];
+  rows: FullEmployee[] = [];
   expanded = {};
-  timeout: any;
 
   ColumnMode = ColumnMode;
 
diff --git a/src/app/basic/dark-theme.component.ts b/src/app/basic/dark-theme.component.ts
index 06b63bc58..15c908371 100644
--- a/src/app/basic/dark-theme.component.ts
+++ b/src/app/basic/dark-theme.component.ts
@@ -1,5 +1,6 @@
 import { Component } from '@angular/core';
-import { ColumnMode } from 'projects/ngx-datatable/src/public-api';
+import { ColumnMode, TableColumn } from 'projects/ngx-datatable/src/public-api';
+import { Employee } from "../data.model";
 
 @Component({
   selector: 'basic-dark-theme-demo',
@@ -34,11 +35,11 @@ import { ColumnMode } from 'projects/ngx-datatable/src/public-api';
   `
 })
 export class DarkThemeComponent {
-  rows = [];
+  rows: Employee[] = [];
   loadingIndicator = true;
   reorderable = true;
 
-  columns = [
+  columns: TableColumn[] = [
     { prop: 'name', summaryFunc: () => null },
     { name: 'Gender', summaryFunc: cells => this.summaryForGender(cells) },
     { name: 'Company', summaryFunc: () => null }
diff --git a/src/app/basic/disabled-rows.component.ts b/src/app/basic/disabled-rows.component.ts
index 43792930b..22e4e5f2c 100644
--- a/src/app/basic/disabled-rows.component.ts
+++ b/src/app/basic/disabled-rows.component.ts
@@ -1,5 +1,7 @@
 import { Component } from '@angular/core';
 import { ColumnMode, SelectionType } from 'projects/ngx-datatable/src/public-api';
+import { FullEmployee } from "../data.model";
+import { BehaviorSubject } from "rxjs";
 
 @Component({
   selector: 'disabled-rows-demo',
@@ -60,7 +62,7 @@ import { ColumnMode, SelectionType } from 'projects/ngx-datatable/src/public-api
   `
 })
 export class DisabledRowsComponent {
-  rows = [];
+  rows: (FullEmployee & {isDisabled?: boolean}) [] = [];
 
   ColumnMode = ColumnMode;
   SelectionType = SelectionType;
@@ -82,21 +84,17 @@ export class DisabledRowsComponent {
     req.send();
   }
 
-  isRowDisabled(row: any) {
-    if (!row.isDisabled && row.age < 40) {
-      return false;
-    } else {
-      return true;
-    }
+  isRowDisabled(row: FullEmployee & {isDisabled: boolean}) {
+    return !(!row.isDisabled && row.age < 40);
   }
 
-  disableRow(rowIndex, disableRow$) {
+  disableRow(rowIndex: number, disableRow$: BehaviorSubject<boolean>) {
     this.rows[rowIndex].isDisabled = true;
     this.rows = [...this.rows];
     disableRow$.next(true);
   }
 
-  updateValue(event, cell, rowIndex, disableRow$) {
+  updateValue(event, cell, rowIndex: number, disableRow$: BehaviorSubject<boolean>) {
     this.rows[rowIndex][cell] = event.target.value;
     this.rows = [...this.rows];
     if (disableRow$ && cell === 'age' && this.rows[rowIndex][cell] > 40) {
diff --git a/src/app/basic/dynamic-height.component.ts b/src/app/basic/dynamic-height.component.ts
index d66a1cc85..cbba79050 100644
--- a/src/app/basic/dynamic-height.component.ts
+++ b/src/app/basic/dynamic-height.component.ts
@@ -1,5 +1,6 @@
 import { Component } from '@angular/core';
 import { ColumnMode } from 'projects/ngx-datatable/src/public-api';
+import { FullEmployee } from "../data.model";
 
 @Component({
   selector: 'dynamic-height-demo',
@@ -33,7 +34,7 @@ import { ColumnMode } from 'projects/ngx-datatable/src/public-api';
   `
 })
 export class DynamicHeightComponent {
-  rows = [];
+  rows: FullEmployee[] = [];
   expanded = {};
   timeout: any;
 
diff --git a/src/app/basic/empty.component.ts b/src/app/basic/empty.component.ts
index 82d423ffb..62f5dd13a 100644
--- a/src/app/basic/empty.component.ts
+++ b/src/app/basic/empty.component.ts
@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { ColumnMode } from 'projects/ngx-datatable/src/public-api';
+import { ColumnMode, TableColumn } from 'projects/ngx-datatable/src/public-api';
 
 @Component({
   selector: 'empty-demo',
@@ -30,6 +30,6 @@ import { ColumnMode } from 'projects/ngx-datatable/src/public-api';
   `
 })
 export class BasicEmptyComponent {
-  columns = [{ prop: 'name' }, { name: 'Gender' }, { name: 'Company', sortable: false }];
+  columns: TableColumn[] = [{ prop: 'name' }, { name: 'Gender' }, { name: 'Company', sortable: false }];
   ColumnMode = ColumnMode;
 }
diff --git a/src/app/basic/filter.component.ts b/src/app/basic/filter.component.ts
index 3e2bc8700..4b0085134 100644
--- a/src/app/basic/filter.component.ts
+++ b/src/app/basic/filter.component.ts
@@ -1,6 +1,7 @@
 import { Component, ViewChild } from '@angular/core';
 import { DatatableComponent } from '../../../projects/ngx-datatable/src/lib/components/datatable.component';
-import { ColumnMode } from 'projects/ngx-datatable/src/public-api';
+import { ColumnMode, TableColumn } from 'projects/ngx-datatable/src/public-api';
+import { Employee } from "../data.model";
 
 @Component({
   selector: 'filter-demo',
@@ -39,12 +40,12 @@ import { ColumnMode } from 'projects/ngx-datatable/src/public-api';
   `
 })
 export class FilterBarComponent {
-  rows = [];
+  rows: Employee[] = [];
 
-  temp = [];
+  temp: Employee[] = [];
 
-  columns = [{ prop: 'name' }, { name: 'Company' }, { name: 'Gender' }];
-  @ViewChild(DatatableComponent) table: DatatableComponent;
+  columns: TableColumn[] = [{ prop: 'name' }, { name: 'Company' }, { name: 'Gender' }];
+  @ViewChild(DatatableComponent) table: DatatableComponent<Employee>;
 
   ColumnMode = ColumnMode;
 
@@ -72,13 +73,10 @@ export class FilterBarComponent {
   updateFilter(event) {
     const val = event.target.value.toLowerCase();
 
-    // filter our data
-    const temp = this.temp.filter(function(d) {
+    // filter our data and update the rows
+    this.rows = this.temp.filter(function (d) {
       return d.name.toLowerCase().indexOf(val) !== -1 || !val;
     });
-
-    // update the rows
-    this.rows = temp;
     // Whenever the filter changes, always go back to the first page
     this.table.offset = 0;
   }
diff --git a/src/app/basic/footer.component.ts b/src/app/basic/footer.component.ts
index b075b759a..cf67976ef 100644
--- a/src/app/basic/footer.component.ts
+++ b/src/app/basic/footer.component.ts
@@ -1,5 +1,6 @@
 import { Component } from '@angular/core';
-import { ColumnMode } from 'projects/ngx-datatable/src/public-api';
+import { ColumnMode, TableColumn } from 'projects/ngx-datatable/src/public-api';
+import { Employee } from "../data.model";
 
 @Component({
   selector: 'footer-demo',
@@ -46,9 +47,9 @@ import { ColumnMode } from 'projects/ngx-datatable/src/public-api';
   `
 })
 export class FooterDemoComponent {
-  rows = [];
+  rows: Employee[] = [];
 
-  columns = [{ prop: 'name' }, { name: 'Gender' }, { name: 'Company' }];
+  columns: TableColumn[] = [{ prop: 'name' }, { name: 'Gender' }, { name: 'Company' }];
 
   ColumnMode = ColumnMode;
 
diff --git a/src/app/basic/fullscreen.component.ts b/src/app/basic/fullscreen.component.ts
index d6b3b608c..6ec840dee 100644
--- a/src/app/basic/fullscreen.component.ts
+++ b/src/app/basic/fullscreen.component.ts
@@ -1,5 +1,6 @@
 import { Component } from '@angular/core';
 import { ColumnMode } from 'projects/ngx-datatable/src/public-api';
+import { FullEmployee } from "../data.model";
 
 @Component({
   selector: 'full-screen-demo',
@@ -38,7 +39,7 @@ import { ColumnMode } from 'projects/ngx-datatable/src/public-api';
   `
 })
 export class FullScreenComponent {
-  rows = [];
+  rows: FullEmployee[] = [];
 
   ColumnMode = ColumnMode;
 
diff --git a/src/app/basic/inline.component.ts b/src/app/basic/inline.component.ts
index 8329d588d..08061af6d 100644
--- a/src/app/basic/inline.component.ts
+++ b/src/app/basic/inline.component.ts
@@ -1,5 +1,6 @@
 import { Component } from '@angular/core';
 import { ColumnMode } from 'projects/ngx-datatable/src/public-api';
+import { Employee } from "../data.model";
 
 @Component({
   selector: 'inline-edit-demo',
@@ -75,7 +76,7 @@ import { ColumnMode } from 'projects/ngx-datatable/src/public-api';
 })
 export class InlineEditComponent {
   editing = {};
-  rows = [];
+  rows: Employee[] = [];
 
   ColumnMode = ColumnMode;
 
@@ -96,7 +97,7 @@ export class InlineEditComponent {
     req.send();
   }
 
-  updateValue(event, cell, rowIndex) {
+  updateValue(event, cell, rowIndex: number) {
     console.log('inline editing rowIndex', rowIndex);
     this.editing[rowIndex + '-' + cell] = false;
     this.rows[rowIndex][cell] = event.target.value;
diff --git a/src/app/basic/live.component.ts b/src/app/basic/live.component.ts
index 179993621..4dae5c32d 100644
--- a/src/app/basic/live.component.ts
+++ b/src/app/basic/live.component.ts
@@ -1,5 +1,6 @@
 import { ChangeDetectorRef, Component, ViewChild } from '@angular/core';
-import { ColumnMode } from 'projects/ngx-datatable/src/public-api';
+import { ColumnMode, DatatableComponent } from 'projects/ngx-datatable/src/public-api';
+import { Employee } from "../data.model";
 
 @Component({
   selector: 'live-data-demo',
@@ -41,13 +42,13 @@ import { ColumnMode } from 'projects/ngx-datatable/src/public-api';
   `
 })
 export class LiveDataComponent {
-  @ViewChild('mydatatable') mydatatable: any;
+  @ViewChild('mydatatable') mydatatable: DatatableComponent<Employee & {updated: string}>;
 
   count = 50;
-  rows: any[] = [];
+  rows: (Employee & {updated: string})[] = [];
   active = true;
-  temp: any[] = [];
-  cols: any = ['name', 'gender', 'company'];
+  temp: (Employee & {updated: string})[] = [];
+  cols = ['name', 'gender', 'company'];
 
   ColumnMode = ColumnMode;
 
diff --git a/src/app/basic/multiple.component.ts b/src/app/basic/multiple.component.ts
index 21926e932..9da1f6bf6 100644
--- a/src/app/basic/multiple.component.ts
+++ b/src/app/basic/multiple.component.ts
@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { ColumnMode } from 'projects/ngx-datatable/src/public-api';
+import { ColumnMode, TableColumn } from 'projects/ngx-datatable/src/public-api';
 
 @Component({
   selector: 'multiple-tables-demo',
@@ -40,9 +40,9 @@ import { ColumnMode } from 'projects/ngx-datatable/src/public-api';
   `
 })
 export class MultipleTablesComponent {
-  columns1 = [{ prop: 'name' }, { name: 'Gender' }, { name: 'Company' }];
+  columns1: TableColumn[] = [{ prop: 'name' }, { name: 'Gender' }, { name: 'Company' }];
 
-  columns2 = [{ prop: 'name', name: 'Name' }, { name: 'Gender' }];
+  columns2: TableColumn[] = [{ prop: 'name', name: 'Name' }, { name: 'Gender' }];
 
   rows1 = [
     { name: 'Larry', gender: 'Male', company: 'Cisco' },
diff --git a/src/app/basic/responsive.component.ts b/src/app/basic/responsive.component.ts
index 36631bf2d..bde5aa601 100644
--- a/src/app/basic/responsive.component.ts
+++ b/src/app/basic/responsive.component.ts
@@ -1,5 +1,6 @@
 import { Component, ViewChild, ViewEncapsulation } from '@angular/core';
-import { ColumnMode } from 'projects/ngx-datatable/src/public-api';
+import { ColumnMode, DatatableComponent } from 'projects/ngx-datatable/src/public-api';
+import { FullEmployee } from "../data.model";
 
 @Component({
   selector: 'responsive-demo',
@@ -115,9 +116,9 @@ import { ColumnMode } from 'projects/ngx-datatable/src/public-api';
   encapsulation: ViewEncapsulation.None
 })
 export class ResponsiveComponent {
-  @ViewChild('myTable') table: any;
+  @ViewChild('myTable') table: DatatableComponent<FullEmployee>;
 
-  rows: any[] = [];
+  rows: FullEmployee[] = [];
   expanded: any = {};
   timeout: any;
 
diff --git a/src/app/basic/row-detail.component.ts b/src/app/basic/row-detail.component.ts
index 8a8d6a85b..fa034993e 100644
--- a/src/app/basic/row-detail.component.ts
+++ b/src/app/basic/row-detail.component.ts
@@ -1,5 +1,6 @@
 import { Component, ViewChild, ViewEncapsulation } from '@angular/core';
-import { ColumnMode } from 'projects/ngx-datatable/src/public-api';
+import { ColumnMode, DatatableComponent } from 'projects/ngx-datatable/src/public-api';
+import { FullEmployee } from "../data.model";
 
 @Component({
   selector: 'row-details-demo',
@@ -89,9 +90,9 @@ import { ColumnMode } from 'projects/ngx-datatable/src/public-api';
   encapsulation: ViewEncapsulation.None
 })
 export class RowDetailsComponent {
-  @ViewChild('myTable') table: any;
+  @ViewChild('myTable') table: DatatableComponent<FullEmployee>;
 
-  rows: any[] = [];
+  rows: FullEmployee[] = [];
   expanded: any = {};
   timeout: any;
 
diff --git a/src/app/basic/row-grouping.component.ts b/src/app/basic/row-grouping.component.ts
index c7ef22549..56e33345e 100644
--- a/src/app/basic/row-grouping.component.ts
+++ b/src/app/basic/row-grouping.component.ts
@@ -1,6 +1,6 @@
-import { Component, ViewChild, ViewEncapsulation } from '@angular/core';
-import { NgStyle } from '@angular/common';
-import { ColumnMode } from 'projects/ngx-datatable/src/public-api';
+import { Component, ViewChild } from '@angular/core';
+import { ColumnMode, DatatableComponent } from 'projects/ngx-datatable/src/public-api';
+import { GroupedEmployee } from "../data.model";
 
 @Component({
   selector: 'row-grouping-demo',
@@ -119,15 +119,10 @@ import { ColumnMode } from 'projects/ngx-datatable/src/public-api';
   `
 })
 export class RowGroupingComponent {
-  @ViewChild('myTable') table: any;
+  @ViewChild('myTable') table: DatatableComponent<GroupedEmployee>;
 
-  funder = [];
-  calculated = [];
-  pending = [];
-  groups = [];
-
-  editing = {};
-  rows = [];
+  editing: Record<string, boolean> = {};
+  rows: GroupedEmployee[] = [];
 
   ColumnMode = ColumnMode;
 
@@ -148,17 +143,6 @@ export class RowGroupingComponent {
     req.send();
   }
 
-  getGroupRowHeight(group, rowHeight) {
-    let style = {};
-
-    style = {
-      height: group.length * 40 + 'px',
-      width: '100%'
-    };
-
-    return style;
-  }
-
   checkGroup(event, row, rowIndex, group) {
     let groupStatus = 'Pending';
     let expectedPaymentDealtWith = true;
diff --git a/src/app/basic/rx.component.ts b/src/app/basic/rx.component.ts
index 9fdccfe5d..173309623 100644
--- a/src/app/basic/rx.component.ts
+++ b/src/app/basic/rx.component.ts
@@ -1,6 +1,7 @@
 import { Component } from '@angular/core';
 import { Observable } from 'rxjs';
-import { ColumnMode } from 'projects/ngx-datatable/src/public-api';
+import { ColumnMode, TableColumn } from 'projects/ngx-datatable/src/public-api';
+import { Employee } from "../data.model";
 
 @Component({
   selector: 'rx-demo',
@@ -28,9 +29,9 @@ import { ColumnMode } from 'projects/ngx-datatable/src/public-api';
   `
 })
 export class RxDemoComponent {
-  rows: Observable<any[]>;
+  rows: Observable<Employee[]>;
 
-  columns = [{ name: 'Name' }, { name: 'Gender' }, { name: 'Company' }];
+  columns: TableColumn[] = [{ name: 'Name' }, { name: 'Gender' }, { name: 'Company' }];
 
   ColumnMode = ColumnMode;
 
diff --git a/src/app/basic/scrolling-dynamically.component.ts b/src/app/basic/scrolling-dynamically.component.ts
index 367709ea0..99b011f60 100644
--- a/src/app/basic/scrolling-dynamically.component.ts
+++ b/src/app/basic/scrolling-dynamically.component.ts
@@ -1,5 +1,6 @@
 import { Component } from '@angular/core';
 import { ColumnMode } from 'projects/ngx-datatable/src/public-api';
+import { Employee } from "../data.model";
 
 @Component({
   selector: 'scrolling-dynamically-demo',
@@ -77,8 +78,8 @@ import { ColumnMode } from 'projects/ngx-datatable/src/public-api';
   `
 })
 export class ScollingDynamicallyComponent {
-  editing = {};
-  rows = [];
+  editing: Record<string, boolean> = {};
+  rows: Employee[] = [];
 
   ColumnMode = ColumnMode;
 
diff --git a/src/app/basic/scrolling.component.ts b/src/app/basic/scrolling.component.ts
index 0a70dbe08..af726694e 100644
--- a/src/app/basic/scrolling.component.ts
+++ b/src/app/basic/scrolling.component.ts
@@ -1,4 +1,5 @@
 import { Component } from '@angular/core';
+import { FullEmployee } from "../data.model";
 
 @Component({
   selector: 'horz-vert-scrolling-demo',
@@ -35,7 +36,7 @@ import { Component } from '@angular/core';
   `
 })
 export class HorzVertScrollingComponent {
-  rows = [];
+  rows: FullEmployee[] = [];
 
   constructor() {
     this.fetch(data => {
diff --git a/src/app/basic/tabs.component.ts b/src/app/basic/tabs.component.ts
index 92be7f227..1edd2c899 100644
--- a/src/app/basic/tabs.component.ts
+++ b/src/app/basic/tabs.component.ts
@@ -1,5 +1,6 @@
 import { Component } from '@angular/core';
 import { ColumnMode } from 'projects/ngx-datatable/src/public-api';
+import { FullEmployee } from "../data.model";
 
 @Component({
   selector: 'tabs-demo',
@@ -66,7 +67,7 @@ import { ColumnMode } from 'projects/ngx-datatable/src/public-api';
   `
 })
 export class TabsDemoComponent {
-  rows = [];
+  rows: FullEmployee[] = [];
 
   tab1 = true;
   tab2 = false;
diff --git a/src/app/basic/virtual.component.ts b/src/app/basic/virtual.component.ts
index ef6f57d3b..882206e58 100644
--- a/src/app/basic/virtual.component.ts
+++ b/src/app/basic/virtual.component.ts
@@ -1,5 +1,6 @@
 import { Component } from '@angular/core';
 import { ColumnMode } from 'projects/ngx-datatable/src/public-api';
+import { FullEmployee } from "../data.model";
 
 @Component({
   selector: 'virtual-scroll-demo',
@@ -42,7 +43,7 @@ import { ColumnMode } from 'projects/ngx-datatable/src/public-api';
   `
 })
 export class VirtualScrollComponent {
-  rows;
+  rows: FullEmployee[];
   expanded = {};
   timeout: any;
 
diff --git a/src/app/columns/column-flex.component.ts b/src/app/columns/column-flex.component.ts
index 153060293..378f4968d 100644
--- a/src/app/columns/column-flex.component.ts
+++ b/src/app/columns/column-flex.component.ts
@@ -1,5 +1,6 @@
 import { Component } from '@angular/core';
 import { ColumnMode } from 'projects/ngx-datatable/src/public-api';
+import { Employee } from "../data.model";
 
 @Component({
   selector: 'column-flex-demo',
@@ -44,7 +45,7 @@ import { ColumnMode } from 'projects/ngx-datatable/src/public-api';
   `
 })
 export class ColumnFlexComponent {
-  rows = [];
+  rows: Employee[] = [];
 
   ColumnMode = ColumnMode;
 
diff --git a/src/app/columns/column-force.component.ts b/src/app/columns/column-force.component.ts
index e6a49e40c..42b59e588 100644
--- a/src/app/columns/column-force.component.ts
+++ b/src/app/columns/column-force.component.ts
@@ -1,5 +1,6 @@
 import { Component } from '@angular/core';
 import { ColumnMode } from 'projects/ngx-datatable/src/public-api';
+import { Employee } from "../data.model";
 
 @Component({
   selector: 'column-force-demo',
@@ -44,7 +45,7 @@ import { ColumnMode } from 'projects/ngx-datatable/src/public-api';
   `
 })
 export class ColumnForceComponent {
-  rows = [];
+  rows: Employee[] = [];
 
   ColumnMode = ColumnMode;
 
diff --git a/src/app/columns/column-reorder.component.ts b/src/app/columns/column-reorder.component.ts
index c2289d99b..bc97fb3ee 100644
--- a/src/app/columns/column-reorder.component.ts
+++ b/src/app/columns/column-reorder.component.ts
@@ -1,5 +1,6 @@
 import { Component } from '@angular/core';
-import { ColumnMode } from 'projects/ngx-datatable/src/public-api';
+import { ColumnMode, TableColumn } from 'projects/ngx-datatable/src/public-api';
+import { Employee } from "../data.model";
 
 @Component({
   selector: 'column-reorder-demo',
@@ -56,12 +57,12 @@ import { ColumnMode } from 'projects/ngx-datatable/src/public-api';
   `
 })
 export class ColumnReorderComponent {
-  rows = [];
+  rows: Employee[] = [];
   loadingIndicator = true;
   reorderable = true;
   swapColumns = false;
 
-  columns = [{ prop: 'name' }, { name: 'Gender' }, { name: 'Company', sortable: false }];
+  columns: TableColumn[] = [{ prop: 'name' }, { name: 'Gender' }, { name: 'Company', sortable: false }];
 
   ColumnMode = ColumnMode;
 
diff --git a/src/app/columns/column-standard.component.ts b/src/app/columns/column-standard.component.ts
index cc49fee5a..d11599657 100644
--- a/src/app/columns/column-standard.component.ts
+++ b/src/app/columns/column-standard.component.ts
@@ -1,5 +1,6 @@
 import { Component } from '@angular/core';
 import { ColumnMode } from 'projects/ngx-datatable/src/public-api';
+import { Employee } from "../data.model";
 
 @Component({
   selector: 'column-standard-demo',
@@ -44,7 +45,7 @@ import { ColumnMode } from 'projects/ngx-datatable/src/public-api';
   `
 })
 export class ColumnStandardComponent {
-  rows = [];
+  rows: Employee[] = [];
 
   ColumnMode = ColumnMode;
 
diff --git a/src/app/columns/column-toggle.component.ts b/src/app/columns/column-toggle.component.ts
index 9298d553e..a4546d344 100644
--- a/src/app/columns/column-toggle.component.ts
+++ b/src/app/columns/column-toggle.component.ts
@@ -1,5 +1,6 @@
 import { Component } from '@angular/core';
-import { ColumnMode } from 'projects/ngx-datatable/src/public-api';
+import { ColumnMode, TableColumn } from 'projects/ngx-datatable/src/public-api';
+import { Employee } from "../data.model";
 
 @Component({
   selector: 'column-toggle-demo',
@@ -41,7 +42,7 @@ import { ColumnMode } from 'projects/ngx-datatable/src/public-api';
   `
 })
 export class ColumnToggleComponent {
-  rows = [
+  rows: Employee[] = [
     {
       name: 'Claudine Neal',
       gender: 'female',
@@ -54,13 +55,13 @@ export class ColumnToggleComponent {
     }
   ];
 
-  columns = [{ name: 'Name' }, { name: 'Gender' }, { name: 'Company' }];
+  columns: TableColumn[] = [{ name: 'Name' }, { name: 'Gender' }, { name: 'Company' }];
 
-  allColumns = [{ name: 'Name' }, { name: 'Gender' }, { name: 'Company' }];
+  allColumns: TableColumn[] = [{ name: 'Name' }, { name: 'Gender' }, { name: 'Company' }];
 
   ColumnMode = ColumnMode;
 
-  toggle(col) {
+  toggle(col: TableColumn) {
     const isChecked = this.isChecked(col);
 
     if (isChecked) {
@@ -70,7 +71,7 @@ export class ColumnToggleComponent {
     }
   }
 
-  isChecked(col) {
+  isChecked(col: TableColumn) {
     return (
       this.columns.find(c => c.name === col.name) !== undefined
     );
diff --git a/src/app/columns/pinning.component.ts b/src/app/columns/pinning.component.ts
index e6a0f1c07..4cf2ee658 100644
--- a/src/app/columns/pinning.component.ts
+++ b/src/app/columns/pinning.component.ts
@@ -1,5 +1,6 @@
 import { Component } from '@angular/core';
 import { ColumnMode } from 'projects/ngx-datatable/src/public-api';
+import { FullEmployee } from "../data.model";
 
 @Component({
   selector: 'column-pinning-demo',
@@ -37,7 +38,7 @@ import { ColumnMode } from 'projects/ngx-datatable/src/public-api';
   `
 })
 export class ColumnPinningComponent {
-  rows = [];
+  rows: FullEmployee[] = [];
 
   ColumnMode = ColumnMode;
 
diff --git a/src/app/data.model.ts b/src/app/data.model.ts
new file mode 100644
index 000000000..ddd130197
--- /dev/null
+++ b/src/app/data.model.ts
@@ -0,0 +1,30 @@
+export interface Employee {
+  name: string;
+  gender: string;
+  company: string;
+  age?: number;
+}
+
+export interface FullEmployee {
+  id: number;
+  name: string;
+  gender: string;
+  age: number;
+  address: {
+    state: string;
+    city: string;
+  }
+}
+
+export interface GroupedEmployee {
+  exppayyes?: number;
+  exppayno?: number;
+  exppaypending?: number;
+  source?: string;
+  name: string;
+  gender: string;
+  company: string;
+  age: number;
+  comment?: string;
+  groupcomment?: string;
+}
diff --git a/src/app/paging/mock-server-results-service.ts b/src/app/paging/mock-server-results-service.ts
index d80920e70..5365eb158 100644
--- a/src/app/paging/mock-server-results-service.ts
+++ b/src/app/paging/mock-server-results-service.ts
@@ -2,10 +2,10 @@ import { Injectable } from '@angular/core';
 import { Observable, of } from 'rxjs';
 import { delay, map } from 'rxjs/operators';
 import { PagedData } from './model/paged-data';
-import { CorporateEmployee } from './model/corporate-employee';
 import { Page } from './model/page';
 
 import companyData from 'src/assets/data/company.json';
+import { Employee } from "../data.model";
 
 /**
  * A server used to mock a paged data result from a server
@@ -17,7 +17,7 @@ export class MockServerResultsService {
    * @param page The selected page
    * @returns An observable containing the employee data
    */
-  public getResults(page: Page): Observable<PagedData<CorporateEmployee>> {
+  public getResults(page: Page): Observable<PagedData<Employee>> {
     return of(companyData)
       .pipe(map(d => this.getPagedData(page)))
       .pipe(delay(1000 * Math.random()));
@@ -28,18 +28,15 @@ export class MockServerResultsService {
    * @param page The page data used to get the selected data from companyData
    * @returns An array of the selected data and page
    */
-  private getPagedData(page: Page): PagedData<CorporateEmployee> {
-    const pagedData = new PagedData<CorporateEmployee>();
+  private getPagedData(page: Page): PagedData<Employee> {
+    const data: Employee[] = []
     page.totalElements = companyData.length;
     page.totalPages = page.totalElements / page.size;
     const start = page.pageNumber * page.size;
     const end = Math.min(start + page.size, page.totalElements);
     for (let i = start; i < end; i++) {
-      const jsonObj = companyData[i];
-      const employee = new CorporateEmployee(jsonObj.name, jsonObj.gender, jsonObj.company, jsonObj.age);
-      pagedData.data.push(employee);
+      data.push(companyData[i]);
     }
-    pagedData.page = page;
-    return pagedData;
+    return { page, data };
   }
 }
diff --git a/src/app/paging/model/corporate-employee.ts b/src/app/paging/model/corporate-employee.ts
deleted file mode 100644
index 692640184..000000000
--- a/src/app/paging/model/corporate-employee.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-/**
- * A model for an individual corporate employee
- */
-export class CorporateEmployee {
-  name: string;
-  gender: string;
-  company: string;
-  age: number;
-
-  constructor(name: string, gender: string, company: string, age: number) {
-    this.name = name;
-    this.gender = gender;
-    this.company = company;
-    this.age = age;
-  }
-}
diff --git a/src/app/paging/model/page.ts b/src/app/paging/model/page.ts
index 84421da31..98fb35aff 100644
--- a/src/app/paging/model/page.ts
+++ b/src/app/paging/model/page.ts
@@ -1,13 +1,13 @@
 /**
  * An object used to get page information from the server
  */
-export class Page {
+export interface Page {
   // The number of elements in the page
-  size = 0;
+  size: number;
   // The total number of elements
-  totalElements = 0;
+  totalElements: number;
   // The total number of pages
-  totalPages = 0;
+  totalPages: number;
   // The current page number
-  pageNumber = 0;
+  pageNumber: number;
 }
diff --git a/src/app/paging/model/paged-data.ts b/src/app/paging/model/paged-data.ts
index 7121734d1..886cde0f8 100644
--- a/src/app/paging/model/paged-data.ts
+++ b/src/app/paging/model/paged-data.ts
@@ -3,7 +3,7 @@ import { Page } from './page';
 /**
  * An array of data with an associated page object used for paging
  */
-export class PagedData<T> {
-  data = new Array<T>();
-  page = new Page();
+export interface PagedData<T> {
+  data: T[]
+  page: Page;
 }
diff --git a/src/app/paging/paging-client.component.ts b/src/app/paging/paging-client.component.ts
index 5f01d116e..d7e99bb28 100644
--- a/src/app/paging/paging-client.component.ts
+++ b/src/app/paging/paging-client.component.ts
@@ -1,5 +1,6 @@
 import { Component } from '@angular/core';
 import { ColumnMode } from 'projects/ngx-datatable/src/public-api';
+import { Employee } from "../data.model";
 
 @Component({
   selector: 'client-paging-demo',
@@ -31,7 +32,7 @@ import { ColumnMode } from 'projects/ngx-datatable/src/public-api';
   `
 })
 export class ClientPagingComponent {
-  rows = [];
+  rows: Employee[] = [];
 
   ColumnMode = ColumnMode;
 
diff --git a/src/app/paging/paging-scrolling-novirtualization.component.ts b/src/app/paging/paging-scrolling-novirtualization.component.ts
index f13a0cfb9..763d8ea64 100644
--- a/src/app/paging/paging-scrolling-novirtualization.component.ts
+++ b/src/app/paging/paging-scrolling-novirtualization.component.ts
@@ -1,8 +1,8 @@
 import { Component, OnInit } from '@angular/core';
 import { MockServerResultsService } from './mock-server-results-service';
-import { CorporateEmployee } from './model/corporate-employee';
 import { Page } from './model/page';
 import { ColumnMode } from 'projects/ngx-datatable/src/public-api';
+import { Employee } from "../data.model";
 
 @Component({
   selector: 'paging-scrolling-novirtualization-demo',
@@ -41,15 +41,17 @@ import { ColumnMode } from 'projects/ngx-datatable/src/public-api';
   `
 })
 export class PagingScrollingNoVirtualizationComponent implements OnInit{
-  page = new Page();
-  rows = new Array<CorporateEmployee>();
+  page: Page = {
+    pageNumber: 0,
+    size: 20,
+    totalElements: 0,
+    totalPages: 0
+  }
+  rows: Employee[] = [];
 
   ColumnMode = ColumnMode;
 
-  constructor(private serverResultsService: MockServerResultsService) {
-    this.page.pageNumber = 0;
-    this.page.size = 20;
-  }
+  constructor(private serverResultsService: MockServerResultsService) {}
 
   ngOnInit() {
     this.setPage({ offset: 0 });
diff --git a/src/app/paging/paging-server.component.ts b/src/app/paging/paging-server.component.ts
index 89ace654d..47a830a90 100644
--- a/src/app/paging/paging-server.component.ts
+++ b/src/app/paging/paging-server.component.ts
@@ -1,8 +1,8 @@
 import { Component, OnInit } from '@angular/core';
 import { MockServerResultsService } from './mock-server-results-service';
-import { CorporateEmployee } from './model/corporate-employee';
 import { Page } from './model/page';
 import { ColumnMode } from 'projects/ngx-datatable/src/public-api';
+import { Employee } from "../data.model";
 
 @Component({
   selector: 'server-paging-demo',
@@ -39,15 +39,17 @@ import { ColumnMode } from 'projects/ngx-datatable/src/public-api';
   `
 })
 export class ServerPagingComponent implements OnInit{
-  page = new Page();
-  rows = new Array<CorporateEmployee>();
+  page: Page = {
+    pageNumber: 0,
+    size: 20,
+    totalElements: 0,
+    totalPages: 0
+  }
+  rows: Employee[] = []
 
   ColumnMode = ColumnMode;
 
-  constructor(private serverResultsService: MockServerResultsService) {
-    this.page.pageNumber = 0;
-    this.page.size = 20;
-  }
+  constructor(private serverResultsService: MockServerResultsService) {}
 
   ngOnInit() {
     this.setPage({ offset: 0 });
diff --git a/src/app/paging/paging-virtual.component.ts b/src/app/paging/paging-virtual.component.ts
index 91fa16a06..fd492ea94 100644
--- a/src/app/paging/paging-virtual.component.ts
+++ b/src/app/paging/paging-virtual.component.ts
@@ -1,9 +1,8 @@
 import { Component } from '@angular/core';
 import { MockServerResultsService } from './mock-server-results-service';
-import { CorporateEmployee } from './model/corporate-employee';
 import { Page } from './model/page';
 import { ColumnMode } from 'projects/ngx-datatable/src/public-api';
-import { delay } from 'rxjs/operators';
+import { Employee } from "../data.model";
 
 interface PageInfo {
   offset: number;
@@ -58,8 +57,8 @@ interface PageInfo {
 export class VirtualPagingComponent {
   totalElements: number;
   pageNumber: number;
-  rows: CorporateEmployee[];
-  cache: any = {};
+  rows: Employee[];
+  cache: Record<string, boolean> = {};
   cachePageSize = 0;
 
   ColumnMode = ColumnMode;
@@ -81,9 +80,12 @@ export class VirtualPagingComponent {
     // This is the scroll position in rows
     const rowOffset = pageInfo.offset * pageInfo.pageSize;
 
-    const page = new Page();
-    page.size = pageInfo.pageSize;
-    page.pageNumber = Math.floor(rowOffset / page.size);
+    const page: Page = {
+      pageNumber: Math.floor(rowOffset / pageInfo.pageSize),
+      size: pageInfo.pageSize,
+      totalElements: 0,
+      totalPages: 0
+    }
 
     // We keep a index of server loaded pages so we don't load same data twice
     // This is based on the server page not the UI
@@ -104,7 +106,7 @@ export class VirtualPagingComponent {
       // Create array to store data if missing
       // The array should have the correct number of with "holes" for missing data
       if (!this.rows) {
-        this.rows = new Array<CorporateEmployee>(this.totalElements || 0);
+        this.rows = new Array<Employee>(this.totalElements || 0);
       }
 
       // Calc starting row offset
diff --git a/src/app/paging/scrolling-server.component.ts b/src/app/paging/scrolling-server.component.ts
index 643e0a6a1..5a0d27fc3 100644
--- a/src/app/paging/scrolling-server.component.ts
+++ b/src/app/paging/scrolling-server.component.ts
@@ -1,10 +1,11 @@
 import { Component, ElementRef, Injectable, OnInit } from '@angular/core';
 import { Observable, of } from 'rxjs';
 import { delay, map } from 'rxjs/operators';
-import { CorporateEmployee } from './model/corporate-employee';
 
 import data from 'src/assets/data/company.json';
 import { ColumnMode } from 'projects/ngx-datatable/src/public-api';
+import { Employee } from "../data.model";
+
 const companyData = data as any[];
 
 class PagedData<T> {
@@ -16,7 +17,7 @@ class PagedData<T> {
  */
 @Injectable()
 export class MockServerResultsService {
-  public getResults(offset: number, limit: number): Observable<PagedData<CorporateEmployee>> {
+  public getResults(offset: number, limit: number): Observable<PagedData<Employee>> {
     return of(companyData.slice(offset, offset + limit)).pipe(
       delay(new Date(Date.now() + 500)),
       map(d => ({ data: d }))
@@ -61,7 +62,7 @@ export class ServerScrollingComponent implements OnInit {
   readonly rowHeight = 50;
   readonly pageLimit = 10;
 
-  rows: CorporateEmployee[] = [];
+  rows: Employee[] = [];
   isLoading: boolean;
 
   ColumnMode = ColumnMode;
diff --git a/src/app/selection/selection-cell.component.ts b/src/app/selection/selection-cell.component.ts
index c007135ab..208330565 100644
--- a/src/app/selection/selection-cell.component.ts
+++ b/src/app/selection/selection-cell.component.ts
@@ -1,5 +1,6 @@
 import { Component } from '@angular/core';
-import { ColumnMode, SelectionType } from 'projects/ngx-datatable/src/public-api';
+import { ColumnMode, SelectionType, TableColumn } from 'projects/ngx-datatable/src/public-api';
+import { Employee } from "../data.model";
 
 @Component({
   selector: 'cell-selection-demo',
@@ -34,9 +35,9 @@ import { ColumnMode, SelectionType } from 'projects/ngx-datatable/src/public-api
   `
 })
 export class CellSelectionComponent {
-  rows: any[] = [];
-  selected: any[] = [];
-  columns: any[] = [{ prop: 'name' }, { name: 'Company' }, { name: 'Gender' }];
+  rows: Employee[] = [];
+  selected: Employee[] = [];
+  columns: TableColumn[] = [{ prop: 'name' }, { name: 'Company' }, { name: 'Gender' }];
 
   ColumnMode = ColumnMode;
   SelectionType = SelectionType;
diff --git a/src/app/selection/selection-chkbox-template.component.ts b/src/app/selection/selection-chkbox-template.component.ts
index 85a238e72..d9b58e47d 100644
--- a/src/app/selection/selection-chkbox-template.component.ts
+++ b/src/app/selection/selection-chkbox-template.component.ts
@@ -1,5 +1,6 @@
 import { Component } from '@angular/core';
 import { ColumnMode, SelectionType } from 'projects/ngx-datatable/src/public-api';
+import { Employee } from "../data.model";
 
 @Component({
   selector: 'chkbox-selection-template-demo',
@@ -81,8 +82,8 @@ import { ColumnMode, SelectionType } from 'projects/ngx-datatable/src/public-api
   `
 })
 export class CustomCheckboxSelectionComponent {
-  rows = [];
-  selected = [];
+  rows: Employee[] = [];
+  selected: Employee[] = [];
 
   ColumnMode = ColumnMode;
   SelectionType = SelectionType;
diff --git a/src/app/selection/selection-chkbox.component.ts b/src/app/selection/selection-chkbox.component.ts
index 85af0a4b7..c98cab606 100644
--- a/src/app/selection/selection-chkbox.component.ts
+++ b/src/app/selection/selection-chkbox.component.ts
@@ -1,5 +1,6 @@
 import { Component } from '@angular/core';
 import { ColumnMode, SelectionType } from 'projects/ngx-datatable/src/public-api';
+import { Employee } from "../data.model";
 
 @Component({
   selector: 'chkbox-selection-demo',
@@ -69,8 +70,8 @@ import { ColumnMode, SelectionType } from 'projects/ngx-datatable/src/public-api
   `
 })
 export class CheckboxSelectionComponent {
-  rows = [];
-  selected = [];
+  rows: Employee[] = [];
+  selected: Employee[] = [];
 
   ColumnMode = ColumnMode;
   SelectionType = SelectionType;
diff --git a/src/app/selection/selection-disabled.component.ts b/src/app/selection/selection-disabled.component.ts
index cf0c4b86d..5ad952876 100644
--- a/src/app/selection/selection-disabled.component.ts
+++ b/src/app/selection/selection-disabled.component.ts
@@ -1,5 +1,6 @@
 import { Component } from '@angular/core';
-import { ColumnMode, SelectionType } from 'projects/ngx-datatable/src/public-api';
+import { ColumnMode, SelectionType, TableColumn } from 'projects/ngx-datatable/src/public-api';
+import { Employee } from "../data.model";
 
 @Component({
   selector: 'multidisable-selection-demo',
@@ -48,11 +49,11 @@ import { ColumnMode, SelectionType } from 'projects/ngx-datatable/src/public-api
   `
 })
 export class MultiDisableSelectionComponent {
-  rows = [];
+  rows: Employee[] = [];
 
-  selected = [];
+  selected: Employee[] = [];
 
-  columns: any[] = [{ prop: 'name' }, { name: 'Company' }, { name: 'Gender' }];
+  columns: TableColumn[] = [{ prop: 'name' }, { name: 'Company' }, { name: 'Gender' }];
 
   ColumnMode = ColumnMode;
   SelectionType = SelectionType;
diff --git a/src/app/selection/selection-multi-click-chkbox.component.ts b/src/app/selection/selection-multi-click-chkbox.component.ts
index f47d774d2..9588db733 100644
--- a/src/app/selection/selection-multi-click-chkbox.component.ts
+++ b/src/app/selection/selection-multi-click-chkbox.component.ts
@@ -1,5 +1,6 @@
 import { Component } from '@angular/core';
 import { ColumnMode, SelectionType } from 'projects/ngx-datatable/src/public-api';
+import { Employee } from "../data.model";
 
 @Component({
   selector: 'multi-click-chkbox-selection-demo',
@@ -70,8 +71,8 @@ import { ColumnMode, SelectionType } from 'projects/ngx-datatable/src/public-api
   `
 })
 export class MultiClickCheckboxSelectionComponent {
-  rows = [];
-  selected = [];
+  rows: Employee[] = [];
+  selected: Employee[] = [];
 
   ColumnMode = ColumnMode;
   SelectionType = SelectionType;
diff --git a/src/app/selection/selection-multi-click.component.ts b/src/app/selection/selection-multi-click.component.ts
index 34e0a422e..dc172f740 100644
--- a/src/app/selection/selection-multi-click.component.ts
+++ b/src/app/selection/selection-multi-click.component.ts
@@ -1,5 +1,6 @@
 import { Component } from '@angular/core';
-import { ColumnMode, SelectionType } from 'projects/ngx-datatable/src/public-api';
+import { ColumnMode, SelectionType, TableColumn } from 'projects/ngx-datatable/src/public-api';
+import { Employee } from "../data.model";
 
 @Component({
   selector: 'multi-click-selection-demo',
@@ -51,11 +52,11 @@ import { ColumnMode, SelectionType } from 'projects/ngx-datatable/src/public-api
   `
 })
 export class MultiClickSelectionComponent {
-  rows = [];
+  rows: Employee[] = [];
 
-  selected = [];
+  selected: Employee[] = [];
 
-  columns: any[] = [{ prop: 'name' }, { name: 'Company' }, { name: 'Gender' }];
+  columns: TableColumn[] = [{ prop: 'name' }, { name: 'Company' }, { name: 'Gender' }];
 
   ColumnMode = ColumnMode;
   SelectionType = SelectionType;
diff --git a/src/app/selection/selection-multi.component.ts b/src/app/selection/selection-multi.component.ts
index db107a0c3..8373b3450 100644
--- a/src/app/selection/selection-multi.component.ts
+++ b/src/app/selection/selection-multi.component.ts
@@ -1,5 +1,6 @@
 import { Component } from '@angular/core';
-import { ColumnMode, SelectionType } from 'projects/ngx-datatable/src/public-api';
+import { ColumnMode, SelectionType, TableColumn } from 'projects/ngx-datatable/src/public-api';
+import { Employee } from "../data.model";
 
 @Component({
   selector: 'multi-selection-demo',
@@ -51,11 +52,11 @@ import { ColumnMode, SelectionType } from 'projects/ngx-datatable/src/public-api
   `
 })
 export class MultiSelectionComponent {
-  rows = [];
+  rows: Employee[] = [];
 
-  selected = [];
+  selected: Employee[] = [];
 
-  columns: any[] = [{ prop: 'name' }, { name: 'Company' }, { name: 'Gender' }];
+  columns: TableColumn[] = [{ prop: 'name' }, { name: 'Company' }, { name: 'Gender' }];
 
   ColumnMode = ColumnMode;
   SelectionType = SelectionType;
diff --git a/src/app/selection/selection-single.component.ts b/src/app/selection/selection-single.component.ts
index cf73aded3..ea46f4e03 100644
--- a/src/app/selection/selection-single.component.ts
+++ b/src/app/selection/selection-single.component.ts
@@ -1,5 +1,6 @@
 import { Component } from '@angular/core';
-import { ColumnMode, SelectionType } from 'projects/ngx-datatable/src/public-api';
+import { ColumnMode, SelectionType, TableColumn } from 'projects/ngx-datatable/src/public-api';
+import { Employee } from "../data.model";
 
 @Component({
   selector: 'single-selection-demo',
@@ -51,11 +52,11 @@ import { ColumnMode, SelectionType } from 'projects/ngx-datatable/src/public-api
   `
 })
 export class SingleSelectionComponent {
-  rows = [];
+  rows: Employee[] = [];
 
-  selected = [];
+  selected: Employee[] = [];
 
-  columns: any[] = [{ prop: 'name' }, { name: 'Company' }, { name: 'Gender' }];
+  columns: TableColumn[] = [{ prop: 'name' }, { name: 'Company' }, { name: 'Gender' }];
 
   ColumnMode = ColumnMode;
   SelectionType = SelectionType;
diff --git a/src/app/sorting/sorting-client.component.ts b/src/app/sorting/sorting-client.component.ts
index 24733827a..c0278d8da 100644
--- a/src/app/sorting/sorting-client.component.ts
+++ b/src/app/sorting/sorting-client.component.ts
@@ -1,5 +1,6 @@
 import { Component } from '@angular/core';
-import { ColumnMode, SortType } from 'projects/ngx-datatable/src/public-api';
+import { ColumnMode, SortType, TableColumn } from 'projects/ngx-datatable/src/public-api';
+import { Employee } from "../data.model";
 
 @Component({
   selector: 'client-sorting-demo',
@@ -32,9 +33,9 @@ import { ColumnMode, SortType } from 'projects/ngx-datatable/src/public-api';
   `
 })
 export class ClientSortingComponent {
-  rows = [];
+  rows: Employee[] = [];
 
-  columns = [{ name: 'Company' }, { name: 'Name' }, { name: 'Gender' }];
+  columns: TableColumn[] = [{ name: 'Company' }, { name: 'Name' }, { name: 'Gender' }];
 
   ColumnMode = ColumnMode;
   SortType = SortType;
diff --git a/src/app/sorting/sorting-comparator.component.ts b/src/app/sorting/sorting-comparator.component.ts
index 1392b2108..3819a10e7 100644
--- a/src/app/sorting/sorting-comparator.component.ts
+++ b/src/app/sorting/sorting-comparator.component.ts
@@ -1,5 +1,6 @@
 import { Component } from '@angular/core';
-import { ColumnMode } from 'projects/ngx-datatable/src/public-api';
+import { ColumnMode, TableColumn } from 'projects/ngx-datatable/src/public-api';
+import { Employee } from "../data.model";
 
 @Component({
   selector: 'comparator-sorting-demo',
@@ -30,9 +31,9 @@ import { ColumnMode } from 'projects/ngx-datatable/src/public-api';
   `
 })
 export class SortingComparatorComponent {
-  rows = [];
+  rows: Employee[] = [];
 
-  columns = [
+  columns: TableColumn[] = [
     { name: 'Company', comparator: this.companyComparator.bind(this) },
     { name: 'Name', sortable: false },
     { name: 'Gender', sortable: false }
diff --git a/src/app/sorting/sorting-default.component.ts b/src/app/sorting/sorting-default.component.ts
index be64d7114..b3e4fd597 100644
--- a/src/app/sorting/sorting-default.component.ts
+++ b/src/app/sorting/sorting-default.component.ts
@@ -1,5 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { ColumnMode } from 'projects/ngx-datatable/src/public-api';
+import { Employee } from "../data.model";
 
 @Component({
   selector: 'default-sorting-demo',
@@ -44,7 +45,7 @@ import { ColumnMode } from 'projects/ngx-datatable/src/public-api';
   `
 })
 export class DefaultSortingComponent implements OnInit {
-  rows = [];
+  rows: Employee[] = [];
 
   ColumnMode = ColumnMode;
 
diff --git a/src/app/sorting/sorting-server.component.ts b/src/app/sorting/sorting-server.component.ts
index d63dfdc09..ac73a8298 100644
--- a/src/app/sorting/sorting-server.component.ts
+++ b/src/app/sorting/sorting-server.component.ts
@@ -1,5 +1,6 @@
 import { Component } from '@angular/core';
-import { ColumnMode } from 'projects/ngx-datatable/src/public-api';
+import { ColumnMode, TableColumn } from 'projects/ngx-datatable/src/public-api';
+import { Employee } from "../data.model";
 
 @Component({
   selector: 'server-sorting-demo',
@@ -35,9 +36,9 @@ import { ColumnMode } from 'projects/ngx-datatable/src/public-api';
 export class ServerSortingComponent {
   loading = false;
 
-  rows = [];
+  rows: Employee[] = [];
 
-  columns = [
+  columns: TableColumn[] = [
     { name: 'Company', sortable: true },
     { name: 'Name', sortable: true },
     { name: 'Gender', sortable: true }
diff --git a/src/app/summary/summary-row-custom-template.component.ts b/src/app/summary/summary-row-custom-template.component.ts
index 1bab0d8af..6ff3ae008 100644
--- a/src/app/summary/summary-row-custom-template.component.ts
+++ b/src/app/summary/summary-row-custom-template.component.ts
@@ -1,5 +1,6 @@
 import { Component, OnInit, TemplateRef, ViewChild } from '@angular/core';
-import { ColumnMode } from 'projects/ngx-datatable/src/public-api';
+import { ColumnMode, TableColumn } from 'projects/ngx-datatable/src/public-api';
+import { Employee } from "../data.model";
 
 @Component({
   selector: 'summary-row-custom-template-demo',
@@ -38,12 +39,11 @@ import { ColumnMode } from 'projects/ngx-datatable/src/public-api';
   styleUrls: ['./summary-row-custom-template.component.scss']
 })
 export class SummaryRowCustomTemplateComponent implements OnInit {
-  rows = [];
+  rows: Employee[] = [];
 
-  @ViewChild('nameSummaryCell')
-    nameSummaryCell: TemplateRef<any>;
+  @ViewChild('nameSummaryCell') nameSummaryCell: TemplateRef<any>;
 
-  columns = [];
+  columns: TableColumn[] = [];
 
   ColumnMode = ColumnMode;
 
diff --git a/src/app/summary/summary-row-inline-html.component.ts b/src/app/summary/summary-row-inline-html.component.ts
index e0729a7ca..7e7554ce6 100644
--- a/src/app/summary/summary-row-inline-html.component.ts
+++ b/src/app/summary/summary-row-inline-html.component.ts
@@ -1,5 +1,6 @@
 import { Component } from '@angular/core';
 import { ColumnMode } from 'projects/ngx-datatable/src/public-api';
+import { Employee } from "../data.model";
 
 @Component({
   selector: 'summary-row-inline-html',
@@ -40,7 +41,7 @@ import { ColumnMode } from 'projects/ngx-datatable/src/public-api';
   `
 })
 export class SummaryRowInlineHtmlComponent {
-  rows = [];
+  rows: Employee[] = [];
 
   enableSummary = true;
   summaryPosition = 'top';
diff --git a/src/app/summary/summary-row-server-paging.component.ts b/src/app/summary/summary-row-server-paging.component.ts
index 735cdfdca..456a99d54 100644
--- a/src/app/summary/summary-row-server-paging.component.ts
+++ b/src/app/summary/summary-row-server-paging.component.ts
@@ -1,9 +1,8 @@
 import { Component, OnInit } from '@angular/core';
 import { MockServerResultsService } from '../paging/mock-server-results-service';
-import { PagedData } from '../paging/model/paged-data';
-import { CorporateEmployee } from '../paging/model/corporate-employee';
 import { Page } from '../paging/model/page';
 import { ColumnMode } from 'projects/ngx-datatable/src/public-api';
+import { Employee } from "../data.model";
 
 @Component({
   selector: 'summary-row-server-paging-demo',
@@ -41,8 +40,13 @@ import { ColumnMode } from 'projects/ngx-datatable/src/public-api';
   `
 })
 export class SummaryRowServerPagingComponent implements OnInit {
-  page = new Page();
-  rows = new Array<CorporateEmployee>();
+  page: Page = {
+    pageNumber: 0,
+    size: 20,
+    totalPages: 0,
+    totalElements: 0
+  }
+  rows: Employee[] = [];
 
   columns = [
     // NOTE: cells for current page only !
@@ -53,10 +57,7 @@ export class SummaryRowServerPagingComponent implements OnInit {
 
   ColumnMode = ColumnMode;
 
-  constructor(private serverResultsService: MockServerResultsService) {
-    this.page.pageNumber = 0;
-    this.page.size = 20;
-  }
+  constructor(private serverResultsService: MockServerResultsService) {}
 
   ngOnInit() {
     this.setPage({ offset: 0 });
diff --git a/src/app/summary/summary-row-simple.component.ts b/src/app/summary/summary-row-simple.component.ts
index 2440d57ab..e76cc6576 100644
--- a/src/app/summary/summary-row-simple.component.ts
+++ b/src/app/summary/summary-row-simple.component.ts
@@ -1,5 +1,6 @@
 import { Component } from '@angular/core';
-import { ColumnMode } from 'projects/ngx-datatable/src/public-api';
+import { ColumnMode, TableColumn } from 'projects/ngx-datatable/src/public-api';
+import { Employee } from "../data.model";
 
 @Component({
   selector: 'summary-row-simple-demo',
@@ -50,9 +51,9 @@ import { ColumnMode } from 'projects/ngx-datatable/src/public-api';
   styleUrls: ['./summary-row-simple.component.scss']
 })
 export class SummaryRowSimpleComponent {
-  rows = [];
+  rows: Employee[] = [];
 
-  columns = [
+  columns: TableColumn[] = [
     { prop: 'name', summaryFunc: null },
     { name: 'Gender', summaryFunc: cells => this.summaryForGender(cells) },
     { prop: 'age', summaryFunc: cells => this.avgAge(cells) }
@@ -69,7 +70,7 @@ export class SummaryRowSimpleComponent {
     });
   }
 
-  fetch(cb: (data: [unknown]) => void) {
+  fetch(cb: (data: [Employee]) => void) {
     const req = new XMLHttpRequest();
     req.open('GET', `assets/data/company.json`);
 
diff --git a/src/app/templates/template-dom.component.ts b/src/app/templates/template-dom.component.ts
index ccb13fd3e..b2eae5e41 100644
--- a/src/app/templates/template-dom.component.ts
+++ b/src/app/templates/template-dom.component.ts
@@ -1,5 +1,6 @@
 import { Component } from '@angular/core';
 import { ColumnMode } from 'projects/ngx-datatable/src/public-api';
+import { Employee } from "../data.model";
 
 @Component({
   selector: 'inline-templates-demo',
@@ -51,7 +52,7 @@ import { ColumnMode } from 'projects/ngx-datatable/src/public-api';
   `
 })
 export class InlineTemplatesComponent {
-  rows = [];
+  rows: Employee[] = [];
   joke = 'knock knock';
 
   ColumnMode = ColumnMode;
diff --git a/src/app/templates/template-obj.component.ts b/src/app/templates/template-obj.component.ts
index 9822d9f3d..f33e28200 100644
--- a/src/app/templates/template-obj.component.ts
+++ b/src/app/templates/template-obj.component.ts
@@ -1,5 +1,6 @@
 import { Component, OnInit, TemplateRef, ViewChild } from '@angular/core';
-import { ColumnMode } from 'projects/ngx-datatable/src/public-api';
+import { ColumnMode, TableColumn } from 'projects/ngx-datatable/src/public-api';
+import { Employee } from "../data.model";
 
 @Component({
   selector: 'template-ref-demo',
@@ -40,8 +41,8 @@ export class TemplateRefTemplatesComponent implements OnInit {
   @ViewChild('editTmpl', { static: true }) editTmpl: TemplateRef<any>;
   @ViewChild('hdrTpl', { static: true }) hdrTpl: TemplateRef<any>;
 
-  rows = [];
-  columns = [];
+  rows: Employee[] = [];
+  columns: TableColumn[] = [];
 
   ColumnMode = ColumnMode;
 
diff --git a/src/app/tree/client-tree.component.ts b/src/app/tree/client-tree.component.ts
index 0ec654032..9c6e8f2c4 100644
--- a/src/app/tree/client-tree.component.ts
+++ b/src/app/tree/client-tree.component.ts
@@ -1,5 +1,6 @@
 import { Component } from '@angular/core';
-import { ColumnMode } from 'projects/ngx-datatable/src/public-api';
+import { ColumnMode, TreeStatus } from 'projects/ngx-datatable/src/public-api';
+import { Employee } from "../data.model";
 
 @Component({
   selector: 'client-side-tree-demo',
@@ -48,7 +49,7 @@ import { ColumnMode } from 'projects/ngx-datatable/src/public-api';
   styles: ['.icon {height: 10px; width: 10px; }', '.disabled {opacity: 0.5; }']
 })
 export class ClientTreeComponent {
-  rows = [];
+  rows: (Employee & {treeStatus: TreeStatus})[] = [];
 
   ColumnMode = ColumnMode;
 
diff --git a/src/app/tree/fullscreen.component.ts b/src/app/tree/fullscreen.component.ts
index 1bd61743c..6d66126b9 100644
--- a/src/app/tree/fullscreen.component.ts
+++ b/src/app/tree/fullscreen.component.ts
@@ -1,5 +1,6 @@
 import { ChangeDetectorRef, Component } from '@angular/core';
-import { ColumnMode } from 'projects/ngx-datatable/src/public-api';
+import { ColumnMode, TreeStatus } from 'projects/ngx-datatable/src/public-api';
+import { Employee } from "../data.model";
 
 @Component({
   selector: 'full-screen-tree-demo',
@@ -59,7 +60,7 @@ import { ColumnMode } from 'projects/ngx-datatable/src/public-api';
   styles: ['.icon {height: 10px; width: 10px; }', '.disabled {opacity: 0.5; }']
 })
 export class FullScreenTreeComponent {
-  rows = [];
+  rows: (Employee & {treeStatus: TreeStatus})[] = [];
   lastIndex = 15;
 
   ColumnMode = ColumnMode;