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>
<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>

<table id="table" class="standard-grid">
        <thead>
            <tr>
                <th>
                    Name (from XML)
                </th>
                <th>
                    Age (from Array)
                </th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
    <br />

CSS

.standard-grid { width:100%; border-top:1px solid #b1b1b1; border-right:1px solid #b1b1b1; border-spacing: 0;}
        .standard-grid th, .standard-grid td { text-align:left; border-bottom:1px solid #b1b1b1; border-left:1px solid #b1b1b1; padding:4px;}

JavaScript

$(function () {
            //Sample XML Data
            var xmlDoc = '<People>' +
                '<Person Name="Gustavo Achong">' +
                    '<Details Age="42" Email="[email protected]" />' +
                '</Person>' +
                '<Person Name="Catherine Abel">' +
                    '<Details Age="27" Email="[email protected]" />' +
                '</Person>' +
                '<Person Name="Kim Abercrombie">' +
                    '<Details Age="33" Email="[email protected]" />' +
                '</Person>' +
            '</People>';

            // Sample array data
            var data = [
                { "Name": "John Smith", "Age": 45 },
                { "Name": "Mary Johnson", "Age": 32 },
                { "Name": "Bob Ferguson", "Age": 27 }
            ];

            // Renders the table
            var renderTable = function (success, error) {
                var template = "<tr><td>${PersonName}</td><td>${Age}</td></tr>";
                if (success) {
                    $("#table tbody").empty();
                    $($.ig.tmpl(template, dsMashup.dataView())).appendTo("#table tbody");
                } else {
                    alert(error);
                }
            }

            //Binding to XML requires a schema to define data fields
            var xmlSchema = new $.ig.DataSchema("xml",
                {
                    //searchField serves as the base node(s) for the XPaths
                    searchField: "//Person",
                    fields: [
                        { name: "PersonName", xpath: "./@Name" },
                        { name: "PersonEmail", xpath: "Details/@Email" },
                        { name: "PersonAge", xpath: "Details/@Age" }
                    ]
                }
            );

            //This code creates an $.ig.MashupDataSource from JavaScript array and XML data
            var dsMashup = new $.ig.MashupDataSource({
                dataSource:...