JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://nightly.datatables.net/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://nightly.datatables.net/css/dataTables.bootstrap.min.css">
<table id="example">
    <thead>
    </thead>
    <tbody>
    </tbody>
</table>

JavaScript

var pupils = [
    {name : 'bob'},
    {name : 'unknown'}
];
 
// Create table with data set
var table = $('#example').DataTable( {
    data: pupils,
    columns : [ {
			data : "name",
			title : "Name"
		}
    ]
} );
//pupils.length = 0;
$.merge(pupils, [
    {name : 'Fred Green'},
    {name : 'Fiona Wilder'}
]);
console.info(pupils);
// Invalidate and redraw all rows
table.rows().invalidate().draw();