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-invoices"></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>

<fieldset id="groupOptions" class="explorer">
        <legend>Grouping API methods</legend>
        <label for="columns">Group By a Column: </label>
        <input id="columns"></input>
        <br />
        <label for="groupRows">Select a group:  </label>
        <input id="groupRows"></input>
        <br />
        <input id="expand" type="button"></input>
        <input id="collapse" type="button"></input>
        <br />
        <br />
        <input id="expandAll" type="button"></input>
        <input id="collapseAll" type="button"></input>
    </fieldset>
    <table id="grid"></table>

JavaScript

$(function () {
function getGroupRows(data) {
            if (data === undefined) {
                return;
            }
            var groupRows;
            groupRows = $.grep(data, function (rec) {
                return rec.__gbRecord === true;
            });
            return groupRows;
        }
        $(function () {
            $('#columns').igCombo({
                noMatchFoundText: "There aren't any grouped columns",
                filteringType: "None",
                mode: "dropdown",
                dataSource: [
                    { text: "None", key: "none" },
                    { text: "Order ID", key: "OrderID" },
                    { text: "Ship Name", key: "ShipName" },
                    { text: "Ship City", key: "ShipCity" },
                    { text: "Ship Country", key: "ShipCountry" },
                    { text: "Customer City", key: "City" }
                ],
                textKey: "text",
                valueKey: "key",
                selectionChanged: function (evt, args) {
                    console.log(args);
                    var item = args.items[0], groupRows, data;
                    $("#grid").igGridGroupBy("ungroupAll");
                    if (item.data.key !== "none") {
                        $("#grid").igGridGroupBy("groupByColumn", item.data.key);
                        data = $("#grid").data("igGrid").dataSource.groupByData()
                        groupRows = getGroupRows(data);
                        $('#groupRows').igCombo("option", "dataSource", groupRows);
                        $('#groupRows').igCombo("value", groupRows[0].id);
                    } else {
                        $('#groupRows').igCombo("option", "dataSource", []);
                    }
                }
            });
            $('#groupRows').igCombo({
                noMatchFoundText: "There aren't any grouped columns",
                textKey: "val",
                valueKey: "id"
            });
           ...