Display SharePoint List Data With jQuery DataTable In SharePoint Framework(SPFx) WebPart

npm install @types/jquery@2 --save  
npm install @types/jqueryui --save

npm install datatables.net  
npm install datatables.net-jqui  
npm install --save @types/datatables.net

import { SPComponentLoader } from '@microsoft/sp-loader';  
import * as $ from 'jquery';  
import 'DataTables.net';  
import { SPHttpClient, SPHttpClientResponse, ISPHttpClientOptions} from '@microsoft/sp-http';

/_api/web/Lists/GetByTitle('CustomList')/items?$select=ID,Title,Email,Phone,Status,yes_x0020_no

public render(): void {  
    // Just adding a plain table which will be converted to jquery datatable.  
    this.domElement.innerHTML = `  
    <table id="example" class="display" width="100%"></table>`;  
    //Loading Jquery Datatable CSS file to get required look and feel, somehow It thought installing  
    // datatable package will load css also but it did not worked so I had explicitly call it here.  
    SPComponentLoader.loadCss("https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css");  
    // getting context of current web  
    let currentWebUrl = this.context.pageContext.web.absoluteUrl;  
  
    // Rest API endpoint to get list data, please note here we are only getting specific columns which are required.  
    let requestUrl = currentWebUrl.concat("/_api/web/Lists/GetByTitle('CustomList')/items?$select=ID,Title,Email,Phone,Status,yes_x0020_no")   
    // calling the get method on above REST endpoint  
    this.context.spHttpClient.get(requestUrl, SPHttpClient.configurations.v1)    
    .then((response: SPHttpClientResponse) => {    
        if (response.ok) {    
            response.json().then((responseJSON) => {    
                if (responseJSON!=null && responseJSON.value!=null){    
                 // Converting data to jsonArray  
                  var jsonArray = responseJSON.value.map(function (item) {  
                    return [  
                        item.ID,  
                        item.Title,  
                        item.Email,  
                        item.Phone,  
                        item.Status,  
                        item.yes_x0020_no ? "Yes" : "No"  
                    ];  
                });  
  
                // Intializing Datatable by passing jsonArray, specifying columns names here, please note that this should be   
                // in sequence of above jsonArray attributes values, it would be mapped one to one.  
                $('#example').DataTable( {  
                    data: jsonArray,  
                    columns: [  
                        { title: "ID" },  
                        { title: "Title" },  
                        { title: "Email" },  
                        { title: "Phone" },  
                        { title: "Status" },  
                        { title: "Yes/No" }  
                    ]  
                } );  
  
                }    
            });    
        }    
    });   
  }