JSFiddle - React, Tailwind, and code Playground

by Kalyani_Genxcoders

HTML

<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/v/dt/dt-1.10.20/b-1.6.1/b-html5-1.6.1/datatables.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/v/dt/jq-3.3.1/dt-1.10.20/b-1.6.1/b-html5-1.6.1/datatables.min.js"></script>
<html>
  <head>
    
  </head>
  <body>
      <div class="gxcpl-card-header">
			<div class="row">
				<div class="col-md-7 col-xs-12">
					<h5>PERFORMANCE ON DATE 
						<strong>20/12/2019</strong>
					</h5>
				</div>
				<div class="col-md-2 col-xs-5 text-center" id="excel"></div>
			</div>
		</div>
		<div class="gxcpl-card-body gxcpl-padding-15" style="overflow-x: auto;">
		    <table class="display gxcpl-table-hover" id="example5" width="100%" border="1">
		    	<thead>
				  	<tr>
					    <th rowspan="4" class="text-center">Head</th>
					    <th style="display: none;"></th>
			            <th style="display: none;"></th>
			            <th style="display: none;"></th>
					    <th rowspan="4" class="text-center">Area</th>
					    <th style="display: none;"></th>
			            <th style="display: none;"></th>
			            <th style="display: none;"></th>
					    <th rowspan="4" class="text-center">Colliery</th>
					    <th style="display: none;"></th>
			            <th style="display: none;"></th>
			            <th style="display: none;"></th>
					    <th rowspan="4" class="text-center">Daily Target</th>
					    <th style="display: none;"></th>
			            <th style="display: none;"></th>
			            <th style="display: none;"></th>
					    <th colspan="3" class="text-center">Day</th>
					    <th style="display: none;"></th>
			            <th style="display: none;"></th>
					    <th colspan="5" class="text-center">Month Upto</th>
					    <th style="display:...

JavaScript

$(document).ready(function() {
			var table = $('#example5').DataTable( {
				scrollY: "60vh",
				scrollCollapse: true,
				scrollX: true,
				paging:  false,
				ordering: false,
				info: true,
				dom: 'Bfrtip',
					buttons: {
						buttons: [{
							extend: 'excel',
							text: '<i class="fa fa-file-excel-o"></i> Excel',
							title: $('h5').text(),
							exportOptions: {
								columns: ':not(.no-print)'
							},
							footer: true
						},
						{
							extend: 'pdfHtml5',
							orientation: 'landscape',
							pageSize: 'A4',
							text: '<i class="fa fa-file-excel-o"></i> Excel',
							title: $('h5').text(),
							exportOptions: {
								columns: ':not(.no-print)'
							},
							footer: true
						},]
					}
			});
			table.buttons().container().appendTo($('#buttons'));
		});