JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdn.datatables.net/v/dt/jszip-2.5.0/dt-1.11.3/b-2.0.1/b-colvis-2.0.1/b-html5-2.0.1/r-2.2.9/datatables.min.css">
<script src="https://cdn.datatables.net/v/dt/jszip-2.5.0/dt-1.11.3/b-2.0.1/b-colvis-2.0.1/b-html5-2.0.1/r-2.2.9/datatables.min.js"></script>
<table id="mytab" class="ds-table responsive no-wrap">
<thead>
  <tr>
    <th>
      <div>
        Id
      </div>
    </th>
    <th>
      <div>
        Code
      </div>
    </th>
    <th>
      <div>
        Description
      </div>
    </th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>1</td>
    <td>code1</td>
    <td>des1</td>
  </tr>
  <tr>
    <td>2</td>
    <td>code2</td>
    <td>des2</td>
  </tr>
  <tr>
    <td>3</td>
    <td>code3</td>
    <td>des3</td>
  </tr>
</tbody>
</table>

JavaScript

$(function() {
  myTable=$('#mytab').DataTable({
			"deferRender": true,
			"pageLength": 15,
			"dom": '<".ds-table-head"<".ds-table-title">fB>rtp',
			buttons: [
				{
					extend: 'collection',
					text: "Export",
					background: false,
          autoClose: true,
          fade: 0,
          align: "bottom-right",
					buttons: [
						{
							"extend": 'excelHtml5',
						},
						{
							"extend": 'csvHtml5',
						},
						{
							"extend": 'pdfHtml5',
						},
					]
				},
				{
					extend: 'collection',
					text: "Hide/Show",
					background: false,
          autoClose: true,
          fade: 0,
          align: "bottom-right",
					buttons: [
						'columnsVisibility'
					]
				},
			],
  });
});