JSFiddle - React, Tailwind, and code Playground

by Oleg Kiriljuk

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/redmond/jquery-ui.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" href="http://www.ok-soft-gmbh.com/jqGrid/OK/ui.jqgrid.css">
<script src="http://www.ok-soft-gmbh.com/jqGrid/OK/i18n/grid.locale-en.js"></script>
<script src="http://www.ok-soft-gmbh.com/jqGrid/OK/jquery.jqGrid.src.js"></script>
<table id="grid"></table>

JavaScript

var mydata = [
    { id: "1", product: "A A", sold: "8", sold2: "8", sold3: "8", emp: "Michelle" },
    { id: "2", product: "A A", sold: "3", sold2: "8", sold3: "8", emp: "Tania" },
    { id: "6", product: "A B", sold: "1", sold2: "8", sold3: "8", emp: "Mark" },
    { id: "3", product: "A B", sold: "5", sold2: "8", sold3: "8", emp: "Tommy" },
    { id: "4", product: "B B", sold: "2", sold2: "8", sold3: "8", emp: "Dave" },
    { id: "5", product: "B B", sold: "5", sold2: "8", sold3: "8", emp: "Carol" }
];

$("#grid").jqGrid("jqPivot", mydata, {
        xDimension: [
            { isGroupField: false, width: 40, dataName: "id",  label: "ID" },
            { isGroupField: false, width: 80, dataName: "emp", label: "Employee" }
        ],
        yDimension: [
            { dataName: "product" }
        ],
        aggregates: [
            { aggregator: "sum", width: 60, member: "sold",  label: "Sold" },
            { aggregator: "sum", width: 60, member: "sold2", label: "Sold 2" }
        ],
        colTotals: true
    },
    {
        height: "auto",
        pager: "#pager",
        iconSet: "fontAwesome",
        resizeStop: function () {
            $(this).jqGrid("setGridWidth", this.grid.newWidth, false);
        },
        caption: "Daily Sales"
    }
);