Introducing FooTable

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).