JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="http://cdn.datatables.net/1.10.2/css/jquery.dataTables.css">
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example"></table>


<button id='clear_and_replace' > clear_and_replace </button>

JavaScript

$(document).ready(function() {
    
    var dataSet = [
    { "ID": "1", "NAME": "somename1" },
    { "ID": "2", "NAME": "some_name2" },
    { "ID": "3", "NAME": "some_name3" },
] 
        
 
    $('#example').dataTable( {
        "data": dataSet,
        "destroy": true,
        "columns": [
            { "data": "ID", "title": "some_ID_title" },
            { "data": "NAME","title": "some_NAME_title" },
        ]
    } );


    var dt = $('#example').dataTable().api();
            
    $('#clear_and_replace').click(function () {
           var dataSet = [
               { "ID": "11", "NAME": "somename111" },
               { "ID": "22", "NAME": "some_name222" },
               { "ID": "33", "NAME": "some_name333" },
           ]          
           
               dt.clear().rows.add( dataSet );
           dt.draw();
    })    
            
            
            
} );