JSFiddle - React, Tailwind, and code Playground

by aivarsak

HTML

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

<div id="pivot-container"></div>

JavaScript

var pivot = new Flexmonster({
  container: "#pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  report: {
    dataSource: {
      dataSourceType: "json",
      data: getData()
    },
    options: {
      viewType: "grid",
      grid: {
        type: 'flat'
      },
    },
    slice: {
      rows: [{
          uniqueName: "category"
        },
        {
          uniqueName: "price",
        },
        {
          uniqueName: "color"
        }
      ],
    },
  },
  width: "100%",
  height: 370,
  toolbar: true
});

const onReportChange = () => {
	pivot.off('reportchange');
  pivot.on('reportchange', onReportChange);
  console.log("onReportChange")
}
pivot.on('reportchange', onReportChange);

function getData() {
  return [{
    color: {
      caption: "Color Code",
      type: "string"
    },
    id: {
      type: "id"
    },
    category: {
      caption: "Category",
      type: "string"
    },
    price: {
      caption: "Total Price",
      type: "number"
    },
  }, {
    "color": "red",
    "id": "12",
    "price": 174,
    "category": "IT",
  }, {
    "color": "red",
    "id": "13",
    "price": 204,
    "category": "Business",
  }, {
    "color": "blue",
    "id": "14",
    "price": 374,
    "category": "IT",
  }, {
    "color": "blue",
    "id": "15",
    "price": 474,
    "category": "Business",
  }];
}