JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http:////cdn.datatables.net/1.10.2/js/jquery.dataTables.js"></script>
<link rel="stylesheet" href="http://cdn.datatables.net/1.10.2/css/jquery.dataTables.css">
<button id="new-row">Add row</button>
<table id="example" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th>Name</th>
            <th>Salary</th>
        </tr>
    </thead>
    <tbody>
        <tr>
           <td data-sort="Heisenberg">Heisenberg</td>
           <td data-sort="500000">$500,000</td>
       </tr>
    </tbody>
</table>

JavaScript

$(document).ready( function () {
  var table = $('#example').DataTable();
  $("#new-row").click(function(){
    table.row.add([
        { display: 'John Doe', '@data-sort': 'Doe John' },
        { display: '$10,000', '@data-sort': 10000 }
    ]).draw();
  });
});