0
respostas

Como configurar o datatables.net-bs4 (aplicando em um adminlte), gerenciado pelo yarn, em um projeto do Rails 6, que não usa o Webpacker?

Estou executando um projeto usando o Rails 6, mas sem usar o Webpacker. Contudo, as configurações para o datatables.net-bs4 (aplicando em um adminlte) não estão claras na documentação, para o contexto que deste projeto. Assim, minha dúvida seria como realizar a configuração. Segue o atual estado dos arquivos:

  • package.json

    {
    "name": "proj",
    "private": true,
    "dependencies": {
      "@fortawesome/fontawesome-free": "^5.15.3",
      "@rails/actioncable": "^6.0.0",
      "@rails/activestorage": "^6.0.0",
      "@rails/ujs": "^6.0.0",
      "admin-lte": "^3.1.0",
      "bootstrap": "^4.6.0",
      "bootstrap-switch": "^3.1.1",
      "bootstrap4-toggle": "^3.6.1",
      "datatables": "^1.10.24",
      "datatables-buttons": "^1.0.3",
      "datatables-responsive": "^1.0.7",
      "datatables.net-bs4": "^1.10.0",
      "daterangepicker": "^3.1.0",
      "jquery": "^3.6.0",
      "popper.js": "^1.16.1",
      "turbolinks": "^5.2.0"
    },
    "version": "0.1.0",
    "devDependencies": {
    
    }
    }
  • app/assets/javascripts/application.js

//= require turbolinks
//= require jquery
//= require rails-ujs
//= require theme/adminlte
//= require_tree .
  • app/assets/javascripts/tables.js
//= require bootstrap
//= require datatables.net-bs4
//= require datatables-responsive
//= require datatables-buttons

$.extend(true, $.fn.dataTable.defaults, {
  "responsive": true,
  "lengthChange": false,
  "autoWidth": false,
  ....
  }
});
  • app/assets/stylesheets/application.scss
@import 'bootstrap/scss/bootstrap';
@import 'theme/adminlte';
@import "users";

$fa-font-path: '@fortawesome/fontawesome-free/webfonts';
@import '@fortawesome/fontawesome-free/scss/fontawesome';
@import '@fortawesome/fontawesome-free/scss/brands';
@import '@fortawesome/fontawesome-free/scss/solid';
@import '@fortawesome/fontawesome-free/scss/regular';
@import '@fortawesome/fontawesome-free/scss/v4-shims';