JSFiddle - React, Tailwind, and code Playground

by karin

HTML

<div data-ng-app="testTable" data-ng-controller="testController">

  <table border="1">
  <thead>
    <tr><th>Name</th><th>Consensus</th></tr>
  </thead>
    <tbody>
      <tr data-ng-repeat="row in rows">
      <td>{{row.Name}}</td>
        <td data-ng-repeat="item in row.Consensus">{{item.Y}}</td>
      </tr>
    </tbody>
  </table>
</div>

JavaScript

var app = angular.module("testTable", []);
 app.controller('testController', function($scope, $http) {
  
 $scope.rows=[{
	"ID": 2005,
	"Name": "Product Sales",
	"CCY": "$",
	"Consensus": [{
		"Y": 0,
		"M": null,
		"IsSummary": 0
	}, {
		"Y": 2011,
		"M": 33591,
		"H": 33591,
		"L": 33591,
		"FO": "",
		"Historical": 1,
		"IsSummary": 0
	}, {
		"Y": 2012,
		"M": 27973,
		"H": 27973,
		"L": 27973,
		"FO": "",
		"Historical": 1,
		"IsSummary": 0
	}, {
		"Y": 2013,
		"M": 25711,
		"H": 25711,
		"L": 25711,
		"FO": "",
		"Historical": 1,
		"IsSummary": 0
	}, {
		"Y": 2014,
		"M": 26095,
		"H": 26095,
		"L": 26095,
		"FO": "",
		"Historical": 1,
		"IsSummary": 0
	}, {
		"Y": 2015,
		"M": 23641,
		"H": 23641,
		"L": 23641,
		"FO": "",
		"Historical": 1,
		"IsSummary": 0
	}, {
		"Y": 2016,
		"M": 22224,
		"H": 24034,
		"L": 21695,
		"FO": "",
		"Historical": 0,
		"IsSummary": 0
	}, {
		"Y": 2017,
		"M": 21968,
		"H": 24993,
		"L": 21320,
		"FO": "",
		"Historical": 0,
		"IsSummary": 0
	}, {
		"Y": 2018,
		"M": 23820,
		"H": 28304,
		"L": 22587,
		"FO": "",
		"Historical": 0,
		"IsSummary": 0
	}, {
		"Y": 2019,
		"M": 26673,
		"H": 30603,
		"L": 24439,
		"FO": "",
		"Historical": 0,
		"IsSummary": 0
	}, {
		"Y": 2020,
		"M": 29329.5,
		"H": 33401,
		"L": 26307,
		"FO": "",
		"Historical": 0,
		"IsSummary": 0
	}, {
		"Y": 0,
		"M": -0.04220572518574428,
		"H": null,
		"L": null,
		"FO": "perc",
		"Historical": 0,
		"IsSummary": 1
	}],
	"DisplayOrder": 50,
	"Tags": null
}, {
	"ID": 2006,
	"Name": "Externalisation Revenue",
	"CCY": "$",
	"Consensus": [{
		"Y": 0,
		"M": null,
		"IsSummary": 0
	}, {
		"Y": 0,
		"M": null,
		"IsSummary": 0
	}, {
		"Y": 0,
		"M": null,
		"IsSummary": 0
	}, {
		"Y": 0,
		"M": null,
		"IsSummary": 0
	}, {
		"Y": 0,
		"M": null,
		"IsSummary": 0
	}, {
		"Y": 0,
		"M": null,
		"IsSummary": 0
	}, {
		"Y": 0,
		"M": null,
		"IsSummary": 0
	}, {
		"Y": 0,
		"M": null,
		"IsSummary": 0
	}, {
		"Y": 0,
		"M": null,
		"IsSummary": 0
	}, {
		"Y":...