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 table = $('#example').DataTable({
      order: [[0, "desc"]]
  });
	var counter = 1;

	$('#addRow').on( 'click', function () {
		var tr=table.row;
        let node = tr.add( [
			counter +'.1',
			counter +'.2',
			counter +'.3',
			counter +'.4',
			counter +'.5'
        ] ).draw().node();
        
       $(node).animate({
            "height":"50px"
        },1000);
        counter++;
        
	} );

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