JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/handsontable/0.23.0/handsontable.full.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/handsontable/0.23.0/handsontable.full.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ngHandsontable/0.8.0/ngHandsontable.min.js"></script>
<div ng-app="Test">
    <div ng-controller="tableCtrl">
        <hot-table datarows="data">
            <hot-column data="name.0"></hot-column>
            <hot-column data="name.1"></hot-column>
            <hot-column data="email"></hot-column>
        </hot-table>
    </div>
</div>

JavaScript

angular.module('Test', ['ngHandsontable'])
    .controller('tableCtrl', function($scope) {
    
        $scope.data = [
            {
                'name': ['Bob','Bobson'],
                'email': 'bob@sample.com'
            },
            {
                'name': ['John','Johnson'],
                'email': 'john@sample.com'
            }
        ];
        
        $scope.toObject = function(arr) {
          var rv = {};
          for (var i = 0; i < arr.length; ++i)
            rv[i] = arr[i];
          return rv;
        }
        for (var d in $scope.data) {
        	$scope.data[d].name = $scope.toObject($scope.data[d].name);
        }
});