Using Buttons with Datatables Vue 3 component

andrewalc

Stackblitz example: https://stackblitz.com/edit/datatables-net-vue3-bootstrap5-vfrzx5?file=src/App.vue

Hello, I'm having a tough time trying to figure out how to get the Buttons extension to work with the Vue 3 Datatables component. I followed the instructions to setup the vue 3 component from here. When I add the buttons extension it does not seem to show up in my table, I'm trying to add it like this:

import DataTable from 'datatables.net-vue3';
import DataTablesCore from 'datatables.net-bs5';
import Buttons from 'datatables.net-buttons';

DataTable.use(DataTablesCore);
DataTable.use(Buttons);

const options = {
  dom: 'Bfrtip',
  buttons: ['copy', 'csv', 'excel', 'pdf', 'print'],
};

...

I'm using the datatables.net-buttons npm package which i installed with yarn, and this code does not seem to be throwing errors.

I also tried using datatables.net-buttons-dt with the Vue 3 component but using that package gives me this error:

Uncaught ReferenceError: jQuery is not defined
    at buttons.dataTables.mjs:37:12
    at buttons.dataTables.mjs:39:1

I adapted the Vue + DataTables + Bootstrap 5 stackblitz example from the vue 3 component page to try to get datatables.net-buttons in App.vue working but i cannot seem to get the buttons to show up. Could someone help me understand what I'm missing here, either with datatables.net-buttons or datatables.net-buttons-dt ? Thank you so much.

colin

jQuery is a dependency for DataTables, so you need to ensure that jQuery is being loaded first.

Colin

allan

Here is an example showing the export buttons working in a Vue environment.

That's from this thread where another developer said they were getting the same error as you. I asked for a test case but never got a reply.

If my example doesn't help, perhaps you can link to a test case please?

Allan

andrewalc

Thank you so much Allan, the example you gave works in my own project as well.

I completely overlooked the fact that i still need to import datatables.net-buttons/js/buttons.html5 even when using the vue component.

I wasn't aware of the .Buttons.jszip and .Buttons.pdfmake functions either. Simple enough to understand, though perhaps that needs to be mentioned somewhere (unless I totally missed it haha)

As for reproducing the jQuery error I mentioned, it is as simple as switching the datatables.net-button import in your stackblitz example to datatables.net-buttons-dt. Here's an example, simply removing -dt from the import resolves the error.
That definitely threw me for a loop for awhile as I figured either of those imports worked the same way. I noticed all the imports in the example you sent me used the style-less imports (like datatables.net-buttons without the -dt) in the script block of the vue file and then import the styled version (datatables.net-buttons-dt) in the style block I suppose I should always be doing that with datatables extensions in vue 3? The download builder says to use import 'datatables.net-buttons-dt'; to import buttons and other extensions that end with -dt which is why i used those imports in the first place.

All in all I was able to get my table working and got colVis working on top of that as well, thank you so much for your help and for making the Vue 3 component!

allan

Yes, I need to find a better way to document that. Part of the problem is that it isn't needed with the more common browser script tags, but as we all move more to npm this is becoming more important to correctly document.

As for reproducing the jQuery error I mentioned, it is as simple as switching the datatables.net-button import in your stackblitz example to datatables.net-buttons-dt.

Thanks! I had an error in the DataTables styling wrapper for Buttons. Fix committed here and I'll drop a new release of Buttons soon. The other styling integrations (Bootstrap, Bulma, etc) all work okay with the current release.

Allan