Announcing jQuery Mobile tableview - plugin for responsive HTML table layouts

Announcing jQuery Mobile tableview - plugin for responsive HTML table layouts

One thing I have found missing in JQM is a way to handle tabular data. There are some nice plugins available, but none for JQM specifically.

I have written a plugin (widget and extension actually) to handle HTML tables in jQuery Mobile.

Demo is here:   http://www.franckreich.de/jqm/tableview/demo.html

Code on Github: https://github.com/frequent/tableview

There are two version of tableview (demo/github is the first one).

The "no-func" version only handles the appearance of the table. Tables are responsive = depending on available screen size, the columns you label with class (persist, essential, optional) will be shown or hidden. There is also a menu to manually toggle what you want to see.

The no-func version as some features you can add (filter extension, add a checkbox-column, embed buttons in table wrappers) but other than that it does not contain any logic, so anything you want to do with the table records, you need to add the logic for yourself.

To use this verison, just drop the js/css code into JQM or use a separate file. To initiliaze, simply add data-role="tableview" to a table. For more info, please check out the repo on Github.

The "func" version (not online yet, writing it up) is integrated into Jquery datatables. Here I have added a third layout (running along datatables standard and JqueryUI), so you will need to use a modifed datatables version. The JQM table enhancement can then be triggered from within the datatables table initiation, giving you the JQM look plus all the functionality from datatables.

Once I have the demo and instructions done I will bump this.