JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-2.2.1.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2016.1.112/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.1.112/styles/kendo.common.min.css">
<style>
  html, body, #container {
    height: 100%;
  }
</style>
<div id="container">

</div>

JavaScript

var json = {"activeSheet":"Sheet1","sheets":[{"activeCell":"F18","name":"Sheet1","columns":[{"index":0,"width":181.0},{"index":1,"width":76.0},{"index":2,"width":405.0},{"index":3,"width":210.0},{"index":4,"width":119.0},{"index":5,"width":170.0}],"frozenColumns":0,"frozenRows":1,"rows":[{"cells":[{"color":"#000000","fontFamily":"Calibri","fontSize":11.0,"bold":true,"format":"","index":0,"value":"Template"},{"color":"#000000","fontFamily":"Calibri","fontSize":11.0,"bold":true,"format":"","index":1,"value":"Project code"},{"color":"#000000","fontFamily":"Calibri","fontSize":11.0,"bold":true,"format":"","index":2,"value":"Project Name"},{"color":"#000000","fontFamily":"Calibri","fontSize":11.0,"bold":true,"format":"","index":3,"value":"Final Task Name"},{"color":"#000000","fontFamily":"Calibri","fontSize":11.0,"bold":true,"format":"[$-409]m/d/yy\\ h:mm\\ AM/PM;@","index":4,"value":"Task Complete Date"},{"color":"#000000","fontFamily":"Calibri","fontSize":11.0,"bold":true,"format":"","index":5,"value":"Project Admin"}],"index":0}],"selection":"F18:F18","mergedCells":[]}]}


$.ajax({
	url:"/echo/json/",
  type: "POST",
  data: {json: JSON.stringify(json)},
  delay: 5,
  success: function (data){
  	var spreadSheet = $("<div/>").appendTo("#container").css({height:"100%"}).kendoSpreadsheet();
  
  	spreadSheet.data("kendoSpreadsheet").fromJSON(data);
    console.log("data", data);
  }
});