Table: Reflow - jQuery Mobile Demos

##

Demos

Menu Search

# Table: Reflow

The reflow table mode works by collapsing the table columns into a stacked presentation that looks like blocks of label/data pairs for each row.

## Reflow basics

The reflow responsive table only requires a table with a `data-role="table"` on the table element. There is no need to set the `data-mode` attribute since `reflow` is the default. Be sure to include `thead` and `tbody` elements in your table. This example also uses the preset responsive breakpoint, applied via the `ui-responsive` class.

Rank | Movie Title | Year | Rating | Reviews
--- | --- | --- | --- | ---
1 | Citizen Kane | 1941 | 100% | 74
2 | Casablanca | 1942 | 97% | 64
3 | The Godfather | 1972 | 97% | 87
4 | Gone with the Wind | 1939 | 96% | 87
5 | Lawrence of Arabia | 1962 | 94% | 87
6 | Dr. Strangelove Or How I Learned to Stop Worrying and Love the Bomb | 1964 | 92% | 74
7 | The Graduate | 1967 | 91% | 122
8 | The Wizard of Oz | 1939 | 90% | 72
9 | Singin' in the Rain | 1952 | 89% | 85
10 | Inception | 2010 | 84% | 78

## Making the table responsive

By default, a table with reflow mode will display the stacked presentation style on all screen widths. The styles to make the table responsive are added by applying a media query with rules to switch to the tabular style presentation above a specific screen width.

This is done by wrapping a few simple CSS rules in and a media query that only applies the rules above a certain width breakpoint. The styles make the table header rows visible, display the cells in a tabular format, and hide the generated label elements within each. Here is an example media query that swaps the presentation at 40em (640 pixels):

    @media ( min-width: 40em ) {
    	/* Show the table header rows and set all cells to display: table-cell */
    	.my-custom-breakpoint td,
    	.my-custom-breakpoint th,
    	.my-custom-breakpoint tbody th,
    	.my-custom-breakpoint tbody td,
    	.my-custom-breakpoint thead td,
    	.my-custom-breakpoint thead th {
    		display: table-cell;
    		margin: 0;
    	}
    	/* Hide the labels in each cell */
    	.my-custom-breakpoint td .ui-table-cell-label,
    	.my-custom-breakpoint th .ui-table-cell-label {
    		display: none;
    	}
    }

It's best to use a `class` on the table to apply the breakpoint. Add these rules to your custom stylesheet that is included in the `head` of the page. We recommend creating a set of custom breakpoint classes that can be used to apply standard table breakpoints in your project.

## Choosing a breakpoint

The goal is to determine the minimum width at which the entire table will fit comfortably within the screen. Find this width by populating a table with realistic sample data, then adjust the browser window until the table completely fits and has a bit of extra space to account for rendering differences across devices. This is the natural place to set the breakpoint that switches between the stacked and tabular presentation modes. The breakpoint width is highly dependent on the number of columns in the table and content within each cell.

## Applying a preset breakpoint

Even though we strongly encourage you to write custom breakpoints yourself, the framework includes a single pre-configured breakpoint that targets the stacked style to smaller phones and swaps to a tabular presentation on larger phones, tablet and desktop devices. To use this preset breakpoint, add the `ui-responsive` class to the table to convert from the stacked presentation to a tabular presentation at 560px (35em). If this breakpoint doesn't work for your content, we encourage you to write a custom breakpoint as described above.

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

## Grouped column headers

It's fairly common to need to logically group multiple columns together under a heading group for financial or scientific data. The framework can support the most simple version of this by allowing for two rows of table headers (`th`), with the first row containing simple `colspan` attributes to group the columns below. In this configuration, the framework will add a class to the label of the first cell in each group to allow you to style these differently and provide additional visual hierarchy.

Paris | Average Temperatures (C) | Average Rainfall
--- | --- | ---
Month | Minimum Temp | Maximum Temp | Precipitation (mm) | Rainfall Days
January | 3 | 8 | 17.8 | 10
February | 2 | 9 | 21.7 | 9
March | 4 | 13 | 24.2 | 10
April | 6 | 15 | 24.6 | 11
May | 10 | 20 | 26.2 | 10
June | 13 | 23 | 25.1 | 9
July | 15 | 25 | 21.7 | 7
August | 15 | 25 | 21.4 | 7
September | 11 | 21 | 15.6 | 8
October | 9 | 17 | 25.3 | 11
November | 5 | 11 | 22.4 | 12
December | 3 | 8 | 26.6 | 12

- Home
- Introduction
- Buttons
- Button widget

- ### Checkboxradio widget click to expand contents

  - Checkboxes
  - Radio buttons

- ### Collapsible (set) widget click to expand contents

  - Collapsible
  - Dynamic collapsibles
  - Collapsible set

- ### Controlgroup widget click to expand contents

  - Controlgroup
  - Dynamic controlgroups
- Datepicker

- ### Events click to expand contents

  - Swipe list items
  - Swipe page navigation
- Filterable widget
- Flipswitch widget

- ### Forms click to expand contents

  - Forms
  - Hide labels
  - Field containers
  - Forms disabled
  - Forms gallery

- ### Grids click to expand contents

  - Grids
  - Buttons in grids
  - Custom responsive grids
- Grouping and dividing content

- ### Icons click to expand contents

  - Icons
  - Grunticon loader

- ### Listview widget click to expand contents

  - Listview
  - Listview autocomplete
  - Listview autocomplete remote data
  - Listview autodividers linkbar
  - Listview autodividers selector
  - Nested Listviews
  - Listview collapsible list items (flat)
  - Listview collapsible list items (indented)
  - Listview responsive grid
- Loader widget
- Navbar widget

- ### Navigation click to expand contents

  - Navigation
  - Linking pages
  - Hash processing demo
  - Page Navigation Events

- ### Pages click to expand contents

  - Pages
  - Single page
  - Multi-page template
  - Dialog page

- ### Panel widget click to expand contents

  - Panel
  - External panels
  - Fixed panels
  - Panels responsive
  - Custom panel style
  - Panel open on swipe
  - Panel external and internal

- ### Popup widget click to expand contents

  - Popup
  - Popup alignment
  - Popup arrow size
  - Dynamic popups
  - Popups with iframes
  - Popup image scaling
  - Popup outside multi-page
- Rangeslider widget
- Responsive Web Design

- ### Selectmenu widget click to expand contents

  - Selectmenu
  - Custom select menu
  - Custom select menu with filter

- ### Slider widget click to expand contents

  - Slider
  - Slider flip toggle switch
  - Slider tooltip

- ### Table widget click to expand contents

  - Table Column Toggle
  - Table Column Toggle demo
  - Table Column Toggle heading groups
  - Table Column Toggle options
  - Table Reflow
  - Table Reflow heading groups
  - Table Reflow stripes and strokes
  - Table Reflow custom styles
- Tabs widget
- Textinput widget

- ### Theming click to expand contents

  - Default theme
  - Classic theme

- ### Toolbar widget click to expand contents

  - Toolbar
  - Dynamic toolbars
  - External toolbars
  - Fixed toolbars
  - Fullscreen toolbars
  - Fixed external toolbars
  - Persistent toolbars
  - Ajax optimized toolbars
  - Form in toolbar
- Transitions

- ### 3rd party API demos click to expand contents

  - Backbone RequireJS
  - Google Maps geolocation
  - Google Maps list toggle

- Home
- Introduction
- Buttons
- Button widget

- ### Checkboxradio widget click to expand contents

  - Checkboxes
  - Radio buttons

- ### Collapsible (set) widget click to expand contents

  - Collapsible
  - Dynamic collapsibles
  - Collapsible set

- ### Controlgroup widget click to expand contents

  - Controlgroup
  - Dynamic controlgroups
- Datepicker

- ### Events click to expand contents

  - Swipe list items
  - Swipe page navigation
- Filterable widget
- Flipswitch widget

- ### Forms click to expand contents

  - Forms
  - Hide labels
  - Field containers
  - Forms disabled
  - Forms gallery

- ### Grids click to expand contents

  - Grids
  - Buttons in grids
  - Custom responsive grids
- Grouping and dividing content

- ### Icons click to expand contents

  - Icons
  - Grunticon loader

- ### Listview widget click to expand contents

  - Listview
  - Listview autocomplete
  - Listview autocomplete remote data
  - Listview autodividers linkbar
  - Listview autodividers selector
  - Nested Listviews
  - Listview collapsible list items (flat)
  - Listview collapsible list items (indented)
  - Listview responsive grid
- Loader widget
- Navbar widget

- ### Navigation click to expand contents

  - Navigation
  - Linking pages
  - Hash processing demo
  - Page Navigation Events

- ### Pages click to expand contents

  - Pages
  - Single page
  - Multi-page template
  - Dialog page

- ### Panel widget click to expand contents

  - Panel
  - External panels
  - Fixed panels
  - Panels responsive
  - Custom panel style
  - Panel open on swipe
  - Panel external and internal

- ### Popup widget click to expand contents

  - Popup
  - Popup alignment
  - Popup arrow size
  - Dynamic popups
  - Popups with iframes
  - Popup image scaling
  - Popup outside multi-page
- Rangeslider widget
- Responsive Web Design

- ### Selectmenu widget click to expand contents

  - Selectmenu
  - Custom select menu
  - Custom select menu with filter

- ### Slider widget click to expand contents

  - Slider
  - Slider flip toggle switch
  - Slider tooltip

- ### Table widget click to expand contents

  - Table Column Toggle
  - Table Column Toggle demo
  - Table Column Toggle heading groups
  - Table Column Toggle options
  - Table Reflow
  - Table Reflow heading groups
  - Table Reflow stripes and strokes
  - Table Reflow custom styles
- Tabs widget
- Textinput widget

- ### Theming click to expand contents

  - Default theme
  - Classic theme

- ### Toolbar widget click to expand contents

  - Toolbar
  - Dynamic toolbars
  - External toolbars
  - Fixed toolbars
  - Fullscreen toolbars
  - Fixed external toolbars
  - Persistent toolbars
  - Ajax optimized toolbars
  - Form in toolbar
- Transitions

- ### 3rd party API demos click to expand contents

  - Backbone RequireJS
  - Google Maps geolocation
  - Google Maps list toggle