JSFiddle - React, Tailwind, and code Playground

by Omar X

HTML

<div id="btns" data-role="controlgroup" data-type="horizontal"></div>
<table data-role="table" data-mode="columntoggle" class="ui-responsive ui-shadow" id="mytable1">
    <thead>
        <tr class="ui-bar-a">
            <th>Dispute Number</th>
            <th data-priority="1">Status</th>
            <th data-priority="1">Start Date</th>
            <th data-priority="1">Name</th>
        </tr>
    </thead>
    <tbody></tbody>
</table>
<table data-role="table" data-mode="columntoggle" class="ui-responsive ui-shadow" id="mytable2">
    <thead>
        <tr class="ui-bar-a">
            <th>Dispute Number</th>
            <th data-priority="1">Status</th>
            <th data-priority="1">Start Date</th>
            <th data-priority="1">Name</th>
        </tr>
    </thead>
    <tbody></tbody>
</table>

CSS

.ui-controlgroup {
    text-align: center;
}

JavaScript

$(document).on("pagecreate", function () {
    var data = [{
        "DISP_NUMBER": "1",
            "DISP_STATUS": "online",
            "DISP_CREATE_DATE": "01/02/2014",
            "name": "John"
    }, {
        "DISP_NUMBER": "2",
            "DISP_STATUS": "offline",
            "DISP_CREATE_DATE": "10/05/2014",
            "name": "Dao"

    }, {
        "DISP_NUMBER": "3",
            "DISP_STATUS": "offline",
            "DISP_CREATE_DATE": "10/05/2014",
            "name": "Anonymous"
    }];

    $.each(data, function (i, value) {
        var row = $("<tr />");
        row.append($("<th>" + value.DISP_NUMBER + "</th>"));
        row.append($("<td>" + value.DISP_STATUS + "</td>"));
        row.append($("<td>" + value.DISP_CREATE_DATE + "</td>"));
        row.append($("<td>" + value.name + "</td>"));
        $("#mytable1 tbody, #mytable2 tbody").append(row);
    });

    $("#mytable1, #mytable2").table("rebuild");
    $("#mytable1, #mytable2")
        .prev(".ui-table-columntoggle-btn")
        .each(function () {
        var text = $.mobile.path.parseUrl($(this)
            .prop("href"))
            .hash.substring(1);
        $(this)
            .text(text.split("-")[0])
            .appendTo($("#btns")
            .controlgroup("container"));
    });
    $("#btns").controlgroup("refresh");
});