JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://cdn.datatables.net/1.10.2/css/jquery.dataTables.min.css">
<script src="http://cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js"></script>
<button id="AddRow">Add Row</button>
<table id="example" class="display" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Extn.</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Extn.</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </tfoot>
</table>

JavaScript

var url = "http://www.json-generator.com/api/json/get/bWIUWNtazS?indent=2";
var counter = 0;
$(document).ready(function () {

 var row = ['testing' + counter++,'testing','testing','testing','testing','testing']
 
var counter = 1;
    var table = $('#example').DataTable({
         "order": [
        [0, 'asc']
    ]
    });
    
    $('#AddRow').on('click', function () {
      table.row.add(row).draw(false);
      table.order([1, 'asc']).draw();
      table.page('last').draw(false);
    });
    
});