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/apiviewer.js"></script>
<script src="https://igniteui.com/js-data/northwind"></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>
<link href="https://www.igniteui.com/css/apiviewer.css" rel="stylesheet" type="text/css"></link>

<div style="height: 400px; padding-bottom: 30px;">
        <table id="grid"></table>
    </div>

    <div>
        <h3>Hierarchical Grid API</h3>
        <div style="margin: 1em 0;">
            <input type="button" id="buttonExpandAll" value="Expand All"></input>
            <input type="button" id="buttonCollapseAll" value="Collapse All"></input>
        </div>
    </div>
    <hr />
    <div>      
        <div>
            <h3>Child Grid API</h3>
            <p style="font-size: 15px; color: #5F6564; margin-top: 1em; margin-bottom: 1em;">
                In order to call an API method on a child grid, please first select the associated parent row by ID.                 The selected row will be expanded to ensure that the child grid is created.                 Note that each child grid is an instatiation of a flat-data igGrid control and all igGrid API methods and events are applicable for it.                     
            </p>
            <div id="SelectParentRowID" style=""></div>

            <div style="clear: both;"></div>
            <fieldset id="gridOptions" class="explorer">
               ...

CSS

fieldset.explorer
        {
            float: left;
            width: 45%;
        }

        #sampleContainer fieldset
        {
            border: none;
            margin: 1em 0;
            padding: 0em;
        }

        #sampleContainer fieldset > legend
        {
            padding: 2px 0;
        }

        hr
        {
            border-top: 1px solid #dadada;
            border-bottom: 0px;
            border-left: 0px;
        }

        .comboTable
        {
            width: 100%;
            height: 40px;
        }

        .comboTable > tbody > tr > td
        {
             width: 120px;
             text-align: left;
             display: inline-block;
        }

        .comboTableHeader
        {
            border-bottom: solid 1px #E8E8E8;
        }

JavaScript

$(function () {
            // Used to show output in the API Viewer at runtime, 
            // defined in external script 'apiviewer.js'    
            var apiViewer = new $.ig.apiViewer();


            /*-----------------API calls -------------------------*/

            function SelectRow(grid, index) {
                grid.igGridSelection("selectRow", index);
            }
            function GetSelectedRows(grid) {
                var rows = grid.igGridSelection("selectedRows");
                apiViewer.log("The number of selected rows is: " + rows.length);
                $.each(rows, function (i, val) {
                    apiViewer.log("Row with id " + val.id + " is selected");
                });
            }

            function ChangePageIndex(grid, index) {
                grid.igGridPaging("pageIndex", index);
            }

            function ChangePageSize(grid, size) {
                grid.igGridPaging("pageSize", size);
            }

            function ApplyFilter(grid) {
                var expr = $("#exprTextEditor").igTextEditor("value") ||
                    $("#exprNumericEditor").igNumericEditor("value") ||
                    $("#exprDateEditor").data('igDateEditor').value(),
                  condition = $("#conditionList").igCombo("selectedItems")[0].data["cond"],
                columnDataSource = $("#filterColumn").igCombo("option", "dataSource"),
                filterColumn = $("#filterColumn").igCombo("selectedItems")[0].data.column;
                if (expr !== null && expr !== undefined) {
                    grid.igGridFiltering("filter", ([{ fieldName: filterColumn, expr: expr, cond: condition }]));
                } else {
                    grid.igGridFiltering("filter", []);
                }
            }

            /*-----------------Grid  Instantiation -------------------------*/
            $("#grid").igHierarchicalGrid({
                width: "100%",
                height: "100%",
               ...