JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://igniteui.com/js/modernizr.min.js"></script>
<script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2017.1/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2017.1/latest/js/infragistics.lob.js"></script>
<script src="http://igniteui.com/js-data/northwind"></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="grid3">
    </table>

JavaScript

$(function () {
	var results = [];
  for (var i = 0; i < 300; i++) {
  	results.push({id: i, name: "foo" + i});
    results[i]["orders"] = [];
    for (var j = 0; j < 10; j++) {
      results[i]["orders"].push({id: j, name: "foo" + i + j});
    }
  }
  
	var data = {results: results};
  
  $("#grid3").igHierarchicalGrid({
    dataSource: data,
    dataSourceType: "json",
    responseDataKey: "results",
    autoGenerateColumns: false,
    autofitLastColumn: false,
    height: "600px",
    primaryKey: "id",
    rowVirtualization : true,
    initialDataBindDepth: 2,
    initialExpandDepth: 2,
    columns: [
      { key: "id", headerText: "ID", dataType: "number", width: "150px" },
      { key: "name", headerText: "Name", dataType: "string", width: "150px" }
    ],
    autoGenerateLayouts: false,
    rendered: function (evt, ui) {
      var delayInMilliseconds = 10; 
			 setTimeout(function () {
                       var immChildren = $("#grid3").igGrid("immediateChildren");
                        var parentGrid = $("#grid3").igHierarchicalGrid("rootWidget");
                        for (var rIndex = 0; rIndex < immChildren.length; rIndex++) {
                            $("#grid3").igHierarchicalGrid("collapse", parentGrid.rowAt(rIndex));
                        }
                     }, delayInMilliseconds); 
  
    },
    columnLayouts: [
      {
        key: "orders",
        autoGenerateColumns: false,
        autofitLastColumn: false,
        primaryKey: "id",
        width: "100%",
        columns: [
          { key: "id", headerText: "ID", dataType: "number", width: "100px" },
          { key: "name", headerText: "Name", dataType: "string", width: "100px" }
        ]
      }
    ]
  });
});

function expandCollapseRowsPerGrid($gridElement, action, level, callback) {
                var _root = $("#grid3").data("igHierarchicalGrid");
                //get all rows in the grid that are not child grid container
                var rows =...