JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdn.datatables.net/1.10.3/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/1.10.3/css/jquery.dataTables.css">
<body>
    <div class="brk"><h1>Example 1 - dataSet1</h1></div>
    <table id="example1" class="display" cellspacing="0" width="100%">
          <thead>
              <tr>
                <th>Name</th>
                <th>Age</th>
                <th>Next</th>
            </tr>
        </thead>
    </table>
    <div class="brk"><h1>Example 1 - dataSet2</h1></div>
    <!-- EXAMPLE 2 -->
    <table id="example2" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Age</th>
                <th>Next</th>
            </tr>
        </thead>
    </table>
</body>

CSS

.brk {
    background-color:#c00;
    color:#fff;
    padding:9px;
    margin: 20px 0;
}

JavaScript

$(document).ready(function () {

    var dataSet1 = [
        {"name":"jim", "age":3, "next":4}, 
        {"name": "bill", "age": 5, "next": 6}
    ];
    
    $('#example1').dataTable({
        "data": dataSet1,
        "columns": [{
            "data": "name"
        }, {
            "data": "age"
        }, {
            "data": "next"
        }]
    });
    
    var dataSet2 = {
        "jim": {"age": 3, "next": 4},
        "bill": {"age": 5, "next": 6}
    };
    
    //Thanks to Robert Schutt of Experts Exchange
        function convertData(d) {
            var o = [];
            $.each(d, function(idx, obj) {
                o.push($.extend(obj, {name: idx}));
            });
            return o;
        }

    $('#example2').dataTable({
        "data": convertData(dataSet2),
            "columns": [{
            "data": "name"
        }, {
            "data": "age"
        }, {
            "data": "next"
        }]
    });
});