JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://cdn.datatables.net/1.10.2/css/jquery.dataTables.css">
<script src="http://cdn.datatables.net/1.10.3/js/jquery.dataTables.js"></script>
<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>
    </tbody>
</table>

JavaScript

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