JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css
">
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.5.6/css/buttons.dataTables.min.css
">
<table id="example" class="display" style="width:100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tbody>
            </tbody>
    </table>
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
     <script type="text/javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
      <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.6/js/dataTables.buttons.min.js
"></script>
       <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.print.min.js"
"></script>

JavaScript

var dataSrc= [
    {
        "name": "Deepa",
         "position":"Developer",
         "office":"Edinburgh",
         "extn":"5421",
         "date":"2011/04/25",
         "salary":"$320,800"
       },
        {
        "name": "Atul",
         "position":"Team Lead",
         "office":"Edinburgh",
         "extn":"5421",
         "date":"2011/04/25",
         "salary":"$320,800"
       },
       {
        "name": "Ravi",
         "position":"System Architect",
         "office":"Edinburgh",
         "extn":"5421",
         "date":"2011/04/25",
         "salary":"$320,800"
       },
       {
        "name": "Deepa",
         "position":"Developer",
         "office":"Edinburgh",
         "extn":"5421",
         "date":"2011/04/25",
         "salary":"$320,800"
       }
        
];

$(document).ready(function() {
    let table = $('#example').DataTable( {
        dom: 'Bfrtip',
        buttons: [
            'print'
        ]
        
    } );
/*     table.clear();
     */ 
     $.each(dataSrc,function(k,v){
        var row=table.row.add([
            v.name,
            v.position,
            v.office,
            v.extn,
            v.date,
            v.salary,
       
     ])

        row.draw();

    });
} );