JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script><link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs4-4.1.1/dt-1.10.20/datatables.min.css"/>
 
<script type="text/javascript" src="https://cdn.datatables.net/v/bs4-4.1.1/dt-1.10.20/datatables.min.js"></script>

</head>

<body>
<table id="example" class="display" width="100%"></table>
</body>
</html>

JavaScript

var dataSet = [
    [ "Tiger Nixon", "System Architect", "Edinburgh", 5421, "2011/04/25", "$320,800" ],
    [ "Garrett Winters", "Accountant", "Tokyo", 8422, "2011/07/25", "$170,750" ],
    [ "Ashton Cox", "Junior Technical Author", "San Francisco", 1562, "2009/01/12", "$86,000" ],
    [ "Cedric Kelly", "Senior Javascript Developer", "Edinburgh", 6224, "2012/03/29", "$433,060" ],
    [ "Airi Satou", "Accountant", "Tokyo", 5407, "2008/11/28", "$162,700" ],
    [ "Brielle Williamson", "Integration Specialist", "New York", 4804, "2012/12/02", "$372,000" ],
    [ "Unity Butler", "Marketing Designer", "San Francisco", 5384, "2009/12/09", "$85,675" ]
];
 
$(document).ready(function() {
   oTable = $('#example').DataTable( {
        data: dataSet,
        columns: [
            { title: "Name" },
            { title: "Position" },
            { title: "Office" },
            { title: "Extn." },
            { title: "Start date" },
            { title: "Salary" }
        ],
        columnDefs: [
      { className: 'text-right', targets: [1,2] }
    ]
    });

    //oTable.columns([1, 2]).header().to$().css("text-align", "left");
    //oTable.columns([1, 2]).header().to$().removeClass("text-right").removeClass("text-center").addClass("text-left");

 });