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/nw-customers-with-orders"></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>

<div id="splitter">
        <div>
            <table id="mainGrid"></table>
        </div>
        <div>
            <table id="detailGrid"></table>
        </div>
    </div>

CSS

@media all and (max-width: 480px) {
            #mainGrid_container, #detailGrid_container {
                font-size: 14px;
            }
        }

JavaScript

$(function () {
            $("#splitter").igSplitter({ height: "700px", orientation: "horizontal", panels: [{ collapsible: false }, { size: 200, collapsed: true, collapsible: true}] });
            $("#mainGrid").igGrid({
                width: "100%",
                height: "100%",
                autoGenerateColumns: false,
                dataSource: nwCustomersWithOrders,
                columns: [{
                    headerText: "Customer ID",
                    key: "ID"
                }, {
                    headerText: "Company Name",
                    key: "CompanyName"
                }, {
                    headerText: "Contact Name",
                    key: "ContactName"
                }, {
                    headerText: "Contact Title",
                    key: "ContactTitle"
                }],
                dataRendered: function(evt, ui) {
                    $("#mainGrid").igGridSelection("selectRow", 0);
                    selectRowAndExpandSecondPane(0);
                },
                features: [{
                    name: "Selection",
                    mode: "row",
                    rowSelectionChanged: function (ui, args) {
                        selectRowAndExpandSecondPane(args.row.index);
                    }
                }]
            });

            function selectRowAndExpandSecondPane(rowIndex) {
                $("#detailGrid").igGrid({
                    width: "100%",
                    height: "100%",
                    autoGenerateColumns: false,
                    columns: [{
                        headerText: "Order ID",
                        key: "OrderID"
                    }, {
                        headerText: "Customer ID",
                        key: "CustomerID"
                    }, {
                        headerText: "Ship Name",
                        key: "ShipName"
                    }],
                    dataSource: nwCustomersWithOrders[rowIndex].Orders || []
        ...