HTML Table with Fixed Header and Scrollable body

How to Create Html Table With Fixed Header And Scrollable Body

1. To getting started with “tableScroller”, load the jQuery , Bootstrap and Modernizr JS into your HTML document.

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<!-- Bootstrap CSS -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- Bootstrap JS -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<!-- Modernizer JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.js"></script>

2. Ok! now, include plugin assets (from downloaded directory) in your webpage.

<!-- tableScroller CSS -->
<link rel="stylesheet" href="css/tableScroller.css">
<!-- tableScroller JS -->
<script src="js/tableScroller.js"></script>

3. Create HTML table element, define its header (thead element) and table body (tbody) just like below:

	<table id="tableScroller" class="table table-striped table-bordered table-responsive-md">
	<thead>
	<tr>
		<th data-prop="id" data-way="up">Id</th>
		<th data-prop="firstname" data-way="up">First name</th>
		<th data-prop="lastname"  data-way="up">Last name</th>
		<th data-prop="birthdate" data-way="up">Birthdate</th>
		<th data-prop="langage"  data-way="up">Language</th>
		<th data-prop="useit"  data-way="up">I use it</th>
	</tr>
	</thead>
	<tbody></tbody>
	</table>

4. In last, define table data and initialize tableScroller plugin.

<script>
  let data =  [
		{"id": 1,"firstname": "Bjarne ","lastname": "Stroustrup","birthdate":new Date(1950,11,30),"langage": "C++","useit":false},
		{"id": 2,"firstname": "Denis","lastname": "Ritchie","birthdate": new Date(1941,8,9),"langage": "C","useit":false},
		{"id": 3,"firstname": "Kenneth","lastname": "Thompson","birthdate": new Date(1943,3,2),"langage": "Go","useit":false},
		{"id": 4,"firstname": "James","lastname": "Gosling","birthdate": new Date(1955,4,19),"langage": "Java","useit":false},
		{"id": 5,"firstname": "Brendan ","lastname": "Eich","birthdate": new Date(1961,3,7),"langage": "Javascript", "note":"my fav","useit":true},
		{"id": 6,"firstname": "Guido","lastname": "Van Rossum","birthdate":new Date(1956,0,31),"langage": "Python","useit":true},
		{"id": 7,"firstname": "Yukihiro","lastname": "Matsumoto","birthdate": new Date(1965,3,14),"langage": "Ruby","useit":false},
		{"id": 8,"firstname": "Roberto","lastname": "Lerusalimschy","birthdate": new Date(1960,4,21),"langage": "Lua","useit":false},
		{"id": 9,"firstname": "Rasmus","lastname": "Lerdorf","birthdate": new Date(1968,10,22),"langage": "Php","useit":true},
		{"id": 10,"firstname": "Jean","lastname": "Ichbiah","birthdate":new Date(1940,2,25),"langage": "Ada","useit":false},
		{"id": 11,"firstname": "Anders","lastname": "Hejlsberg","birthdate": new Date(1960,0,1),"langage": "C#","useit":true}
];

let myTable = $("#tableScroller").tableScroller("init",{"data":data,"options":{"tbodyHeight":"200px"}});

$("#containerWidth").on("change",function(){
	let percentage = $(this).val()+"%";
	$("#container").css("width",percentage);
	$("#enlarger span").text(percentage);
	myTable.tableScroller("update",percentage);
});
<\script>