FooTable | Responsive Web Design

FooTable

FooTable

FooTable is a jQuery plugin that allows you to resize and redistribute the data within your tables to best suite your current breakpoint.

The downside for this is that you need to have jQuery, but then there aren’t too many of these resources that don’t require jQuery and if you’re using the Google CDN version then the chances are it’s already cached on your machine. It is worth trying this out with Zepto.js to see if that takes over the jQuery requirement.

What Does It Do?

FooTable transforms your HTML tables into expandable responsive tables. This is how it works:

  1. It hides certain columns of data at different resolutions (we call these breakpoints).
  2. Rows become expandable to show the data that was hidden

Setting the breakpoints

The breakpoints aren’t read from your CSS unfortunately, but that’s to be expected I think. It’s easy to set your widths from within the js file itself, including them below and then


options: {
  delay: 100, // The number of millseconds to wait before triggering the react event
 breakpoints: { // The different screen resolution breakpoints
   phone: 480,
   tablet: 1024
   },

Setting your breakpoints in pixels against a common name.

<th>Name</th>
<th data-hide="phone,tablet">Phone</th>
<th data-hide="phone,tablet">Email</th>

Including the common name within the data-hide attribute in the Table Headers.

So simple! So all the data that is hidden can always be seen just by clicking the row. Play around with the CodePen.io demo we’ve got below to see it in action.

Live Code Example

Check out this Pen!

  • Resource Name

    FooTable

  • Resource Creator

    ThEmergency

Description

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.

View on Github Download Resource

Subscribe to our Newsletter

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