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/external/tether.min.js"></script>
<script src="https://igniteui.com/js-data/Customers"></script>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/structure/infragistics.css" rel="stylesheet"></link>
<link type="text/css" href="https://cdn-na.infragistics.com/igniteui/latest/css/themes/metro/infragistics.theme.css" rel="stylesheet"></link>
<link type="text/css" href="https://cdn-na.infragistics.com/igniteui/latest/css/structure/modules/infragistics.ui.shared.css" rel="stylesheet"></link>
<link type="text/css" href="https://cdn-na.infragistics.com/igniteui/latest/css/structure/modules/infragistics.ui.combo.css" rel="stylesheet"></link>
<link type="text/css" href="https://cdn-na.infragistics.com/igniteui/latest/css/structure/modules/infragistics.ui.validator.css" rel="stylesheet"></link>

<div id='combo'></div>
    <br />

CSS

.dropdown-menu {
            list-style-type: none;
        }
        #test {
            position: absolute;
            margin-left: 100px;
            margin-top: 50px;
            top: 33px;
            left: 135px;
        }
        body {
            font-size: 14px;
        }

JavaScript

$(function () {
            ApplyStyle()
        });

        $('#combo').igCombo({
            dataSource: data,
            closeDropDownOnBlur: false,
            width: "250px",
            textKey: 'name',
            valueKey: 'id',
            grouping: {
                key: 'state',
                dir: 'desc'
            },
            headerTemplate: "<div style='text-align:center;'><table style='width: 100%; background-color: #c0c0c0'>" +
                                "<tr>" +
                                    "<td colspan='2' style='text-align:center'>&nbsp;</td>" +
                                "</tr>" +
                                "<tr>" +
                                "<td colspan='2'>" +
                                    "<div class='btn-group' role='group' aria-label='...'>" +
                                        "<div class='btn-group' role='group'>" +
                                            "<button type='button' class='btn btn-secondary dropdown-toggle' data-toggle='dropdown' aria-expanded='false'>" +
                                                "Group by" +
                                                "<span class='caret'></span>" +
                                            "</button>" +
                                            "<ul class='dropdown-menu' role='menu'>" +
                                            "<li><a class='dropdown-item' href='#' onclick='GroupBy(\"state\")'>State</a></li>" +
                                                "<li><a class='dropdown-item' href='#' onclick='GroupBy(\"division\")'>Division</a></li>" +
                                        "</ul>" +
                                            "</div>" +
                                        "<button type='button' class='btn btn-secondary' onclick='ChangeDirection()'>Change direction</button>" +
                                    "</div>" +
                                "</div>" +
                                "</td>"...