JSFiddle - React, Tailwind, and code Playground

by Jonathan Jones

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular-sanitize.min.js"></script>
<script src="https://cdn.rawgit.com/angular-ui/bower-ui-grid/master/ui-grid.min.js"></script>
<link rel="stylesheet" href="https://cdn.rawgit.com/angular-ui/bower-ui-grid/master/ui-grid.min.css">
<div data-ng-app="myApp" ng-controller="myCtrl">
    <div id="grid1" ui-grid="gridOptions" class="grid"></div>
</div>

CSS

.grid {
    width: 100%;
    height: 250px;
}

.injectedHtml {
  color: red;
}

JavaScript

angular.module('myApp', ['ui.grid', 'ngSanitize'])
.controller('myCtrl', ['$scope', function ($scope) {

    $scope.parseDate = function (p) {
        return new Date(p).toUTCString();
    }
    
    $scope.parseHtml = function (p) {
        return '<div class="injectedHtml">' + p + '</div>';
    }

    $scope.gridOptions = {
        enableSorting: true,
        data: [{
            name: "Foo",
            date: "2015-10-12 12:42:01"
        }, {
            name: "Bar",
            date: "2014-10-12 8:00:00"
        }, {
            name: "Ted",
            date: "2015-01-17 9:47:53"
        }, {
            name: "Henry",
            date: "2015-01-31 14:42:01"
        }, {
            name: "Charles",
            date: "2015-02-18 13:27:17"
        }, {
            name: "Derek",
            date: "2015-12-12 23:55:59"
        }],
        columnDefs: [{
            name: 'name',
            cellTemplate: '<div class="ui-grid-cell-contents" ng-bind-html="grid.appScope.parseHtml(row.entity.name)"></div>'
        }, {
            name: 'date',
            cellTemplate: '<div class="ui-grid-cell-contents">{{ grid.appScope.parseDate(row.entity.date) }}</div>'
        }]
    };
}]);