Reflow Table Widgetversion added: 1.3
Description: Creates a responsive table in reflow mode
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. Since the HTML source order of a table prohibits styling a table to look like this, the plugin dynamically adds a bit of markup to make the display work (without affecting accessibility). Here is a demo of a basic table using reflow mode:
Applying reflow mode to a table
The reflow responsive table mode is the simplest in terms of markup requirements because it 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.
How reflow mode works
The plugin works by parsing the values (or
abbr title) of the first row of header (
th) elements found in the table. For example, in the table above, the third table header is parsed to grab the contents ("Year"):
The script then appends an element with the table header text before the contents of every cell in that column. For example, for every table cell in the year column:
An element is added before the text of each cell with a
With our mobile-first approach, the base styles for a reflow table stacks each row and presents each cell in the label/data style format. This is done by hiding the table header rows, making each table cell
display:block so they are stacked. The the label element injected into each cell is styled as
display:inline-block with a
min-width:30% rule to place the labels on the same line as the content at a consistent width to form a two column presentation.
It is important to note that you are required to wrap your table headers in a
<thead> ... </thead> block, and the table body in a
<tbody> ... </tbody> block, as shown in the full demo Example.
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):
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.
In the example above, we're assuming there is a class of
my-custom-breakpoint added to the table to apply the breakpoint. Each of the rules in the custom media query are scoped against that table class to target only tables that have the
In order for this technique to work, a browser must support media queries and the ability to style table cells as block-level elements. In testing, most popular desktop and mobile browsers meet these criteria, but older versions of Internet Explorer (8 and older) fall back to a normal table presentation. IE 9 can support this technique but there are a few additional styles needed so we recommend applying these in a
max-width media query to only apply them below the table presentation because they are hard to negate.
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. On some sites, this may be as low as 30em (480px) and on others, it could be as wide as 100em (1,600px). There is no way for the framework to decide on a "standard breakpoint" that will work for everyone — that's why there isn't a breakpoint built into the table by default.
We recommend writing media query widths are in
em's so they respond to font size changes. To convert a pixel width into
em's, divide the target width by 16 (pixels). Use this value for the
min-width value in the media query above.
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 prsentation 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 descibed above.
Working with 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 aditional visual hierarchy.
create( event, ui )Type:
ui object is empty but included for consistency with other events.
Initialize the table with the create callback specified:
Bind an event listener to the tablecreate event:
A basic example of a responsive table in reflow mode.