JSFiddle - React, Tailwind, and code Playground

by Nibin George

HTML

<script src="//cdn.datatables.net/1.10.4/js/jquery.dataTables.min.js"></script>
<table id="example" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>Column 1</th>
                <th>Column 2</th>
                <th>Column 3</th>
               
            </tr>
        </thead>
 
        <tfoot>
            <tr>
                <th>Column 1</th>
                <th>Column 2</th>
                <th>Column 3</th>
                
            </tr>
        </tfoot>
    </table>
<button id="addRow">Add new row</button>

JavaScript

$(document).ready(function() {
 
    var counter = 1;
 var prntTable = $('#example').dataTable({	
       "aoColumns" : [ 
                {"bSearchable" : false}, 
                {"bSearchable" : true}, 
                {"bSearchable" : true} ],											
               "sPaginationType" : "full_numbers"									 });
     
        $('#addRow').on( 'click', function () {
       var prntTable = $('#example').DataTable();     
       prntTable.row.add( [
            counter +'.1',
            counter +'.2',
            counter +'.3'
        ] ).draw();
 
        counter++;
    } ); 
    
    $('#addRow').click();
} );