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

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

CSS

#pivotGrid {
            float: left;
        }

JavaScript

$(function () {
            dataSource = new $.ig.OlapFlatDataSource({
                dataSource: sales,
                metadata: {
                    cube: {
                        name: "Sales",
                        caption: "セールス",
                        measuresDimension: {
                            caption: "メジャー",
                            measures: [
                                { caption: "販売単位数", name: "UnitsSold", aggregator: $.ig.OlapUtilities.prototype.sumAggregator('UnitsSold') },
                                { caption: "単価", name: "UnitPrice", aggregator: $.ig.OlapUtilities.prototype.sumAggregator('UnitPrice', 2) }]
                        },
                        dimensions: [
                            {
                                caption: "日付", name: "Date", hierarchies: [
                                    $.ig.OlapUtilities.prototype.getDateHierarchy(
                                        "Date", ["year", "quarter", "month", "date"], "Dates", "日付",
                                        ["年", "四半期", "月", "日"], "すべての期間")]
                            },
                            {
                                caption: "位置", name: "Location", hierarchies: [{
                                    caption: "位置", name: "Location", levels: [
                                             { name: "AllLocations", levelCaption: "すべての場所", memberProvider: function (item) { return "すべての場所"; } },
                                             { name: "Country", levelCaption: "国", memberProvider: function (item) { return item.Country; } },
                                             { name: "City", levelCaption: "市", memberProvider: function (item) { return item.City; } }]
                                }]
                            },
                            {
                                caption: "製品", name: "Product", hierarchies: [{
                                    caption: "製品", name: "Product", levels: [
       ...