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>

<input type="button" id="dataBindBtn" value="Databind" title="Databind"></input>
    <table id="sourceTable" class="standard-grid">
        <thead>
            <tr>
                <th>
                    ID
                </th>
                <th>
                    Name
                </th>
                <th>
                    Number
                </th>
            </tr>
        </thead>
        <tbody>
            <tr><td>1</td><td>Adjustable Race</td><td>AR-5381</td></tr>
            <tr><td>2</td><td>Bearing Ball</td><td>BA-8327</td></tr>
            <tr><td>3</td><td>BB Ball Bearing</td><td>BE-2349</td></tr>
            <tr><td>4</td><td>Headset Ball Bearings</td><td>BE-2908</td></tr>
            <tr><td>316</td><td>Blade</td><td>BL-2036</td></tr>
            <tr><td>317</td><td>LL Crankarm</td><td>CA-5965</td></tr>
            <tr><td>318</td><td>ML Crankarm</td><td>CA-6738</td></tr>
            <tr><td>319</td><td>HL Crankarm</td><td>CA-7457</td></tr>
            <tr><td>320</td><td>Chainring Bolts</td><td>CB-2903</td></tr>
            <tr><td>321</td><td>Chainring Nut</td><td>CN-6137</td></tr>
        </tbody>
    </table>
    <br />
    <table id="destinationTable" class="standard-grid">
        <thead>
            <tr>
                <th>
                    ID
                </th>
               ...

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 () {
            $("#dataBindBtn").igButton({ labelText: $("#dataBindBtn").val() });
            $('#dataBindBtn').on("click", function (e) {
                    // Renders the table
                    var renderTable = function (success, error) {
                        var template = "<tr><td>${ID}</td><td>${Name}</td><td>${Number}</td></tr>";
                        if (success) {
                            $("#destinationTable tbody").empty();
                            $($.ig.tmpl(template, ds.dataView())).appendTo("#destinationTable tbody");
                            $("#dataBindBtn").igButton('disable');
                        } else {
                            alert(error);
                        }
                    }

                    // The $.ig.DataSchema is used to define the schema of the data
                    // Defining $.ig.DataSchema is mandatory when binding to HTML TABLE element
                    var tableSchema = new $.ig.DataSchema("htmlTableDom", {
                        fields: [
                            { name: "ID" },
                            { name: "Name" },
                            { name: "Number" }
                        ]
                    });

                    //This code creates an $.ig.DataSource from the HTML Table DOM data
                    var ds = new $.ig.DataSource({
                        schema: tableSchema,
                        dataSource: $("#sourceTable")[0],
                        callback: renderTable
                    });

                    // Binds to the underlying data
                    ds.dataBind();
                }
            );
        });