JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdn.datatables.net/t/ju-1.11.4/jq-2.2.0,dt-1.10.11,b-1.1.2,b-print-1.1.2,r-2.0.2/datatables.min.css">
<script src="https://cdn.datatables.net/t/ju-1.11.4/jq-2.2.0,dt-1.10.11,b-1.1.2,b-print-1.1.2,r-2.0.2/datatables.min.js"></script>
<table id="td-gridTable" class="bordered highlight">

JavaScript

var fObject = JSON.parse('[[{"Key":"RecordId"},{"Key":"Name"},{"Key":"Date"},{"Key":"Value"}],[{"RecordId":"1639","Name":"First","Date":"Apr  3 2016 12:00AM","Value":"123.00"},{"RecordId":"1681","Name":"Second","Date":"Apr  3 2016 2:00AM","Value":"456.00"},{"RecordId":"1653","Name":"Third","Date":"Apr  3 2016 12:00AM","Value":"789.00"}]]');

var theHeaders, outRow, theTable;
var theRow = [];

theHeaders = '';
for (var i = 0; i < fObject[0].length; i++) {
  theHeaders += '<th>' + fObject[0][i].Key + '</th>';
}

outRow = '<thead><tr>' + theHeaders + '</tr></thead>';
$(outRow).appendTo('#td-gridTable');
theTable = $('#td-gridTable').DataTable({
  dom: 'Blfrtip',
  buttons: ['excel', 'print']
});
for (var j = 0; j < fObject[1].length; j++) {
  for (var i = 0; i < fObject[0].length; i++) {
    theRow[i] = fObject[1][j][fObject[0][i].Key];
  }
  theTable.row.add(theRow);
}

theTable.draw();