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" renderer="customRendererName"></hot-column>
            <hot-column data="name" renderer="customRendererSurname"></hot-column>
            <hot-column data="email"></hot-column>
        </hot-table>
    </div>
</div>

JavaScript

angular.module('Test', ['ngHandsontable'])
    .controller('tableCtrl', function($scope) {
    		
    		$scope.customRendererName = function(instance, td, row, col, prop, value, cellProperties) {
        	var html = Handsontable.helper.stringify(value[0]);
          td.innerHTML = html;
          return td;
        	return value[0];
        }
        
        $scope.customRendererSurname = function(instance, td, row, col, prop, value, cellProperties) {
         	var html = Handsontable.helper.stringify(value[1]);
          td.innerHTML = html;
          return td;
        }
        
        $scope.data = [
            {
                'name': ['Bob','Bobson'],
                'email': 'bob@sample.com'
            },
            {
                'name': ['John','Johnson'],
                'email': 'john@sample.com'
            }
        ];
});