Theme: Pink

CSS themes

by Flexmonster Pivot Table

HTML

<link rel="stylesheet" type="text/css" href="https://cdn.flexmonster.com/theme/pink/flexmonster.min.css" />
<script src="https://cdn.flexmonster.com/flexmonster.js"></script>

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

CSS

@import url(https://cdn.flexmonster.com/assets/jsfiddle-styles.css);

JavaScript

const pivot = new Flexmonster({
  container: "#pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  height: 600,
  toolbar: true,
  report: {
    dataSource: {
      filename: "data/sales.csv"
    },
    slice: {
      rows: [
        {
          uniqueName: "Salesperson",
          filter: {
            measure: {
              uniqueName: "Revenue",
              aggregation: "sum"
            },
            query: {
              top: 7
            }
          }
        },
        {
          uniqueName: "Payment Method"
        }
      ],
      columns: [
        {
          uniqueName: "Region",
          filter: {
            members: [
              "region.[south]",
              "region.[west]"
            ]
          }
        },
        {
          uniqueName: "Month",
          filter: {
            members: [
              "month.[june]",
              "month.[july]",
              "month.[august]"
            ]
          }
        },
        {
          uniqueName: "[Measures]"
        }
      ],
      measures: [{
        uniqueName: "Revenue",
        aggregation: "sum"
      }],
      sorting: {
        column: {
          type: "desc",
          tuple: [],
          measure: {
            uniqueName: "Revenue",
            aggregation: "sum"
          }
        }
      },
      expands: {
        rows: [{
          tuple: [
            "salesperson.[michael fisher]"
          ]
        }],
        columns: [{
            tuple: [
              "region.[midwest]"
            ]
          },
          {
            tuple: [
              "region.[west]"
            ]
          }
        ]
      },
      flatSort: [
        {
          uniqueName: "Revenue",
          sort: "desc"
        }
      ]
    },
    formats: [
      {
        name: "",
        thousandsSeparator: ",",
        decimalSeparator: ".",
        decimalPlaces: 2,
   ...