JSFiddle - React, Tailwind, and code Playground

by karin

HTML

<table border="1" data-ng-app="testModule" data-ng-controller="testController">
  <thead>
    <tr>
      <th ng-repeat="i in headerYears">{{i}}</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="row in rows">
      <td ng-repeat="item in bucketize(row.Col)">{{item.Y}}</td>
    </tr>
  </tbody>
</table>

JavaScript

var app = angular.module("testModule", []);

  app.controller('testController', function($scope) {
    $scope.headerYears = [2010, 2011, 2012, 2013, 2014, 2015, 2016, 2017, 2018, 2019, 2020];

		$scope.bucketize = function(col) {
        var data = [{},{},{},{},{},{},{},{},{},{},{}];
        for (var i = 0; i < $scope.headerYears.length; i++) {
            for (var j = 0; j < col.length; j++) {
                if (col[j].Y == $scope.headerYears[i]) {
                    data[i] = col[j];
                }
            }
        }
        return data;
    };

    $scope.rows = [{
      "Name": "Name1",
      "Col": [{
        "Y": 2013,
        "M": 25711
      }, {
        "Y": 2014,
        "M": 26095
      }, {
        "Y": 2015,
        "M": 23641
      }, {
        "Y": 2016,
        "M": 22224
      }, {
        "Y": 2017,
        "M": 21968
      }, {
        "Y": 2018,
        "M": 23820
      }, {
        "Y": 2019,
        "M": 26673
      }, {
        "Y": 2020,
        "M": 29329.5
      }]
    }, {
      "Name": "Name2",
      "Col": [{
        "Y": 2013,
        "M": 83
      }, {
        "Y": 2014,
        "M": 461
      }, {
        "Y": 2015,
        "M": 1067
      }, {
        "Y": 2016,
        "M": 1120
      }, {
        "Y": 2017,
        "M": 1050
      }, {
        "Y": 2018,
        "M": 600
      }, {
        "Y": 2019,
        "M": 475
      }, {
        "Y": 2020,
        "M": 481
      }]
    }, {
      "Name": "Name3",
      "Col": [{
        "Y": 2013,
        "M": 25794
      }, {
        "Y": 2014,
        "M": 26556
      }, {
        "Y": 2015,
        "M": 24708
      }, {
        "Y": 2016,
        "M": 23424
      }, {
        "Y": 2017,
        "M": 23297
      }, {
        "Y": 2018,
        "M": 24412.5
      }, {
        "Y": 2019,
        "M": 27090.5
      }, {
        "Y": 2020,
        "M": 29754.5
      }]
    }]
  });