Themergency fooplugins.com
FooTable Screenshot

Introducing FooTable

| 13 Comments

We have just released a new FREE jQuery plugin called FooTable. FooTable aims to make HTML tables on smaller devices look awesome – No matter how many columns of data you may have in them.

Why Responsive Tables?

There is no denying that HTML tables are needed to display tabular data. The problem comes in when you are looking at a large HTML table on your iPhone. If there is too much data to show, then it tries to squash it all up and once it cannot squash it any more, the table then flows outside of the page causing your site to scroll horizontally – YUCK!

Existing Solutions

There have been quite a few solutions created including :

1) Zurb’s that scrolls the table horizontally on smaller devices.
2) Dave Bushell’s that flips the table on it’s side.
3) Filament Groups’s solution lets the user select the columns to show.
4) Stewart Curry’s one hides less important columns.
5) Chris Coyier’s one which groups the data for each row in a list and the columns disappear.

I really liked Chris’s and Stewart’s solutions, but I wanted a bit more. So I chatted to my mate Steve and we created FooTable, which takes both of those ideas and mashes them together.

So What Does FooTable 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.

So simple! So all the data that is hidden can always be seen just by clicking the row. Play around with the responsive demo to see it in action.

Demo

Check out the stand-alone demo (you will have to resize the broswer to see it work) or check out the responsive demo and just click the device buttons.

Download

Get the code from Github.

More Info

Check out the FooTable homepage where I go into more detail about how it works, example usage etc.

What’s Next?

This is just the start of FooTable. If you look at the FooTable code you will see there is an extensible plugin framework built in. We have already written a sorting and filtering plugin that when included in the page, makes your table sortable and filterable. (These are still being tested and will be released soon).

I hope you like it :)
7 comments
namidesu
namidesu

I need a fix when you have a parent div with style display:hidden and height:auto, for example, if you have a table inside an accordion and you resize the browser window, then you open the table and it didn't show the responsive version, but if you resize the window and the table is visible, then you can see that the resize function its working correctly in each version.

jlevesque
jlevesque

I've got this working correctly in terms of which info is displayed / hidden but I'm having an issue with it recognizing the breakpoints with ajax loaded pages. If I'm on a different page and click into where the table is, it's showing the "mobile" version. If I resize the browser window the tiniest bit, it snaps into place how it should be. Not even sure if you're even offering any support on this, but if there's a fix, I'd love to hear it!

theRegge
theRegge

What a great design pattern!

themergency
themergency moderator

 @jlevesque are you initializing footable before you show the actual table after it is loaded from ajax? I think you must show the table first and then initialize footable

themergency
themergency moderator

 @thepeg Hello there

 

Yes that is very similar, as mediatable also hides columns on resize, but we wanted to take footable a step further and allow you to expand a row to see the hidden columns

thepeg
thepeg

 @themergency we developed two great solutions.

 

FooTable shows details into a in-table additive row.

MediaTable allows you to change visible columns by selecting them from an auto-generated menu.

 

What solution to implement depends on project requirements!

 

Good job!