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.
- Hide certain columns at different sizes
- Configuration via data attributes
- Built to work with Bootstrap
- Easy to theme
- Easy to extend with add-ons
What Is FooTable?
FooTable is a jQuery plugin that transforms your HTML tables into expandable responsive tables. This is how it works:
- It hides certain columns of data at different resolutions (we call these breakpoints).
- Rows become expandable to reveal any hidden data.
So simple! Any hidden data can always be seen just by clicking the row.
Check out the growing number of FooTable demos (with built-in documentation!)
The docs are built into the demos! On every demo page, there is a docs tab that outlines how to use the specific feature.
Data Attribute Configuration
One of the main goals of FooTable was to make it completely configurable via data attributes. We wanted you to be able to look at the HTML markup and see exactly how the FooTable was going to function. Take a look at this markup for example:
First NameLast NameJob TitleDOBStatus
All available data attributes are listed in the data attributes demo
FooTable works with the concepts of "breakpoints", which are different table widths we care about. The default breakpoints are:
breakpoints:phone: 480tablet: 1024
So looking at the markup in the Data Attribute Configuration section, you can now tell that the Job Title, DOB and Status columns will be hidden when the table width is below 480 (phone).
There are also two built-in breakpoints called "default" and "all".
The "default" breakpoint is the fallback breakpoint for when the current table width is larger than any defined breakpoint. Looking at the above JS snippet the "default" breakpoint would be applied once the table width is larger than 1024 (tablet).
The "all" breakpoint is pretty straight forward in it's use. You can always hide a column on any table width by applying the data-hide="all" attribute to the header.
Create a simple table (don't forget to set the data attributes for each column in your thead!):
NamePhoneBob Builder555firstname.lastname@example.orgBridget Jones544email@example.comTom Cruise555firstname.lastname@example.org
Include FooTable Core CSS
[optional] Include FooTable Theme CSS
FooTable is now built to work with Twitter Bootstrap out of the box - WOOT!
You can use one of our built-in themes if you want: