Fetching data from a service using Data Table(TeraData Covalent)

Question

I am trying to fetch data from a service and show them in a datatable using Covalent , the only issue I seem not to figure out how to go about it. Initially Was using twitter bootstrap with datable and it was working fine. I was chug to material design 2 using covalent, this is the only part am stuck.

Here is my component

getSpReceiptsList(){
  //console.log(this.webApiPathService.getWebApiPath('get-sp-receipts').path);
  this.getReceiptService.getReceipts( this.webApiPathService.getWebApiPath('get-sp-receipts').path, this.token)
  .subscribe(response => {
      if(response){
          this.spReceiptsList = this.getReceiptService.getReceiptsList();
          this.spReceiptsList.forEach((object)=>{
              let paymentDate = new Date(object.paymentDate);
              let year = paymentDate.getFullYear();
              let month = paymentDate.getMonth()+1;
              let dt = paymentDate.getDate();    
              let hours = paymentDate.getHours();
              let minutes = paymentDate.getMinutes();
              let seconds = paymentDate.getSeconds();
              object.paymentDate = dt+'-' + month + '-'+year+' '+hours+':' + minutes + ':'+seconds;
          });

      }else{
          this.snackBar.open('No receipts exist', '', {
                  duration: 2000,
          });
      }
  }, 
  errMsg => {
      this.snackBar.open(errMsg, '', {
          duration: 2000,
      });
      console.log(errMsg);
  });
}

  //Covalent
  data: any[] = [
    { approve: 'True', serviceName: 'Hotel', userName: 'gbrigens', amount: 1000, paymentDate: '12/08/2017' },
  ];
  columns: ITdDataTableColumn[] = [
    { name: 'approve', label: 'APPROVE', tooltip: 'Approve' },
    { name: 'serviceName', label: 'SERVICE NAME' },
    { name: 'userName', label: 'USER NAME' },
    { name: 'amount', label: 'AMOUNT' },
    { name: 'paymentDate', label: 'PAYMENT DATE' }
  ];

  filteredData: any[] = this.data;
  filteredTotal: number = this.data.length;

  searchTerm: string = '';
  fromRow: number = 1;
  currentPage: number = 1;
  pageSize: number = 5;
  sortBy: string = 'approve';
  selectedRows: any[] = [];
  sortOrder: TdDataTableSortingOrder = TdDataTableSortingOrder.Descending;

  sort(sortEvent: ITdDataTableSortChangeEvent): void {
    this.sortBy = sortEvent.name;
    this.sortOrder = sortEvent.order;
    this.filter();
  }

  search(searchTerm: string): void {
    this.searchTerm = searchTerm;
    this.filter();
  }

  page(pagingEvent: IPageChangeEvent): void {
    this.fromRow = pagingEvent.fromRow;
    this.currentPage = pagingEvent.page;
    this.pageSize = pagingEvent.pageSize;
    this.filter();
  }

  filter(): void {
    let newData: any[] = this.data;
    let excludedColumns: string[] = this.columns
    .filter((column: ITdDataTableColumn) => {
      return ((column.filter === undefined && column.hidden === true) ||
              (column.filter !== undefined && column.filter === false));
    }).map((column: ITdDataTableColumn) => {
      return column.name;
    });
    newData = this._dataTableService.filterData(newData, this.searchTerm, true, excludedColumns);
    this.filteredTotal = newData.length;
    newData = this._dataTableService.sortData(newData, this.sortBy, this.sortOrder);
    newData = this._dataTableService.pageData(newData, this.fromRow, this.currentPage * this.pageSize);
    this.filteredData = newData;
  }

Template to show the table

<div layout="row" layout-align="start center" class="pad-left-sm pad-right-sm">
  <span *ngIf="!searchBox.searchVisible" class="push-left-sm">
    <span class="md-title">Receipts</span>
  </span>
  <span *ngIf="!searchBox.searchVisible" class="push-left-sm">
    <span *ngIf="(selectable && !selectedRows.length) || !selectable" class="md-title">Receipts</span>
    <span *ngIf="selectedRows.length && selectable" class="md-body-1">0 item(s) selected</span>
  </span>
  <td-search-box #searchBox backIcon="arrow_back" class="push-right-sm" placeholder="Search here" (searchDebounce)="search($event)" flex>
  </td-search-box>
</div>
<md-divider></md-divider>
<td-data-table
  #dataTable
  [data]="filteredData"
  [columns]="columns"
  [selectable]="selectable"
  [clickable]="clickable"
  [multiple]="multiple"
  [sortable]="true"
  [sortBy]="sortBy"
  [(ngModel)]="selectedRows"
  [sortOrder]="sortOrder"
  (sortChange)="sort($event)">
</td-data-table>
<div class="md-padding" *ngIf="!dataTable.hasData" layout="row" layout-align="center center">
  <h3>No results to display.</h3>
</div>
<td-paging-bar #pagingBar [pageSize]="pageSize" [total]="filteredTotal" (change)="page($event)">
  <span hide-xs>Rows per page:</span>
  <md-select [style.width.px]="50" [(ngModel)]="pageSize">
    <md-option *ngFor="let size of [5,10,15,20]" [value]="size">
      {{size}}
    </md-option>
  </md-select>
  {{pagingBar.range}} <span hide-xs>of {{pagingBar.total}}</span>
</td-paging-bar>

And lastly my service

getReceipts(path: string, token: string): Observable<Boolean>{
      let headers = new Headers();
      headers.append('Content-Type', 'application/json');
      headers.append('x-access-token', token);
      headers.append('Accept', 'application/json');
      let requestoptions = new RequestOptions({
          headers: headers
      });


      let urlPath: string = this.authUrl + path;
      console.log(urlPath);
      return this.http
          .get(urlPath, requestoptions)
          .map((res: Response) => {  
              let test: Array<SpReceiptModel> = res.json();        
              this.spReceiptList = test;
              if(this.spReceiptList.length !== 0){
                  return true;
              }else{
                  return false;
              }
          })
          .catch((err) => this.handleError(err));
  }

Answer 1

In your component you miss call filter() function to update de filteredData in your data-table your define your attribute data like this:

[data]="filteredData"

then in your component need to call

this.filter()

At the end of this forEach

 this.spReceiptsList.forEach((object)=>{
          let paymentDate = new Date(object.paymentDate);
          let year = paymentDate.getFullYear();
          let month = paymentDate.getMonth()+1;
          let dt = paymentDate.getDate();    
          let hours = paymentDate.getHours();
          let minutes = paymentDate.getMinutes();
          let seconds = paymentDate.getSeconds();
          object.paymentDate = dt+'-' + month + '-'+year+' '+hours+':' + minutes + ':'+seconds;
      });
 this.filter();

well you miss update that variable, or you can set the variable filteredData instead of call this.filter()

   this.filteredData = this.spReceiptsList;