JSFiddle - React, Tailwind, and code Playground

by pritamsinha

HTML

<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.11.0/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.11.0/js/dataTables.bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.0.0/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.0.0/js/buttons.bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/2.0.0/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.0.0/js/buttons.print.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.0.0/js/buttons.colVis.min.js"></script>

<link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.0.0/css/buttons.bootstrap5.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.11.0/css/dataTables.bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.0.0/css/buttons.bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.11.0/css/jquery.dataTables.min.css">


<div class="metric_div">
  <table id="example1" class="display nowrap cell-border" style="width:100%">
    <thead>
      <tr>
        <th colspan="2" style="border-bottom: 0px;"></th>
        <th>Header</th>
        <th>Header</th>
        <th>Header</th>
      </tr>
      <tr>
        <th style="border-top: 0px;"></th>
        <th style="border-top: 0px;"></th>
        <th>A</th>
        <th>B</th>
        <th>C</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Row</td>
        <td>A</td>
       ...

JavaScript

$('#example1').DataTable( {
		'scrollX': true,
    'fixedHeader': false,
    "responsive": true,
    'lengthMenu': [[5, 10, 25, 50, -1], [5, 10, 25, 50, "All"]],
    'lengthChange': true,
    'dom': 'Blfrtip',
    "pagingType": "full_numbers",
    'buttons': [ 'copy', 'excel', 'pdf', 'csv', 'print', 'colvis' ]
});