datatables.net-editor-bs4 webpack installation issues

icdeb

I am trying to use the editor in conjunction with webpack, bootstrap 4 and vue.

Seems to work nicely for the most part but the editor package on npm seems to be having some issues or maybe it is just me.

I have installed the following front end dependencies:

"datatables.net-bs4": "^1.10.19",
"datatables.net-editor-bs4": "^1.6.3",
"datatables.net-select-bs4": "^1.2.7",

In my script, I have the following:

// Import jquery
import $ from 'jquery';
// Make it available globally as it needs to be accessible within the single file components (.vue)
window.$ = $;

// Import datatables and the required plugins, using the bootstrap 4 styling 
import 'datatables.net-bs4';
import 'datatables.net-select-bs4';

In my vue component:

<template>
  <div class="container-fluid">
    <div class="row">
      <div class="col-12">
        <table id="example" class="table table-striped table-bordered" style="width:100%">
          <thead>
            <tr>
              <th>Name</th>
              <th>Position</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>Tiger Nixon</td>
              <td>System Architect</td>
            </tr>
            <tr>
              <td>Garrett Winters</td>
              <td>Accountant</td>
            </tr>
          </tbody>
        </table>
      </div><!-- col-12 -->
    </div><!-- row -->
  </div><!-- container -->
</template>

<script>
  export default {
    mounted() {
      $('#example').DataTable({
        select: true,
      });
    }
  }
</script>

<style lang="scss">
  @import '~datatables.net-bs4/css/dataTables.bootstrap4.css';
  @import '~datatables.net-select-bs4/css/select.bootstrap4.css';
</style>

This works, however, if I try to include the javascript for the editor:

// Import datatables and the required plugins, using the bootstrap 4 styling 
import 'datatables.net-bs4';
import 'datatables.net-editor-bs4'
import 'datatables.net-select-bs4';

I get the following error when compiling:

ERROR in ./~/datatables.net-editor-bs4/js/editor.bootstrap4.js
Module not found: Error: Can't resolve 'datatables.net-bs' in '/removed/app/path/node_modules/datatables.net-editor-bs4/js'
 @ ./~/datatables.net-editor-bs4/js/editor.bootstrap4.js 8:2-12:4
 @ ./assets/js/projects.js

ERROR in ./~/datatables.net-editor-bs4/js/editor.bootstrap4.js
Module not found: Error: Can't resolve 'datatables.net-editor' in '/removed/app/path/node_modules/datatables.net-editor-bs4/js'
 @ ./~/datatables.net-editor-bs4/js/editor.bootstrap4.js 8:2-12:4
 @ ./assets/js/projects.js

Seems that datatables.net-editor-bs4 requires datatables.net-editor and datatables.net-bs?

Going back to the previous times that I have worked with the editor, I have:

<script src="/assets/plugins/datatables/Editor-1.7.3/js/dataTables.editor.min.js" type="text/javascript"></script>
<script src="/assets/plugins/datatables/Editor-1.7.3/js/editor.bootstrap.min.js" type="text/javascript"></script>

Which made me think okay, maybe I need to install the dependency datatables.net-editor which I did and it left me with one error relating to datatables.net-bs which doesnt really make sense to me because it's for the bootstrap3 framework. Installing it does not solve the issue, just makes some more issues so I am not sure that this is the right path to take.

I am wondering if I have missed a step here?
Has anyone else gotten the editor working with webpack and the npm install?

icdeb

Okay, I see what happened.

ERROR in ./~/datatables.net-editor-bs4/js/editor.bootstrap4.js
Module not found: Error: Can't resolve 'datatables.net-bs' in '/removed/app/path/node_modules/datatables.net-editor-bs4/js'
 @ ./~/datatables.net-editor-bs4/js/editor.bootstrap4.js 8:2-12:4
 @ ./assets/js/projects.js

ERROR in ./~/datatables.net-editor-bs4/js/editor.bootstrap4.js
Module not found: Error: Can't resolve 'datatables.net-editor' in '/removed/app/path/node_modules/datatables.net-editor-bs4/js'
 @ ./~/datatables.net-editor-bs4/js/editor.bootstrap4.js 8:2-12:4
 @ ./assets/js/projects.js

After installing:

"datatables.net-bs": "^1.10.19",
"datatables.net-editor": "^1.6.5",

The issue is gone and it seems to be working now.

I guess when I was trying before I installed datatables.net-editor and datatables.net-editor-bs, not noting that the dependency was actually datatables.net-bs.

I think it may be relative to the issue here: https://datatables.net/forums/discussion/comment/140290/#Comment_140290

This is what is triggering the issue for me in editor.bootstrap4.js:

// AMD
define(['jquery', 'datatables.net-bs', 'datatables.net-editor'], function(

So during the installation of datatables.net-editor-bs4 it should installing datatables.net-bs and datatables.net-editor but it is not doing that?

Also see the note about downloading and replacing the files in node_modules. That is kind of a sad thing, could you not implement something like what they have done for the font awesome pro download: https://fontawesome.com/how-to-use/on-the-web/setup/using-package-managers#installing-pro

allan

Also see the note about downloading and replacing the files in node_modules. That is kind of a sad thing, could you not implement something like what they have done for the font awesome pro download

Yes! The current method is a bit of a workaround until I get around to setting up our own npm server so we can do authorisation like the FontAwesome guys do with a token. There are a few other things I want to work on first though .

So during the installation of datatables.net-editor-bs4 it should installing datatables.net-bs and datatables.net-editor but it is not doing that?

It does look like the dependencies have gone a little funny, and there needs to be a manual step or two more than there should be! I think that's a packaging error rather than a problem in the code. Thanks for pointing that out.

Allan

icdeb

Thanks, that sounds great and I looking forward to it as the current option makes the deployment process a bit more complicated than it needs to be.

Also feel that the current instructions make it a bit difficult to get started with things when using webpack as I spent a good few hours trying to get this to work over the weekend but maybe that is just me.

What did work for me:

package.json

"bootstrap": "^4.1.3",
"datatables.net-bs": "^1.10.19",
"datatables.net-bs4": "^1.10.19",
"datatables.net-editor": "^1.6.5",
"datatables.net-editor-bs4": "^1.6.3",
"datatables.net-select-bs4": "^1.2.7",
"jquery": "^3.3.1",
"popper.js": "^1.14.5",
"vue": "^2.5.17",

index.js

// Include bootstrap
import bootstrap from 'bootstrap'

// Include jquery
const jQuery = require('jquery')
// Make it available globally
// DT editor seems to need this, so does the .vue component
window.jQuery = jQuery

// Include datatables and plugins
require('datatables.net-bs4')
require('datatables.net-editor-bs4')
require('datatables.net-select-bs4')
// you could include the styles here 
// I have opted to do this via sass

// Include vue and initialize the instance
import Vue from 'vue'
import Example from '../views/Example.vue'
new Vue({
  el: '#app',
  store,
  render: h => h(Example)
})

Example.vue

<template>
  <div class="container-fluid">
    <div class="row">
      <div class="col-12">
        <table id="example" class="table table-striped table-bordered" style="width:100%">
          <thead>
            <tr>
              <th>Name</th>
              <th>Position</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>Tiger Nixon</td>
              <td>System Architect</td>
            </tr>
            <tr>
              <td>Garrett Winters</td>
              <td>Accountant</td>
            </tr>
          </tbody>
        </table>
      </div><!-- col-12 -->
    </div><!-- row -->
  </div><!-- container-fluid -->
</template>

<script>
  export default {
    mounted() {
      jQuery('#example').DataTable({ select: true, })
    }
  }
</script>

<style lang="scss">
  @import '~datatables.net-bs4/css/dataTables.bootstrap4.css';
  @import '~datatables.net-select-bs4/css/select.bootstrap4.css';
</style>

I didn't include a code sample for the editor functionality but I have editor and table defined as data objects, I also have two methods that initialize them and these are executed in the mounted life cycle event. It works.