Answers

• allan Posts: 61,972Questions: 1Answers: 10,160 Site admin

  April 2023

  At the moment, what you would probably need to do in this case is use the code from the Editor / Select2 integration file (possibly without the UMD if you are using ESM loaders), which will attach itself to the DataTable object and you'd then be able to use type: 'select2' as normal from there.

  I do intend to provide NPM modules for the plug-ins to make this kind of thing a little easier in future, although I'm not yet certain when that will happen (I'm working on the code Editor library as an NPM package at the moment).

  Allan
• ktadrowski Posts: 13Questions: 5Answers: 0

  April 2023

  Hey Allan,

  Thanks. I have done following till now:

  In index.html included:

  <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" rel="stylesheet"  type="text/css" />
  <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
  <script type="application/javascript" defer src="https://cdnjs.cloudflare.com/ajax/libs/select2/3.4.1/select2.js"></script>
  

  In my vue project I have added the integration file >! "editor.select2.js" and removed the AMD related "if condition". The contents of factory function looks like this now:

   if (typeof exports === 'object') {
      // Node / CommonJS
      module.exports = function ($, dt) {
        if (!$) { $ = require('jquery'); }
        factory($, dt || $.fn.dataTable || require('datatables'));
      };
    }
    else if (jQuery) {
      // Browser standard
      factory(jQuery, jQuery.fn.dataTable);
    }
  

  Then I imported "editor.select2.js" in my component as below:

  import * as Select2 from "@/core/plugins/dt-editors/editor.select2.js";

  Later tried to add the field type to editor config as:

  fields: [{
  label: "EXP/ FEE/ INV ADJ TYPE",
  name: "type",
  type: "select2",
  ipOpts: typeArr,
  }]

  and also tried to add it in onMounted() as:

  dtEditorFees.add({
  label: "EXP/ FEE/ INV ADJ TYPE",
  name: "type",
  type: "select2",
  options: typeArr,
  });

  But I am still getting error:

  Error: Error adding field - unknown field type select2
• allan Posts: 61,972Questions: 1Answers: 10,160 Site admin

  April 2023

  Do you know if you are using CommonJS or ESM?

  If ESM (which is reasonably likely with Vue), you'll probably need to do:

  import DataTable from 'datatables.net';
  

  at the top of the integration file. That will populate the DataTable variable and give somewhere for the plug-in to latch onto.

  Allan
• ktadrowski Posts: 13Questions: 5Answers: 0

  April 2023 edited April 2023

  ESM it is.

  I modified the import as below:

      import DataTable from 'datatables.net-vue3';
      import DataTablesLib from 'datatables.net-bs5';
      DataTable.use(DataTablesLib);
  

  and that removed the type error.

  I have also replaced the require('datatables') with require('datatables.net-vue3'), the correct library name for Vue.

  Now below console.log statement coming as undefined

      (function ($, DataTable) {
        'use strict';
      
        console.log(DataTable);
        if (!DataTable.ext.editorFields) {
          DataTable.ext.editorFields = {};
        }
  

  it's undefined, and so the error turned as

  Cannot read properties of undefined (reading 'ext').

  I tried to remove the DataTable as function parameter, which resulted into displaying the DataTable object in console, but that object is also missing

  DataTable.Editor.fieldTypes or
  DataTable.ext.editorFields