Search within TutorialsPark

jQuery Mobile : Tables


Learn how to Create Responsive tables and Tables with Column Toggle


jQuery Mobile: Responsive Tables

The small size of handheld devices are the most important criteria while developing all jQuery Mobile Widgets.And the same is true for the Table Widget as Well.

Tables with large no of rows and columns cannot be displayed well by simply changing the format, or other CSS features like padding or margin using CSS media Queries.

To solve this problem, jQuery Mobile Responsive tables provides two options to the users to display tables with large content well even on responsive screens.

Reflow : This setting displays the table in a normal way until the minimum width is reached, if the display width is still not enough to display all the columns, then each row of table is stacked one above another, and data is displayed as formatted blocks of data/value pairs.

Column Toogle : It allows you to hide selectively hide column when the space is not available, the columns are hidden based on a priority assigned to each column, the one with lowest priority is hidden first and so on.


jQuery Mobile Tables : Reflow Settings

Note: If the width of the screen drops below 560px, table is collapsed as in the second frame.

To create a create a reflow table, use the attribute data-role="table" within the element table, reflow setting is applied by default.

The breakpoint is the minimum width below which the representation of the table changes from tabular form to stacked form. You can set a custom width as breakpoint or predefined values as well.

The predefined class .ui-responsive sets the breakpoint width as 560px (35em) below which the table collapsed to a stacked form. To set a Custom width is set using property min-width

Example: jQuery Mobile - Reflow Setting

Give it a TRY! » Note:If the width of display drops below 560px or 35em, the table collapses into a stack of name/value pairs


jQuery Mobile: Table Column Toggle

The jQuery Mobile Table Column Toggle mode allows you to hide columns when the display width is small, and assigns a button which opens a menu, allowing you to choose what columns to be displayed.

The user can assign priority to columns, and the columns with least priority are hidden first as the width of display is reduced.

To create a Table Column Toggle, use the element table with attributes data-role="table" and data-mode="columntoggle", and an ID value to attach the table with column selector.

Syntax: jQuery Mobile Table Column Toggle

Give it a TRY! » Note: If a Column has no priortiy assigned, it cannot be removed from the display.