Hello community.

I've been doing a React project with Datatables, but it doesn't show me the excel download button.

Has anyone gone through this before? I share with you my project code.

I will appreciate your comments.

import React, { useState, useEffect } from 'react';
import Navbar from './Navbar';
import Footer from './Footer';
import ItemStudent from './ItemStudent';
import $ from 'jquery';
import 'datatables.net-dt';
//import 'datatables.net-bs4';
import 'datatables.net-responsive-dt';
import 'datatables.net-buttons-dt';
import 'jszip/dist/jszip.js'; // For Excel export
import pdfMake from 'pdfmake'; // For PDF export

require('pdfmake/build/vfs_fonts.js');
require('datatables.net-buttons/js/buttons.colVis.js');
require('datatables.net-buttons/js/buttons.flash.js');
require('datatables.net-buttons/js/buttons.html5.js');
require('datatables.net-buttons/js/buttons.print.js');


$('#acaRecord').DataTable({
                    title: "Récord Académico",
                    destroy: true,
                    dom: 'Bfrtip',
                    buttons: {
                        buttons: [
                            { extend: 'copy', text: 'COPIAR' },
                            { extend: 'csv', text: 'CSV' },
                            { extend: 'pdf', text: 'PDF' },
                            { extend: 'print', text: 'IMPRIMIR' },
                            { extend: 'excel', text: 'EXCEL' }
                        ]
                    },
                    data: json,
                    columns: [
                        { title: 'Periodo Académico', name: 'periodacad', targets: 0, data: 'periodo_academico' },
                        { title: 'Código del curso', name: 'coursecode', targets: 1, data: 'codigo_curso' },
                        { title: 'Nombre del curso', name: 'coursename', targets: 2, data: 'nombre_curso' },
                        { title: 'Promedio Final', name: 'finalavera', targets: 3, data: 'nota_final' }
                    ],
                    responsive: true,
                    language: {
                        search: "Buscar: ",
                        searchPlaceholder: "Ingrese valor...",
                        lengthMenu: "Mostrar _MENU_ registros por página",
                        zeroRecords: "No se encontró resultados",
                        info: "Mostrando página _PAGE_ de _PAGES_",
                        infoEmpty: "No hay registros disponibles",
                        infoFiltered: "(filtered from _MAX_ total records)",
                        paginate: {
                            previous: "Anterior",
                            next: "Siguiente"
                        }
                    }
                });

Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.