How export to excel the table in DataTable with REACT?

JuanchiBM

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

allan

You need to tell Buttons about JSZip. See this example.

Allan