Resources

Stackable.js

Last updated on 23 January 2013

Stackable.js

Stackable.js is a jQuery plugin designed to convert data tables into a two column format so that it is easier to view the content on smaller screens.

It’s great if you’re only dealing with some basic data but it probably won’t be the perfect solution if you’re looking to maintain all of the data within your tables (which lets face it is probably going to be 95% of the time).

If you’re looking for slightly more robust solutions try the Filament Groups data table solution.

See the Pen Stackable.js by Justin Avery (@justincavery) on CodePen


  • Resource Name

    Stackable.js

  • Resource Creator

    John Polacek

Description

The purpose of stacktable.js is to give you an easy way of converting wide tables to a format that will work better on small screens. It creates a copy of the table that is converted into a 2-column key/value format.

View on Github Download Resource

Related Resources

  • Image placeholder

    Responsive Tables

    May 21st, 2012

    This simple JS/CSS combo will let your tables adapt to small device screens without everything going to hell.

  • FooTable

    March 14th, 2013

    FooTable is a jQuery plugin that aims to make HTML tables on smaller devices look awesome - No matter how many columns of data you may have in them.

  • Image placeholder

    RWD Table Patterns

    May 30th, 2012

    We'll explore an experimental approach to rendering a complex table, using progressive enhancement and responsive design methods, that displays comfortably at a wide range of screen sizes, provides quick access to the data, and preserves the table structure so that data can still be compared across columns.

Subscribe to our Newsletter

Add your email address and receive an email every Friday covering off everything worth knowing about building your websites responsively.