How export to excel the table in DataTable with REACT?

JuanchiBM

Im trying to put the export button for excel but it doesnt working, the pdf button works, and the csv button to, but the excel button didnt

"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

kthorngren

According to this example from the [React blog](https://datatables.net/blog/2024/react0 you need to do something like this:

import jszip from 'jszip';
import pdfmake from 'pdfmake';

DataTable.use(DT);
DT.Buttons.jszip(jszip);
DT.Buttons.pdfMake(pdfmake);

The import jszip from 'jszip'; is different from your code and it doesn't look like you have DT.Buttons.jszip(jszip);.

Kevin

JuanchiBM

Thanks @kthorngren you save me, i didnt find any example jajajsjs

allan

I'm going to update the download build to include that information - it needs to be more visible!

Allan