JSFiddle - React, Tailwind, and code Playground

by Denver Bohling

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.9/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.9/css/jquery.dataTables.min.css">
<div>
      <table id="dataTable">
        <thead>
          <tr>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>
            <th>Column 4</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Row 1</td>
            <td>Row 1</td>
            <td>Row 1</td>
            <td>Row 1</td>
          </tr>
          <tr>
            <td>Row 1</td>
            <td>Row 2</td>
            <td>Row 2</td>
            <td>Row 2</td>
          </tr>
          <tr>
            <td>Row 3</td>
            <td>Row 3</td>
            <td>Row 3</td>
            <td>Row 3</td>
          </tr>
          <tr>
            <td>Row 4</td>
            <td>Row 4</td>
            <td>Row 4</td>
            <td>Row 4</td>
          </tr>
          <tr>
            <td>Row 5</td>
            <td>Row 5</td>
            <td>Row 5</td>
            <td>Row 5</td>
          </tr>
          <tr>
            <td>Row 6</td>
            <td>Row 6</td>
            <td>Row 6</td>
            <td>Row 6</td>
          </tr>
          <tr>
            <td>Row 7</td>
            <td>Row 7</td>
            <td>Row 7</td>
            <td>Row 7</td>
          </tr>
          <tr>
            <td>Row 8</td>
            <td>Row 8</td>
            <td>Row 8</td>
            <td>Row 8</td>
          </tr>
        </tbody>
      </table>
    </div>
    <div>
      <button id="delete" style="float:left">Delete</button>
      <button id="build" style="float:left">Build</button>
    </div>

JavaScript

$(document).ready(function() {
  $("#build").on("click", function() {
    $("#dataTable").DataTable({
      "columnDefs": [
        {"visible": false, "targets": 1}
      ]
    });
  });
  
  $("#delete").on("click", function() {
  	$("#dataTable").DataTable().destroy();
  });
});