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

<div class="custom-draggables-container">
        
        <div class="ui-igpivot-metadataitem ui-state-default ui-corner-all custom-draggable" data-type="Hierarchy" data-name="[Seller].[Seller]"><span>Hierarchy: Seller</span></div>
        <div class="ui-igpivot-metadataitem ui-state-default ui-corner-all custom-draggable" data-type="Measure" data-name="[Measures].[UnitsSold]"><span>Measure: Units Sold</span></div>
    </div>

    <div id="dataSelector"></div>
    <div id="pivotGrid"></div>

CSS

.custom-draggables-container {
            width: 100%;
            height: 30px;
            float: none;
            margin: 2px;
        }

        .custom-draggable {
            float: left;
            padding: 1px 20px;
            cursor: pointer;
            z-index: 5;
            margin: 0 2px;
        }

        #dataSelector, #pivotGrid {
            float: left;
        }

JavaScript

$(function () {
$.support.cors = true;

        $(function () {
            var dataSource = new $.ig.OlapFlatDataSource({
                dataSource: sales,
                metadata: {
                    cube: {
                        name: "Sales",
                        caption: "Sales",
                        measuresDimension: {
                            caption: "Measures",
                            measures: [
                                { caption: "Units Sold", name: "UnitsSold", aggregator: $.ig.OlapUtilities.prototype.sumAggregator('UnitsSold') },
                                { caption: "Unit Price", name: "UnitPrice", aggregator: $.ig.OlapUtilities.prototype.sumAggregator('UnitPrice', 2) }]
                        },

                        dimensions: [
                            {
                                caption: "Date", name: "Date", hierarchies: [
                                    $.ig.OlapUtilities.prototype.getDateHierarchy(
                                        "Date", ["year", "quarter", "month", "date"], "Dates", "Date",
                                        ["Year", "Quarter", "Month", "Day"], "All Periods")]
                            },
                            {
                                caption: "Location", name: "Location", hierarchies: [{
                                    caption: "Location", name: "Location", levels: [
                                        { name: "AllLocations", levelCaption: "All Locations", memberProvider: function (item) { return "All Locations"; } },
                                        { name: "Country", levelCaption: "Country", memberProvider: function (item) { return item.Country; } },
                                        { name: "City", levelCaption: "City", memberProvider: function (item) { return item.City; } }]
                                }]
                            },
                            {
                                caption: "Product",...