JSFiddle - React, Tailwind, and code Playground

by Tom DeBerardine

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/sortable/0.6.0/js/sortable.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/sortable/0.6.0/css/sortable-theme-minimal.css">
<div id="table_name"></div>

JavaScript

var json = {
    vmlist: [
        ['text1', 'poweredOff', 'text3'],
        ['text1', 'poweredOn', 'text3'],
        ['text1', 'poweredOff', 'text3']
    ]
};

function isPowered(string) {
    var onImg = '<img src="http://placekitten.com/g/200/300"/>';
    var offImg = '<img src="http://placehold.it/100x100"/>';
    return (string == 'poweredOn') ? onImg : offImg;
}
$(document).ready(function () {
    $('#table_name').append("<table class='sortable table' id='table-data' data-sortable><thead><tr><th align='center' data-toggle='tooltip' data-placement='left' title=''> <b>VM Name</b></th><th align='center' data-toggle='tooltip' data-placement='left' title=''><b>PowerState </b> </th><th align='center' data-toggle='tooltip' data-placement='left' title='N'><b>Commands </b></th></tr></thead><tbody>");
    
    for (var index = 0; index < json.vmlist.length; index++) {
            $('#table-data').append ('<tr><td>' + json.vmlist[index][0] + '</td><td>' + isPowered(json.vmlist[index][1]) + '</td><td>' + json.vmlist[index][2] + '</td></tr>');
    }
    
    Sortable.init();
});