JSFiddle - React, Tailwind, and code Playground

by Richard

HTML

<script src="http://cdn.datatables.net/1.10.0/js/jquery.dataTables.js"></script>
<link rel="stylesheet" href="http://cdn.datatables.net/1.10.0/css/jquery.dataTables.css">
<button id="addRow">Add new row</button>

				<table id="example" class="display" cellspacing="0" width="100%">
					<thead>
						<tr>
							<th>Column 1</th>
							<th>Column 2</th>
							<th>Column 3</th>
							<th>Column 4</th>
							<th>Column 5</th>
						</tr>
					</thead>

					<tfoot>
						<tr>
							<th>Column 1</th>
							<th>Column 2</th>
							<th>Column 3</th>
							<th>Column 4</th>
							<th>Column 5</th>
						</tr>
					</tfoot>
				</table>

CSS

.odd td{
    height:0px;
    transition:all ease 1s;
    padding:5px;
}
.even td{
    height:0px;
    transition:all ease 1s;
    padding:5px;
}

JavaScript

$(document).ready(function() {
	var t = $('#example').DataTable ({
        "order": [[ 0, "asc" ]]
    } );
	var counter = 1;

	$('#addRow').on( 'click', function () {
		var tr=t.row;
        tr.add( [
			counter +'.1',
			counter +'.2',
			counter +'.3',
			counter +'.4',
			counter +'.5'
        ] ).draw();
        var cls= counter%2!=0 ? ".odd" : ".even";
       $(cls).last().animate({
            "height":"50px"
        },1000);
        counter++;
        
	} );

	// Automatically add a first row of data
	$('#addRow').click();
} );
/* By Vedant Terkar */