JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css">
<script src="//cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<!-- generated by server-side -->
<table id="tbl">
  <thead><tr><th>#</th><th>Word</th></tr></thead>
  <tr><td>1</td><td data-order="1" data-filter="one o-n-e">o-n-e</td></tr>
  <tr><td>2</td><td data-order="2" data-filter="two t-w-o">t-w-o</td></tr>
  <tr><td>3</td><td data-order="3" data-filter="three t-h-r-e-e">t-h-r-e-e</td></tr>
</table>

<div style="border:2px solid silver;padding:5px;display:inline-block;cursor:pointer;" onclick="addFour()">Click to Add Four</div>

JavaScript

var t = $('#tbl').DataTable({"createdRow": function(row, data, dataIndex) {
//	var $tr = $(row);
//  var $td = $tr.find('td:eq(1)');
//  $td.attr('data-filter', 'four f-o-u-r');

//	var _t = this.DataTable();
//  _t.row($tr).invalidate();
}});

/////////////////////////////
// New Data Avail
// fields: # & data-order, Word, data-filter
/////////////////////////////
var newAvail = [4, 'f-o-u-r', 'four f-o-u-r'];

addFour = function() {
	t.rows.add([{"0":newAvail[0], "1":newAvail[1]}])
  .draw()
  .sort();
}