JSFiddle - React, Tailwind, and code Playground
HTML
<table cellpadding="0" cellspacing="0" border="0" class="display datatable">
<thead>
<tr class="dropdown">
<td class="first"></td>
<td class="second"></td>
<td class="third"></td>
<td class="fourth"></td>
<td class="fifth"></td>
<td class="sixth"></td>
<td class="seventh"></td>
<td class="eighth"></td>
<td class="ninth"></td>
<td class="tenth"></td>
<td class="eleventh"></td>
</tr>
<tr>
<th style="width: 100px;white-space: nowrap;">Parent Part #</th>
<th style="width: 100px;white-space: nowrap;">Part Number</th>
<td style="width: 100px;white-space: nowrap;">Description</td>
<td...
JavaScript
$(document).ready(function () {
var mesa = $('.datatable').DataTable({
filename: "Application",
responsive: true,
"bAutoWidth": false, // toggle this depending on how wide you want the table
"ajax": {
"url": "/ApplicationImportTgts/GetData",
"type": "GET",
"datatype": "json"
},
responsive: 'true',
dom: 'Bfrtip',
buttons: [
'copy',
{
extend: 'excelHtml5',
text: 'Excel',
title:'PL1',
customize: function (xlsx) {
var source = xlsx.xl['workbook.xml'].getElementsByTagName('sheet')[0];
source.setAttribute('name', 'Application');
var source = xlsx['[Content_Types].xml'].getElementsByTagName('Override')[1];
var clone = source.cloneNode(true);
clone.setAttribute('PartName', '/xl/worksheets/sheet2.xml');
xlsx['[Content_Types].xml'].getElementsByTagName('Types')[0].appendChild(clone);
//Add sheet relationship to xl/_rels/workbook.xml.rels => Relationships
//=====================================================================
var source = xlsx.xl._rels['workbook.xml.rels'].getElementsByTagName('Relationship')[0];
var clone = source.cloneNode(true);
clone.setAttribute('Id', 'rId3');
clone.setAttribute('Target', 'worksheets/sheet2.xml');
xlsx.xl._rels['workbook.xml.rels'].getElementsByTagName('Relationships')[0].appendChild(clone);
//Add second sheet to xl/workbook.xml => <workbook><sheets>
//=========================================================
...