tabletrim › Documentation

tabletrim.js is a jQuery/Javascript plugin which solves the problem of how to make large data tables responsive and usable on small screens. The plugin collapses extraneous columns into a two column layout. The first column is a sticky column which can be configured. The sticky column is always visible. The second column displays one of the other columns initially (also configurable) and provides a dropdown list for the other fields. Selecting a new column in the dropdown will switch the content of the second column to the selected column.

Dependencies

HTML structure

tabletrim.js constructs the necessary elements for the interface itself. However, in order to function properly, the HTML of the table itself, must be properly formatted and nested. Also, tables that have cells with either the colspan or rowspan attributes will not function properly.

Usage

Once you have included the tabletrim.js and tabletrim.css files in your page, you can initialize the plugin by calling the tabletrim() function. The tabletrim() function takes two parameters:

• obj (required):
  jQuery object(s) that you want the plugin to manipulate
• options (optional)
  Options object. For details about available options, see the Options page.

While not a traditional jQuery plugin, tabletrim does rely on jQuery, so make sure you're calling the tabletrim() function within your $(document).ready() block.

1
2
3
4
5
6
7
// Sample JS
$(document).ready(function() {
    // Select object
    var obj = $('#my-table');
    var opts = { label: false }
	tabletrim(obj, opts);
});

Return value

Calling tabletrim() returns an object which can be used to access the public methods (see Public Methods below).

AMD Compliant

tabletrim.js is AMD compliant, which means that it can be used out of the box as an AMD module for scripts like require.js. If you're using require.js you can simply load the module like you would any other module:

1
2
3
require(['tabletrim'], function(tabletrim) {
    var mytabletrim = tabletrim($('#my-table'));
});

If you're not using require.js or some other AMD-backed script loader, don't worry. The plugin still exposes a global function tabletrim() that you can use to initialize tabletrim. In fact, all of the code samples in this documentation use that method. Just make sure you're manually including jQuery and calling tabletrim() within the document.ready block.

CSS and styling

tabletrim dynamically adds CSS classes to various elements as part of the initialization process. These classes are necessary for the core functionality of the plugin. The core styles are defined in the included CSS file, tabletrim.css. Because the styles are defined in CSS, you can modify them however you want in order to create a custom look and feel for the tables. However, proceed with caution when editing the CSS as mistakes could lead to breaking the plugin's functionality.

Public methods

tabletrim exposes public methods which are returned as an object to the tabletrim() function call. To utilize the public methods, simply capture the return in a variable and call the public methods as methods of that variable.

For more details on public methods, visit Public Methods page.