JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://igniteui.com/js/modernizr.min.js"></script>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.core.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.lob.js"></script>
<script src="https://igniteui.com/js-data/actors"></script>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet"></link>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/structure/infragistics.css" rel="stylesheet"></link>

<script id="colTmpl" type="text/template">
            <div class='tree'>
                <ul>
                    {{each ${movies} }}
                       <li>${movies.name}
                           <ul>
                               <li>Genre: ${movies.genre}</li>
                               <li>Year: ${movies.year}</li>
                               <li><a>
                                     <span class='ratingLabel' style='float:left'>Rating:</span>
                                     <span class='rating'>${movies.rating}</span> 
                                   </a>
                               </li>
                               <li class='clear'>Languages: ${movies.languages}</li>
                               <li>Subtitles: ${movies.subtitles}</li>
                           </ul>
                     {{/each}}
                </ul>
            </div>
    </script>

<table id="resultGrid"></table>

CSS

.clear {
            clear: both;
        }

        .ui-igrating {
            float: left;
        }

        .ratingLabel {
            float: left;
            margin-left: 3px;
            margin-right: 5px;
        }

JavaScript

$(function () {
            var i = 0, currentValue, limit,
                headerTextValues = ["First Name", "Last Name", "Nationality", "Movies"],
                imagesRoot = "https://igniteui.com/images/samples/templating-engine/multiConditionalColTemplate";

            $("#resultGrid").igGrid({
                dataSource: actors,
                width: "100%",
                autoGenarateColumns: false,
                columns: [
                    { headerText: headerTextValues[0], key: "firstName", width: 100 },
                    { headerText: headerTextValues[1], key: "lastName", width: 200 },
                    { headerText: headerTextValues[2], key: "nationality", width: 100, template: "<img width='20' height='15' src='" + imagesRoot + "/${nationality.key}.gif' /> ${nationality.value} " },
                    { headerText: headerTextValues[3], key: "movies", width: 300 , template: $( "#colTmpl" ).html()}
                ],
                rendered: function () {
                    initializeInnerControls();
                },
                features: [
                    {
                        name: "Paging",
                        type: "local",
                        pageSize: 4,
                        pageSizeList: [2, 4, 7],
                        pageSizeChanged: function () {
                            initializeInnerControls();
                        },
                        pageIndexChanged: function () {
                            initializeInnerControls();
                        }
                    }
                ]
            });

            function initializeInnerControls() {
                $(".tree").igTree({ hotTracking: false });
                limit = $('.rating').length;
                for (i = 0; i < limit; i++) {
                    currentValue = parseFloat($($('.rating')[i]).html());
                    $($('.rating')[i]).igRating({
                        voteCount: 10,
                        value:...