JSFiddle - React, Tailwind, and code Playground

by theadam

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.12.2/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/orb/1.0.9/orb.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/orb/1.0.9/orb.css">
<div id="pgrid"></div>

JavaScript

// data source
  var data = [
    ['Contoso New Jersey', 'Adventure Works CRT15 E101 Black', 'Adventure Works', 'Economy', 'Monitors', 4, 351],
    ['Contoso New Jersey', 'Adventure Works CRT15 E101 Black', 'Adventure Works', 'Deluxe', 'CPUS', 10, 400],
    ['Contoso New Jersey', 'Adventure Works CRT15 E101 Black', 'Adventure Works', 'Deluxe', 'Keyboards', 15, 700],
  ];
  // pivot grid options
  var config = {
    dataSource: data,
    dataHeadersLocation: 'columns',
    theme: 'blue',
    toolbar: {
        visible: true
    },
    grandTotal: {
        rowsvisible: true,
        columnsvisible: true
    },
    subTotal: {
        visible: true,
        collapsed: true
    },
    fields: [
        { name: '0', caption: 'Entity' },
        { name: '1', caption: 'Product' },
        { name: '2', caption: 'Manufacturer', sort: { order: 'asc' } },
        { name: '3', caption: 'Class' },
        { name: '4', caption: 'Category', sort: { order: 'desc' } },
        { name: '5', caption: 'Quantity' },
        {
            name: '6',
            caption: 'Amount',
            dataSettings: {
                  aggregateFunc: 'avg',
                  formatFunc: function(value) {
                      return Number(value).toFixed(0);
                  }
            }
        }
    ],
    rows    : [ 'Entity', 'Manufacturer', 'Category' ],
    columns : [ 'Class' ],
    data    : [ 'Quantity', 'Amount' ],
    preFilters : {
        'Manufacturer': { 'Matches': /n/ },
        'Amount'      : { '>':  40 }
    },
    width: 1110,
    height: 645
  };

  // instantiate and show the pivot grid
  new orb.pgridwidget(config)
         .render(document.getElementById('pgrid'));