JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"><link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs/jszip-2.5.0/dt-1.11.0/b-2.0.0/b-html5-2.0.0/b-print-2.0.0/datatables.min.css"/>
 
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/v/bs/jszip-2.5.0/dt-1.11.0/b-2.0.0/b-html5-2.0.0/b-print-2.0.0/datatables.min.js"></script>




<div class="metric_div">
  <table id="example1" class="table table-striped table-bordered" 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>
        <td>10</td>
        <td>20</td>
        <td>30</td>
      </tr>
      <tr>
        <td>Row</td>
        <td>B</td>
        <td>10</td>
        <td>20</td>
        <td>30</td>
      </tr>
      <tr>
        <td>Row</td>
        <td>C</td>
        <td>10</td>
        <td>20</td>
        <td>30</td>
      </tr>
    </tbody>
  </table>
</div>

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' ]
});