Integrating DataTables with FooTable for responsive tables #139

oller opened this Issue Dec 20, 2012 · 2 comments


None yet

2 participants

oller commented Dec 20, 2012

Hello all,

As some of you may be aware FooTable has recently been developed over at: . It's a very nice looking responsive table script. Which allows certain columns to be hidden at certain resolution breakpoints. This data is not lost though, it's moved to a hidden row, which is shown when the user expands the row.

Of all the responsive table scripts, I've found this is the closest in terms of integrating with datatables out of the box.

FooTable has been written with plugin extensibility, so I'm hoping if I've time I'll be able to work on this, but I'd like to share my thoughts if I'm unable to to.

On each draw of the datatable, you need to re-initialise footable:

$('.dataTable').dataTable( {
   "fnDrawCallback": function() {

The only problem I've found is cells moving all over the place when sorting a column using the datatables sort, once footable has hit a breakpoint and started hiding columns.

JSFiddle :

The gist of the plugin I'd be looking to create would be to try and use the dataTables function fnSetColumnVis() on the fooTable breakpoint snapping event to hide the columns, so the sort should then behave.

How does that sound to you guys?


Sounds fantastic. I hadn't actually seen FooTable yet, but thanks for introducing me to it - it looks really useful!

A wrapper around DataTables that calls fnSetColumnVis sounds just about perfect to allow DataTables to work in a flexible use case such as this.

Interested to hear how you get on :-)


Going to close this issue for the moment - no changes required in DataTables.

Still interested to hear how this integration goes though, if anyone progresses with this!

@DataTables DataTables closed this May 18, 2013
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment