JSFiddle - React, Tailwind, and code Playground

by mickeyvip

HTML

<script src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
<h1>Trying non-blocking render</h1>
<table id="my-table">
    <caption>this will be a large table</caption>
    <thead>
        <tr><th>Column 1</th><th>Column 2</th><th>Column 3</th></tr>
    </thead>
    <tbody></tbody>
</table>

CSS

h1 {
    text-transform: uppercase;
    padding: 7px 20px;
    border-bottom: 1px solid #bbb;
    margin: 0 10px;
}

table {
    margin: 10px;
   
}

table td, table th, table caption {
    border: 1px solid #bbb;
    padding: 3px 5px;
}

table caption {
    border-bottom: none;
    text-align: center;
    text-transform: capitalize;
}

JavaScript

var addRow = function(tbody, columnCount, index) {
    var rowDeferred = $.Deferred();
    var row = '<tr>';
    row += '<td>' + index + '</td>';
    for(var j = 0; j < columnCount; j++) {
        row += '<td>Cell ' + (j + 1) + '</td>';
    }
    row += '</tr>';
    tbody.append($(row));
    console.log('row rendered (' + new Date().getTime() + ')');
    
};

var addRows = function(rowCount, tbody, columnCount) {
    var currentRowCount = tbody.children().length;
    
    var renderDeferred = $.Deferred();
    var rowCountObject = {
        count: rowCount
    };
    for(var i = 0; i < rowCount; i++) {
        _.defer(function() {
            addRow(tbody, columnCount, currentRowCount++);
            rowCountObject.count--;
            if(rowCountObject.count === 0) {
                renderDeferred.resolve(new Date().getTime());
            }
            console.log(rowCountObject .count);
        });
        console.log('row added (' + new Date().getTime() + ')');
    }
    return renderDeferred;
};

window.table = $('#my-table');
console.log('table-layout: ' + table.css('table-layout'));
var columnCount = table.find('thead th').length - 1;
var rowCount = 2000;
var row = null;
var tbody = table.find('tbody');
var startTime = new Date().getTime();
//var renderDeferred = $.Deferred();
var renderDeferred = addRows(rowCount, tbody, columnCount);
renderDeferred.done(function(endTime ) {
    console.log('render time: ' + (endTime - startTime) + 'ms');
});
console.log('waiting for render');