JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://jp.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://jp.igniteui.com/js/apiviewer.js"></script>
<script src="https://jp.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>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/i18n/infragistics-ja.js"></script>

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

    <div>
        <h3>階層グリッド API</h3>
        <div style="margin: 1em 0;">
            <input type="button" id="buttonExpandAll" value="すべて展開"></input>
            <input type="button" id="buttonCollapseAll" value="すべて縮小"></input>
        </div>
    </div>
    <hr />
    <div>      
        <div>
            <h3>子グリッド API</h3>
            <p style="font-size: 15px; color: #5F6564; margin-top: 1em; margin-bottom: 1em;">
                子グリッドで API メソッドを呼び出すには、ID によって関連する親行を選択してください。                 子グリッドが作成されたことを確認するために、選択した行が展開されます。                 各子グリッドはフラット データの igGrid コントロールのインスタンスで、すべての igGrid API メソッドおよびイベントを子グリッドに適用できます。                     
            </p>
            <div id="SelectParentRowID" style=""></div>

            <div style="clear: both;"></div>
            <fieldset id="gridOptions" class="explorer">
                <legend>グリッド API 設定</legend>
                <label>選択した子 igGrid をデータ...

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("選択された行数: " + rows.length);
                $.each(rows, function (i, val) {
                    apiViewer.log("ID " + val.id + " の行が選択されています");
                });
            }

            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%",
                autoGenerateColumns: false,
          ...