JSFiddle - React, Tailwind, and code Playground

Configuring the slice

by Flexmonster Pivot Table

HTML

<link rel="stylesheet" href="https://s3.amazonaws.com/flexmonster/2.3/demo.css">
<script src="https://cdn.flexmonster.com/flexmonster.js"></script>
<div id="scrollable-container">
  <div id="pivot-container"></div>
</div>

CSS

#pivot-container {
  width: 2000px !important;
}

#scrollable-container{
  width: 100%;
  overflow-x:scroll;
}

JavaScript

let pivot = new Flexmonster({
  container: "pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  toolbar: true,
  report: {
    dataSource: {
      filename: "data/data.json",
    },
    slice: {
      rows: [
        {
          uniqueName: "Country",
          showTotals: false,
        },
        {
          uniqueName: "Color",
          filter: {
            members: ["blue", "green"],
          },
        },
        {
          uniqueName: "Category",
        },
      ],
      columns: [{ uniqueName: "[Measures]" }],
      measures: [
        {
          uniqueName: "Price",
          format: "currency",
        },
        {
          uniqueName: "Discount",
          format: "currency",
        },
      ],
      expands: {
        expandAll: true,
      },
    },
    options: {
      grid: {
        type: "classic",
      },
    },
    formats: [
      {
        name: "currency",
        decimalPlaces: 2,
        currencySymbol: "$",
      },
    ],
    tableSizes: {
      columns: [
        {
          idx: 0,
          width: 299,
        },
        {
          idx: 1,
          width: 310,
        },
        {
          idx: 2,
          width: 305,
        },
      ],
    },
  },
})