We have updated Flexmonster Software License Agreement, effective as of September 30, 2024. Learn more about what’s changed.
All documentation
  • Introduction
  • Connecting to data source
  • Browser compatibility
  • Documentation for older versions
  • Integrating Flexmonster

    This tutorial will help you add Flexmonster to your JavaScript project.

    Flexmonster has a 30-day free trial, with no registration required to start the evaluation. You can also test the component using our sample project or the JavaScript pivot table demo.

    Step 1. Get Flexmonster

    There are several ways to include Flexmonster in your project:

    Flexmonster CLI

    Get started with Flexmonster CLI — the most convenient way to work with Flexmonster:

    Step 1.1. Install Flexmonster CLI from npm:

    npm install -g flexmonster-cli

    Step 1.2. Get Flexmonster by running the following command inside your project:

    flexmonster add js-flexmonster

    This command downloads the flexmonster npm package to node_modules/ and adds it as a dependency to package.json. Check out the structure of the flexmonster package.

    CDN

    Add Flexmonster to your project by including the files directly from our CDN:

    • Use the latest version of the component:
      <script src="https://cdn.flexmonster.com/flexmonster.js"></script>
    • Use a specific version of the component:
      <script src="https://cdn.flexmonster.com/2.9.45/flexmonster.js"></script>

    Note We recommend using a specific Flexmonster version to avoid unexpected component updates.

    npm

    Add Flexmonster to your project by running the npm install command:

    • Install the latest version of the component:
      npm install flexmonster --save-exact
    • Install a specific version of the component:
      npm install flexmonster@2.9.45 --save-exact

    Note We recommend installing Flexmonster with the --save-exact flag to avoid unexpected component updates.

    Check out the structure of the flexmonster npm package.

    ZIP package

    Download a ZIP archive to use Flexmonster as a local package:

    Step 1.1. Download the .zip package with Flexmonster:

    Download

    Check out the structure of the downloaded package.

    Step 1.2. Unarchive the package and copy the flexmonster/ folder into your project.

    WebJars

    If you have a JVM-based web application, you can include Flexmonster in it using WebJars:

    Step 1.1. Go to WebJars and search for Flexmonster using the Search input field.

    Step 1.2. In the Build Tool column, select the tab with the build tool used in your project (e.g., Maven).

    Step 1.3. Include Flexmonster in your configuration file using the code snippet provided in the Build Tool column. For example, Maven’s pom.xml configuration file should look similar to the following:

    <dependencies>
      ...
      <dependency>
        <groupId>org.webjars</groupId>
        <artifactId>flexmonster</artifactId>
        <version>2.9.0</version>
      </dependency>
      ...
    </dependencies>

    Flexmonster can now be used in your JVM-based project.

    Step 2. Embed Flexmonster

    Step 2.1. Import flexmonster.js depending on how you have downloaded Flexmonster:

    Flexmonster CLI or npm

    • If you are using a module bundler, import Flexmonster in the way your bundler supports. For example:
      import Flexmonster from 'flexmonster';
    • Alternatively, you can also import flexmonster.js in HTML using the <script> tag:
      <script src="node_modules/flexmonster/flexmonster.js"></script>

    CDN

    The flexmonster.js file was imported in step 1.

    ZIP package

    <script src="flexmonster/flexmonster.js"></script>

    Step 2.2. In your HTML, add a <div> container for Flexmonster:

    <div id="pivotContainer">The component will appear here</div>

    Note The created <div> must have an id attribute (e.g., pivotContainer). It will be used to initialize Flexmonster.

    Step 2.3. Create a Flexmonster instance depending on how you have downloaded Flexmonster:

    Flexmonster CLI or npm

    import Flexmonster from 'flexmonster';
    
    const pivot = new Flexmonster({
      // container is the id of the <div> created in step 2.2
      container: "pivotContainer",
      componentFolder: "node_modules/flexmonster/",
      toolbar: true
    });

    Notice the componentFolder parameter — it should point to the folder with Flexmonster files. Since Flexmonster is installed as an npm package, the componentFolder should be defined as node_modules/flexmonster/.

    CDN

    <script src="https://cdn.flexmonster.com/flexmonster.js"></script>
    <div id="pivotContainer">The component will appear here</div>
     
    <script>
      const pivot = new Flexmonster({
        // container is the id of the <div> created in step 2.2
        container: "pivotContainer",
        componentFolder: "https://cdn.flexmonster.com/",
        toolbar: true
      });
    </script>

    Notice the componentFolder parameter — it should point to the folder with Flexmonster files. Since Flexmonster is included from our CDN, the componentFolder should be defined as https://cdn.flexmonster.com/ (or https://cdn.flexmonster.com/<version>/ if you are using a specific Flexmonster version).

    ZIP package

    <script src="flexmonster/flexmonster.js"></script>
    <div id="pivotContainer">The component will appear here</div>
     
    <script>
      const pivot = new Flexmonster({
        // container is the id of the <div> created in step 2.2
        container: "pivotContainer",
        componentFolder: "flexmonster/",
        toolbar: true
      });
    </script>

    Notice the componentFolder parameter — it should point to the folder with Flexmonster files. If this folder is in the root of your project, the componentFolder should be set to "flexmonster/". Otherwise, adjust the componentFolder according to the flexmonster/ folder's location in your project.

    Note To use a trial version of Flexmonster from the ZIP package, you need to set a trial key. It can be found in the flexmonster/TrialKey.txt file. Copy the contents of the file and set the trial key using the licenseKey initialization parameter:

    const pivot = new Flexmonster({
      container: "pivotContainer",
      // ...
      licenseKey: "XXXX-XXXX-XXXX-XXXX-XXXX"
    });

    This step mentions only some of Flexmonster's initialization parameters. See the full list of available parameters in the API reference: Flexmonster().

    Step 3. Run the application

    Open the created webpage in the browser to see Flexmonster without data Live example.

    Troubleshooting

    If you run into any issues, visit our troubleshooting page

    See also

    Visit the following guides to learn about different aspects of using Flexmonster: