docs: use row related types in examples

src/app/basic/basic-auto.component.ts

@@ -1,5 +1,7 @@
 import { Component } from '@angular/core';
 import { ColumnMode } from 'projects/ngx-datatable/src/public-api';
+import { Employee } from "../data.model";
+import { TableColumn } from "projects/ngx-datatable/src/public-api";
 
 @Component({
   selector: 'basic-auto-demo',
@@ -32,11 +34,11 @@ import { ColumnMode } from 'projects/ngx-datatable/src/public-api';
   `
 })
 export class BasicAutoComponent {
-  rows = [];
+  rows: Employee[] = [];
   loadingIndicator = true;
   reorderable = true;
 
-  columns = [{ prop: 'name' }, { name: 'Gender' }, { name: 'Company', sortable: false }];
+  columns: TableColumn[] = [{ prop: 'name' }, { name: 'Gender' }, { name: 'Company', sortable: false }];
 
   ColumnMode = ColumnMode;
 

src/app/basic/basic-fixed.component.ts

@@ -1,5 +1,7 @@
 import { Component } from '@angular/core';
 import { ColumnMode } from 'projects/ngx-datatable/src/public-api';
+import { Employee } from "../data.model";
+import { TableColumn } from "projects/ngx-datatable/src/public-api";
 
 @Component({
   selector: 'basic-fixed-demo',
@@ -30,8 +32,8 @@ import { ColumnMode } from 'projects/ngx-datatable/src/public-api';
   `
 })
 export class BasicFixedComponent {
-  rows = [];
-  columns = [{ prop: 'name' }, { name: 'Company' }, { name: 'Gender' }];
+  rows: Employee[] = [];
+  columns: TableColumn[] = [{ prop: 'name' }, { name: 'Company' }, { name: 'Gender' }];
 
   ColumnMode = ColumnMode;
 

src/app/basic/bootstrap.component.ts

@@ -1,5 +1,7 @@
 import { Component } from '@angular/core';
 import { ColumnMode } from 'projects/ngx-datatable/src/public-api';
+import { Employee } from "../data.model";
+import { TableColumn } from "projects/ngx-datatable/src/public-api";
 
 @Component({
   selector: 'basic-bootstrap-theme-demo',
@@ -35,11 +37,11 @@ import { ColumnMode } from 'projects/ngx-datatable/src/public-api';
   `
 })
 export class BootstrapThemeComponent {
-  rows = [];
+  rows: Employee[] = [];
   loadingIndicator = true;
   reorderable = true;
 
-  columns = [
+  columns: TableColumn[] = [
     { prop: 'name', summaryFunc: () => null },
     { name: 'Gender', summaryFunc: cells => this.summaryForGender(cells) },
     { name: 'Company', summaryFunc: () => null }

src/app/basic/contextmenu.component.ts

@@ -1,5 +1,7 @@
 import { Component } from '@angular/core';
 import { ColumnMode } from 'projects/ngx-datatable/src/public-api';
+import { Employee } from "../data.model";
+import { TableColumn } from "projects/ngx-datatable/src/public-api";
 
 @Component({
   selector: 'contextmenu-demo',
@@ -44,9 +46,9 @@ import { ColumnMode } from 'projects/ngx-datatable/src/public-api';
   `
 })
 export class ContextMenuDemoComponent {
-  rows = [];
+  rows: Employee[] = [];
 
-  columns = [{ prop: 'name' }, { name: 'Gender' }, { name: 'Company' }];
+  columns: TableColumn[] = [{ prop: 'name' }, { name: 'Gender' }, { name: 'Company' }];
 
   rawEvent: any;
   contextmenuRow: any;

src/app/basic/css.component.ts

@@ -1,5 +1,6 @@
 import { Component } from '@angular/core';
 import { ColumnMode } from 'projects/ngx-datatable/src/public-api';
+import { FullEmployee } from "../data.model";
 
 @Component({
   selector: 'row-css-demo',
@@ -33,9 +34,8 @@ import { ColumnMode } from 'projects/ngx-datatable/src/public-api';
   `
 })
 export class RowCssComponent {
-  rows = [];
+  rows: FullEmployee[] = [];
   expanded = {};
-  timeout: any;
 
   ColumnMode = ColumnMode;
 

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

@@ -1,5 +1,7 @@
 import { Component } from '@angular/core';
 import { ColumnMode } from 'projects/ngx-datatable/src/public-api';
+import { Employee } from "../data.model";
+import { TableColumn } from "projects/ngx-datatable/src/public-api";
 
 @Component({
   selector: 'basic-dark-theme-demo',
@@ -34,11 +36,11 @@ import { ColumnMode } from 'projects/ngx-datatable/src/public-api';
   `
 })
 export class DarkThemeComponent {
-  rows = [];
+  rows: Employee[] = [];
   loadingIndicator = true;
   reorderable = true;
 
-  columns = [
+  columns: TableColumn[] = [
     { prop: 'name', summaryFunc: () => null },
     { name: 'Gender', summaryFunc: cells => this.summaryForGender(cells) },
     { name: 'Company', summaryFunc: () => null }

src/app/basic/disabled-rows.component.ts

@@ -1,5 +1,7 @@
 import { Component } from '@angular/core';
 import { ColumnMode, SelectionType } from 'projects/ngx-datatable/src/public-api';
+import { FullEmployee } from "../data.model";
+import { BehaviorSubject } from "rxjs";
 
 @Component({
   selector: 'disabled-rows-demo',
@@ -60,7 +62,7 @@ import { ColumnMode, SelectionType } from 'projects/ngx-datatable/src/public-api
   `
 })
 export class DisabledRowsComponent {
-  rows = [];
+  rows: (FullEmployee & {isDisabled?: boolean}) [] = [];
 
   ColumnMode = ColumnMode;
   SelectionType = SelectionType;
@@ -82,21 +84,17 @@ export class DisabledRowsComponent {
     req.send();
   }
 
-  isRowDisabled(row: any) {
-    if (!row.isDisabled && row.age < 40) {
-      return false;
-    } else {
-      return true;
-    }
+  isRowDisabled(row: FullEmployee & {isDisabled: boolean}) {
+    return !(!row.isDisabled && row.age < 40);
   }
 
-  disableRow(rowIndex, disableRow$) {
+  disableRow(rowIndex: number, disableRow$: BehaviorSubject<boolean>) {
     this.rows[rowIndex].isDisabled = true;
     this.rows = [...this.rows];
     disableRow$.next(true);
   }
 
-  updateValue(event, cell, rowIndex, disableRow$) {
+  updateValue(event, cell, rowIndex: number, disableRow$: BehaviorSubject<boolean>) {
     this.rows[rowIndex][cell] = event.target.value;
     this.rows = [...this.rows];
     if (disableRow$ && cell === 'age' && this.rows[rowIndex][cell] > 40) {

src/app/basic/dynamic-height.component.ts

@@ -1,5 +1,6 @@
 import { Component } from '@angular/core';
 import { ColumnMode } from 'projects/ngx-datatable/src/public-api';
+import { FullEmployee } from "../data.model";
 
 @Component({
   selector: 'dynamic-height-demo',
@@ -33,7 +34,7 @@ import { ColumnMode } from 'projects/ngx-datatable/src/public-api';
   `
 })
 export class DynamicHeightComponent {
-  rows = [];
+  rows: FullEmployee[] = [];
   expanded = {};
   timeout: any;
 

src/app/basic/empty.component.ts

@@ -1,5 +1,6 @@
 import { Component } from '@angular/core';
 import { ColumnMode } from 'projects/ngx-datatable/src/public-api';
+import { TableColumn } from "projects/ngx-datatable/src/public-api";
 
 @Component({
   selector: 'empty-demo',
@@ -30,6 +31,6 @@ import { ColumnMode } from 'projects/ngx-datatable/src/public-api';
   `
 })
 export class BasicEmptyComponent {
-  columns = [{ prop: 'name' }, { name: 'Gender' }, { name: 'Company', sortable: false }];
+  columns: TableColumn[] = [{ prop: 'name' }, { name: 'Gender' }, { name: 'Company', sortable: false }];
   ColumnMode = ColumnMode;
 }

src/app/basic/filter.component.ts

@@ -1,6 +1,8 @@
 import { Component, ViewChild } from '@angular/core';
 import { DatatableComponent } from '../../../projects/ngx-datatable/src/lib/components/datatable.component';
 import { ColumnMode } from 'projects/ngx-datatable/src/public-api';
+import { Employee } from "../data.model";
+import { TableColumn } from "projects/ngx-datatable/src/public-api";
 
 @Component({
   selector: 'filter-demo',
@@ -39,12 +41,12 @@ import { ColumnMode } from 'projects/ngx-datatable/src/public-api';
   `
 })
 export class FilterBarComponent {
-  rows = [];
+  rows: Employee[] = [];
 
-  temp = [];
+  temp: Employee[] = [];
 
-  columns = [{ prop: 'name' }, { name: 'Company' }, { name: 'Gender' }];
-  @ViewChild(DatatableComponent) table: DatatableComponent;
+  columns: TableColumn[] = [{ prop: 'name' }, { name: 'Company' }, { name: 'Gender' }];
+  @ViewChild(DatatableComponent) table: DatatableComponent<Employee>;
 
   ColumnMode = ColumnMode;
 
@@ -72,13 +74,10 @@ export class FilterBarComponent {
   updateFilter(event) {
     const val = event.target.value.toLowerCase();
 
-    // filter our data
-    const temp = this.temp.filter(function(d) {
+    // filter our data and update the rows
+    this.rows = this.temp.filter(function (d) {
       return d.name.toLowerCase().indexOf(val) !== -1 || !val;
     });
-
-    // update the rows
-    this.rows = temp;
     // Whenever the filter changes, always go back to the first page
     this.table.offset = 0;
   }

src/app/basic/footer.component.ts

@@ -1,5 +1,7 @@
 import { Component } from '@angular/core';
 import { ColumnMode } from 'projects/ngx-datatable/src/public-api';
+import { Employee } from "../data.model";
+import { TableColumn } from "projects/ngx-datatable/src/public-api";
 
 @Component({
   selector: 'footer-demo',
@@ -46,9 +48,9 @@ import { ColumnMode } from 'projects/ngx-datatable/src/public-api';
   `
 })
 export class FooterDemoComponent {
-  rows = [];
+  rows: Employee[] = [];
 
-  columns = [{ prop: 'name' }, { name: 'Gender' }, { name: 'Company' }];
+  columns: TableColumn[] = [{ prop: 'name' }, { name: 'Gender' }, { name: 'Company' }];
 
   ColumnMode = ColumnMode;
 

src/app/basic/fullscreen.component.ts

@@ -1,5 +1,6 @@
 import { Component } from '@angular/core';
 import { ColumnMode } from 'projects/ngx-datatable/src/public-api';
+import { FullEmployee } from "../data.model";
 
 @Component({
   selector: 'full-screen-demo',
@@ -38,7 +39,7 @@ import { ColumnMode } from 'projects/ngx-datatable/src/public-api';
   `
 })
 export class FullScreenComponent {
-  rows = [];
+  rows: FullEmployee[] = [];
 
   ColumnMode = ColumnMode;
 

src/app/basic/inline.component.ts

@@ -1,5 +1,6 @@
 import { Component } from '@angular/core';
 import { ColumnMode } from 'projects/ngx-datatable/src/public-api';
+import { Employee } from "../data.model";
 
 @Component({
   selector: 'inline-edit-demo',
@@ -75,7 +76,7 @@ import { ColumnMode } from 'projects/ngx-datatable/src/public-api';
 })
 export class InlineEditComponent {
   editing = {};
-  rows = [];
+  rows: Employee[] = [];
 
   ColumnMode = ColumnMode;
 
@@ -96,7 +97,7 @@ export class InlineEditComponent {
     req.send();
   }
 
-  updateValue(event, cell, rowIndex) {
+  updateValue(event, cell, rowIndex: number) {
     console.log('inline editing rowIndex', rowIndex);
     this.editing[rowIndex + '-' + cell] = false;
     this.rows[rowIndex][cell] = event.target.value;

src/app/basic/live.component.ts

@@ -1,5 +1,7 @@
 import { ChangeDetectorRef, Component, ViewChild } from '@angular/core';
 import { ColumnMode } from 'projects/ngx-datatable/src/public-api';
+import { Employee } from "../data.model";
+import { DatatableComponent } from "projects/ngx-datatable/src/public-api";
 
 @Component({
   selector: 'live-data-demo',
@@ -41,13 +43,13 @@ import { ColumnMode } from 'projects/ngx-datatable/src/public-api';
   `
 })
 export class LiveDataComponent {
-  @ViewChild('mydatatable') mydatatable: any;
+  @ViewChild('mydatatable') mydatatable: DatatableComponent<Employee & {updated: string}>;
 
   count = 50;
-  rows: any[] = [];
+  rows: (Employee & {updated: string})[] = [];
   active = true;
-  temp: any[] = [];
-  cols: any = ['name', 'gender', 'company'];
+  temp: (Employee & {updated: string})[] = [];
+  cols = ['name', 'gender', 'company'];
 
   ColumnMode = ColumnMode;
 

src/app/basic/multiple.component.ts

@@ -1,5 +1,6 @@
 import { Component } from '@angular/core';
 import { ColumnMode } from 'projects/ngx-datatable/src/public-api';
+import { TableColumn } from "projects/ngx-datatable/src/public-api";
 
 @Component({
   selector: 'multiple-tables-demo',
@@ -40,9 +41,9 @@ import { ColumnMode } from 'projects/ngx-datatable/src/public-api';
   `
 })
 export class MultipleTablesComponent {
-  columns1 = [{ prop: 'name' }, { name: 'Gender' }, { name: 'Company' }];
+  columns1: TableColumn[] = [{ prop: 'name' }, { name: 'Gender' }, { name: 'Company' }];
 
-  columns2 = [{ prop: 'name', name: 'Name' }, { name: 'Gender' }];
+  columns2: TableColumn[] = [{ prop: 'name', name: 'Name' }, { name: 'Gender' }];
 
   rows1 = [
     { name: 'Larry', gender: 'Male', company: 'Cisco' },

src/app/basic/responsive.component.ts

@@ -1,5 +1,7 @@
 import { Component, ViewChild, ViewEncapsulation } from '@angular/core';
 import { ColumnMode } from 'projects/ngx-datatable/src/public-api';
+import { FullEmployee } from "../data.model";
+import { DatatableComponent } from "projects/ngx-datatable/src/public-api";
 
 @Component({
   selector: 'responsive-demo',
@@ -115,9 +117,9 @@ import { ColumnMode } from 'projects/ngx-datatable/src/public-api';
   encapsulation: ViewEncapsulation.None
 })
 export class ResponsiveComponent {
-  @ViewChild('myTable') table: any;
+  @ViewChild('myTable') table: DatatableComponent<FullEmployee>;
 
-  rows: any[] = [];
+  rows: FullEmployee[] = [];
   expanded: any = {};
   timeout: any;
 

src/app/basic/row-detail.component.ts

@@ -1,5 +1,7 @@
 import { Component, ViewChild, ViewEncapsulation } from '@angular/core';
 import { ColumnMode } from 'projects/ngx-datatable/src/public-api';
+import { FullEmployee } from "../data.model";
+import { DatatableComponent } from "projects/ngx-datatable/src/public-api";
 
 @Component({
   selector: 'row-details-demo',
@@ -89,9 +91,9 @@ import { ColumnMode } from 'projects/ngx-datatable/src/public-api';
   encapsulation: ViewEncapsulation.None
 })
 export class RowDetailsComponent {
-  @ViewChild('myTable') table: any;
+  @ViewChild('myTable') table: DatatableComponent<FullEmployee>;
 
-  rows: any[] = [];
+  rows: FullEmployee[] = [];
   expanded: any = {};
   timeout: any;