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

Node.js

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: