JSFiddle - React, Tailwind, and code Playground

by lavanyakatika

HTML

<script src="https://cdn.flexmonster.com/flexmonster.js"></script>

<div id="pivot-container">The component will appear here</div>

JavaScript

var pivot = new Flexmonster({
	container: "pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  toolbar: true,
  height: 500,
  report: {
    dataSource: {
    	data: getData()
    },
    slice: {
        rows: [
            {uniqueName: "Color"}
        ],
        columns: [
            {uniqueName: "[Measures]"}
        ],
        measures: [
            {
                uniqueName: "Price",
                format: "currency"
            },
            {
                uniqueName: "Ticket",
            }
        ]
    },
    options: {
    	viewType: "flat",
      "type": "flat",
      "showTotals": "off",
      "showGrandTotals": "on",
      "showFilter": false,
      "showReportFiltersArea": false,
      "showAllLabels": false,
      "grandTotalsPosition": "bottom",
 grid: {
           type: "flat"
        },
    },
    formats: [
         {
                    "name": "",
                    "thousandsSeparator": ",",
                },
                {
                    "name": "currency",
                    "thousandsSeparator": ",",
                    "decimalSeparator": ".",
                    "decimalPlaces": 2,
                    "currencySymbol": "$",
                    "currencySymbolAlign": "left",
                    "nullValue": "$0.00",
                    "textAlign": "right",
                    "isPercent": false
                },
    ]
  }
});

function getData() {
  return [{
    "Color": "green",
    "M": "September",
    "W": "Wed",
    "Country": "Canada",
    "State": "Ontario",
    "City": "Toronto",
    "Price": 174,
    "Ticket": 109
  }, {
    "Color": "red",
    "M": "March",
    "W": "Mon",
    "Time": "1000",
    "Country": "USA",
    "State": "California",
    "City": "Los Angeles",
    "Price": 1664,
    "Ticket": 19
  }, {
      "Color": "red",
    "M": "March",
    "W": "Mon",
    "Time": "1000",
    "Country": "USA",
    "State": "California",
    "City": "Los Angeles",
    "Price": 1664,
   ...