From 2d7244f388e8a526009a15d76d53ef3e3e1d1634 Mon Sep 17 00:00:00 2001
From: Maxi <ralfrabbit@gmail.com>
Date: Mon, 29 Apr 2024 13:58:25 +0200
Subject: [PATCH] Revert "feat: proper types for rows (#46)" (#48)

This reverts commit 1641b94ffa24643c3a2d25e470d97ea282e4e6a5.
---
 .../components/body/body-cell.component.ts    | 28 +++---
 .../body/body-row-wrapper.component.ts        | 20 ++--
 .../lib/components/body/body-row.component.ts | 17 ++--
 .../src/lib/components/body/body.component.ts | 96 ++++++++-----------
 .../components/body/selection.component.ts    | 36 +++----
 .../src/lib/components/datatable.component.ts | 62 ++++++------
 .../ngx-datatable/src/lib/types/group.type.ts | 10 --
 .../src/lib/types/sort-prop-dir.type.ts       |  2 +-
 src/app/basic/basic-auto.component.ts         |  7 +-
 src/app/basic/basic-fixed.component.ts        |  7 +-
 src/app/basic/bootstrap.component.ts          |  7 +-
 src/app/basic/contextmenu.component.ts        |  7 +-
 src/app/basic/css.component.ts                |  4 +-
 src/app/basic/dark-theme.component.ts         |  7 +-
 src/app/basic/disabled-rows.component.ts      | 16 ++--
 src/app/basic/dynamic-height.component.ts     |  3 +-
 src/app/basic/empty.component.ts              |  4 +-
 src/app/basic/filter.component.ts             | 18 ++--
 src/app/basic/footer.component.ts             |  7 +-
 src/app/basic/fullscreen.component.ts         |  3 +-
 src/app/basic/inline.component.ts             |  5 +-
 src/app/basic/live.component.ts               | 11 +--
 src/app/basic/multiple.component.ts           |  6 +-
 src/app/basic/responsive.component.ts         |  7 +-
 src/app/basic/row-detail.component.ts         |  7 +-
 src/app/basic/row-grouping.component.ts       | 28 ++++--
 src/app/basic/rx.component.ts                 |  7 +-
 .../basic/scrolling-dynamically.component.ts  |  5 +-
 src/app/basic/scrolling.component.ts          |  3 +-
 src/app/basic/tabs.component.ts               |  3 +-
 src/app/basic/virtual.component.ts            |  3 +-
 src/app/columns/column-flex.component.ts      |  3 +-
 src/app/columns/column-force.component.ts     |  3 +-
 src/app/columns/column-reorder.component.ts   |  7 +-
 src/app/columns/column-standard.component.ts  |  3 +-
 src/app/columns/column-toggle.component.ts    | 13 ++-
 src/app/columns/pinning.component.ts          |  3 +-
 src/app/data.model.ts                         | 30 ------
 src/app/paging/mock-server-results-service.ts | 15 +--
 src/app/paging/model/corporate-employee.ts    | 16 ++++
 src/app/paging/model/page.ts                  | 10 +-
 src/app/paging/model/paged-data.ts            |  6 +-
 src/app/paging/paging-client.component.ts     |  3 +-
 ...ng-scrolling-novirtualization.component.ts | 16 ++--
 src/app/paging/paging-server.component.ts     | 16 ++--
 src/app/paging/paging-virtual.component.ts    | 18 ++--
 src/app/paging/scrolling-server.component.ts  |  7 +-
 src/app/selection/selection-cell.component.ts |  9 +-
 .../selection-chkbox-template.component.ts    |  5 +-
 .../selection/selection-chkbox.component.ts   |  5 +-
 .../selection/selection-disabled.component.ts |  9 +-
 .../selection-multi-click-chkbox.component.ts |  5 +-
 .../selection-multi-click.component.ts        |  9 +-
 .../selection/selection-multi.component.ts    |  9 +-
 .../selection/selection-single.component.ts   |  9 +-
 src/app/sorting/sorting-client.component.ts   |  7 +-
 .../sorting/sorting-comparator.component.ts   |  7 +-
 src/app/sorting/sorting-default.component.ts  |  3 +-
 src/app/sorting/sorting-server.component.ts   |  7 +-
 .../summary-row-custom-template.component.ts  | 10 +-
 .../summary-row-inline-html.component.ts      |  3 +-
 .../summary-row-server-paging.component.ts    | 17 ++--
 .../summary/summary-row-simple.component.ts   |  9 +-
 src/app/templates/template-dom.component.ts   |  3 +-
 src/app/templates/template-obj.component.ts   |  7 +-
 src/app/tree/client-tree.component.ts         |  5 +-
 src/app/tree/fullscreen.component.ts          |  5 +-
 67 files changed, 341 insertions(+), 417 deletions(-)
 delete mode 100644 projects/ngx-datatable/src/lib/types/group.type.ts
 delete mode 100644 src/app/data.model.ts
 create mode 100644 src/app/paging/model/corporate-employee.ts

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