How export to excel the table in DataTable with REACT?
How export to excel the table in DataTable with REACT?

Well, my problem is basically that, I've been searching and it allows me to export in PDF, CSV, copy, but it doesn't let me in Excel, I already imported the jszip, but it still doesn't work, I don't know if it's a version issue or something, but I don't even get any error, it doesn't show the button directly
"use client"
import React from 'react'
import DataTable from 'datatables.net-react';
import '@/styles/dataTables.css'
import DT from 'datatables.net-dt';
import 'datatables.net-responsive-dt';
import "datatables.net-buttons-dt";
import "datatables.net-buttons/js/buttons.html5.js";
import "datatables.net-buttons/js/buttons.print.js";
import "datatables.net-buttons-dt/css/buttons.dataTables.css";
import 'jszip';
import SpinnerForTables from '@/components/spinner/spinnerForTables';
import { useContextRegister } from '@/context/contextRegister';
import { TuseDTA } from '@/utils/types/tables';
import { useDTA } from '@/hooks/useDTA';
DataTable.use(DT);
interface ITableData {
useDTAContent: TuseDTA
onOpen: () => void
tableData: any[] | undefined
columns: any[]
setColumnDefs?: { width: string; targets: number; }[]
}
const TableData: React.FC<ITableData> = ({ onOpen, setColumnDefs, tableData, columns, useDTAContent }) => {
const { jsonIsLoading, setContentTable } = useContextRegister()
const { } = useDTA({ tableData, setContentTable, onOpen, useDTAContent })
return (
<>
{(jsonIsLoading == true && tableData == undefined) ?
<SpinnerForTables /> :
<DataTable data={tableData} className='order-column text-sm' columns={columns} options={{
destroy: true,
responsive: true,
order: [[0, 'desc']],
columnDefs: setColumnDefs,
layout: {
topStart: {
buttons: [
{
extend: 'excel',
text: 'Save current page',
exportOptions: {
modifier: {
page: 'current'
}
}
}
]
}
},
language: {
url: 'json/dataTableLanguaje.json',
},
}} >
<thead>
<tr>
{columns.map((col, index) => (
<th className='truncate' key={index}>{col.data}</th>
))}
</tr>
</thead>
</DataTable>
}
</>
)
}
export default TableData
Replies
You need to tell Buttons about JSZip. See this example.
Allan