JSFiddle - React, Tailwind, and code Playground

by _sir

HTML

<button>Act</button>
<table id="one">
    <tr><th>Name</th></tr>
</table>

CSS

table { width: 100%; border: 1px solid #aae; border-collapse: collapse; }
td, th { border: 1px solid #aae; padding: .2em; }

JavaScript

var data = ['Joe','Kelly','Lonnie','Maude','Norm','Olivia','Prentice'];
var timeout = 120;

var appendMe = function($table, max, index) {
    // Add the row.
    $('<tr><td>' + data[index] + '</td></tr>').appendTo($table).hide().fadeIn();
    
    // Increment the index;
    index++;
    
    // Loop
    if (index < max) {
        setTimeout(function(){
            appendMe($table, max, index);
        }, timeout);
    }
};


$('button').on('click', function() {
    
    appendMe($('#one'), data.length, 0);
    
});