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)' );
});