Working with responsive tables

[benlevydesign]

This plugin works exactly as it should. It works great on desktop but when comes to smaller screens the header does not move with the columns and it also does not hide inside the surrounding containing element. I'll link to my web page shortly.

[mkoryak]

only if your webpage has a simple example on it. Also, I dont claim to support mobile. This plugin requires your browser to reflow the table on resize, and it is CPU heavy. It does not perform well on mobile.

[benlevydesign]

Here is the current page with out the script: projectrequests.php

Here is the link to the test page with the script on my site: projectrequests_fixedheader.php

It works alright on mobile for me (the table isn't best viewed on mobile anyways and will most of the time be viewed on a desktop screen). The one issue for the header is when the window is smaller than 1200px (see the image below).

It overflows outside of my containing element. Why its CPU heavy?

[mkoryak]

i noticed that at the smaller resolution .table-responsive starts acting like a scrolling container. my plugin expects that window will be firing the scroll-x events, but probably the scrolling is happening on that div.

i think the y scrolling is happening on the window still. my plugin currently does not support 2 different containers providing the scroll events, though I am considering adding that functionality. Your example is the first one ive seen where you arent doing something incredibly stupid :)

that being said, until I support this, the plugin will not work on the mobile resolution on your site. i would suggest you disable it.

Your question about the plugin being CPU heavy - html reflow is an expensive operation. It can be very expensive depending on the size of your DOM. phones have slow CPUs compared to desktops, so it only makes it worse. take a look at this: http:https://www-archive.mozilla.org/newlayout/doc/reflow.html as a starting point if you want more info

[benlevydesign]

So disable it below 1200px. A lot of the plugins that I have found require your table to have a fixed height and yours doesn't which is good because my table will continue to grow and get longer.

[jfly]

👍 This is a pretty big omission for anyone using Bootstrap. The Bootstrap documentation for responsive tables tells you to use this exact problematic .table-responsive wrapper. I've worked around this by adding a scroll listener to the wrapping .table-responsive as so:

  var $tablesToFloatHeaders = $('table.floatThead');
  $tablesToFloatHeaders.floatThead();
  $tablesToFloatHeaders.each(function() {
    var $table = $(this);
    $table.closest('.table-responsive').scroll(function(e) {
      $table.floatThead('reflow');
    }); 
  });

It would be mighty nice if the scrollContainer option did this for me.

[mkoryak]

thanks for the link do the table-responsive docs. I havent seen these. This issue in on my radar, ill be getting to it for next release

[mrdulin]

Have the same issue~ seems the best way is to disable it.

[mkoryak]

I looked into a quick fix for this. not possible without hacking it. The lib was never designed to be able to change the element which was treated as the scroll container. I would really like to come up with a solution that does not involve destroying the instance.

[lock]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.