JSFiddle - React, Tailwind, and code Playground

Export and print

by Flexmonster Pivot Table

HTML

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

<button onclick="swapToHtml()">Swap the pivot to print version</button>
<button onclick="swapToPivot()">Swap the pivot to interactive version</button>
<div id="pivot-wrapper"></div>
<div id="pivot-container"></div>

CSS

button {
    border: 2px solid #df3800;
    background: #fff;
    color: #df3800;
    text-transform: uppercase;
    cursor: pointer;
    margin: 5px 0;
    display: inline-block;
    -webkit-transition: all .3s;
    transition: all .3s;
    font-weight: normal;
    padding: 10px 10px;
    font-size: 14px;
}

JavaScript

let pivotInteractive;
function swapToHtml() {
  pivot.exportTo(
    "html",
    {
      destinationType: "plain",
    },
    function (res) {
      // use this html to show the whole flexmonster grid while printing
      console.log(res.data);
      pivotInteractive = document.getElementById("pivot-container");
      document.getElementById("pivot-container").remove();
      document.getElementById("pivot-wrapper").innerHTML = res.data;
    },
  );
}

function swapToPivot() {
  document.getElementById("pivot-wrapper").innerHTML = "";
  document.getElementById("pivot-wrapper").append(pivotInteractive);
}

let pivot = new Flexmonster({
  container: "pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  report: {
    dataSource: {
      filename: "data/data.csv",
    },
    slice: {
      rows: [
        {
          uniqueName: "Business Type",
        },
        {
          uniqueName: "Country",
        },
      ],
      columns: [
        {
          uniqueName: "Category",
        },
        {
          uniqueName: "[Measures]",
        },
      ],
      measures: [
        {
          uniqueName: "Price",
          aggregation: "sum",
        },
        {
          uniqueName: "Discount",
          aggregation: "sum",
        },
      ],
      expands: {
        rows: [
          {
            tuple: ["business type.[value added reseller]"],
          },
          {
            tuple: ["business type.[specialty bike shop]"],
          },
        ],
      },
    },
  },
});