Hello,

Although not an issue per se, is there a way to have/add/create a "Reset" button for the filtering feature?

Use case

While working on a demo page for a client, I kept testing the filter feature (which worked very well). The issue I noticed was that every time I wanted to try a new keyword I had to press back space or select+delete.

My thought is that maybe users could very well go through the same experience of "trying" different keywords to see the different results the table could offer, but to do so they have to press back space or select+delete every single time in order to 'clear' the input field.

When using the filtering feature I think that it's very likely that a user wouldn't necessarily know off the bat which keyword to type, but instead try several.

So maybe adding a Reset button or a keyboard combination (or simply press ESC) to clear the input field could improve the usability of the filtering feature.

Just throwing out ideas for this awesome project.

What do you think?

Thanks.

OFFTOPIC: BTW, there's a typo in the page http://themergency.com/footable/ - it says "Fitlering" instead of "Filtering".

This is a strange one, as I'm sure they do work because all the demo's work.

However when columns collapse on my table the detail row fails to show the table headers in bold as they do in the demo's.

If I change the createOrUpdateDetailRow function as follows:

    // if (index in column.names) name = column.names[index];
    if (index == column.index) name = column.name;

Then it all works for me. I can't anything obviously wrong with table/thead/tr/th or table/tbody/tr/td config.

I'm making the switch from DataTables, and one thing that plugin handles very well is accessibility. Specifically, adding ARIA roles to the table where needed. e.g., when a column is sortable the aria-sort attribute is added and the aria-label amended to reflect that:

(aria-sort="ascending" aria-label="Title: activate to sort column descending").

Is a similar implementation on the cards for FooTable?

I was thinking about the Header Groups issue a bit last night and came up with what might be a simpler solution: assuming the TR containing TH/TD elements with FooTable directives is the last one in the THEAD, collect a list of TH/TD elements from previous TR elements that are part of the Header Group for each TH/TD in the last TR. That way all of the THEAD columns that need to be hidden with each TBODY column are known.

http://www.math.nmsu.edu/~mleisher/Software/javascript/FooTable/hgroups.js was dashed off in a few minutes with no testing, so it needs to be tested with lots of different THEAD arrangements to see if it works as intended.

Any progress with a filtering plugin?

Love to see another attribute flag to disable footable from adding a column to the details div when it shrinks, it's not really a great option in my opinion since all data in the table should be relevant, but for instance we have form buttons in the last column of a table to allow the user to edit/delete an entry, that may not be needed in mobile.

Sort not working correctly on Date column (using data-value = Unix epoch time).

See the bug here: http://marktest.digitalbrandmine.com/bug

To see the bug, sort on date and notice that the top row with date 2012-11-28 is out of place. Sort on a few other columns, and then come back and sort on Date again, and you will see the sort order even more messed up.

Steps to reproduce:

1. If you resize to tablet size so that the first column hides
2. Expand row 1.
3. Maximize to larger than tablet size.
4. Resize back to tablet size and try to expand row 1.

Simple example

<script type="text/javascript">
    $(function() {
      $('#aTable').footable();
    });
  </script>
<table id="aTable" class="footable">
    <thead>
        <tr>
            <th data-hide="phone,tablet">Item Number</th>
            <th data-class="expand" >Description</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Some item</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Some other item</td>
        </tr>
    </tbody>
</table>

Changing the following line in the resize() method so that row details are not targeted fixes the issue.

var $column = $table.find('> tbody > tr > td:nth-child(' + count + '), > tfoot > tr > td:nth-child(' + count + '), > colgroup > col:nth-child(' + count + ')').add(this);

to

var $column = $table.find('> tbody > tr:not(.footable-row-detail) > td:nth-child(' + count + '), > tfoot > tr > td:nth-child(' + count + '), > colgroup > col:nth-child(' + count + ')').add(this);

Hi,

I am new to the FooTable. It is great and I like it very much
But I experienced one problem, when the number of rows is large, maybe hundreds or thousands of them, FooTable is not be able to handle them. It crashes.

So I wonder how do you guys do if you have more than 1000 rows, since it has no pagination.

Thank you.

supery0ung

Love it! Heaps better than the other plugins I've been looking into.

But there is one thing which I'd prefer to see which is removing columns based on priority rather than set break points. eg:

<table>
 <tr>
 <th data-priority="1">First Name
 <th data-priority="1">Last Name
 <th data-priority="2">Age
 <th data-priority="3">Home town
 <th data-priority="3">Fav color
</tr>
<tr>
<td>....

To be more concise you could assume that if no priority is specified then it is the highest priority.

There are no break points specified at all. On resize it just checks if the table overflows it's containers width and if so then it removes a single lowest priority visibile column, and then checks if the table fits. If not then remove another one. If that priority level runs out then go down to the next priority level. ie If you run it on a table with no priority levels then it will just progressively remove to rightmost columns until it fits.

Pros:

• less or zero config
• will work with td's that may have wildly varying data sizes
• will work when nested inside a container which isn't the width of the device which happens quite often

Cons:

• maybe a small bit of reflow performance

I'm considering switching from DataTables to FooTable, but the lack of pagination is holding me back at the moment.

DataTables has great support for pagination, which is needed when you are dealing with large data sets. FooTable doesn't appear to support this through any of its plugins, which means that you would have to scroll past all of the loaded data to get past the table.

I understand that FooTable is supposed to be fairly lightweight, but how often are you dealing with tables that need to be responsive but don't contain a large amount of data?

This would also help with limiting the amount of data that needs to be queried when loading FooTable if you were using AJAX which was mentioned in #16.

Can I somehow ignore the dropdown if I click a link in a row? It triggers the javascript before updating the page.

hi, I have a link, that needs to be treated but the click event is never, when i put the link outside the footable the juery script work but not inside the footable below is a partial code

$('.hotelDetails').click(function() {
var hotelCode = $(this).attr("code");
//alert(hotelCode)
$.ajax({
type: "POST",
url: "/getHotelDetails",
data: { hotelCode:hotelCode }
}).done(function( msg ) {

      //$("#productDetails").html(msg)

    })
    return false;
  })

and the link is

Details

help appreciated

Could you check it? Thanks.
BTW superb effort!

I started tweaking FooTable internals a couple weeks ago just for my personal projects. It kind of got out of hand and Horton was born.

Why Horton? Because Foo was taken.

Demo: http://www.math.nmsu.edu/~mleisher/Software/javascript/Horton/

Source: https://github.com/mleisher/Horton

I was integrating FooTable with DataTable. Everything was ok, but in hidden content (this one which shows in small sizes) column names was empty. I found out that array columns.names is empty. So I changed script to:

      $row.find('> td:hidden').each(function () {
        var index = $(this).index(), column = ft.getColumnFromTdIndex(index), name = column.name;
        if (column.ignore == true) return true;

        if (index in column.names) name = column.name;
        values.push({ 'name': name, 'value': ft.parse(this, column), 'display': $.trim($(this).html()), 'group': column.group, 'groupName': column.groupName });
        return true;
      });

this orginial line:

if (index in column.names) name = column.names[index];

to this line:

name = column.name;

And it seems it works. Dunno if it's a bug or i can't use FooTable properly. :)

I have a question and possible enhancement request:

I would like to dynamically show/hide columns. This could be done by adding / removing the data-hide="all" attribute. The problem is that these attributes are read when footable() is run on the table.

Is there any way to make FooTable "reload/refresh" after it has been initialized so that it can reread the data-hide (and other) attributes?

Alpha sorting - seems to only be based on the first character. In your demo (http://themergency.com/footable-demo/demo-sorting.htm), this problem is visible. If you sort the 'Job Title' column, Aviation Tactical Readiness Officer should sort below Airline Transport Pilot.

Currency sorting - I tried to get this to work by following the example of data-value="1025" (without the currency $ symbol). But it did not work correctly. I also assigned a data-type="numeric" as a second attempt, but that also did not change the outcome.

the first column (in the table's header) in my table has a colspan set to 3, which causes the other columns to sort incorrectly, i.e. trying to sort any column results in the 2nd column before it actually being sorted.

My application has multiple Twitter bootstrap tabs where i have my tables(which are enabled by Footable). Footable changes the layout of Table to Mobile Layout even if it is in the Desktop.

I'm using ajax to delete the row (from my database and from the screen). I'm targeting the table row using:

var tablerow = $(this).parents("tr");

Once footable kicks in, it creates 2 table rows for each original row, and I can no longer target the original row this way. Any ideas how I can get this working?

Here is the full script:

$('.delete-event').click(function(){
// set the vars
var tablerow = $(this).parents("tr");           
var id = $(this).attr("id");            
var string = 'id='+ id ;

// post the filename to the delete page
$.ajax({
    type: "POST",
    url: "delete-event.php",
    data: string,
    cache: false,
    success: function(){
                tablerow.css("background", "red");
                tablerow.fadeOut(function() {
                    $(this).remove();
                });
    }
});
return false;
});

Hello,

Any suggestions on getting footable to work with jQueryMobile?

Here is the head of demo.htm file modified with jQueryMobile.

title FooTable - jQuery plugin for responsive HTML tables /title
meta name="viewport" content = "width = device-width, initial-scale = 1.0, minimum-scale = 1.0, maximum-scale = 1.0, user-scalable = no" /

link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" /
link href="css/footable-0.1.css" rel="stylesheet" type="text/css" /

script src="js/data-generator.js" type="text/javascript" /script
script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript" /script
script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js" /script
script src="js/footable-0.1.js" type="text/javascript" /script
script type="text/javascript"
$(function() {
$('table').footable();
});
/script

Thanks
-Noah

I am using the footable plugin on two tables that are on separate tabs using jQuery UI tabs. The tables are working properly and resizing based on the viewport on a regular PC-based browser, but the initial state is not working (scaling down) on the mobile device. I have to toggle the tabs back and forth about 5 times and THEN the tables resizes as it should. Any ideas what may cause this?

I am using the following:

jquery 1.7.2
jquery-ui 1.8.16
footable-0.1
footable.sortable-0.1
jquery.ba-bbq

NOTE: I have seen the other post about multiple tabs and have attempted to apply that fix, but it did not work for me. I suspect that the jquery.ba-bbq may be the culprit?

It would be a great feature to add totals in the bottom of the table which acts correctly according to the filter.

Isn't it possible to have multiple tables with the pagination feature?

It would be nice to have a th data-class="footable-default-hide" option to hide the column when no breakpoints have been triggered, and to show the column when any breakpoints have been triggered. Here's some proposed code to support such an option (I would just submit a pull request, but I'm new to git and now exactly sure how to do it).

This code would be just before the ft.raise() call in ft.resize()

/* deal with show/hide of footable-hide-default* columns
 * 
 * The options are:
 *  data-class="footable-hide-default"
 *      This will hide the column when no breakpoints have been triggered
 * 
 *  data-class="footable-hide-default-expand"
 *      Same as above; except, it adds the 'expand' class when column is shown
 */ 
$table.find('> thead > tr > th[data-class^=footable-hide-default]').each(function() {
    var data = ft.columns[$(this).index()];
    var count = data.index + 1;
    //get all the cells in the column
    var $column = $table.find('> tbody > tr > td:nth-child(' + count + ')').add(this);

    expand = false;
    if (data.className.indexOf('expand') >= 0) expand = true;  
    if ($table.attr('class').indexOf('breakpoint') < 0) {
        $column.removeClass('expand');
        $column.hide();
    }else{
        // expand only non-detail rows
        if (expand) $table.find('> tbody > tr:not(.footable-row-detail) > td:nth-child(' + count + ')').addClass('expand');
        $column.show();
    }
});

It seems like the event is not triggered

Test platform: Android 2.2 / Webkit 3.1

Hello,
for some reason the sorting code is conflicting with the details views. I am testing this on Chrome and Firefox on ubuntu and on my iPhone default browser. Your demo version works on these browsers so I thought it might be the downloaded versions. I copied all files and html from your demo version and it still doesn't work on my side. I am totally confused. Any help/Suggestions or Bug?

I have stopped investigating at the moment but have weeded down what sections this happens.
#1: With the following code commented out of the sorting file the details view will work UNTIL you sort then it will not work anymore.

for(var c in e.ft.columns) {
var column = e.ft.columns[c];
if (column.sort.initial) {
p.sort(e.ft, $tbody, column);

                var $th = $table.find('thead th:eq(' + c + ')');

                if (column.sort.initial == "descending") {
                    p.reverse(e.ft, $tbody);
                    $th.addClass(cls.descending);
                } else {
                    $th.addClass(cls.sorted);
                }
                break;
            } else if (column.sort.ignore != true) {

            }
        }

#2: And this is the code in the sorting file that keeps it from working after you sort.

$(e.ft.table).find('tr th.' + cls.sortable).click(function (ec) {
console.log("clicked");
var $th = $(this), index = $th.index();
var column = e.ft.columns[index];
if (column.sort.ignore == true) return true;
ec.preventDefault();
$table.find('> thead > tr > th').not($th).removeClass(cls.sorted + ' ' + cls.descending);
}
if ($th.hasClass(cls.sorted)) {
p.reverse(e.ft, $tbody);
$th.removeClass(cls.sorted).addClass(cls.descending);
} else if ($th.hasClass(cls.descending)) {
p.reverse(e.ft, $tbody);
$th.removeClass(cls.descending).addClass(cls.sorted);
} else {
p.sort(e.ft, $tbody, column);
$th.removeClass(cls.descending).addClass(cls.sorted);
}
return false;
});

Is it possible to use FooTable with multiple tbodys? When I sort it appends new rows.

First of all, thank you @bradvin for this awesome work!

I would appreciate some help with the filtering code...
I have a table where one of the columns displays item's CATEGORIES, and for some reason I would like to filter the table dynamically according to these categories.

I have tried to change the value dynamically, but table is refreshed only after keyup events.

Any tips?

When applying FooTable on a table having a zebra (using :nth-child), the zebra breaks, as FooTable adds additional <tr> elements.

When combined with jquery ui sortable the columns doesn't keep their widths. Does anyone know a workaround?

I needed to have header groups for my headers (additional <tr> in the <thead> with colspans), but didn't want anything to sort. I can't think of a situation where someone would want to sort on a header group, since you should just sort on the lowest level header.

In this light, I modified line 46 of sortable to find "tr:last-child th" to get my desired results. Do you agree this is something you should update or is there something planned for header groups/intented functionality?

I have a table with the first column displaying a grouping value. Rather than repeat that value for each row in the group, I set rowspan on the cell in the first row so that the grouping value is only displayed once.

I tried to use footable on this and make the 2nd column of the table be expandable.

What happens is that when the table collapses, the expand icon is always added to the 2nd cell in each row, which corresponds to the 2nd column in the table for rows that contain the grouped value, and the 3rd column for all other rows. In addition the collapsed table displays an additional column in the 2nd and subsequent rows of each row in the group. This extra column juts out from the rest of the collapsed table.

I can forego the rowspan and repeat the grouping value in each row, but that detracts from the look of the table when it displays in full.

Here is a simple example:

Thanks

Hello,

First, Thank you for the plugin.

I would also like to apologize in advance if this is not a bug/issue but due to my lack of knowledge and should be posted elsewhere...

I'm trying to use footable with JQM, the data is retrieved via a REST service. The response is in json format and it seemed that every time i make an $.ajax or $.getJSON call, the table is filled but it loses its responsiveness.

At first, i thought that it may have something to do with JQM but it doesn't seem to be the case.

For example. If i fork footable's gist and replace the following code in data-generator.js

Original code: This of course works 👍 .

rows = rows || 100;
    extraCols = extraCols || 0;
    for (var i = 0; i < rows; i++) {
      var data = {
        firstName: firstNames[Math.floor(Math.random() * firstNames.length)],
        lastName: lastNames[Math.floor(Math.random() * lastNames.length)],
        jobTitle: jobTitles[Math.floor(Math.random() * jobTitles.length)],
        status: statuses[Math.floor(Math.random() * statuses.length)],
        dob: randomDate()
      };
      var row = '<tr>';
      //row += '<td class="expand"></td>';
      row += '<td>' + data.firstName + '</td>';
      row += '<td>' + data.lastName + '</td>';
      row += '<td>' + data.jobTitle + '</td>';
      row += '<td data-value="' + data.dob.getTime() + '">' + data.dob.getDate() + ' ' + months[data.dob.getMonth()] + ' ' + data.dob.getFullYear() +'</td>';
      row += '<td data-value="' + data.status.value + '">' + data.status.name + '</td>';
      for (var j = 0; j < extraCols; j++) {
        row += '<td>' + (i+1) + '.' + (j+1) + '</td>';
      }
      row += '</tr>';
      document.writeln(row);
    }

Manually constructed Json code: This also works.

    var mydata = '{ "data": [';
        mydata += '{"firstName":"Maxine","lastName":"Haner","jobTitle":"Technical Services Librarian","dob":"6 Aug 1976","status":"Active"},';
        mydata += '{"firstName":"Maxine","lastName":"Haner","jobTitle":"Religious Activities Director","dob":"12 Aug 1956","status":"Disabled"},';
        mydata += '{"firstName":"JSON","lastName":"http://www.json.org/","jobTitle":"blah blah blah","dob":"0213876","status":"Disabled"}';
        mydata += '] }';

        var json = $.parseJSON(mydata);

           for(var i=0; i < json.data.length; i++){

                var row = '<tr>';

                row += '<td>' + json.data[i].firstName+ '</td>';
                row += '<td>' + json.data[i].lastName + '</td>';
                row += '<td>' + json.data[i].jobTitle + '</td>';
                row += '<td>' + json.data[i].dob + '</td>';
                row += '<td>' + json.data[i].status + '</td>';

                row += '</tr>';

                $("table tbody").append(row);

            }

Result:

Google json: Table is filled but is no longer responsive

    var url = 'http://ajax.googleapis.com/ajax/services/search/web?v=1.0&q=json&callback=?';

       $.getJSON(url,function(response) {

           for(var i=0; i < response.responseData.results.length; i++){

                var row = '<tr>';

                row += '<td>' + response.responseData.results[i].titleNoFormatting + '</td>';
                row += '<td>' + response.responseData.results[i].url + '</td>';
                row += '<td>' + response.responseData.results[i].GsearchResultClass + '</td>';
                row += '<td>' + response.responseData.results[i].visibleUrl + '</td>';
                row += '<td>' + response.responseData.results[i].visibleUrl + '</td>';

                row += '</tr>';

                $("table tbody").append(row);

            }
       });

Result: Same thing happens with the jqm app accesing the internal rest service.

It looks to like the footable's attributes are not applied to the individual cells anymore.

I'm not sure if this is 'by design', a bug/issue with footable, jquery or 'most likely' me :).

Can somebody shed a light on what is happening here?

Thanks

When table is placed in a floated div, it shows only the columns without tablet and phone.
Please see the test page. Remove .f {float:left} everything works.

Also, in the test page, the last column data-hide is "phone" only and it shows at first for tablet and full width views, however after resize to narrow then resize back to full width, it's still hidden.
http://jsbin.com/uyegih/2

does FooTable not work if it's not called in the head tag? I'm calling all my jquery stuff just before the close of my body tag, then call .footable() in

$(document).ready(function(){
   $('table').footable();
});

I'm not getting any errors, but no columns that are designated to get hidden are hiding. Neither tablet or phone.
I'm using jQuery 1.7.2 and Bootstrap 2.2.1

Hi there, I'm trying to implement your plugin but unfortunately I've come across an issue. When clicking to sort, that works fine, but if I click to expand a collapsed area after already clicking to sort, the area won't expand. If I refresh and click to expand without clicking to sort, it's fine, but as soon as I click to sort, if I want to expand I need to refresh and expand without sorting.

My HTML looks like this.

<thead>
    <tr>
        <th data-hide="phone,tablet">
            Program Code
        </th>
        <th data-class="expand">
            Program Name
        </th>
        <th data-hide="phone,tablet" data-type="numeric">
            Academic Terms
        </th>
        <th data-hide="phone">
            CO-OP Terms</br> in Program
        </th>
         <th>
            Total Fees </br>
            For First Two Academic Terms
        </th>
    </tr>
</thead>

The table looks like this expanded:

The Chrome Inspector console shows no errors. In Chrome Inspector, upon clicking, when it works I notice classes being added. When it doesn't work, I notice that no classes are added. Also if the window is resized from large to small, clicking on the plus doesn't work either unless I refresh it ahead of time.

Have I done something incorrectly?

The full project can be seen here.

Please let me know at your earliest convenience. Thank you.

I'm using this plugin -> https://github.com/jeffdupont/bootstrap-data-table

How to integrate with this plugin?

I tried to paste $('.footable').footable(); here
https://github.com/jeffdupont/bootstrap-data-table/blob/master/bootstrap-datatable.js#L172
but nothing is happened.

P.S. sorry for my bad engish

I witnessed a problem using this plugin with Drupal 7 because it comes with jQuery 1.4.4 and this plugin failed due to the second parameter of $.Event() only being added in jQuery 1.6.

It's possible to use jQuery Update module in Drupal to bump up the jQuery version and get this plugin to work, but it took a bit to figure which version is the minimum requirement.

So I can speak that at least jQuery 1.6 is needed but I haven't extensively tested everything yet.

I was playing with the sample data and doing a filter. I entered 'pen', but this didn't filter as I expected.

On inspecting via Firebug, I noticed that the status column has a status-value of 'suspended' and the image also contains the text 'suspended' in it's title and src attributes.

I assume you should be filtering on the html only.

Hello,

Not if this is doable right now, but I read the documentation and couldn't find find anything related to this case.

My issue right now is that I would like to exclude a column from sorting.

The thing is that I have a column that holds thumbnails, just small preview images of the files they correspond to, so "sorting by thumbnail"... the sorting concept doesn't apply in this case.

Is there a data- attribute to "exclude" a column from sorting?

EDIT--

I used data-ignore on the header but it didn't work.

I used it like this:

<thead>
  <tr>
    <th data-ignore="true">Thumbnail</th>
  </tr>
  <tr>
    <th>...</th>
  </tr>
<thead>

Thanks.

Hi guys, a great resource you're putting together here.

I've a project, which relies heavily on the great datatables.net and from initial playing around, FooTable isn't far away from seemlessly integrating into it.

If I've time I'll try and write the plugin to this, but figure I should 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() {
        $('.dataTable').footable();
    }
});

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 : http://jsfiddle.net/pxDb6/1/

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.

http://www.datatables.net/release-datatables/examples/api/show_hide.html

How does that sound to you guys? Shall post these thoughts over at DataTables too....

I'm loving the FooTable plugin - congrats on some great work!

I've been playing with it for a couple of days now and have a few suggestions:

1 - I've edited the createDetail function so if there's no text in TH the element, it dosen't display the colon (:)

for (var i = 0; i < data.length; i++) { var ap = '<div>'; if (data[i].name != '') { ap = ap + '<strong>' + data[i].name + '</strong>: '; } ap = ap + data[i].display + '</div>' element.append(ap); }

2 - Using FooTable on tables within jQuery UI tabs.

If you have a couple of tables on a couple of tabs, the plugin fails to get the table width for the hidden tabs - it translate the width: 100% to 100px and hence foo's the table (if that's the right term) when it shouldn't.

For now I've added the following to get around the issue, but it's way less than elegant:
if (info['width'] == 100) {info['width'] = 800;}

Hi,

I don't want to add a bug report or something like this, but I think footable should (somehow) make the detail row a little bit more mobile friendly with regard to text selection.

It's really hard to hit & mark the text passages with font-size 14px inside a td. Especially on iOS, you have to make original marking rectangle smaller to fit the specific data-row.

I made it a bit simpler by adding a mobile-friendly height attribute of 40px to the single data-rows to make it simplier on touching the text which you want to copy.

I think some research and work has to be done on that topic, because, in contrast to the footable concept, it's not THAT user friendly. 😄

So the way it is, some data will be hidden on small screens, but how is the user to know that? It would be great if some icon appeared that hinted that the row folded out.

Hi,

as we already computed orientation and related stuffs. I think it would be gr8 to support different breakpoints for different orientation.

For example: I've implemented FooTable in one of my project. While I'm on portrait mode, I remove the right side bar and when on landscape I wanna c the right side. As width changes so as Footable breakpoints

First, thank you, i am enjoying fooTable a lot!

My request here is to make fooTables also work on tables that does not declare headers, those are useful to display data and sometimes it is not necessary to add headers and having them be responsive would just be awesome

This is sort of an edge case, but it's also kind of a common pattern. An AJAX request gets fired off which "refreshes" the table, by replacing its rows. This obviously means FooTable needs to run again on the table, which is fine.

The problem comes in when the table is in a "responsive" mode, for lack of a better word. Columns have actually been removed from the table in this view, so when the new table rows go in, they're off and the table is expanded past the last column.

The only way I can see to get around this to provide some method to "destroy" FooTable. In other words, undo what FooTable does to make the table responsive (should be as simple as treating it as if there is no width restraint, so all the columns come back into view). Then the new rows could be added, and one would simply just need to call .footable() on the table again.

Thanks a lot for writing the prior update to make footable work with jQuery 1.4.4. The Drupal module integrating FooTable has gotten relatively popular, as a result.

I'm writing to mention that backward compatibility with earlier versions of jQuery turns out to be an ongoing issue. I managed to track down the specific commit that appears to break backwards compatibility and I've documented options for working around the issue in Drupal that don't require changes to the FooTable plugin.

If you'd prefer to just support "modern" versions of jQuery, just say the word. But if not, I'd be glad to relay backwards compatibility issues, if and when they come up.