JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdn.datatables.net/1.10.5/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/1.10.5/css/jquery.dataTables.min.css">
<table id="table">
    <thead>
        <tr>
            <th>Name</th>
            <th>Number</th>
        </tr>   
    </thead>
    <tbody>
    </tbody>
</table> 
<script id="row" type="text/html">
    <tr>
        <td>{{name}}</td>
        <td data-order="{{number}}">{{str}} - {{number}}</td>
    </tr>
</script>

JavaScript

$(document).ready(function(){
    var table = $('#table').DataTable({
        paging: false,
        columnDefs: [
            {
                targets: -1,
                data: {
                    _: "1.display",
                    sort: "1.@data-order",
                    type: "1.@data-order"
                }
            }
        ]
    });
    
    // Add row dynamically
    for (var i = 0; i < 30; i++) {
        
        // Get random number between 1 - 10000
        // This is the data-order value
        var number = Math.floor(Math.random() * 10000) + 1
        
        // Some random string
        var str = Math.random().toString(36).substring(7);
        
        var rowHtml = $('#row').html()
            .replace('{{name}}', 'Name ' + i)
            .replace('{{number}}', number)
            .replace('{{number}}', number)
            .replace('{{str}}', str);
        
        table.row.add($(rowHtml)).draw();
    }
    
    
});