Embeds Flexmonster pivot table in HTML page

HTML

<script src="https://cdn.flexmonster.com/flexmonster.js"></script>
<div><button class="btn" id="export-button">Export</button></div>
<div id="pivot-container"></div>

JavaScript

const pivot = new Flexmonster({
  container: "pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  width: "100%",
  height: "400px",
  toolbar: true,
});

pivot.setReport({
  slice: {
    columns: [
      {
        uniqueName: '[Measures]',
      },
    ],
    measures: [
      {
        uniqueName: 'value',
        aggregation: 'sum',
      },
    ],
    reportFilters: [
      {
        uniqueName: 'accountType',
      },
    ],
  },
  options: {
    grid: {
      type: 'flat',
      showHierarchyCaptions: false,
    },
  },
  dataSource: {
    mapping: {
      accountType: {
        property: 'accountType',
        caption: 'Tipo',
        type: 'string',
        visible: true,
      },
      value: {
        property: 'value',
        caption: 'Valor',
        type: 'number',
        visible: true,
      },
    },
    data: [
      {
        accountType: 'Account 1',
        value: -36.98,
      },
      {
        accountType: 'Account 2',
        value: -300,
      },
      {
        accountType: 'Account 3',
        value: -150,
      },
    ],
  },
});

const exportBtn = document.getElementById('export-button');

exportBtn.onclick = () => {
  pivot.exportTo('excel');
}