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.
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”:
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:
You can pass several options when calling the plugin. Check the table below for an explanation of how the options work.
||string||class prefix for CSS styling|
||bool||does first row of table a heading?|
||bool||show labels (column names) in mobile?||
||bool||add a class for alternating rows|
The options are quite explanatory. The demo page also shows some of the options described above.