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>Third Col</th>
            <th class="sort MYKEY">Number</th>
        </tr>   
    </thead>
    <tbody>
    </tbody>
</table> 
<script id="row" type="text/html">
    <tr>
        <td>{{name}}</td>
        <td>{{blablabla}}</td>
        <td data-order="{{number1}}">{{str}} - {{number2}}</td>
    </tr>
</script>

JavaScript

$(document).ready(function(){
    var table = $('#table').DataTable({
        ordering    : true,
        paging      : true,
        searching   : true,
        columnDefs  : [
            {
                targets   : 'nosearch',
                searchable: false
            },
            {
                targets : 'nosort',
                sortable: false
            },
            {
                targets      : 'radio',
                orderDataType: 'dom-radio'
            },
            {
                targets: 'MYKEY',
                data: {
                    _: "MYKEY.display",
                    sort: "MYKEY.@data-order",
                    type: "MYKEY.@data-order"
                }
            }
        ],
        order       : [[$('th.sort').index(), 'asc']],
        pageLength  : 10
    });
    
    // Add rows dynamically
    for (var i = 0; i < 30; i++) {
        var str = Math.random().toString(36).substring(7);
        var number = Math.floor(Math.random() * 10000) + 1; // data-order value
        var rowHtml = $('#row').html()
            .replace('{{name}}', 'Name ' + i)
            .replace('{{number1}}', number)
            .replace('{{number2}}', number)
            .replace('{{blablabla}}', 'BlaBlaBla')
            .replace('{{str}}', str);
        
        table.row.add($(rowHtml)).draw();
    }
});