JSFiddle - React, Tailwind, and code Playground

by chrislaskey

HTML

<script src="http://fooplugins.com/footable/js/footable.js?v=2-0-1"></script>
<script src="http://fooplugins.com/footable/js/footable.sort.js?v=2-0-1"></script>
<table id="seller-table" class="table" data-filter="#filter" data-page-size="5">
    <thead>
        <tr>
            <th data-toggle="true">ID</th>
            <th>Date</th>
        </tr>
    </thead>
    <tbody>
        
    </tbody>
</table>

JavaScript

$('table').footable();

var data = [{"id": 10, "date": "Mon Aug 04 2014 17:00:00"}, 
             {"id": 11, "date": "Tue Aug 05 2014 17:00:00"},
             {"id": 12, "date": "Wed Aug 06 2014 17:00:00"}];

function create_row (item) {
    var row = $('<tr><td>' + item.id + '</td><td>' + item.date + '</td></tr>');
    return row;
}

$.each(data, function(index, item){
    var row = create_row(item);
    $('table tbody').append(row);
});

$('table').trigger('footable_initialize');