Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 

jQuery Table Body Scroll

This jQuery plugin heavily modifies table bodies into slick vertical scrolling solutions. Ugly scrollbars are hidden out of sight, relying on visual indicators. Native keyboard, scroll wheel, and touch support.

Combined with TableCards, traditional tables can be displayed on all devices in a neat, compact format.

Donate Discord

Usage

<link rel="stylesheet" href="jquery.tablebodyscroll.css" type="text/css" media="all" />
<script type="text/javascript" src="jquery.tablebodyscroll.js"></script>
<script type="text/javascript">
$(function() {
	$('#mytable').TableBodyScroll();

	// Some optional custom event handlers.
	$('#mytable').TableBodyScroll(options).on('table:columnschanged', function() {
		$(this).trigger('tablebodyscroll:columnschanged');
	}).on('table:datachanged', function() {
		$(this).trigger('tablebodyscroll:resize');
	}).on('tablebodyscroll:sizechanged', function() {
		$(this).trigger('table:resized');
	});

	// A custom resize/visibility event handler ('child:visibility' is a custom FlexForms Extras handler emitted by an Accordion callback).
	var resizefunc = function() {
		var obj = $('#mytable');

		if (!obj.length)  $(window).off('resize', resizefunc).off('child:visibility', resizefunc);
		else  obj.trigger('tablebodyscroll:resize');
	};

	$(window).resize(resizefunc).on('child:visibility', resizefunc);
});
</script>

There are several live examples under "Add Entry" in the Admin Pack Demo.

Options

The following options may be passed to TableBodyScroll:

  • height - An integer containing the height (Default is 60).
  • heightunit - A string containing one of the standard CSS units of measurement (Default is '%').
  • percentelem - An object to reference for the height measurement when heightunit is '%' (Default is window).
  • postinit - A callback function to run after each TableCards initialization is run (Default is null).

To destroy the instance and restore the table to its initial state, simply call: $('#mytable').TableBodyScroll('destroy');

Events

The following custom events may be listened for:

  • tablebodyscroll:sizechanged - Notifies after resizing the table's most immediate parent.

The following custom events may be manually triggered:

  • tablebodyscroll:resize - Notifies TableBodyScroll that the table has been resized.
  • tablebodyscroll:columnschanged - Notifies TableBodyScroll that the table columns have changed and to rebuild any headers and footers.

About

A really nice jQuery plugin to scroll the body of long tables so the table fits on a single screen vertically. MIT or LGPL. Mobile-friendly data tables.

Resources

Releases

No releases published

Packages

No packages published