JSFiddle - React, Tailwind, and code Playground

by NockHigan

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.7.7/handlebars.min.js"></script>
<table id="notes-table">
  <thead>
    <tr>
      <th id="notes-name-column">Name</th>
      <th>Comment</th>
    </tr>
  </thead>
  <tbody></tbody>
</table>

<script id="note-row-template" type="text/x-handlebars-template">
	<tr>
  	<td data-filter="1">{{name}}</td>
    <td>{{comment}}</td>
  </tr>
</script>

JavaScript

let noteTable = $('#notes-table').DataTable({});

//Filter name column
noteTable.column( "#notes-name-column" ).search("1", true, false).draw();


//Add new row
let values = {
	name: "new name",
  comment: "new comment"
}

let source = document.getElementById("note-row-template").innerHTML;
let template = Handlebars.compile(source);
let html = template(values);

noteTable.row.add($(html)).draw().sort();

console.log(noteTable.row(0).data());