Header sync is off on a wide table

[billsaysthis]

I have a table that can get very wide, dozens of columns and around 4000px wide, and am seeing issues.

• Many column headers are never visible, due to the way the width of the generated floatThead-container div is calculated and the use of overlay: hidden.
• Scrolling horizontally (by dragging the scrollbar, for example) often doesn't move the headers, scrolling vertically triggers that.

An additional issue, not with the header but the content, is that the rightmost content column is cutoff by the vertical scrollbar--that is, the rightmost 15px or so are overwritten by the scrollbar. On a Mac you may need to go into System Prefs | General and change the Show scrollbars setting to Always show in order to see this.

I've done minimal configuration, as shown here:

  var $table = $('.aggregate-records-table-view').find('> table');
  if ($table) {
    $table.css('table-layout', 'fixed');
    var scrollTop = $('#aggregate-records-viewer').offset().top;
    $table.floatThead({
        scrollingTop: scrollTop,
      scrollContainer: function() { return $('#aggregate-records-viewer'); },
      useAbsolutePositioning: false,
      cellTag: 'td'
    });
  }

[mkoryak]

can i use the html from your other fiddle with this config to reproduce?

[billsaysthis]

Not sure, though it is the same table in out app, but in this case the containing div maximum width is much less than the table width (about 1500px compared to 3800px in the case I was testing). If that fiddle doesn't enable you to reproduce I can try to update it with this set of data.

[mkoryak]

Tried pasting the code into the older fiddle, but it the plugin didnt init. Can you provide an updated fiddle with this code that I can use to reproduce this issue?

[billsaysthis]

Working on an update for you, other priority feature work getting in my way...

[mkoryak]

no prob, i am pretty busy these days too

[billsaysthis]

http://jsfiddle.net/Gp3yV/13/

But the thead isn't pinned, whether I have useAbsolutePositioning true or false.

[mkoryak]

should be fixed now, see: http://mkoryak.github.io/floatThead/tests/issue-56/

[billsaysthis]

This seems to fix my issue.

I did run into something else but not sure if it's worth a ticket or down to how we do things. What do you think?

Our use case is showing search results but since some searches can take more than a few seconds we show partial results every few seconds. That is, we re-render the (Backbone.js) view.

So what I see is one 'layer' of floatThead for each render. I tried just calling $.floatThead('destroy') and $.floatThead('reflow') but this wasn't sufficient. Instead I check if it's been applied and if so remove the container and call reflow:

            if (this.floatTheadApplied) {
              $('.floatThead-container').remove();
              $table.floatThead('reflow');
            }

Then after applying floatThead I check if there's still an extra wrapper and unwrap (remove) if present:

            if ($('#aggregate-records-viewer').parent().parent().hasClass('floatThead-wrapper')) {
              $('#aggregate-records-viewer').parent().unwrap();
            }

[mkoryak]

i am not sure by what you mean when you say 'i can see one layer of floatthead' can you attach a screenshot?

probably unrelated, a lot of your problems seem to stem from the fact that your css styles are attached like this:
#some-id thead td

this makes the tds become unstyled when they are floated because they are moved outside of #some-id. floatThead copies table's class on to the floated table with the expectation that your css looks like this:
table.some-class thead td

that also saves you from having to redefine all of your table styles for .floatThead-table.

Looking at your workaround, i have no idea how it would even work since floatThead depends on on those wrappers to calculate stuff.

You can provide another fiddle if you want, but this issue is starting to look more like something that should be solved in your code and not in plugin code, what do you think?

[helloworlder]

I'm using with datatables, and when I horizontally scroll to the right, then sort by one of the columns, the floating header moves into the incorrect position. Not sure if it's a related issue.

I tried $(window).trigger("resize") on the datatables fnDrawCallback callback which seems to address the issue. I think it triggers something in the floatTHead internals but really have had no time to find out.

[mkoryak]

hello fellow cat avatar,
there is a chance that this plugin no longer supports the latest version of datatables becaused they changed their event api. The last version i tested it on was datatables 1.9.

There should be an event triggered on sort by datatables on the table instance. this plugin listens to that that event and reflows itself:

https://github.com/mkoryak/floatThead/blob/master/jquery.floatThead.js#L749

either the event no longer exists or my impl of isDataTables() is no longer working.

I also dont have time to build out a whole datatable install just to test this, so maybe we can meet half way - you provide the jsfiddle with your bug, and ill fix it. Ill create a separate issue for this

meet me here:
#158