Developer

Tablesaw: Flexible tool for responsive tables

Use Tablesaw to get data tables in web sites to respond effectively on mobile devices in a range of screens and resolutions.

tablesaw-1.png

Getting data tables in web sites to respond effectively in mobile devices and the various screens and resolutions is still one of the big challenges for developers. Tablesaw is a set of jQuery plugins by the Filament group that might just be the plugin you are looking for to solve your table display challenges.

Available for download as a GitHub repository, the 565KB zip file contains the "tablesaw-master" folder which includes the sub-folders demo, a dist folder for building a local installation, docs, src, and test along with several other root files related to the plugin. This article will review installing the plugin and will demonstrate using the stack mode option for making your tables responsive with Tablesaw.

Modes

The Tablesaw jQuery plugin set includes several modes that allow you to select the way your tables will respond, they are listed below along with a brief description of what each mode does:

  • Stack - allows table headers to stack into a two-column layout with headers on the left and data on the right when the viewport is less than 40em or 640px wide.
  • Toggle - allows the user to select which columns they want to become visible, in this case the table must have a data-mode attribute declared as in the code snippet:
    <table data-mode="columntoggle"> 
    And table headers must have the data-priority attribute with a numeric value set from 1 to 6 which fix breakpoints at which the column will display, as in the sample code snippet:
    <th data-priority="1">
  • Swipe - allows the user to use a swipe gesture to navigate columns using a "swipe" data-mode and in the sample code snippet:
    <table data-mode="swipe">
  • Sortable - allows users to sort the table data by clicking on the table headers, required code includes the following code snippet samples:
    <table data-sortable>, <th data-sortable-col data-sortable-default-col>, <th data-sortable-col> 

You can also apply all of the options listed above into a single table, which the Filament Group demonstratively calls the Kitchen Table Sink.

Installing the Plugin

You can save the Tablesaw plugin files to a central location under a common web root directory and then make the calls from within the of any web page documents that will require responsive tables. For my file and directory organizing structure I split up the files into related sub-folders, i.e. script files under "tablesaw/js" and stylesheets under "tablesaw/css ", and this file structure is displayed in the link reference and script source code snippets displayed below for the stack only demonstration:

<link rel="stylesheet" href="tablesaw/css/tablesaw.stackonly.css">
<link rel="stylesheet" href="tablesaw/css/demo.css">
<!--[if lt IE 9]><script src="../bower_components/respond/dest/respond.min.js"></script><![endif]-->
<script src="../bower_components/jquery/dist/jquery.js"></script>
<script src="tablesaw/js/tablesaw.stackonly.js"></script>

As you can see the plugin uses the jQuery UI with Bower Components, which is a project package manager that allows you to use libraries without having to manually download each project from their respective sites.

The full view of the demonstration "Stack Only" page is shown below:

tablesaw-2.png

The responsive view where the display is less than 640px wide is displayed below:

tablesaw-3.png

The "Stack Only" HTML code snippet for the table above is displayed below.

Stack Table

The Stack Table stacks the table headers to a two column layout with headers on the left. Resize your viewport to across the 40em (640px) breakpoint to see the change.

<table class="tablesaw" data-mode="stack">
<thead>
		<tr>
			<th>Skill</th>
			<th>Last Entry</th>
			<th>Alphabet</th>
			<th>More Alphabet</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Bartender</td>
			<td>May 2, 1:34p John K.</td>
			<td>A, B, C, D</td>
			<td>E, F, G, H</td>
		</tr>
		<tr>
			<td>Host</td>
			<td>May 11, 12:45a</td>
			<td>A, B, C, D</td>
			<td>E, F, G, H</td>
		</tr>
	</tbody>
	</table>

To test your Tablesaw enabled sites locally on a Linux based system you will need to run the following command line modules:

  • npm install
  • bower install
  • and grunt

These modules are used to build the project files into the dist folder.

If you are looking for an easy way to make your tables responsive, then Tablesaw might be what you're looking for with its set of tools to handle most data table implementations .

Further reading

For more information on Tablesaw and its implementation be sure to check out the Filament Group resource article.

About

Ryan has performed in a broad range of technology support roles for electric-generation utilities, including nuclear power plants, and for the telecommunications industry. He has worked in web development for the restaurant industry and the Federal g...

0 comments

Editor's Picks