JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdn.datatables.net/r/dt/jq-2.1.4,jszip-2.5.0,pdfmake-0.1.18,dt-1.10.9,af-2.0.0,b-1.0.3,b-colvis-1.0.3,b-flash-1.0.3,b-html5-1.0.3,b-print-1.0.3,cr-1.2.0,fc-3.1.0,fh-3.0.0,kt-2.0.0,r-1.0.7,rr-1.0.0,sc-1.3.0,se-1.0.1/datatables.min.css">
<script src="https://cdn.datatables.net/r/dt/jq-2.1.4,jszip-2.5.0,pdfmake-0.1.18,dt-1.10.9,af-2.0.0,b-1.0.3,b-colvis-1.0.3,b-flash-1.0.3,b-html5-1.0.3,b-print-1.0.3,cr-1.2.0,fc-3.1.0,fh-3.0.0,kt-2.0.0,r-1.0.7,rr-1.0.0,sc-1.3.0,se-1.0.1/datatables.min.js"></script>
</head>
<body>
<table id="example" class="display">
        <thead>
            <tr>
                <th>ProjectNum</th>
                <th>Client Company</th>                
                <th>ProjectManager</th>
                <th>ProjectSponsor</th>   
                <th>ProjectTitle</th>
                <th>ProjectDescription</th>
                <th>OfficeID</th>
                <th>Office</th>
                <th>ProjectType</th>
                <th>Project_Type</th>
                <th>StartYear</th>
                <th>ProjectNumber</th>                
                <th>TaskCode</th>
                <th>ClientID</th>                                                                                                                                                                                                                              
                <th>MapAreas</th>
                <th>ProjectID</th>
                <th>geom</th>                                            
            </tr>
        </thead>
 
        <tfoot>
            <tr>
                <th>ProjectNum</th>
                <th>Client Company</th>                
                <th>ProjectManager</th>
                <th>ProjectSponsor</th>   
                <th>ProjectTitle</th>
                <th>ProjectDescription</th>
                <th>OfficeID</th>
                <th>Office</th>
                <th>ProjectType</th>
               ...

JavaScript

var test1 = $('#example').DataTable({
    "processing": true,
    "paging": true,
    "ajax": {
      url: "https:gs.integratedsustainability.ca/geoserver/Alfred/ows?",
      type: 'POST',
      data: {
            service: 'WFS',
            version: '1.0.0',
            request: 'GetFeature',
            typename: 'Alfred:ISC_Project_Search_Wysiwyg',
            viewParams: "wysiwyg:"+"oksana",
            outputFormat:'application/json'
            },
    "dataSrc": function (json) {
        var dataList =[]
        $.each(json.features, function(key,value) {
          $.each(value.properties, function(e,v){
              if (e != "geom"){
                dataList.push(value.properties)
              }
          });
        })
       //console.log( JSON.stringify(dataList))
       return dataList
      },
     "columns": [
                 {data:"ProjectNum","defaultContent": "n/a",render:"[0]"},
                 {data:"Client Company","defaultContent": "n/a"},                
                 {data:"ProjectManager","defaultContent": "n/a"},
                 {data:"ProjectSponsor","defaultContent": "n/a"},   
                 {data:"ProjectTitle","defaultContent": "n/a"},
                 {data:"ProjectDescription","defaultContent": "n/a"},
                 {data:"OfficeID","defaultContent": "n/a"},
                 {data:"Office","defaultContent": "n/a"},
                 {data:"ProjectType","defaultContent": "n/a"},
                 {data:"Project_Type","defaultContent": "n/a"},
                 {data:"StartYear","defaultContent": "n/a"},
                 {data:"ProjectNumber","defaultContent": "n/a"},                
                 {data:"TaskCode","defaultContent": "n/a"},
                 {data:"ClientID","defaultContent": "n/a"},  
                 {data:"MapAreas","defaultContent": "n/a"},
                 {data:"ProjectID","defaultContent": "n/a"},
                 {data:"geom","defaultContent": "n/a"}
        ]
    }
});