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.

[intro_ad]

Plugin Overview and Preview

Plugin: tableScroller
Author: Philippe MarcMeyer
Category: Others
Published: January 20, 2024
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
7,265
[ad_after_overview]

Code Rating

[site_reviews_summary assigned_to=”post_id”]

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",
}); 
[site_reviews assigned_to=”post_id”]

Submit Your Review

[site_reviews_form assign_to=”post_id”]

[ad_after_artical]
About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...

Please Rel0ad/PressF5 this page if you can't click the download/preview link

X