import { Component, OnDestroy, OnInit, ViewChild, Injectable} from '@angular/core';
import { DataTableDirective } from 'angular-datatables';
import {Sort} from '@angular/material';
import { MatTableDataSource, MatSort } from '@angular/material';
import { DataSource } from '@angular/cdk/table';

@Component({
   selector: 'app-root',
   templateUrl: 'app.component.html',
   styleUrls: ['app.component.css']
})
export class AppComponent implements OnDestroy, OnInit {
   @ViewChild(DataTableDirective)
   datatableElement: DataTableDirective;
   data =             {
    "transactions":[
        {
        "id": 1,
        "cost":11,
        "quantity":10,
        "productId":1
        },
        {
        "id": 2,
        "cost":12,
        "quantity":100,
        "productId":2
        }
    ]
    }


   dtOptions: DataTables.Settings = {};

   ngOnInit(): void {

     $.fn['dataTable'].ext.search.push((settings, data, dataIndex) => {
       const id = parseFloat(data[0]) || 0; // use data for the id column
       return false;
     });

     this.dtOptions = {
       ajax: 'data',
       columns: [{
         title: 'ID',
         data: 'id'
       }, {
         title: 'First name',
         data: 'firstName'
       }, {
         title: 'Last name',
         data: 'lastName'
       }]
     };
   }

   ngOnDestroy(): void {
     $.fn['dataTable'].ext.search.pop();
   }

   filterById(): void {
     this.datatableElement.dtInstance.then((dtInstance: DataTables.Api) => {
       dtInstance.draw();
     });
   }
 }