Flexmonster Software License Agreement (“Agreement”) has been significantly revised and is effective as of September 30, 2024.
The following modifications were made:
The modified version of Flexmonster Software License Agreement is available here.
Downloading, installing, and/or continuing to use Flexmonster Software after September 30, 2024, constitutes Licensee’s acceptance of the terms and conditions of the modified version of Flexmonster Software License Agreement. If Licensee does not agree to any of these terms and conditions, they must cease using Flexmonster Software and must not download, install, use, access, or continue to access Flexmonster Software. By continuing to use Flexmonster Software or renewing the license under License Model or Maintenance after the effective date of any modifications to Agreement, Licensee accepts and agrees to be bound by the terms and conditions of the modified Agreement.
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.
There are several ways to include Flexmonster in your project:
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.
Add Flexmonster to your project by including the files directly from our CDN:
<script src="https://cdn.flexmonster.com/flexmonster.js"></script>
<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.
Add Flexmonster to your project by running the npm install
command:
npm install flexmonster --save-exact
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.
Download a ZIP archive to use Flexmonster as a local package:
Step 1.1. Download the .zip
package with Flexmonster:
Check out the structure of the downloaded package.
Step 1.2. Unarchive the package and copy the flexmonster/
folder into your project.
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.1. Import flexmonster.js
depending on how you have downloaded Flexmonster:
import Flexmonster from 'flexmonster';
flexmonster.js
in HTML using the <script>
tag:<script src="node_modules/flexmonster/flexmonster.js"></script>
The flexmonster.js
file was imported in step 1.
<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:
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/
.
<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).
<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().
Open the created webpage in the browser to see Flexmonster without data Live example.
If you run into any issues, visit our troubleshooting page.
Visit the following guides to learn about different aspects of using Flexmonster: