Flexmonster()

new Flexmonster({
container: String,
componentFolder: String,
width: Number | String,
height: Number | String,
toolbar: Boolean,
licenseKey: String | String[],
licenseFilePath: String,
report: ReportObject | String,
global: GlobalObject,
accessibility: Object,
customizeCell: Function,
customizeChartElement: Function,
customizeContextMenu: Function,
customizeAPIRequest: Function,
sortFieldsList: Function,
shareReportConnection: ShareReportConnectionObject,
<event name>: Function
})

Embeds the component into the HTML page. This method allows you to insert the component into your HTML page and provide it with all the necessary information for the initialization. This is the first API call you need to know.

Note Do not forget to import flexmonster.js before you start working with it.

Parameters

The only required property is container. If you run new Flexmonster({container: "pivotContainer"}), where "pivotContainer" is the selector of container HTML element, – an empty component without the toolbar will be added with the default width and height.

Returns

Object, the reference to the embedded pivot table. To work with multiple instances on the same page, use these objects. All API calls are available through them.

To get a reference to the component after initialization, use the uielement property of the component’s container:

const flexmonsterAPI = document.getElementById("flexmonsterContainer")
                       .uielement.flexmonster;

Flexmonster’s methods are available through this reference as well:

flexmonsterAPI.getReport();

Examples

1) Add the component instance to your webpage without the Toolbar:

<div id="pivotContainer">The component will appear here</div> 
<script src="flexmonster/flexmonster.js"></script>

<script>
  const pivot = new Flexmonster({
    container: "pivotContainer",
    report: {
      dataSource: {
        filename: "data.csv"
      }
    },
    licenseKey: "XXXX-XXXX-XXXX-XXXX-XXXX"
  });
</script>

Live example

2) Add the empty component with the Toolbar:

<div id="pivotContainer">The component will appear here</div>
<script src="flexmonster/flexmonster.js"></script>

<script>
  const pivot = new Flexmonster({
    container: "pivotContainer",
    toolbar: true,
    licenseKey: "XXXX-XXXX-XXXX-XXXX-XXXX"
  });
</script>

Live example

3) Add the component with the Toolbar and a data source:

<div id="pivotContainer">The component will appear here</div> 
<script src="flexmonster/flexmonster.js"></script>

<script>
  const pivot = new Flexmonster({
    container: "pivotContainer",
    toolbar: true,
    report: {
      dataSource: {
        filename: "data.csv"
      }
    },
    licenseKey: "XXXX-XXXX-XXXX-XXXX-XXXX"
  });
</script>

Live example

4) Add and operate multiple instances:

<div id="firstPivotContainer">The component will appear here</div> 
<div id="secondPivotContainer">The component will appear here</div> 
<script src="flexmonster/flexmonster.js"></script>

<script>
  const pivot1 = new Flexmonster({
    container: "firstPivotContainer",
    toolbar: true,
    report: {
      dataSource: {
        filename: "data.csv"
      }
    },
    licenseKey: "XXXX-XXXX-XXXX-XXXX-XXXX"
  });

  const pivot2 = new Flexmonster({
    container: "secondPivotContainer",
    toolbar: true,
    report: {
      dataSource: {
        filename: "data2.csv"
      }    	
    },
    licenseKey: "XXXX-XXXX-XXXX-XXXX-XXXX"
  });
</script>

<button onclick="javascript: swapReports()">Swap Reports</button>
<script>
  function swapReports() {
    const report1 = pivot1.getReport();
    const report2 = pivot2.getReport();

    pivot1.setReport(report2);
    pivot2.setReport(report1);
  }
</script>

Live example

5) Set event handler via Flexmonster():

const pivot = new Flexmonster({
  container: "pivotContainer",
  toolbar: true,
  report: {
    dataSource: {
      filename: "data.csv"
    }    	
  },
  licenseKey: "XXXX-XXXX-XXXX-XXXX-XXXX",
  ready: function () {
    console.log("The component was created");
  }
});

Live example

6) Set multiple license keys:

const pivot = new Flexmonster({
  container: "pivotContainer",
  toolbar: true,
  report: {
    dataSource: {
      filename: "data.csv"
    }        
  },
  licenseKey: [
    // For the production environment
    "XXXX-XXXX-XXXX-XXXX-XXXX",
    // For the development environment
    "YYYY-YYYY-YYYY-YYYY-YYYY"
  ]
});

7) How to use customizeCell:

new Flexmonster({
  customizeCell: function(cell, data) {
    // Change cell
  },
  // ...
});

Live example

See also

List of events