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://jp.igniteui.com/js/angular.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://cdn-na.infragistics.com/igniteui/latest/js/extensions/igniteui-angularjs.js"></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 class="push-down-xl" ng-app="sampleApp" ng-controller="pivotGridController">
        <div style="float:left;width:25%;">
            <ig-pivot-data-selector id="dataSelector" data-source="pivotData" height="550px">
            </ig-pivot-data-selector>
        </div>
        <div style="float:right; width:70%;">
            <ig-pivot-grid id="pivotGrid" data-source="pivotData" height="550px">
            </ig-pivot-grid>
        </div>
    </div>

CSS

#dataSelector, #pivotGrid_table_container {
            float: left;
        }

        #pivotGrid_table_container {
            width: 75%;
        }

JavaScript

$(function () {
var sampleApp = angular.module('sampleApp', ['igniteui-directives']);
    sampleApp.controller('pivotGridController', function ($scope) {
        $scope.pivotData = new $.ig.OlapFlatDataSource({
            dataSource:
            [{ "ProductCategory": "Clothing", "UnitPrice": 12.81, "SellerName": "Stanley Brooker", "Country": "Bulgaria", "City": "Plovdiv", "Date": "01/01/2012", "UnitsSold": 282 },
            { "ProductCategory": "Clothing", "UnitPrice": 49.57, "SellerName": "Elisa Longbottom", "Country": "US", "City": "New York", "Date": "01/05/2013", "UnitsSold": 296 },
            { "ProductCategory": "Bikes", "UnitPrice": 3.56, "SellerName": "Lydia Burson", "Country": "Uruguay", "City": "Ciudad de la Costa", "Date": "01/06/2011", "UnitsSold": 68 },
            { "ProductCategory": "Accessories", "UnitPrice": 85.58, "SellerName": "David Haley", "Country": "UK", "City": "London", "Date": "04/07/2012", "UnitsSold": 293 },
            { "ProductCategory": "Components", "UnitPrice": 18.13, "SellerName": "John Smith", "Country": "Japan", "City": "Yokohama", "Date": "12/08/2012", "UnitsSold": 240 },
            { "ProductCategory": "Clothing", "UnitPrice": 68.33, "SellerName": "Larry Lieb", "Country": "Uruguay", "City": "Ciudad de la Costa", "Date": "05/12/2011", "UnitsSold": 456 },
            { "ProductCategory": "Components", "UnitPrice": 16.05, "SellerName": "Walter Pang", "Country": "Bulgaria", "City": "Sofia", "Date": "02/19/2013", "UnitsSold": 492 }],
            metadata: {
                cube: {
                    name: "Sales",
                    caption: "セールス",
                    measuresDimension: {
                        caption: "メジャー",
                        measures: [ //for each measure, name and aggregator are required
                            {
                                caption: "販売単位数", name: "UnitsSold",
                                // returns a function that will be used as sum aggregator on the 'UnitsSold...