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"></table>

JavaScript

var fObject = {
  "header": [
    {
      "Key": "RecordId"
    },
    {
      "Key": "Name"
    },
    {
      "Key": "Date"
    },
    {
      "Key": "Value"
    }
  ],
  "data": [
    {
      "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.header.length; i++) {
  theHeaders += '<th>' + fObject.header[i].Key + '</th>';
}

outRow = '<thead><tr>' + theHeaders + '</tr></thead><tbody></tbody>';
$(outRow).appendTo('#td-gridTable');
theTable = $('#td-gridTable').DataTable({
  dom: 'Bfrtip',
  buttons: ['print'],
  data: fObject.data,
  'columns': [
  	{ 'data':"RecordId"},
    { 'data':"Name"},
    { 'data':"Date"},
    { 'data':"Value"}
  ]
});