JSFiddle - React, Tailwind, and code Playground

HTML

<head>
<link rel= "stylesheet" type= "text/css" href= "https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<link rel= "stylesheet" type= "text/css" href= "https://cdn.datatables.net/colreorder/1.5.4/css/colReorder.dataTables.min.css">
<link rel= "stylesheet" type= "text/css" href= "https://cdn.datatables.net/buttons/1.6.3/css/buttons.dataTables.min.css">

<script src="https://code.jquery.com/jquery-1.10.0.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables.net/2.1.1/jquery.dataTables.min.js" integrity="sha512-CKwcR6t3iAghHw93W7LcmVlSRCoGXiYyjITGKrFyDFqWHt6LIJ3j5f1dSjvL+OJbvG0KvPgP/zBEOikHUIu+3Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables.net-colreorder/1.6.2/dataTables.colReorder.min.js" integrity="sha512-8scwy8q0eEJLwTDJLjMqEZzbDUgu0vY8v06MpVTpkzIgRTblAxUkMfSHPZCEYuSlwEpRpTFAg/O92tsZq2Rq6w==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.datatables.net/buttons/2.4.1/js/dataTables.buttons.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables.net-buttons/2.4.1/js/buttons.colVis.min.js" integrity="sha512-uNnGMlzP0D6PEy6m0iF6UHsZ+xlOkO2wc+kMN7LMLWVym6fCQzD8tntcoS0VnaMcpRQhPhrnrMY9jMkxAkCzkQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

</head>

<table id="example" class="display" style="width:100%"></table>

JavaScript

$(document).ready(function() {
  var sampleData = [
  	{
      "id": "1",
      "name": "Tiger Nixon",
      "position": "System Architect",
      "salary": "$320,800",
      "start_date": "2011/04/25",
      "office": "Edinburgh",
      "extn": "5421"
    },
    {
      "id": "2",
      "name": "Garrett Winters",
      "position": "Accountant",
      "salary": "$170,750",
      "start_date": "2011/07/25",
      "office": "Tokyo",
      "extn": "8422"
    },
    {
      "id": "3",
      "name": "Ashton Cox",
      "position": "Junior Technical Author",
      "salary": "$86,000",
      "start_date": "2009/01/12",
      "office": "San Francisco",
      "extn": "1562"
    },
    {
      "id": "4",
      "name": "Cedric Kelly",
      "position": "Senior Javascript Developer",
      "salary": "$433,060",
      "start_date": "2012/03/29",
      "office": "Edinburgh",
      "extn": "6224"
    },
    {
      "id": "5",
      "name": "Airi Satou",
      "position": "Accountant",
      "salary": "$162,700",
      "start_date": "2008/11/28",
      "office": "Tokyo",
      "extn": "5407"
    },
    {
      "id": "6",
      "name": "Brielle Williamson",
      "position": "Integration Specialist",
      "salary": "$372,000",
      "start_date": "2012/12/02",
      "office": "New York",
      "extn": "4804"
    },
    {
      "id": "7",
      "name": "Herrod Chandler",
      "position": "Sales Assistant",
      "salary": "$137,500",
      "start_date": "2012/08/06",
      "office": "San Francisco",
      "extn": "9608"
    },
    {
      "id": "8",
      "name": "Rhona Davidson",
      "position": "Integration Specialist",
      "salary": "$327,900",
      "start_date": "2010/10/14",
      "office": "Tokyo",
      "extn": "6200"
    },
    {
      "id": "9",
      "name": "Colleen Hurst",
      "position": "Javascript Developer",
      "salary": "$205,500",
      "start_date": "2009/09/15",
      "office": "San Francisco",
      "extn": "2360"
    },
    {
      "id": "10",
   ...