JSFiddle - React, Tailwind, and code Playground

HTML

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css" rel="stylesheet">
<link href="https://cdn.datatables.net/1.10.21/css/dataTables.bootstrap4.min.css" rel="stylesheet">
<link href="https://cdn.datatables.net/buttons/1.6.2/css/buttons.bootstrap4.min.css" rel="stylesheet">

<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/dataTables.bootstrap4.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.2/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.2/js/buttons.bootstrap4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.2/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.2/js/buttons.colVis.min.js"></script>


<table id="example" class="table table-bordered table-hover nowrap" style="width:100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Tiger Jackson Nixon</td>
                <td>System and Solution Architect</td>
                <td>West Virginia Central Junction</td>
                <td>61</td>
                <td>2011/04/25</td>
                <td>external contract (details not shared)</td>
            </tr>
            <tr>
                <td>Garrett Richard Winters</td>
                <td>Accountant</td>
                <td>Rancho Santa Margarita, California</td>
                <td>63</td>
 ...

JavaScript

$(document).ready(function() {

var table = $('#example').DataTable( {
"dom": 'Btri',
"searching" : false,
"paging" : false,
"info" : false,
buttons: [ {
extend: 'excelHtml5',
className: 'btn btn-primary btn-sm',
text: 'Export',
autoFilter: true,
attr:  { id: 'exportButton' },
exportOptions: {
modifier: { page: 'current' } },
//sheetName: 'data',
title: '',
filename: function () { 
var txt = prompt("Enter the filename :");
return txt; },
customize: function(xlsx) { 
var sheet = xlsx.xl.worksheets['sheet1.xml'];
var col = $('col', sheet);
var width_details = [];
// I loop through each column in my datatable 
// and check the width and store it in width_details[]
$('tr:nth-child(1) > td').each(function(){
width_details.push($(this).width()); });
var q = 0;
//on export each column in excel will have same width set on datatable.
col.each(function () {
$(this).attr('width', width_details[q]);
q++; });
 }
}]

} );

  
        
} );