AngularJS 1.6 - Table w/ CSS Grid

var app = angular.module('agApp', []);

app.controller('mainCtrl', function($scope) {
  $scope.data = _.times(10, n=>{
    return { header: n };
  });
});

class TableCtrl {
  $onChanges(chg){
    let vm = this;
    if (chg.data && chg.data.currentValue) {
      console.log('Data:', vm.data[0]);
    }
  }
}

app.component('agTable', {
  template: `
  <style>
    ag-table {
      border: 1px solid black;
      display: grid;
      grid-template-columns: repeat(11, 1fr);
      overflow:scroll;
    }
    ag-column.main{
      background-color: grey;
      color: white;
    }
    ag-column > * {
      display: grid;
      grid-template-columns: 1fr;
    }
    ag-header, ag-row {
      border-bottom: 1px solid black;
      border-right: 1px solid black;
      padding: 4px;
    }
    ag-row:last-child {
      border-bottom: none;
    }
    ag-column:last-child ag-row, ag-column:last-child ag-header{
       border-right: none;
    }
    ag-column:nth-child(2) ag-row, ag-column:nth-child(2) ag-header{
       border-right: none;
    }
    ag-column:nth-child(3) ag-row, ag-column:nth-child(3) ag-header{
       border-left: 1px solid black;
    }
  </style>
  <ag-column class="main">
    <ag-header>Title0</ag-header>
    <ag-row>
      Title1
    </ag-row>
    <ag-row>
      Title2
    </ag-row>
  </ag-column>
  <ag-column ng-repeat="d in $ctrl.data">
    <ag-header>{{d.header}}</ag-header>
    <ag-row>
      hi
    </ag-row>
    <ag-row>
      <button>Action</button>
    </ag-row>
    <ag-row>
      <button>Action</button>
    </ag-row>
    <ag-row>
      <select>Action</select>
    </ag-row>
  </ag-column>
  `,
  bindings: {
    data: '<'
  },
  controller: TableCtrl
});

app.component('agColumn', {
  transclude: true,
  template: `
  <ng-transclude></ng-transclude>
  `,
  bindings: {
    name: '<',
    title: '@'
  }
});

<!DOCTYPE html>
<html ng-app="agApp">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.6.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.6/angular.min.js" data-semver="1.6.6"></script>
    <script data-require="lodash.js@*" data-semver="4.17.4" src="https://cdn.jsdelivr.net/npm/lodash@4.17.4/lodash.min.js"></script>
    <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
    <script src="app.js"></script>
  </head>

  <body ng-controller="mainCtrl">
    <ag-table data="data"></ag-table>
  </body>

</html>

/* Put your css in here */
body {
  font-family: 'Open Sans', sans-serif;
}