Example of Datatables.Net With Bootstrap 5 & Buttons in Webpack

GreggThelen

For the most part my current configuration works; however, there are two problems:
* Column visibility dropdown isn't working - as in, the dropdown portion doesn't even show.
* When copying to the clipboard the message displays at the bottom of the page instead of centered on the table.

The copying works, and I can export to a PDF, and the normal table functions/sorting/searching all work.

So for Webpack, what am I missing in my vendor.js file as depicted below?

window.$ = require('jquery');
window.jQuery = require('jquery');

//datatables
import "datatables.net-bs5";
import "datatables.net-buttons-bs5";
import "datatables.net-buttons/js/buttons.html5.min.js";
import "datatables.net-buttons/js/buttons.print.min.js";
import "datatables.net-buttons/js/buttons.colvis.min.js";
import "jszip";
import  pdfMake from "pdfmake/build/pdfmake.min.js";
import  pdfFonts from "pdfmake/build/vfs_fonts.js";
pdfMake.vfs = pdfFonts.pdfMake.vfs;

The versions being imported are:

   "bootstrap": "^5.2.3",
    "datatables.net": "^1.13.1",
    "datatables.net-bs5": "^1.13.1",
    "datatables.net-buttons-bs5": "^2.3.3",
    "jquery": "^3.6.2",
    "jszip": "^3.10.1",
    "pdfmake": "^0.2.7",

Screenshot of what my current setting produce:

This is so very close it is driving me nuts.
Can anyone produce a working webpack example of Datatables.net w/Bootstrap 5 all wrapped up in Webpack?

GreggThelen

My apologies, I left off the js on the page itself:

I'd also be interested in getting Excel working.
The button doesn't show at all.

allan

It rather sounds like a CSS issue. Could you show me your full WebPack config and I'll see if I can put an example together from it.

Also, what are your CSS includes?

Allan

GreggThelen

It was a CSS issue and I was able to fix it.
Here is my code for anyone attempting Webpack and Datatables.net

package.json

{
  "name": "example.net.ui",
  "version": "1.0.0",
  "description": "Example",
  "mode": "production",
  "private": true,
  "main": "index.js",
  "dependencies": {
    "bootstrap": "^5.2.3",
    "datatables.net": "^1.13.1",
    "datatables.net-bs5": "^1.13.1",
    "datatables.net-buttons-bs5": "^2.3.3",
    "jquery": "^3.6.2",
    "jszip": "^3.10.1",
    "pdfmake": "^0.2.7",
    "select2": "^4.0.13",
    "select2-bootstrap-5-theme": "^1.3.0",
    "summernote": "^0.8.20"
  },
  "devDependencies": {
    "clean-webpack-plugin": "^4.0.0",
    "copy-webpack-plugin": "^11.0.0",
    "css-loader": "^6.7.3",
    "html-webpack-plugin": "^5.5.0",
    "mini-css-extract-plugin": "^2.7.2",
    "node-sass": "^8.0.0",
    "npm": "^9.2.0",
    "sass-loader": "^13.2.0",
    "style-loader": "^3.3.1",
    "url-loader": "^4.1.1",
    "webpack": "^5.75.0",
    "webpack-cli": "^5.0.1"
  },
  "scripts": {
    "build": "webpack --config webpack.config.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

webpack.config.js

const path = require("path");
const webpack = require('webpack');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const CopyPlugin = require("copy-webpack-plugin");
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
    mode: "production",
    entry: {
        site: "./wwwroot/src/site.js",
        vendor: "./wwwroot/src/vendor.js"
    },
    output: {
        filename: "./js/[name].js",
        path: path.resolve(__dirname, "./wwwroot/dist"),
        publicPath: '/_content/Example/dist/',
        sourceMapFilename: '[name].js.map'
    },
    plugins: [
        new MiniCssExtractPlugin(
            {
                filename: "./css/[name].css"
            }),
        new CopyPlugin({
            patterns: [
                { from: "./wwwroot/src/img", to: "img" }
            ]
        }),   
        new CleanWebpackPlugin(),
    ],
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    "css-loader"
                ],
            },
            {
                test: /\.(woff(2)?|ttf|eot)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                type: 'asset/resource',
                dependency: { not: ['url'] },
            }
        ],
    },
    resolve: {
        alias: {
            jQuery: path.resolve(__dirname, "node_modules/jquery"),
        },
    },
};

vendor.js

    window.$ = require('jquery');
    window.jQuery = require('jquery');

    //bootstrap
    import "bootstrap/dist/js/bootstrap.bundle.min.js";
    import "bootstrap/dist/css/bootstrap.min.css";

    //datatables
    import "datatables.net-bs5";
    import "datatables.net-buttons-bs5";
    import "datatables.net-bs5/css/dataTables.bootstrap5.min.css";
    import "datatables.net-buttons-bs5/css/buttons.bootstrap5.min.css";
    import "datatables.net-buttons/js/buttons.html5.min.js";
    import "datatables.net-buttons/js/buttons.print.min.js";
    import "datatables.net-buttons/js/buttons.colvis.min.js";
    import "jszip";
    import  pdfMake from "pdfmake/build/pdfmake.min.js";
    import  pdfFonts from "pdfmake/build/vfs_fonts.js";
    pdfMake.vfs = pdfFonts.pdfMake.vfs;

allan

Superb - thanks for posting back and great to hear you got it working.

Allan