JSFiddle - React, Tailwind, and code Playground

HTML

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>

<!-- Bootstrap 4 -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<!-- DataTables -->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs4/jszip-2.5.0/dt-1.10.20/b-1.6.1/b-colvis-1.6.1/b-flash-1.6.1/b-html5-1.6.1/b-print-1.6.1/datatables.min.css"/>
<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/bs4/jszip-2.5.0/dt-1.10.20/b-1.6.1/b-colvis-1.6.1/b-flash-1.6.1/b-html5-1.6.1/b-print-1.6.1/datatables.min.js"></script>

<h1>Table A</h1>
<table class="dataTable" id="tableA">
  <thead>
    <tr>
      <th>Head 1</th>      
      <th>Head 2</th>      
      <th>Head 3</th>      
      <th>Head 4</th>      
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Data 1</td>      
      <td>Data 2</td>      
      <td>Data 3</td>      
      <td>Data 4</td>      
    </tr>
    <tr>
      <td>Data 5</td>      
      <td>Data 6</td>      
      <td>Data 7</td>      
      <td>Data 8</td>      
    </tr>
  </tbody>
</table>

<br>
<br>

<h1>Table B</h1>
<table class="dataTable" id="tableB">
  <thead>
    <tr>
      <th>Head 5</th>      
      <th>Head 6</th>      
      <th>Head 7</th>      
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Data 9</td>      
      <td>Data 10</td>      
      <td>Data 11</td>      
    </tr>
    <tr>
      <td>Data 12</td>      
      <td>Data 13</td>      
      <td>Data 14</td>      
    </tr>
  </tbody>
</table>

JavaScript

$('.dataTable').dataTable( {
	"autoWidth": false,
	buttons: [
          {
            extend: 'copy',
            text: 'Copy Table Data',
            title: function () {
              // get the clicked table id
              // return the corresponding title
              return 'title'
            }
          },
          {
            extend: 'colvis',
            text: 'Hide Columns',
            columnText: function ( dt, idx, title ) {
              let mytitle = dt.column( idx ).header().innerHTML;
              return (idx+1)+': '+mytitle;
            },
          }
        ],
        dom: "Blftrip"
} );