Barry's jQuery Mobile Demos: Tables

Tables

jQuery Mobile adds some extra features to HTML tables to allow tables to adapt to the variations in mobile device and PC window sizes. These are called 'responsive' tables and come in two types:

  1. reflow table - adjust column width to fit screen width and switch to vertical arrangement when window too narrow.
  2. column toggle table - hide columns when screen width becomes too narrow for display.

A reflow table is created by adding a data-role and class attributes to the normal HTML <table> tag as in the following example.

<table data-role="table" class="ui-responsive">

This creates the default arrangement for how a table is rearranged in different screen widths, specifically the table switches between horizontal and vertical columns at screen size 560 pixels. It is common to want to specify exactly how the columns should be re-adjusted for different screen widths. If you wish to do this you should refer to the jQuery Mobile reference as we will only look at the default arrangement here.

The following is an example of a reflow table. Adjust the width of your browser to see the reflow in action.

Student ID Student Name Course Enrolled Graduated GPA
100001 Chris BIT Jan 2016 No 5.5
100213 Jo BBus Jul 2010 Yes 3.3
103223 Peter BBus Feb 2013 No 6.0

A column toggle table is created by adding attributes to the <table> tag as in the following example.

<table data-role="table" data-mode="columntoggle" class="ui-responsive" id="ctTable">

The data-mode and id attributes are required, though you can chose your own value for the id attribute.

A column toggle table also requires information in the table definition tags. The priority for displaying each column is specified in the table header tags. For example, to specify the highest display priority column we code:

<th data-priority="1">Colum header</th>

If the data-priority is not coded in a column header tag then that column will always be displayed. This also means that for a toggle column table to work, you must define column header in your table. You can adjust the values in this attribute in order of priority, e.g. "2", "3", "4", etc. The column toggle table also displays a button so the user can select which columns to display. On a mobile device, this button could be necessary to allow the user to view all of the data.

The following is an example of a reflow table. The first two columns have no data-priority attribute and remainder have values "1" to "4". Adjust the width of your browser to see the column toggle in action.

5.5
Student ID Student Name Course Enrolled Graduated GPA
100001 Chris Techo Bachelor of Information Technology Jan 2016 No
100213 Jo Studious Bachelor of Business Jul 2010 Yes 3.3
103223 Peter Piper Bachelor of Business Feb 2013 No 6.0

When you adjust the width of your browser window you can see that the columns disappear, with the highest data-priority value disappearing first. However, when the width of the screen reachest a certain value the table reverts to a reflow table.

The above example also demonstrates how a button appears to allow the user to specify which columnns to display. We can change the text on the button in the <table> tag by adding the attribute and value:

data-column-btn-text="text for button"

You also may be familiar with CSS attributes of tables from previous units. These apply as usual to the jQuery tables. There are also additional jQuery features that allow more detailed control of the way they are displayed. However, we will leave it at the defaults in this unit as shown above. When you use tables you should also consider table style attributes that you may be familiar with in your previous use of HTML tables.

Home