JSFiddle - React, Tailwind, and code Playground

by dkamburov

HTML

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

<script id="colTmpl" type="text/template">
            <div>
                <select class="myselect">
                    {{each ${movies} }}
                       <option value='${movies.name}'>${movies.name}</option>
                     {{/each}}
                </select>
            </div>
    </script>

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

CSS

.myselect {
  width: 100%;
}

JavaScript

var actors = [{
	firstName: "Denzel",
	lastName: "Washington",
	nationality: {key: "USA", value: "USA"},
	movies: [{
			name: "American Gangster American Gangster American Gangster"
		}, {
			name: "Man on Fire Man on Fire Man on Fire Man on Fire"
		}, {
			name: "Out of Time"
		}, {
			name: "Training Day"		
		}]
}, {
	firstName: "Angelina",
	lastName: "Jolie",
	nationality: {key: "USA", value: "USA"},
	movies: [{
			name: "In the Land of Blood and Honey"
		}, {
			name: "Kung Fu Panda 2"
		}, {
			name: "The Tourist"
		}]
}];

$(function () {
            var i = 0, currentValue, limit,
                headerTextValues = ["First Name", "Last Name", "Movies"];

            $("#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[3], key: "movies", width: 300 , template: $( "#colTmpl" ).html()}
                ]
            });
        });