Better handling for your HTML tables in Responsive view with this jQuery Plugin

Michael Soriano — Sat, 12 Dec 2015 17:24:14 +0000

So I had another challenge at my work. You see, we use plenty of SharePoint based sites, and a lot of the markup that it outputs is table based – especially the contents of a list. Now this is fine for tabular data and such – but in mobile view, it renders horribly. The rows become too tall because of the contents getting smushed. Scollbars from left to right at the bottom of the screen.
So I decided to write a jQuery plugin to alleviate this problem. It’s called it StackedRows.js.
View in Github
View Demo
StackedRows basically goes through each of the rows in your table and creates a single row right below it – that’s only visible in mobile view. When the media query hits (you can set this up in the CSS), the ugly rows get hidden, and the mobile row displays – in a stacked vertical fashion. Hence “stacked rows”:

The responsive view of your table is much easier to digest in a mobile device. You can completely customize the look of each row with the stylesheet that it comes with. The best part is it still produces compliant HTML (even though it’s rendered on through Javascript).

How to use:

Just like a regular jQuery plugin, you need to have jQuery included in page to use. Then simply call inside a .ready() with your selectors and options included. An example is shown below:

$(document).ready(function(){
   $('.table1').stackedRows();
})

Options

You can pass several options when calling the plugin. Check the table below for an explanation of how the options work.

Option	Type	Description	Default Value
`classPrefix`	string	class prefix for CSS styling	sr
`firstRowHeader`	bool	does first row of table a heading?	true
`showLabels`	bool	show labels (column names) in mobile?	true
`altRowStyle`	bool	add a class for alternating rows	true

The options are quite explanatory. The demo page also shows some of the options described above.

The post Better handling for your HTML tables in Responsive view with this jQuery Plugin appeared first on Michael Soriano.

jQuery plugin Archives - Michael Soriano

Better handling for your HTML tables in Responsive view with this jQuery Plugin

How to use:

Options