JSFiddle - React, Tailwind, and code Playground

by Dipak1991

HTML

<link rel="stylesheet" href="//cdn.datatables.net/1.10.4/css/jquery.dataTables.min.css">
<script src="//cdn.datatables.net/1.10.4/js/jquery.dataTables.min.js"></script>
<table>
    <thead>
        <tr></tr>
    </thead>
    <tbody></tbody>
</table>

JavaScript

var jsonArray = {
    "Columns": [{
        "name": "North",
            "field": "id"
    }, {
        "name": "East",
            "field": "america"
    }, {
        "name": "West",
            "field": "india"
    }, {
        "name": "South",
            "field": "china"
    }]
};
var columnArray = jsonArray['Columns'];
var titleArray = [];

for (var j = 0; j < columnArray.length; j++) {
    var temp = {};
    temp['title'] = columnArray[j]["name"];
    titleArray.push(temp);
};

console.log(titleArray);

var data = {
    "Data": [{
        "east": "<input type=\"checkbox\"/>",
            "west": 34,
            "north": 45,
            "south": 70
    }, {
        "east": 34,
            "west": 56,
            "north ": 12,
            "south": 78
    }, {
        "east": 7,
            "west": 23,
            "north": 87,
            "south": 90
    }, {
        "east": 23,
            "west": 33,
            "north": 54,
            "south": 12
    }, {
        "east": 23,
            "west": 45,
            "north": 12,
            "south": 67
    }, {
        "east": 76,
            "west": 23,
            "north": 12,
            "south": 56
    }, {
        "east": 12,
            "west": 34,
            "north": 45,
            "south": 70
    }, {
        "east": 12,
            "west": 34,
            "north": 45,
            "south": 70
    }, {
        "east": 12,
            "west": 34,
            "north": 45,
            "south": 70
    }, {
        "east": 12,
            "west": 34,
            "north": 45,
            "south": 70
    }, {
        "east": 12,
            "west": 34,
            "north": 45,
            "south": 70
    }]
};

var array = $.map(data['Data'], function (value, index) {
    return [$.map(value, function (val, pos) {
        return [val]
    })];
});

console.log(array);

$('table').DataTable({
    "columns": titleArray,
        "data": array,
        "columnDefs": [{
        "targets": [2],
           ...