Creating Responsive Table in jQuery Mobile

Finally, jQuery Mobile 1.3.0 introduced Responsive Tables. A smart widget that is aware of the available screen size and automatically resizes itself to show what is relevant for a given screen width. Amongst other features, this new widget gives users the ability of turning on or off  columns —toggle column. This is a powerful feature that let your users be in control of the data that they really want to see.

By default, the Responsive Table reflow the data. This means that all rows are represented in a vertical stack with the corresponding labels, allowing better viewing if there is not enough with to display the data. To enable the column toggle, simple add the attribute data-mode=”columntoggle”.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<table data-role="table" id="my-table" data-mode="columntoggle">
  <thead>
    <tr>
      <th>Rank</th>
      <th>Movie Title</th>
      <th>Year</th>
      <th><abbr title="Rotten Tomato Rating">Rating</abbr></th>
      <th>Reviews</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>1</th>
      <td><a href="foo.com" data-rel="external">Citizen Kane</a></td>
      <td>1941</td>
      <td>100%</td>
      <td>74</td>
    </tr>
    </tbody>
</table>

<table data-role="table" id="my-table" data-mode="columntoggle">
  <thead>
    <tr>
      <th>Rank</th>
      <th>Movie Title</th>
      <th>Year</th>
      <th><abbr title="Rotten Tomato Rating">Rating</abbr></th>
      <th>Reviews</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>1</th>
      <td><a href="foo.com" data-rel="external">Citizen Kane</a></td>
      <td>1941</td>
      <td>100%</td>
      <td>74</td>
    </tr>
    </tbody>
</table>

By: Raul Sanchez
Categories: jQuery Mobile, News, Webclips
Posted on: Wednesday, January 30, 2013