Vue3 Datatable - buttons Issue

goalmaker

My code

`<template>
<DataTable v-if="properties.length" :data="properties" :columns="pdtHeaders" :options="pdtOptions" class="display" ref="table">
<thead>
<tr>
<th >Name</th>
<th class="hidden md:table-cell">Address</th>
<th>Contact</th>
</tr>
</thead>
</DataTable>
</template>

import { Link } from "@inertiajs/vue3"; import { ref } from "vue"; import JSZip from 'jszip'; // For Excel export import PDFMake from 'pdfmake'; // For PDF export import DataTable from "datatables.net-vue3"; import DataTablesCore from "datatables.net"; import 'datatables.net-select'; import 'datatables.net-buttons'; import 'datatables.net-buttons/js/buttons.html5.mjs'; import 'datatables.net-buttons/js/buttons.print.mjs'; import 'datatables.net-buttons/js/buttons.colVis.mjs'; DataTable.use(DataTablesCore); const pdtOptions = { dom: "<'grid grid-cols-2'<' 'B><'text-end 'f > >" + "<'grid grid-cols-1'<''tr>>" + "<'grid grid-cols-2 my-2'<''i><'text-end 'p>>", responsive: true, select: true, buttons: ['copyHtml5', 'excel', 'csvHtml5', 'pdfHtml5'] }; const pdtHeaders = [ { data: "name", }, { data: "address",class: "hidden md:table-cell" }, { data: "contact" }, ]; defineProps({ properties: Object, });

<style>
@import 'datatables.net-dt';
</style>`

Only copy, csv and pdf appears in which only copy and csv works.
i have installed JSZip and PDFMake npm packages as well.

My other projects with Core PHP and JQuery are working well.
I am using Laravel11 with VUE 3 for the first time because of new project requirement.

Do not know where am i going wrong.
can anyone help?

allan

This example shows how Buttons can work in Vue with Excel and PDF export.

If that example doesn't help you resolve the issue, please link to a StackBltiz example showing the issue so I can offer some help.

Allan

goalmaker

this example worked allan thank you very much for instant reply. All other issues are also solved along with it.

Much appreciated.