Set custom width and height of rows, columns, and headers

Custom CSS

HTML

<link rel="stylesheet" href="https://s3.amazonaws.com/flexmonster/2.3/demo.css">
<script src="https://cdn.flexmonster.com/flexmonster.js"></script>

<button onclick="getTableSizes()">Get table sizes</button>
<button onclick="setTableSizes()">Set table sizes</button>

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

<div class="output" id="output">Output will appear here</div>

CSS

.output {
  width: 80%;
  height: 300px;
  margin-left: auto;
  margin-right: auto;
  padding: 20px;
  background: rgba(242, 242, 242, 1);
  font-family: Menlo, Monaco, "Courier New", Courier, monospace;
  white-space: pre;
  font-size: 16px;
  font-weight: 400;
  overflow-y: scroll;
  margin-top: 20px;
}

JavaScript

let pivot = new Flexmonster({
  container: "pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  height: 300,
  report: {
    dataSource: {
      filename: "data/data.csv"
    },
    slice: {
      rows: [{
        uniqueName: "Category"
      }],
      columns: [{
          uniqueName: "Country",
          filter: {
            exclude: [
              "country.[canada]",
              "country.[united kingdom]"
            ]
          }
        },
        {
          uniqueName: "[Measures]"
        }
      ],
      measures: [{
        uniqueName: "Price",
        aggregation: "sum"
      }]
    },
  }
});

function setTableSizes() {
  flexmonster.setTableSizes({
    "columns": [{
        "idx": 0,
        "width": 160
      },
      {
        "tuple": ["country.[germany]"],
        "measure": {
          "uniqueName": "Price",
          "aggregation": "sum"
        },
        "width": 160,
      }
    ],
    "rows": [{
      "tuple": ["category.[cars]"],
      "height": 10
    }]
  });
}

function getTableSizes() {
  let tableSizes = flexmonster.getTableSizes();
  showOutput(JSON.stringify(tableSizes, null, 4));
}

function showOutput(content) {
  document.getElementById("output").innerText = content;
}