Answers

• allan Posts: 64,285Questions: 1Answers: 10,613 Site admin

  April 13

  You appear to be using npm (or yarn, or similar) for jQuery and Bootstrap, but not DataTables. Is there a reason for that? Given you are using modules and a package manager, I would definitely recommend you do that. Click the "NPM" tab at the bottom of the download builder page.

  That said, you can use a local file but the .js file is a UMD (i.e. browser, AMD or CommonJS), but you are using it as an ES Module there. That can work, depending on the Webpack setup, but I think it takes extra configuration.

  You could try using the .mjs file which is the ES Module loader version. But as I say, just use the npm modules unless there is a good reason not to.

  Allan
• Bob Rundle Posts: 8Questions: 2Answers: 0

  April 13

  I would love to use NPM for datatables. However I want to use the editor. To use the editor I need to use the download. I think. The documentation is very muddled on this point. Apparently in the past you could use NPM to use the editor with some kind of secret key, but apparently no longer.

  How do you use the editor with NPM?

  Assuming that NPM is a non-starter, what is the "extra configuration" I need? Where is the ".mjs" file. I did not get that in the download.

  The webpack setup I am using was configured by symfony webpack encore. So nothing special. Should be a common setup I would think.
• allan Posts: 64,285Questions: 1Answers: 10,613 Site admin

  April 13

  I don't think it is that muddled is it? The instructions are in the manual here and in the NPM tab of the download builder.

  You can certainly use Editor with your package manager!

  Allan
• Bob Rundle Posts: 8Questions: 2Answers: 0

  April 14

  Ok. I got this working. I think. I found the NPM Dr. Who Secret Handshake to install the Editor from a private repository.
• kthorngren Posts: 21,896Questions: 26Answers: 5,059

  April 14 edited April 14

  Please share so others can benefit from your learning. What steps did you take?

  Kevin
• allan Posts: 64,285Questions: 1Answers: 10,613 Site admin

  April 14

  It will most likely be this part where you have to tell npm which repository to get Editor from.
• Bob Rundle Posts: 8Questions: 2Answers: 0

  April 14

  False alarm. Still not working. So when I try to create the Editor, I get...

  Error: No Bootstrap library. Set it with DataTable.use(bootstrap);

  So in my code I have...

      this.childEditor = new DataTable.Editor({
          ajax: '/event/0/children',
          table: '#event-list-table',
          fields: [
              { label: 'Title', name: 'title' },
              { label: 'Description', name: 'description' },
              { label: 'Notes', name: 'notes' },
          ]
      });
      this.childDataTable = $('#event-list-table').DataTable({
          ajax: '/event/0/children',
          serverSide: true,
          processing: true,
          columns: [
              { data: 'title' },
              { data: 'description' },
              { data: 'notes' },
          ],
      });
      DataTable.use('bootstrap');
      this.childEditor.create();
  

  This is symfony webpack encore, so in my app.js. I have...

  // any CSS you import will output into a single css file (app.css in this case)
  import './styles/app.scss';
  import 'jquery';
  import 'bootstrap';
  import DataTable from 'datatables.net-bs5';
  import Editor from '@datatables.net/editor-bs5';
  import DateTime from 'datatables.net-datetime';

  So here is my package file...

  "devDependencies": {
      "@babel/core": "^7.17.0",
      "@babel/preset-env": "^7.16.0",
      "@hotwired/stimulus": "^3.0.0",
      "@hotwired/turbo": "^7.1.1 || ^8.0",
      "@popperjs/core": "^2.11.8",
      "@symfony/stimulus-bridge": "^3.2.0",
      "@symfony/ux-turbo": "file:vendor/symfony/ux-turbo/assets",
      "@symfony/webpack-encore": "^5.0.0",
      "bootstrap": "^5.3.5",
      "bootstrap-datepicker": "^1.10.0",
      "bs-custom-file-input": "^1.3.4",
      "core-js": "^3.38.0",
      "file-loader": "^6.2.0",
      "jquery": "^3.7.1",
      "node-sass": "^9.0.0",
      "regenerator-runtime": "^0.13.9",
      "sass-loader": "^16.0.4",
      "webpack": "^5.74.0",
      "webpack-cli": "^5.1.0",
      "webpack-notifier": "^1.15.0",
      "@datatables.net/editor-bs5": "^2.4.1",
      "bootstrap-icons": "^1.11.3",
      "datatables.net-bs5": "^2.2.2",
      "datatables.net-datetime": "^1.5.5",
      "datatables.net-keytable-bs5": "^2.12.1",
      "datatables.net-select-bs5": "^3.0.0"
  },
  

  So what am I doing wrong?
• allan Posts: 64,285Questions: 1Answers: 10,613 Site admin

  April 14

  Try putting it before you initalise the Editor instance.

  This is when the download builder suggests to use if you select Bootstrap (both style and library), DataTables and Editor:

  import * as bootstrap from 'bootstrap';
  import DataTable from 'datatables.net-bs5';
  import Editor from '@datatables.net/editor-bs5';
   
  DataTable.use(bootstrap);
  

  The slightly different use line is becase DataTables 2.2 and Editor 2.4 can work together to make that slightly easier.

  Allan