JSFiddle - React, Tailwind, and code Playground

HTML

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"><head>
	<!-- Required meta tags -->
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">


<!-- Custom fonts for this template-->
<link href="/vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">

<!-- Custom styles for this template-->

<link href="/vendor/datatables/dataTables.bootstrap4.min.css" rel="stylesheet">

	
	<title>Movimientos contables</title>
</head>
<body id="page-top">
	<div id="wrapper">

		<div id="content-wrapper" class="d-flex flex-column">
			<div id="content">
				

<!-- Begin Page Content -->
<div class="container-fluid">

	<!-- Page Heading -->
	<div class="d-sm-flex align-items-center justify-content-between mb-4">
		<h1 class="h3 mb-0 text-gray-800">Movimientos contables</h1>
		<div class="dropdown no-arrow">
		    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton" id="exporDatatable">
		        <button class="dropdown-item" id="excel" href="#">
		        	<i class="far fa-file-excel fa-lg text-dark mr-2"></i> Excel
		        </button>
		        <button class="dropdown-item" id="pdf" href="#">
		        	<i class="far fa-file-pdf fa-lg text-dark mr-2"></i> PDF
		        </button>
		        <button class="dropdown-item" id="csv" href="#">
		        	<i class="fas fa-file-csv fa-lg text-dark mr-2"></i> CSV
		        </button>
		    </div>
		</div>
	</div>
	

	

	<!-- Content Row -->
	<!-- DataTales Example -->
    <div class="card shadow mb-4">
    	<div class="card-header py-3">
              <h5 class="m-0 font-weight-bold text-primary">Capital actual invertido: 26.027,16</h5>
       ...

JavaScript

$(document).ready(function() {
		$('.table-winvest').DataTable(
	  		{ 

          extend: 'excel',
          exportOptions: {
              columns: ':visible',
              format: {
                  body: function(data, row, column, node) {
                      data = $('<p>' + data + '</p>').text();
                      return $.isNumeric(data.replace(',', '.')) ? data.replace(',', '.') : data;
                  }
              }
          },       
	  			"order":[],
	  			"dom": '<"row"<"col-sm-12 col-md-6"l><"col-sm-12 col-md-6"f>><B><"row"t><"row"<"col-sm-12 col-md-5"i><"col-sm-12 col-md-7"p>>',
		    	buttons: [
		        	'excel', 'pdf', 'csv'
		    	],
		    	initComplete: function() {
	       	 		var $buttons = $('.dt-buttons').hide();
	       	 		console.log($buttons);
	         		$('#exporDatatable').on('click', function(e) {
	            		var btnClass = e.target.id ? '.buttons-' + e.target.id : null;
	            		if (btnClass) $buttons.find(btnClass).click(); 
	         		});
	      		},
		    	"language": {
		    		"decimal":        ",",
				    "emptyTable":     "No hay datos resultados disponibles",
				    "info":           "Mostrando _START_ de _END_ de _TOTAL_ resultados",
				    "infoEmpty":      "Mostrando 0 de 0 de 0 resultados",
				    "infoFiltered":   "(filtrado por _MAX_ total resultados)",
				    "infoPostFix":    "",
				    "thousands":      ".",
				    "lengthMenu":     "Muestra _MENU_ resultados",
				    "loadingRecords": "Cargando...",
				    "processing":     "Procesando...",
				    "search":         "Buscar:",
				    "zeroRecords":    "No se han encontrado resultados",
				    "paginate": {
		    			"previous": "Anterior",
		    			"next": "Siguiente",
		    			"first": "Primera",
		    			"last": "Última"
		    		},
				    "aria": {
				        "sortAscending":  ": activa para ordenar la columna ascendente",
				        "sortDescending": ": activa para ordenar la columna descendente"
				    }
		    	}
			}...