Rails7 ImportMaps

rphilip

I followed the very useful discussion in this question and dataTables is working well . This is how I have setup the file where dataTables is imported:

import jquery from "jquery"
window.jQuery = jquery
window.$ = jquery

import DataTable from "datatables.net-bs5"
import Buttons from 'datatables.net-buttons-bs5'
import 'jszip'
import 'pdfmake'
 
window.DataTable = DataTable();
Buttons();

However, I still cannot get the datatables.net-buttons-bs5 plugin to work. It seems like I must have something wrong with the syntax because although dataTables itself recognizes that jQuery is available, for some reason Buttons does not and the browser reports these errors:

Uncaught ReferenceError: jQuery is not defined
    at dataTables.buttons.min.js:5:283
    at dataTables.buttons.min.js:5:308
Uncaught ReferenceError: jQuery is not defined
    at buttons.bootstrap5.min.js:5:379
    at buttons.bootstrap5.min.js:5:404

Any suggestions would be so very, very greatly appreciated.

rphilip

My apologies, the error message re. JQuery is not defined were due to an error in another file. Those messages are gone now, but the buttons are still not being rendered in the table. I understand that having a test case would be the best way to debug this, but if there is anything obviously wrong with my syntax of the import statements or calling the Buttons() initialization, it would be great. Otherwise, I'll try to build a stripped down testcase.

allan

Try:

Buttons(window, jquery);

That might resolve it. If it doesn't can you show me how you are initialising the DataTable. Then if there is nothing wrong with that, I'd need a test case.

Thanks,
Allan

rphilip

Thanks Allan! Unfortunately, the buttons are still not rendered. Here's how I initialize the DataTable:

$('#sensor_networks').DataTable({
  searchHighlight: true,
  paging:          false,
  buttons: [
    { extend: 'copy',
      text: 'Copy to Clipboard'
    },
    { extend: 'csv',
      text: 'Download Spreadsheet (csv)'
    }
  ]
});

allan

You either need to:

1. Use the dom option to have the Buttons display, as shown in this example, or
2. Append the Buttons container to the document, which can be one of the easiest ways to work with the styling integration - e.g. as shown in this Bootstrap 5 example.

Allan

rphilip

Thank you, again! Unfortunately, the buttons are still not being rendered when I initialize with:

$(document).on('turbo:load', function(e) {
  var sensor_networks_table = $('#sensor_networks').DataTable({

    searchHighlight: true,
    paging:          false,
    buttons: [
      { extend: 'copy',
        text: 'Copy to Clipboard'
      },
      { extend: 'csv',
        text: 'Download Spreadsheet (csv)'
      }
    ]
  });

  sensor_networks_table.buttons().container().appendTo( '#sensor_networks_wrapper .col-md-6:eq(0)' );

});

allan

Can you give me a link to your page so I can take a look and see what is going wrong?

Thanks,
Allan

rphilip

Working! Thank you Allan!
Here's what we had to do to get DataTables with Plugins working on Rails7.0.4 using import maps (this repository has a working rails 7 example)

# config/importmap.rb
# Default, created by rails new.
pin "application", preload: true
pin "@hotwired/turbo-rails", to: "turbo.min.js", preload: true
pin "@hotwired/stimulus", to: "stimulus.min.js", preload: true
pin "@hotwired/stimulus-loading", to: "stimulus-loading.js", preload: true
pin_all_from "app/javascript/controllers", under: "controllers"

# Bootstrap (and popper, used for bootstrap popups and popovers)
pin "bootstrap", to: "https://ga.jspm.io/npm:bootstrap@5.2.2/dist/js/bootstrap.esm.js"
pin "@popperjs/core", to: "https://unpkg.com/@popperjs/core@2.11.6/dist/esm/index.js" 

# DataTables, Buttons Plugin, and jQuery
pin "datatables.net"              , to: "https://cdn.datatables.net/1.13.1/js/jquery.dataTables.mjs"
pin "datatables.net-bs5"          , to: "https://cdn.datatables.net/1.13.1/js/dataTables.bootstrap5.mjs"
pin "datatables.net-buttons"      , to: "https://cdn.datatables.net/buttons/2.3.2/js/dataTables.buttons.mjs"
pin "datatables.net-buttons-bs5"  , to: "https://cdn.datatables.net/buttons/2.3.2/js/buttons.bootstrap5.mjs"
pin "datatables.net-buttons-html5", to: "https://cdn.datatables.net/buttons/2.3.2/js/buttons.html5.mjs"
pin "pdfmake"                     , to: "https://ga.jspm.io/npm:pdfmake@0.2.6/build/pdfmake.js"
pin "pdfmake-fonts"               , to: "https://ga.jspm.io/npm:pdfmake@0.2.6/build/vfs_fonts.js"
pin "jquery"                      , to: "https://ga.jspm.io/npm:jquery@3.6.1/dist/jquery.js"

# Support libraries for DataTables/Plugins
pin "jszip", to: "https://ga.jspm.io/npm:jszip@3.10.1/lib/index.js"
pin "buffer", to: "https://ga.jspm.io/npm:@jspm/core@2.0.0-beta.27/nodelibs/browser/buffer.js"
pin "core-util-is", to: "https://ga.jspm.io/npm:core-util-is@1.0.3/lib/util.js"
pin "events", to: "https://ga.jspm.io/npm:@jspm/core@2.0.0-beta.27/nodelibs/browser/events.js"
pin "immediate", to: "https://ga.jspm.io/npm:immediate@3.0.6/lib/browser.js"
pin "inherits", to: "https://ga.jspm.io/npm:inherits@2.0.4/inherits_browser.js"
pin "isarray", to: "https://ga.jspm.io/npm:isarray@1.0.0/index.js"
pin "lie", to: "https://ga.jspm.io/npm:lie@3.3.0/lib/browser.js"
pin "pako", to: "https://ga.jspm.io/npm:pako@1.0.11/index.js"
pin "process", to: "https://ga.jspm.io/npm:@jspm/core@2.0.0-beta.27/nodelibs/browser/process-production.js"
pin "process-nextick-args", to: "https://ga.jspm.io/npm:process-nextick-args@2.0.1/index.js"
pin "readable-stream", to: "https://ga.jspm.io/npm:readable-stream@2.3.7/readable-browser.js"
pin "readable-stream/lib/internal/streams/stream.js", to: "https://ga.jspm.io/npm:readable-stream@2.3.7/lib/internal/streams/stream-browser.js"
pin "safe-buffer", to: "https://ga.jspm.io/npm:safe-buffer@5.1.2/index.js"
pin "setimmediate", to: "https://ga.jspm.io/npm:setimmediate@1.0.5/setImmediate.js"
pin "string_decoder", to: "https://ga.jspm.io/npm:string_decoder@1.1.1/lib/string_decoder.js"
pin "util", to: "https://ga.jspm.io/npm:@jspm/core@2.0.0-beta.27/nodelibs/browser/util.js"
pin "util-deprecate", to: "https://ga.jspm.io/npm:util-deprecate@1.0.2/browser.js"

# To pickup my custom javascript files
pin_all_from "app/javascript/custom", under: "custom"

# Gemfile
source 'https://rubygems.org'
git_source(:github) { |repo| 'https://github.com/#{repo}.git' }

ruby '2.7.4'
gem 'rails', '~> 7.0.4'
...
# Use Sass to process CSS
gem 'sassc-rails'

#Use Bootstrap gem to pickup CSS
gem 'bootstrap'    , '~> 5.2.2'   # https://blog.eq8.eu/til/how-to-use-bootstrap-5-in-rails-7.html
...

// app/assets/stylesheets/apllication.scss (note the .SCSS instead of .CSS file type)
@import "bootstrap";

// app/javascript/application.js
import "@hotwired/turbo-rails"
import "controllers"

import "bootstrap"
import "custom/init_datatables"

// app/javascript/custom/init_datatables.js
import $ from 'jquery'
import DataTable from 'datatables.net-bs5'
import 'datatables.net-buttons-bs5'
import 'datatables.net-buttons-html5'
import 'jquery-highlight'
import JSZip from 'jszip'
import pdfMake from 'pdfmake'
import pdfFonts from 'pdfmake-fonts'

DataTable.Buttons.jszip(JSZip)
DataTable.Buttons.pdfMake(pdfMake)
pdfMake.vfs = pdfFonts.pdfMake.vfs

$(document).on('turbo:load', function(e) {

  var my_table = $('#my_table').DataTable({
    destroy: true,
    paging:          false,
    buttons: [
      { extend: 'copy',
        text: 'Copy to Clipboard'
      },
      { extend: 'csv',
        text: 'Download Spreadsheet (csv)'
      }
    ]
  });

  my_table.buttons().container().appendTo( '#my_table_wrapper .col-md-6:eq(0)' );
});

Alex53

Hi.
I try this repository https://github.com/rossatboulder/rails7_datatables_example and it work.
But when I add the plugin yadcf it doesn't work.
init_datatables.js

import yadcf from "yadcf"

When I try

"initComplete": function() {
         yadcf.init(sensor_networks_table, [
                  { column_number: 8, filter_default_label: "Test"},
         ]);
},

Error:
Uncaught TypeError: yadcf.init is not a function

allan

YADCF is not supported by us I'm afraid - it is third party software. You'd need to ask the author if it supports ESM loading.

Allan

Alex53

Allan, thanks. I read about SearchPanes, this works for me.

Alex53

Hi.
I again try this repository https://github.com/rossatboulder/rails7_datatables_example and it work.
But when I add Editor, error
dataTables.editor-4f659a37df65b51caad5240bac45cd2f7c1ca2dd44629e560725ac83c7d3f9de.js:46 Uncaught ReferenceError: jQuery is not defined

Editor in local folder, import:
import 'editor/dataTables.editor'
This my importmap

<script type="importmap" data-turbo-track="reload">{
  "imports": {
    "application": "/assets/application-d06dba057add25eb68192fb5015ef6347598e48e3d037bb8a4c21ba750ec33da.js",
    "@hotwired/turbo-rails": "/assets/turbo.min-dfd93b3092d1d0ff56557294538d069bdbb28977d3987cb39bc0dd892f32fc57.js",
    "@hotwired/stimulus": "/assets/stimulus.min-dd364f16ec9504dfb72672295637a1c8838773b01c0b441bd41008124c407894.js",
    "@hotwired/stimulus-loading": "/assets/stimulus-loading-3576ce92b149ad5d6959438c6f291e2426c86df3b874c525b30faad51b0d96b3.js",
    "bootstrap": "https://ga.jspm.io/npm:bootstrap@5.2.2/dist/js/bootstrap.esm.js",
    "@popperjs/core": "https://unpkg.com/@popperjs/core@2.11.6/dist/esm/index.js",
    "datatables.net": "https://ga.jspm.io/npm:datatables.net@1.13.3/js/jquery.dataTables.mjs",
    "datatables.net-bs5": "https://ga.jspm.io/npm:datatables.net-bs5@1.13.3/js/dataTables.bootstrap5.mjs",
    "datatables.net-buttons": "https://cdn.datatables.net/buttons/2.3.2/js/dataTables.buttons.mjs",
    "datatables.net-buttons-bs5": "https://cdn.datatables.net/buttons/2.3.2/js/buttons.bootstrap5.mjs",
    "datatables.net-buttons-html5": "https://cdn.datatables.net/buttons/2.3.2/js/buttons.html5.mjs",
    "datatables.languageRU": "https://cdn.datatables.net/plug-ins/1.13.7/i18n/ru.mjs",
    "pdfmake": "https://ga.jspm.io/npm:pdfmake@0.2.6/build/pdfmake.js",
    "pdfmake-fonts": "https://ga.jspm.io/npm:pdfmake@0.2.6/build/vfs_fonts.js",
    "jquery": "https://ga.jspm.io/npm:jquery@3.7.1/dist/jquery.js",
    "jquery-highlight": "https://ga.jspm.io/npm:jquery-highlight@3.5.0/jquery.highlight.js",
    "jszip": "https://ga.jspm.io/npm:jszip@3.10.1/lib/index.js",
    "buffer": "https://ga.jspm.io/npm:@jspm/core@2.0.0-beta.27/nodelibs/browser/buffer.js",
    "core-util-is": "https://ga.jspm.io/npm:core-util-is@1.0.3/lib/util.js",
    "events": "https://ga.jspm.io/npm:@jspm/core@2.0.0-beta.27/nodelibs/browser/events.js",
    "immediate": "https://ga.jspm.io/npm:immediate@3.0.6/lib/browser.js",
    "inherits": "https://ga.jspm.io/npm:inherits@2.0.4/inherits_browser.js",
    "isarray": "https://ga.jspm.io/npm:isarray@1.0.0/index.js",
    "lie": "https://ga.jspm.io/npm:lie@3.3.0/lib/browser.js",
    "pako": "https://ga.jspm.io/npm:pako@1.0.11/index.js",
    "process": "https://ga.jspm.io/npm:@jspm/core@2.0.0-beta.27/nodelibs/browser/process-production.js",
    "process-nextick-args": "https://ga.jspm.io/npm:process-nextick-args@2.0.1/index.js",
    "readable-stream": "https://ga.jspm.io/npm:readable-stream@2.3.7/readable-browser.js",
    "readable-stream/lib/internal/streams/stream.js": "https://ga.jspm.io/npm:readable-stream@2.3.7/lib/internal/streams/stream-browser.js",
    "safe-buffer": "https://ga.jspm.io/npm:safe-buffer@5.1.2/index.js",
    "setimmediate": "https://ga.jspm.io/npm:setimmediate@1.0.5/setImmediate.js",
    "string_decoder": "https://ga.jspm.io/npm:string_decoder@1.1.1/lib/string_decoder.js",
    "util": "https://ga.jspm.io/npm:@jspm/core@2.0.0-beta.27/nodelibs/browser/util.js",
    "util-deprecate": "https://ga.jspm.io/npm:util-deprecate@1.0.2/browser.js",
    "moment": "https://ga.jspm.io/npm:moment@2.29.4/moment.js",
    "datatables.net-searchpanes-bs5": "https://ga.jspm.io/npm:datatables.net-searchpanes-bs5@2.1.1/js/searchPanes.bootstrap5.mjs",
    "import": "https://ga.jspm.io/npm:import@0.0.6/index.js",
    "datatables.net-searchpanes": "https://ga.jspm.io/npm:datatables.net-searchpanes@2.1.1/js/dataTables.searchPanes.mjs",
    "fs": "https://ga.jspm.io/npm:@jspm/core@2.0.1/nodelibs/browser/fs.js",
    "path": "https://ga.jspm.io/npm:@jspm/core@2.0.1/nodelibs/browser/path.js",
    "datatables.net-select": "https://ga.jspm.io/npm:datatables.net-select@1.6.1/js/dataTables.select.mjs",
    "controllers/application": "/assets/controllers/application-368d98631bccbf2349e0d4f8269afb3fe9625118341966de054759d96ea86c7e.js",
    "controllers/hello_controller": "/assets/controllers/hello_controller-549135e8e7c683a538c3d6d517339ba470fcfb79d62f738a0a089ba41851a554.js",
    "controllers": "/assets/controllers/index-2db729dddcc5b979110e98de4b6720f83f91a123172e87281d5a58410fc43806.js",
    "custom/init_bootstrap_popovers": "/assets/custom/init_bootstrap_popovers-abf9515d48d08c529ef7eb8cc8e4d84b112482899bdda4aae47a87bbe421a43e.js",
    "custom/init_datatables": "/assets/custom/init_datatables-13df71a1bad052bab7d092805a8355990ca70a20a2053e05c596af381acb7a27.js",
    "custom/init_editor": "/assets/custom/init_editor-04024382391bb910584145d8113cf35ef376b55d125bb4516cebeb14ce788597.js",
    "editor/dataTables.editor": "/assets/editor/dataTables.editor-4f659a37df65b51caad5240bac45cd2f7c1ca2dd44629e560725ac83c7d3f9de.js",
    "editor/editor.bootstrap": "/assets/editor/editor.bootstrap-0804849e8858e0c88a090a151e90d5730d9e6c028f4d67ba0deb043a214c6a90.js",
    "editor/editor.bootstrap4": "/assets/editor/editor.bootstrap4-625451031c3492fd89135dd5e0c2fdca0aa8e2d0fd0d6cab4130e4e40f88309d.js",
    "editor/editor.bootstrap5": "/assets/editor/editor.bootstrap5-98f55cb4f960d74edffda8c2a5727291382d40e2b776e3ff9d71c8728c12649d.js",
    "editor/editor.bulma": "/assets/editor/editor.bulma-eb5ff1da6a98aa65da37d6d963ab0f8f6cc7a837fe7869b95388d6a2abe7397c.js",
    "editor/editor.dataTables": "/assets/editor/editor.dataTables-069545f6348f4021352487df752161e7981ba22ddb706ee45da03478c78ed188.js",
    "editor/editor.foundation": "/assets/editor/editor.foundation-b8a541aef32bb635d73a2da5c32a2feef6bd0057cfcda6ad8f3c3f4becfbf5ed.js",
    "editor/editor.jqueryui": "/assets/editor/editor.jqueryui-95e51aa1ebc062958e9f657e416fc0c80fd6ee05a0512b14908f1544e6f415c4.js",
    "editor/editor.semanticui": "/assets/editor/editor.semanticui-910a0ce8c3fdb54712e61cebed19c87797faa0c23b94975f2b98a91e63a84991.js"
  }
}</script>

allan

You should probably be using the Editor .mjs files rather than the UMD loader in the .js file.

Allan

Alex53

Allan, thanks.
One more problem was I can't load mjs files (only js) in Rails importmaps. But I simply rename mjs to js and code work fine.

allan

mjs is the accepted extension for Javascript modules (Node docs). I'd be surprised if an importer as common as Rails can't use mjs - although I haven't used it myself, so I don't know. Maybe as on SO or some other Rails support forum?

At the moment, I don't plan to change the extension of the DataTables module files I'm afraid. The .js files for our distributions are UMD loaders (AMD, CommonJS and browser).

Allan