jQuery Mobile and Responsive Tables

jQuery Mobile and Responsive Tables

jQuery Mobile is a fanstastic framework for developing mobile websites for smartphones and tablets, especially iOS devices like the iPhone and the iPad. In jQuery Mobile 1.3.0, the jQuery Mobile development team focused on responsive web design as well as a bunch of additional features like Facebook type panels, etc. I am particularly excited about their development efforts around responsive tables, which allows you to still use tables to hold data and have them display extremely well using jQuery Mobile on smartphones and tablets!

Responsive Tables in jQuery Mobile: Column Toggle

If you are a jQuery Mobile Developer struggling with responsive tables, you will appreciate version 1.3.0. It has two different modes for handling tables in your responsive websites: Column Toggle and Reflow.

Column Toggle in jQuery Mobile gives the visitor the ability to choose which columns are displayed as the device viewing area decreases. As the jQuery Mobile Developer you have the ability to determine which columns should disappear in priority order, but the visitor has the ability to override which columns are visible via a list of checkboxes, once for each column.

ColumnToggle in jQuery Mobile for Responsive Tables

I recommend you visit the jQuery Mobile Documentation for the specifics, but this is easily done by the following setting on the table: data-mode="columntoggle" and specifying your recommended priority on table column header in which columns should remain visible, data-priority="1", or that indeed some columns should always persist, data-priority="persist".

Column Toggle in jQuery Mobile is a pretty fantastic offering in version 1.3.0.

Reflow in jQuery Mobile: Responsive Tables

There is another option in jQuery Mobile for responsive tables - reflow. With reflow the jQuery Mobile Developer does not choose to have columns hide and reappear, but instead changes the flow of the tables so that all rows appear vertically on the screen for best viewing. A picture is worth a thousand words.

Reflow in jQuery Mobile for Responsive Tables

Similar to Column Toggle, setting Reflow Mode for responsive tables is as simple as setting data-mode="reflow" on the table. Now as the viewing area decreases jQuery Mobile will change the flow of the table so that all columns/rows fit on the screen vertically.

Reflow is a great option for when all the data needs to persist and you just want to display it vertically for better viewing as opposed to show/hide table columns. As you might expect, with a couple of lines of JavaScript you can easily allow the visitor to choose the Column Toggle or Reflow mode to give them the ultimate flixibility over the display of responsive tables on the mobile website.

Conclusion

If you haven't played with the new responsive tables in jQuery Mobile 1.3.0, I highly recommend you do so if you are a mobile developer and/or jQuery Mobile Developer. Column Toggle and Reflow are such elegant solutions to displaying tables on smaller devices, like iPhone, iPads, and other smartphones and tablets.