Tabular data is an often used layout component that imposes some tricky decisions in a responsive environment. If the table is wider than the viewport, we can enable horizontal scrolling, hide some columns, show a sum up of the table with a link to the full version of it, or we can make other decisions as well.
That first Chris Coyier approach for a responsive table works with CSS only. Below a fixed width size of the table, each row is transformed into a column with the original table headers repeated on the side. This is as if the table was rotated 90 degrees while showing only one line at a time. All the data is still displayed, although that approach works better with a small number of rows and columns.
A jQuery plugin, Stackable.js, has been created by John Polacek following the same principles.
David Bushell goes a bit further, rotating tables with a spirit as he's switching rows and columns, putting the header row as the first column of the resulting table, keeping it always visible, while adding a horizontal scrollbar for the rest of the table.
With a very similar approach Zurb makes the first column stick, enabling the scrolling of the rest of the columns under it. There is no switching of rows and columns in their CSS/javascript implementation, so the user is shown her data the same way, whatever the screen size.
This demo shows a preview picture of the table and a tap to view call to action when there is not enough space to show the whole table. The user thus knows there is some tabular data to be seen and can choose to scour it, going back and forth between the two screens, or to skip it entirely.
By setting the status of a column as persist, essential or optional through a CSS class, and by adding a javascript button menu to manually select which column to show and hide, this Filament Group example is a good compromise between the ease of use and the quantity of data to display.
With his FooTable jQuery plugin, Chris Coyier ends this series with a table that can hide columns on specific breakpoints (CSS media queries), enables column sorting, and expands the row to show its hidden content.
Rotating table
That first Chris Coyier approach for a responsive table works with CSS only. Below a fixed width size of the table, each row is transformed into a column with the original table headers repeated on the side. This is as if the table was rotated 90 degrees while showing only one line at a time. All the data is still displayed, although that approach works better with a small number of rows and columns.
A jQuery plugin, Stackable.js, has been created by John Polacek following the same principles.
Dancing table
David Bushell goes a bit further, rotating tables with a spirit as he's switching rows and columns, putting the header row as the first column of the resulting table, keeping it always visible, while adding a horizontal scrollbar for the rest of the table.
Sticky column
With a very similar approach Zurb makes the first column stick, enabling the scrolling of the rest of the columns under it. There is no switching of rows and columns in their CSS/javascript implementation, so the user is shown her data the same way, whatever the screen size.
Tap to view
This demo shows a preview picture of the table and a tap to view call to action when there is not enough space to show the whole table. The user thus knows there is some tabular data to be seen and can choose to scour it, going back and forth between the two screens, or to skip it entirely.
Hide and seek columns
By setting the status of a column as persist, essential or optional through a CSS class, and by adding a javascript button menu to manually select which column to show and hide, this Filament Group example is a good compromise between the ease of use and the quantity of data to display.
Peekaboo table
With his FooTable jQuery plugin, Chris Coyier ends this series with a table that can hide columns on specific breakpoints (CSS media queries), enables column sorting, and expands the row to show its hidden content.
Illustration: La table tournante : expérience de magnétisme, by Eugène de Mirecourt and Champfleury, 1853
Des tables responsives (in French)
Tabelas responsivas (in Portuguese)
Tablas responsivas (in Spanish)
No comments:
Post a Comment