HTML Table with Fixed Header and Scrollable body

The “tableScroller” is a lightweight plugin for jQuery to create HTML table with fixed header and scrollable body. Besides this, you can also make your HTML table sortable with the help of this plugin. You just need to create a stranded HTML table (with thead & tbody elements) and this plugin will render it with fixed header and scroll-able table body.

Moreover, this plugin uses Bootstrap framework, however table style can be customize with additional CSS according to your needs.

Plugin Overview and Preview

Plugin: tableScroller
Author: Philippe MarcMeyer
Category: Others
Published: November 26, 2019
File Type: zip archive (HTML, CSS & JavaScript )
Package Size: 8 KB
Dependencies: jQuery 3.0 or Latest version, Bootstrap 4.1.3 and Modernizr JS
Last Modified:
MIT
111 views

Code Rating

0
0.0 rating
0 out of 5 stars (based on 0 reviews)
Excellent0%
Very good0%
Average0%
Poor0%
Terrible0%

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>

Changelog

26/11/2019

  • Updated

10/7/2019

  • Initial release

Configuration Options for Fixed Header and body Scrollable Table

The following are some advanced configuration options to create / customize HTML table with fixed header and scrollable body.

Option Default Type Description
year “numeric” String This option define how the year will be render.

Example:

$("#tableScroller").tableScroller({
	year : "numeric",
}); 
month “2-digit” String Define the digit limit for months.

Example:

$("#tableScroller").tableScroller({
	month : "2-digit",
}); 
day “2-digit” String It define the limit for days.

Example:

$("#tableScroller").tableScroller({
	day : "2-digit",
}); 

There are no reviews yet. Be the first one to write one.

Submit Your Review