diff --git a/src/app/content/hemat-app/device/device.component.html b/src/app/content/hemat-app/device/device.component.html
index 65942b0..9641fde 100644
--- a/src/app/content/hemat-app/device/device.component.html
+++ b/src/app/content/hemat-app/device/device.component.html
@@ -1,74 +1,171 @@
 <div class="app-content content">
-    <div class="content-wrapper">
-      <div class="content-header row mb-1">
-        <app-breadcrumb class="col-12" [breadcrumb]="breadcrumb"></app-breadcrumb>
-      </div>
-      <div class="content-body">
-        <!-- Add rows table -->
-        <section id="add-row">
-          <div class="row">
-            <div class="col-12" *blockUI="'addRows'; message: 'Loading'">
-              <m-card [options]="options" (reloadFunction)="reloadAddRows($event)">
-                <ng-container mCardBody>
-                  <!-- <p class="card-text">New rows can be added to a DataTable very easily using the
+  <div class="content-wrapper">
+    <div class="content-header row mb-1">
+      <app-breadcrumb class="col-12" [breadcrumb]="breadcrumb"></app-breadcrumb>
+    </div>
+    <div class="content-body">
+      <!-- Add rows table -->
+      <section id="add-row">
+        <div class="row">
+          <div class="col-12" *blockUI="'addRows'; message: 'Loading'">
+            <m-card
+              [options]="options"
+              (reloadFunction)="reloadAddRows($event)"
+            >
+              <ng-container mCardBody>
+                <!-- <p class="card-text">New rows can be added to a DataTable very easily using the
                     (addFieldValue()) function.
                   </p> -->
-                  <button id="addRow" class="btn btn-secondary my-1 mb-2" (click)="addFieldValue()"><i class="feather ft-plus"></i>&nbsp;
-                    Add new row</button>
-                  <div class="table table-striped table-bordered add-rows">
-                    <ngx-datatable class="bootstrap" [sortType]="'multi'" [headerHeight]="50" [limit]="7"
-                      [footerHeight]="40" [rowHeight]="40" [rows]="rows" [columnMode]="'force'"
-                      [loadingIndicator]="loadingIndicator" fxFlex="auto" [perfectScrollbar]="config">
-                      <ngx-datatable-column name="ID" [flexGrow]="1" [minWidth]="20">
-                        <ng-template ngx-datatable-cell-template let-rowIndex="rowIndex" *ngfor let element of rows>
-                          <b>{{element.id}}</b>
-                        </ng-template>
-                      </ngx-datatable-column>
-                      <ngx-datatable-column name="Name" [flexGrow]="1" [minWidth]="70">
-                        <ng-template ngx-datatable-cell-template let-rowIndex="rowIndex" *ngfor let element of rows>
-                          <span>
-                            {{element.name}}
-                          </span>
-                        </ng-template>
-                      </ngx-datatable-column>
-                      <ngx-datatable-column name="Position" [flexGrow]="1" [minWidth]="90">
-                        <ng-template ngx-datatable-cell-template let-rowIndex="rowIndex" let-row="row" *ngfor let element
-                          of rows>
-                          <span>
-                            {{element.position}}
-                          </span>
-                        </ng-template>
-                      </ngx-datatable-column>
-  
-                      <ngx-datatable-column name="Office" [flexGrow]="1" [minWidth]="90">
-                        <ng-template ngx-datatable-cell-template *ngfor let element of rows>
-                          {{element.office}}
-                        </ng-template>
-                      </ngx-datatable-column>
-  
-                      <ngx-datatable-column name="Age" [flexGrow]="1" [minWidth]="30">
-                        <ng-template ngx-datatable-cell-template *ngfor let element of rows>
-                          {{element.age}}
-                        </ng-template>
-                      </ngx-datatable-column>
-                      <ngx-datatable-column name="Salary" [flexGrow]="1" [minWidth]="90">
-                        <ng-template ngx-datatable-cell-template *ngfor let element of rows>
-                          {{element.salary}}
-                        </ng-template>
-                      </ngx-datatable-column>
-                      <ngx-datatable-column name="Startdate" [flexGrow]="1" [minWidth]="90">
-                        <ng-template ngx-datatable-cell-template *ngfor let element of rows>
-                          {{element.startdate}}
-                        </ng-template>
-                      </ngx-datatable-column>
-                    </ngx-datatable>
-  
-                  </div>
-                </ng-container>
-              </m-card>
-            </div>
+                <button
+                  id="addRow"
+                  class="btn btn-secondary my-1 mb-2"
+                  (click)="addFieldValue()"
+                >
+                  <i class="feather ft-plus"></i>&nbsp; Add new row
+                </button>
+                <div class="table table-striped table-bordered add-rows">
+                  <ngx-datatable
+                    class="bootstrap"
+                    [sortType]="'multi'"
+                    [headerHeight]="50"
+                    [limit]="7"
+                    [footerHeight]="40"
+                    [rowHeight]="40"
+                    [rows]="rows"
+                    [columnMode]="'force'"
+                    [loadingIndicator]="loadingIndicator"
+                    fxFlex="auto"
+                    [perfectScrollbar]="config"
+                  >
+                    <ngx-datatable-column
+                      name="ID"
+                      [flexGrow]="1"
+                      [minWidth]="20"
+                    >
+                      <ng-template
+                        ngx-datatable-cell-template
+                        let-rowIndex="rowIndex"
+                        *ngfor
+                        let
+                        element
+                        of
+                        rows
+                      >
+                        <b>{{ element.id }}</b>
+                      </ng-template>
+                    </ngx-datatable-column>
+                    <ngx-datatable-column
+                      name="Name"
+                      [flexGrow]="1"
+                      [minWidth]="70"
+                    >
+                      <ng-template
+                        ngx-datatable-cell-template
+                        let-rowIndex="rowIndex"
+                        *ngfor
+                        let
+                        element
+                        of
+                        rows
+                      >
+                        <span>
+                          {{ element.name }}
+                        </span>
+                      </ng-template>
+                    </ngx-datatable-column>
+                    <ngx-datatable-column
+                      name="Position"
+                      [flexGrow]="1"
+                      [minWidth]="90"
+                    >
+                      <ng-template
+                        ngx-datatable-cell-template
+                        let-rowIndex="rowIndex"
+                        let-row="row"
+                        *ngfor
+                        let
+                        element
+                        of
+                        rows
+                      >
+                        <span>
+                          {{ element.position }}
+                        </span>
+                      </ng-template>
+                    </ngx-datatable-column>
+
+                    <ngx-datatable-column
+                      name="Office"
+                      [flexGrow]="1"
+                      [minWidth]="90"
+                    >
+                      <ng-template
+                        ngx-datatable-cell-template
+                        *ngfor
+                        let
+                        element
+                        of
+                        rows
+                      >
+                        {{ element.office }}
+                      </ng-template>
+                    </ngx-datatable-column>
+
+                    <ngx-datatable-column
+                      name="Age"
+                      [flexGrow]="1"
+                      [minWidth]="30"
+                    >
+                      <ng-template
+                        ngx-datatable-cell-template
+                        *ngfor
+                        let
+                        element
+                        of
+                        rows
+                      >
+                        {{ element.age }}
+                      </ng-template>
+                    </ngx-datatable-column>
+                    <ngx-datatable-column
+                      name="Salary"
+                      [flexGrow]="1"
+                      [minWidth]="90"
+                    >
+                      <ng-template
+                        ngx-datatable-cell-template
+                        *ngfor
+                        let
+                        element
+                        of
+                        rows
+                      >
+                        {{ element.salary }}
+                      </ng-template>
+                    </ngx-datatable-column>
+                    <ngx-datatable-column
+                      name="Startdate"
+                      [flexGrow]="1"
+                      [minWidth]="90"
+                    >
+                      <ng-template
+                        ngx-datatable-cell-template
+                        *ngfor
+                        let
+                        element
+                        of
+                        rows
+                      >
+                        {{ element.startdate }}
+                      </ng-template>
+                    </ngx-datatable-column>
+                  </ngx-datatable>
+                </div>
+              </ng-container>
+            </m-card>
           </div>
-        </section>
-      </div>
+        </div>
+      </section>
     </div>
-  </div>
\ No newline at end of file
+  </div>
+</div>
diff --git a/src/app/content/hemat-app/device/device.component.ts b/src/app/content/hemat-app/device/device.component.ts
index 31c4a1a..02deaf9 100644
--- a/src/app/content/hemat-app/device/device.component.ts
+++ b/src/app/content/hemat-app/device/device.component.ts
@@ -1,28 +1,35 @@
-import { Component, OnInit, ViewChild } from '@angular/core';
-import { NgBlockUI, BlockUI } from 'ng-block-ui';
-import { PerfectScrollbarDirective, PerfectScrollbarComponent, PerfectScrollbarConfigInterface } from 'ngx-perfect-scrollbar';
-import { TableApiService } from 'src/app/_services/table-api.service';
+import { Component, OnInit, ViewChild } from "@angular/core";
+import { log } from "console";
+import { NgBlockUI, BlockUI } from "ng-block-ui";
+import {
+  PerfectScrollbarDirective,
+  PerfectScrollbarComponent,
+  PerfectScrollbarConfigInterface,
+} from "ngx-perfect-scrollbar";
+import { TableApiService } from "src/app/_services/table-api.service";
 
 @Component({
-  selector: 'app-device',
-  templateUrl: './device.component.html',
-  styleUrls: ['./device.component.css']
+  selector: "app-device",
+  templateUrl: "./device.component.html",
+  styleUrls: ["./device.component.css"],
 })
-export class DeviceComponent implements OnInit{
+export class DeviceComponent implements OnInit {
   data: any;
 
-  @BlockUI('addRows') blockUIAddRows: NgBlockUI;
-  @BlockUI('rowSelection') blockUIRowSelection: NgBlockUI;
+  @BlockUI("addRows") blockUIAddRows: NgBlockUI;
+  @BlockUI("rowSelection") blockUIRowSelection: NgBlockUI;
 
   public config: PerfectScrollbarConfigInterface = { wheelPropagation: true };
-  @ViewChild(PerfectScrollbarComponent) componentRef?: PerfectScrollbarComponent;
-  @ViewChild(PerfectScrollbarDirective, { static: true }) directiveRef?: PerfectScrollbarDirective;
+  @ViewChild(PerfectScrollbarComponent)
+  componentRef?: PerfectScrollbarComponent;
+  @ViewChild(PerfectScrollbarDirective, { static: true })
+  directiveRef?: PerfectScrollbarDirective;
 
   options = {
     close: true,
     expand: true,
     minimize: true,
-    reload: true
+    reload: true,
   };
   temp = [];
   selected = [];
@@ -33,171 +40,49 @@ export class DeviceComponent implements OnInit{
   row: any;
   public breadcrumb: any;
 
-  constructor(private tableApiservice: TableApiService) { }
+  constructor(private tableApiservice: TableApiService) {}
 
   ngOnInit() {
     this.breadcrumb = {
-      'mainlabel': 'Device List',
-      'links': [
+      mainlabel: "Device List",
+      links: [
         {
-          'name': 'Home',
-          'isLink': false,
-          'link': '/dashboard/sales'
+          name: "Home",
+          isLink: false,
+          link: "/dashboard/sales",
         },
         {
-          'name': 'Device',
-          'isLink': false
-        }
-      ]
+          name: "Device",
+          isLink: false,
+        },
+      ],
     };
-      this.tableApiservice.getTableApiData().subscribe(Response => {
+    this.tableApiservice.getTableApiData().subscribe((Response) => {
+      console.log(Response);
+
       this.data = Response;
       this.getTabledata();
-      });
+    });
   }
+
   getTabledata() {
     this.rows = this.data.rows;
     this.row = this.data.row;
   }
-  updateFiltername(event) {
-    const val = event.target.value.toLowerCase();
-
-    // filter our data
-    const temp = this.rows.filter(function (d) {
-      return d.name.toLowerCase().indexOf(val) !== -1 || !val;
-    });
-
-
-    this.rows = temp;
-
-  }
-  updateFilterposition(event) {
-    const val = event.target.value.toLowerCase();
-
-    // filter our data
-    const temp = this.rows.filter(function (d) {
-      return d.position.toLowerCase().indexOf(val) !== -1 || !val;
-    });
-
-
-    this.rows = temp;
-
-  }
-  updateFilteroffice(event) {
-    const val = event.target.value.toLowerCase();
-
-    // filter our data
-    const temp = this.rows.filter(function (d) {
-      return d.office.toLowerCase().indexOf(val) !== -1 || !val;
-    });
-
-
-    this.rows = temp;
-
-  }
-
-  updateFilterage(event) {
-    const val = event.target.value.toLowerCase();
-
-    // filter our data
-    const temp = this.rows.filter(function (d) {
-      return d.age.toLowerCase().indexOf(val) !== -1 || !val;
-    });
-
-
-    this.rows = temp;
-
-  }
-  updateFiltersalary(event) {
-    const val = event.target.value.toLowerCase();
-
-    // filter our data
-    const temp = this.rows.filter(function (d) {
-      return d.salary.toLowerCase().indexOf(val) !== -1 || !val;
-    });
-
-
-    this.rows = temp;
-
-  }
-  updateFilterstartdate(event) {
-    const val = event.target.value.toLowerCase();
-
-    // filter our data
-    const temp = this.rows.filter(function (d) {
-      return d.startdate.toLowerCase().indexOf(val) !== -1 || !val;
-    });
-
-
-    this.rows = temp;
-
-  }
 
   // eslint-disable-next-line @typescript-eslint/member-ordering
-  private newAttribute = { 'id': 15, name: 'Mark', position: 'Otto', office: '@mdo', age: '31', salary: '12000', startdate: '16/05/2017' };
+  private newAttribute = {
+    id: 15,
+    name: "Mark",
+    position: "Otto",
+    office: "@mdo",
+    age: "31",
+    salary: "12000",
+    startdate: "16/05/2017",
+  };
 
   addFieldValue() {
     this.rows.push(this.newAttribute);
     this.rows = [...this.rows];
   }
-  deleteFieldValue(index) {
-    this.rows.splice(index, 1);
-  }
-  deleteRow(id) {
-    let i = 0;
-    for (const row of this.rows) {
-      if (row.id === id) {
-        break;
-      }
-      i++;
-    }
-    const temp = [...this.rows];
-    temp.splice(i, 1);
-    this.rows = temp;
-  }
-   updateValue(event, cell, rowIndex) {
-
-    this.editing[rowIndex + '-' + cell] = false;
-    this.row[rowIndex][cell] = event.target.value;
-    const temp = [...this.row];
-    this.row = temp;
-  }
-
-  reloadAddRows() {
-    this.blockUIAddRows.start('Loading..');
-
-    setTimeout(() => {
-      this.blockUIAddRows.stop();
-    }, 2500);
-  }
-  onSelect({ selected }) {
-    this.selected.splice(0, this.selected.length);
-    this.selected.push(...selected);
-  }
-  reloadRowSelection() {
-    this.blockUIRowSelection.start('Loading..');
-
-    setTimeout(() => {
-      this.blockUIRowSelection.stop();
-    }, 2500);
-  }
-  deleteCheckedRow() {
-    let index = 0;
-    const removedIndex = [];
-    const temp = [...this.rows];
-    for (const row of temp) {
-      for (const selectedRow of this.selected) {
-        if (row.id === selectedRow.id) {
-          removedIndex.push(index);
-        }
-      }
-      index++;
-    }
-
-    for (let i = removedIndex.length - 1; i >= 0; i--) {
-      temp.splice(removedIndex[i], 1);
-    }
-    this.rows = temp;
-    this.selected = [];
-  }
 }