JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//cdn.datatables.net/1.10.0/css/jquery.dataTables.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
<script src="http://cdn.datatables.net/1.10.0/js/jquery.dataTables.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<button id="button1">Load table two</button>
<table id="table1">
    <thead>
        <tr>
            <th>col 1</th>
            <th>col 2</th>
            <th>col 3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>row 1</td>
            <td>row 1</td>
            <td>row 1</td>
        </tr>
        <tr>
            <td>row 2</td>
            <td>row 2</td>
            <td>row 2</td>
        </tr>
        <tr>
            <td>row 3</td>
            <td>row 3</td>
            <td>row 3</td>
        </tr>
    </tbody>
</table>
<div id="dialog"></div>

CSS

#dialog{
    display:none;
 
}

JavaScript

$(document).ready(function() {
          
    // intialise data table 
    $('#table1').DataTable({        
        "sDom": 'R<"H"fr>t<"F"ip>',            
	    "bJQueryUI": true,
		"sPaginationType": "full_numbers",
		"iDisplayLength": 25
    });
    
    // add onlick
    $('#button1').on('click',function(e){
        $('#dialog').html('<table id="table2">'+
    '<thead>' +
        '<tr>'+
            '<th>col a</th>' +
            '<th>col b</th>' +
            '<th>col c</th>' +
        '</tr>' +
    '</thead>' +
    '<tbody>' +
        '<tr>' +
            '<td>row a</td>' +
            '<td>row a</td>' +
            '<td>row a</td>' +
        '</tr>' +
       '<tr>' +
            '<td>row b</td>' +
            '<td>row b</td>' +
            '<td>row b</td>' +
        '</tr>' +
        '<tr>' +
            '<td>row c</td>' +
            '<td>row c</td>' +
            '<td>row c</td>' +
        '</tr>' +
    '</tbody>' +
'</table>');
        $('#dialog').dialog();
        $('#table2').DataTable({        
        "sDom": 'R<"H"fr>t<"F"ip>',            
	    "bJQueryUI": true,
		"sPaginationType": "full_numbers",
		"iDisplayLength": 25
        });

    });
});