Responsive Sticky Headers

Question

I had previously created a front facing page with a table that has a sticky header using Drupal's built in sticker header js.

Now, we are in the process of making that site responsive. To handle the tables we have set an overflow: scroll on the table container to create a horizontal scrollbar for the table.

However, the sticky header (because it is position fixed) does not scroll.

How can I implement Drupal's sticky header in a responsive site.

Code that generates the table:

$block['content'] = theme_table(
  array(
    'header' => $table_headers,
    'rows' => $table_rows,
    'attributes' => array(),
    'caption' => '',
    'empty' => '',
    'colgroups' => array(),
    'sticky' => TRUE,
  )
);

Answer 1

You may need to attach some additional custom JavaScript to do this. Take a look at the "correct" answer to a similar question.

EDIT: I've put together a working version of this page - which contains a working modification of the tableheader.js to solve the problem of sticky headers not working when scrolling horizontally.

I've created a module with a new theming function that can be used as an alternative to Drupal's table_theme to allow for scrolling sticky headers.I also created an example module. It's working great, but may need some tweaking for your case. The modules are not documented (I'll do that later) but you can look at the example. It's self explanatory. It's on GitHub, here.

I hope this is useful.

Answer 2

Please have a look at Responsive Tables module. I think this is what you are looking for.

Some more details about this module (from its project page):

Adds a library to allow tables to function better in responsive layouts.

You can manually add the library to any table on the site. You also have the option of using the Better Views Tables module to configure the responsive table controls through the Views UI.

Answer 3

make sure you have the corresponding javascript file on the site:

drupal_add_js('misc/tableheader.js');

actually, theme_table should will do that, but there are some circumstances you need to do it yourself. (depending on where theme_table is called)

Answer 4

Please try following code in your custom theme javascript.

(function ($, Drupal) {
    /*global jQuery:false */
    /*global Drupal:false */
    "use strict";
    /**
     * Fix tableheader.js Sticky Table headers overflow-x:scroll issue.
     */
    Drupal.behaviors.tableheader = {
        attach: function (context) {
            var $table = $(".table-responsive");
            if ($table.length == 0) {
                console.log($table.length);
                $table = $("html");
            }
            var $header = $(".sticky-header");
            var $header_left = parseInt($header.css('left'));
            $table.on("scroll", function (e) {
                $header.css('left', $header_left-$table.scrollLeft());
            });
            $(window).on("scroll", function (e) {
                $header.css('left', $header_left-$table.scrollLeft());
            });
        }
    };
})(jQuery, Drupal);