JSFiddle - React, Tailwind, and code Playground

by Scott Kaye

HTML

<div id="out"></div>

CSS

table {
    table-layout: fixed;
}

td, th {
    width: 100px;
    height: 20px;
}

JavaScript

var data = `[
{
	"PlanId": 1000,
"PlanName": "T2",
"Changes": [  
         {  
            "Type":"Projected",
            "OldValue":0,
            "NewValue":1,
            "Date":"Jan 2015",
            "User":{  
               "Name":"403 User",
               "Id":403
            },
            "Project":{  
               "Name":"Management Oversight of Base Essentials ",
               "Id":66
            }
         },
         {  
            "Type":"Projected",
            "OldValue":0,
            "NewValue":1,
            "Date":"Feb 2015",
            "User":{  
               "Name":"403 User",
               "Id":403
            },
            "Project":{  
               "Name":"Management Oversight of Base Essentials ",
               "Id":66
            }
         },
         {  
            "Type":"Projected",
            "OldValue":0,
            "NewValue":1,
            "Date":"Mar 2015",
            "User":{  
               "Name":"403 User",
               "Id":403
            },
            "Project":{  
               "Name":"Management Oversight of Base Essentials ",
               "Id":66
            }
         },
         {  
            "Type":"Projected",
            "OldValue":0,
            "NewValue":1,
            "Date":"Apr 2015",
            "User":{  
               "Name":"403 User",
               "Id":403
            },
            "Project":{  
               "Name":"Management Oversight of Base Essentials ",
               "Id":66
            }
         },
         {  
            "Type":"Projected",
            "OldValue":0,
            "NewValue":1,
            "Date":"May 2015",
            "User":{  
               "Name":"403 User",
               "Id":403
            },
            "Project":{  
               "Name":"Management Oversight of Base Essentials ",
               "Id":66
            }
         },
         {  
            "Type":"Projected",
            "OldValue":0,
            "NewValue":1,
         ...