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
  • Integration with webpack

    This tutorial will help you integrate the pivot table with webpack. Follow these steps to set up a simple webpack project using Flexmonster Pivot Table & Charts:

    Prerequisites

    Step 1. Create a new project based on the sample from GitHub

    To get our sample project, download it as ZIP or clone it with the following commands:

    git clone https://github.com/flexmonster/pivot-webpack
    cd pivot-webpack

    Step 2. Install npm dependencies

    Install the npm dependencies described in package.json:

    npm install

    Step 3. Run the sample project

    Run in the console:

    npm start

    After that, the working sample will be available at http://localhost:8080/.

    Project structure

    Let’s take a closer look at the folder structure of this application:

    • dist/
      • index.html – here we add the <div> container for Flexmonster.
    • src/
      • index.js – here we embed our pivot table.
    • package.json – contains the description of the npm dependencies.
    • webpack.config.js – the webpack configuration file with standard CSS and font loading.

    Take a look at the content of the key files:

    index.js

    // ES2015  
    import 'flexmonster/flexmonster.min.css';
    import Flexmonster from 'flexmonster';

    // CommonJS
    // require('flexmonster/flexmonster.min.css');
    // const Flexmonster = require('flexmonster');

    new Flexmonster({
    container: "#pivot",
    toolbar: true,
    report: {
    dataSource: {
    type: "json",
    filename: "https://cdn.flexmonster.com/data/retail-data.json",
    mapping: {
    // Mapping configuration
    }
    },
    slice: {
    // Slice configuration
    },
    conditions: [
    // Conditional formatting
    ],
    formats: [
    // Number formatting
    ]
    }
    })

    webpack.config.js

    const path = require('path');

    module.exports = {
    mode: 'development',
    entry: {
    app: './src/index.js',
    },
    devServer: {
    static: './dist'
    },
    output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
    },
    module: {
    rules: [
    {
    test: /\.css$/,
    use: [
    'style-loader',
    'css-loader'
    ]
    },
    {
    test: /\.(woff|woff2|eot|ttf|otf|svg)$/,
    type: "asset/inline"
    }
    ]
    }
    };

    index.html

    <!DOCTYPE html>
    <html>
    <head>
      <title>Flexmonster / Webpack</title>
    </head>
    <body>
      <div id="pivot"></div>
      <script src="bundle.js"></script>
    </body>
    </html>

    What’s next?

    You may be interested in the following articles: