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 class="lname">Name</th>
            <th class="salary">Salary</th>
            <th class="other">Other</th>
        </tr>
    </thead>
    <tbody>
    <tr>
      <td data-sort="sally" data-filter="sal gal">sally</td>
      <td data-sort="500">500 USD</td>
      <td>other</td>
    </tr>
    <tr>
      <td data-sort="jane bug" data-filter="june gal">jane</td>
      <td data-sort="2000">2000 USD</td>
      <td>other dud</td>
    </tr>
    </tbody>
</table>

JavaScript

$(document).ready( function () {
    var table = $('#example').DataTable( {
        columnDefs: [
            {
                targets: ['lname'],
                data: {
                    _: '0.display',
                    sort: '0.@data-sort',
                    filter: '0.@data-filter'
                },
                name: 'lname'
            },
            {
            		targets: ['salary'],
                data: {
                    _: '1.display',
                    sort: '1.@data-sort' 
                },
                name: 'salary'
            },
            {
                targets: ['other'],
                data: {
                    _: '2..display',
                    sort: '2.display' 
                },
                name: 'other'
            }
        ]
    } );
  $("#new-row").click(function(){
    table.row.add([
        { display: 'John Doe', '@data-sort': 'Doe John',  '@data-filter': 'John', targets: ['lname']},
        { display: '10,000 USD', '@data-sort': '10000', targets: ['salary']},
        { display: 'other stuff', targets: ['other']}
    ]).draw();
  });
});