JSFiddle - React, Tailwind, and code Playground

by akaimo

HTML

<script src="http://code.jquery.com/jquery-1.11.3.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/globalize/0.1.1/globalize.js"></script>
<link rel="stylesheet" href="http://cdn3.devexpress.com/jslib/15.1.5/css/dx.common.css">
<link rel="stylesheet" href="http://cdn3.devexpress.com/jslib/15.1.5/css/dx.light.css">
<script src="http://cdn3.devexpress.com/jslib/15.1.5/js/dx.all.js"></script>
<div id="container"></div>

CSS

#container .cell-selected
{
    background-color: #606060;
}

#container .row-selected
{
    background-color: #808080;
}

#container .column-selected
{
    background-color: #808080;
}

JavaScript

var sales = [{
    "id": 1,
    "region": "North America",
    "country": "USA",
    "city": "New York",
    "amount": 1740,
    "date": "2013/01/06"
}, {
    "id": 2,
    "region": "North America",
    "country": "USA",
    "city": "Los Angeles",
    "amount": 850,
    "date": "2013/02/13"
}, {
    "id": 3,
    "region": "North America",
    "country": "USA",
    "city": "Denver",
    "amount": 2235,
    "date": "2013/01/07"
}, {
    "id": 4,
    "region": "North America",
    "country": "CAN",
    "city": "Vancouver",
    "amount": 1965,
    "date": "2013/05/03"
}, {
    "id": 5,
    "region": "North America",
    "country": "CAN",
    "city": "Edmonton",
    "amount": 880,
    "date": "2013/01/10"
}],
    selectedCells = {},
    selectedRows = {},
    selectedColumns = {};

var pivotGrid = $("#container").dxPivotGrid({
    dataSource:{
        fields: [
            { dataField: "date", dataType: "date", groupInterval:"year", area: "column" },
            { dataField: "country", area: "row", expanded: false },
            { dataField: "city", area: "row" },
            { dataField: "amount", summaryType: "sum", area: "data" },
        ],
        load: function(){
            return sales;
        }
    }
}).dxPivotGrid("instance");