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>
<script src="http://igniteui.com/js-data/employee-data-allDatatypes"></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>


	<table id="mainScreenGrid"></table>

JavaScript

$(function () {
       $("#mainScreenGrid").igGrid({
            autoGenerateColumns: false,
            scrolling: true,
            renderCheckboxes: true,
            dataSource: [],
            dataSourceType: 'json',
            width: "100%",
            primaryKey: "oid",
            columns: [
                {
                    headerText: "Details",
                    key: "oid",
                    template: "<input type=\"button\" value=\"select\" onclick=\"return GetDetails('${oid}','${stTransactionSetIdCode}')\"/>",
                    width: "75px"
                },
                {
                    headerText: "Inbound",
                    key: "isInbound",
                    dataType: "bool",
                    width: "50px"
                },
                {
                    headerText: "Sender",
                    key: "isaSenderId",
                    dataType: "string",
                    width: "100px"
                },
                {
                    headerText: "Receiver",
                    key: "isaReceiverId",
                    dataType: "string",
                    width: "100px"
                },
                {
                    headerText: "Date Time",
                    key: "isaDateTime",
                    dataType: "date",
                    width: "100px"
                },
                {
                    headerText: "Version",
                    key: "isaControlVersionNumber",
                    dataType: "string",
                    width: "75px"
                },
                {
                    headerText: "ISA Control Number",
                    key: "isaControlNumber",
                    dataType: "string",
                    width: "150px"
                },
                {
                    headerText: "Group Control Number",
                    key: "gsGroupControlNum",
                    dataType: "string",
                    width: "150px"
               ...