Skip to content

Here is an answer to make datatable.net to work with Vite and VueJs (and its plugins select, RowGroup, Buttons,...)

Notifications You must be signed in to change notification settings

philibe/ViteVue3DatatablePOC

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

5 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Here is an answer to make datatable.net to work with Vite and VueJs (and its plugins select, RowGroup, Buttons,...)

https://stackoverflow.com/questions/71075605/implementing-datatables-net-with-vite-and-vue-how-to-fix-datatable-is/74039112#74039112

Before, do yarn create vite.

import for "jquery" and "datatable.net" have to be typed with "jquery" and "datatable.net" and not typed with "min.js". Look at the source of jquery.dataTables.js: it expects some of form of name.

src/main.js

import jQuery from "jquery";
import $ from "jquery";

import DataTable from "datatables.net";
DataTable(window, $);

// 'select ' can be disabled
import select from "datatables.net-select/js/dataTables.select.min.js";
select(window, $);

// 'RowGroup ' can be disabled
import RowGroup from "datatables.net-rowgroup/js/dataTables.rowGroup.min.js";
RowGroup(window, $);


// 'Buttons' can be disabled
import Buttons from "datatables.net-buttons/js/dataTables.buttons.min.js";
Buttons(window, $);

import b1 from "datatables.net-buttons/js/buttons.colVis.min.js";
b1(window, $);

import b2 from "datatables.net-buttons/js/buttons.print.min.js";
b2(window, $);

import b3 from "datatables.net-buttons/js/buttons.html5.min.js";
b3(window, $);
// end of 'Buttons part

import "datatables.net-css";

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

import { createApp } from "vue";

import "@/style.css";
import App from "@/App.vue";

createApp(App).mount("#app");

vite.config.js

import path from "path";
import { defineConfig } from "vite";
//import { viteCommonjs, esbuildCommonjs } from "@originjs/vite-plugin-commonjs";
import vue from "@vitejs/plugin-vue";


import { createHtmlPlugin } from "vite-plugin-html";

console.log(path.basename(path.resolve(__dirname)));

// https://vitejs.dev/config/
export default defineConfig({
  resolve: {
    alias: [
      {
        find: "@",
        replacement: path.resolve(__dirname, "src"),
      },
      // not mandatory
      {
        find: "jquery",
        replacement: path.resolve(
          __dirname,
          "node_modules/jquery/dist/jquery.min.js"
        ),
      },
      // not mandatory, only to force min.js
      {
        find: "datatables.net",
        replacement: path.resolve(
          __dirname,
          "node_modules/datatables.net/js/jquery.dataTables.min.js"
        ),
      },
      {
        find: "datatables.net-css",
        replacement: path.resolve(
          __dirname,
          "node_modules/datatables.net-dt/css/jquery.dataTables.min.css"
        ),
      },
    ],
    extensions: [".mjs", ".js", ".ts", ".jsx", ".tsx", ".json", ".vue"],
  },
  plugins: [
    vue(),
    createHtmlPlugin({
      inject: {
        data: {
          title: "DataTable.net with ViteJS and VueJs",
        },
      },
    }),
  ],
  base: "",
  build: {},
});

src/App.vue

<template>
  <div>
    <h2>Implement jQuery DataTable in Vue Js</h2>
    <table class="table" id="datatable">
      <thead>
        <tr>
          <th>ID</th>
          <th>Product Title</th>
          <th>Product Price</th>
          <th>Created On</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in products" :key="item.id">
          <td>{{ item.userId }}</td>
          <td>{{ item.id }}</td>
          <td>{{ item.title }}</td>
          <td>{{ item.completed }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import axios from "axios";
import $ from "jquery";

export default {
  mounted() {
    axios.get("https://jsonplaceholder.typicode.com/todos").then((response) => {
      $("#datatable").DataTable({
        data: response.data,
        columns: [
          { data: "userId" },
          { data: "id" },
          { data: "title" },
          { data: "completed" },
        ],

        pageLength: 10,
        lengthMenu: [
          [5, 10, 25, 50],
          [5, 10, 25, 50],
        ],

        // 'rowGroup' can be disabled
        // 'rowGroup' needs datatables.net-rowgroup/js/dataTables.rowGroup.min.js

        rowGroup: { dataSrc: "userId" },

        // 'select' can be disabled
        // 'select' needs datatables.net-select/js/dataTables.select.min.js
        select: "single", // "single" or "multi" or "true"

        // 'buttons' can be disabled
        // 'buttons' needs
        // - datatables.net-buttons/js/dataTables.buttons.min.js and buttons.colVis.min.js and buttons.print.min.js and buttons.html5.min.js
        // - dom :"B"

        dom: "Blfrtip", //'Blfrtip' for "B"uttons copy, lfrtip options byr défaut
        buttons: [
          "copyHtml5",

          "csvHtml5",
          "print",
          // start of example of custom button
          {
            text: "Remove rowGroup",
            action: function (e, dt, node, config) {
              dt.rowGroup().dataSrc("").draw();
            },
          },
          {
            text: "Add rowGroup",
            action: function (e, dt, node, config) {
              dt.rowGroup().dataSrc("userId").draw();
            },
          },
          {
            text: "Single Select",
            action: function (e, dt, node, config) {
              dt.select.style("single").draw();
            },
          },
          {
            text: "Multi select",
            action: function (e, dt, node, config) {
              dt.select.style("multi").draw();
            },
          },
          // end of example of custom button
        ],
      });
    });
  },
  data: function () {
    return {
      products: [],
    };
  },
};
</script>

package.json

(Don't forget yarn install)

{
    "private": true,
    "name": "vite-project",
    "version": "0.0.0",
    "scripts": {
        "build": "vite build",
        "dev": "vite --host",
        "devlocal": "vite",
        "format": "yarn run prettier && yarn run lint",
        "format:packagejson": "npx prettier-package-json --tab-width 2 --write",
        "lint": "eslint --ext .js,.vue --ignore-path .gitignore --fix src   --fix *.js --no-error-on-unmatched-pattern",
        "prettier": "npx  prettier  --write src/*.?js src/*.html index.html --no-error-on-unmatched-pattern",
        "preview": "vite preview"
    },
    "dependencies": {
        "@babel/core": "^7.19.6",
        "@babel/eslint-parser": "^7.19.1",
        "@originjs/vite-plugin-commonjs": "^1.0.3",
        "@popperjs/core": "^2.11.6",
        "@vue/eslint-config-prettier": "^7.0.0",
        "axios": "^1.1.2",
        "bootstrap": "^5.2.2",
        "buffer": "^6.0.3",
        "datatables.net": "^1.11.4",
        "datatables.net-buttons": "^2.2.2",
        "datatables.net-dt": "^1.11.4",
        "datatables.net-rowgroup": "^1.2.0",
        "datatables.net-select": "^1.4.0",
        "eslint": "^8.25.0",
        "eslint-config-prettier": "^8.5.0",
        "eslint-plugin-vue": "^9.6.0",
        "jquery": "^3.6.1",
        "prettier": "^2.7.1",
        "process": "^0.11.10",
        "vite-plugin-html": "^3.2.0",
        "vue": "^3.2.37"
    },
    "devDependencies": {
        "@vitejs/plugin-vue": "^3.1.0",
        "eslint-plugin-html": "^7.1.0",
        "eslint-plugin-prettier": "^4.2.1",
        "vite": "^3.1.0"
    },
    "compilerOptions": {
        "target": "es2015",
        "types": [
            "vite/client"
        ]
    },
    "eslintConfig": {
        "root": true,
        "env": {
            "node": true,
            "commonjs": true,
            "browser": true,
            "es6": true
        },
        "parserOptions": {
            "sourceType": "module"
        },
        "plugins": [
            "vue",
            "html",
            "prettier"
        ],
        "rules": {
            "no-unused-vars": "off"
        },
        "extends": [
            "plugin:vue/vue3-essential",
            "eslint:recommended",
            "@vue/prettier"
        ]
    }
}

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title><%- title %></title>
  </head>
  <body>
    <div id="app"></div>

    <script type="module" src="/src/main.js"></script>
  </body>
</html>

About

Here is an answer to make datatable.net to work with Vite and VueJs (and its plugins select, RowGroup, Buttons,...)

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published