feedback can go here

[mkoryak]

There is some stuff in here that I want to eventually do.

simplify options object keys

i cant remember what some of the options are called. make them simpler and bump major version

Data attributes and plugin init

I am going to add the ability to initialize the plugin via data attributes

When using data attributes it would make sense to be able to init the plugin on when using overflow scrolling like this:

<div style='overflow:auto; height:100px' data-provide='floatThead'>
   <table>.... </table>
</div>

which would be the equivalent to this (in the current version):

$('table').floatThead(scrollContainer: function($table){ return $table.closest('div'); })

except that I am thinking that it makes sense to allow you to run the floatThead plugin on non-table elements, and doing so will make the plugin assume that this is the scrollContainer element. It will then find the first table element within that DOM element and initialize it with overflow scrolling.

Right now I throw an error if you run the plugin on non-table elements.

The alternative would be to support this kind of syntax:

<div style='overflow:auto; height:100px' id='my-container'>
   <table data-provide='floatThead' data-fth-scroll-container='#my-container'>....         </table>
</div>

Doing this will not introduce any 'breaking' changes but its not quite as nice.

[Grey2k]

I tested your plugin on my project - its great work,

so, i use it with datatable and for new features will be great if you can add container option which will be on top of thead when scrolling down , for example table filters, pagination and etc. specifid by jquery selector during to initialisation , sry my bad english =)

good luck and thanx =)

[mkoryak]

Good idea - I have wanted to implement this a while ago and forgot about it. I am wondering how the width of this container should be set. It should probably be the width of the table and allow the programmer to optionally override it.

By the way, if you know russian you can use that. I can read it, but not write in it ;)

[Grey2k]

im fine in english , but some grammar problems =) forget it ,
so yes - you can add $(container).width() and height() by default , and provide options to averride it if needed.

[eloyesp]

Right now I throw an error if you run the plugin on non-table elements.
Doing this will not introduce any 'breaking' changes but its not quite as nice.

I don't think that adding a feature using syntax that used to raise errors is a breaking change. So data-provide='floatThead' on a div is just right.

I will define an optional bootstrap 3 css style sheet that will make floatThead play nicely with bootstrap3.
Mostly just making sure that the floated head has correct borders etc.

I'm having such an issue, but as bootstrap uses variables I don't think that you can fix that with a stylesheet, I'm trying to add classes to the divs to have proper styles. Then an example css could be provided. As bootstrap uses less it will make sense to use less and the same variable names.

Lazy init on mouseover, sounds as a great idea, it could also use a timer.

I think that coffeescript is the best, so 👍 on that.

[mkoryak]

@eloyesp You are right, going the other way (throwing error where there wasn't one) would be a breaking change.

as far as bootstrap goes, It didnt take as much css as I had thought. I have a demo page up: http://mkoryak.github.io/floatThead/examples/bootstrap3/

I need to start moving on 1.3 - and I will soon since I found a way to work these same requirements into my day job's use of floatThead ;)

[billsaysthis]

What does "Better support for widgetizing multiple tables on a single page" mean? Is there an issue now with having two? Because I am seeing one.

[mkoryak]

I had issues when there were 3 or more. I think it had to do with how each of them slightly changed the width of the page on reflow and the last one in the series would get messed up. What are you seeing?

[billsaysthis]

With 1.2.4 and implementing the same multi-render handling as described in the other thread I got this working with two and three on a page, so hopefully not a problem any longer.

[Stenitel]

Hey -can internal links be made to work? Right now, they scroll to UNDERNEATH the non-movable header, which is not that useful (I guess the browser thinks it's scrolling to the right place, "unaware" that the header is not moving and is overlapping). I've been thinking about ways to intercept the link and add the height of the header row so that it will scroll to the correct position but i'm not sure if it can be done...?

[mkoryak]

you mean anchor links like href='#foo' ?
Those cannot be made to work without some javascript. Bootstrap for example solves this problem with their scrollspy plugin by letting you specify an offset for the scroll targets.

[Stenitel]

Yes -guess I'll try bootstrap

Sent from my iPhone

On Apr 2, 2014, at 3:57 PM, Misha Koryak notifications@github.com wrote:

you mean anchor links like href='#foo' ?
Those cannot be made to work without some javascript. Bootstrap for example solves this problem with their scrollspy plugin by letting you specify an offset for the scroll targets.

—
Reply to this email directly or view it on GitHub.

[kenny-evitt]

What about floating row headers as well as column headers?

[andri]

One thing I would look into is to support scripts like perfect-scrollbar and slimScroll. Its very common these days to use custom scrollbars specifically when using overflow scrolling as the native scrollbars take up space (while slimScroll appears over the content) and are hard to customise.

In general I think your script is on the right track.

[mkoryak]

@andri are the 2 scripts you mentioned the most popular ones? I havent used any, but would appreciate if you could point out which one I should look into supporting

[andri]

You could start with perfect-scrollbar as it supports vertical and horizontal scrolling. I think these are the most used ones. They are both active projects, perfect-scrollbar has almost 1500 stars here on github while slimScroll has about 800.

[mkoryak]

any chance you could create a jsfiddle with both perfect-scrollbar and this plugin?

Then ill pull it into the docsite as a test and have a starting point to work from

[andri]

Sure np .. jsfiddle is not working right now for me but I will try this later today.

[andri]

I made a CodePen if that works for you, if not I can make a JSFiddle when I get on another WiFi, looks like the one I am on right now is blocking JSFiddle :/

http://codepen.io/anon/pen/galfh

[mkoryak]

Still open to feedback. I know this ticket is almost a year old and 1.3.0 isnt out yet, but it will happen as soon as I have enough breaking changes that I really want to add.

[shindig]

Would like so see an option that adds a class to the body when one or more table headers are fixed (active) and in view, and removed when it is not in view. This would allow elements outside the context of the table to react (e.g: the body background becomes a different color). The can be halfway accomplished now... that is, you can determine when a table header becomes fixed by searching for the existence of class changes when it becomes active (size-row), however, these classes are not removed when the table is scrolled out of view.

[janbrus]

To get the plugin to handle predefined table witdhs in percent or pixels would be highly appreciated.

[mkoryak]

@janbrus I might be wrong, but you can configure custom widths if you included your own <colgroup> in the table with col tags that specify the widths:

<table>
<colgroup>
<col style='width:30%'/>
<col style='width:70%'/>
</colgroup>
<thead>
<tr><th>bar</th><th>foo</th></tr>
</thead>
....
</table>

The only caveat is that your widths are not guaranteed if the cell content does not fit into them (as usual with tables)

[mkoryak]

@andri I added perfect-scrollbar support. its released as of 1.2.11. here is a demo:
http://mkoryak.github.io/floatThead/examples/perfect-scrollbar/

[ccjmne]

Great job - really!
I'd love to be able to have my table being dynamically set a given class whenever the header is "actively" fixed.
I mean: when using window scrolling for example, having that custom class being added to the container div as soon and as long as its css property top is set to 0px (<scrollingTop>px to be pedantic).
Would be a nice way to add a lil' shadow just underneath my header when it's hovering over some rows.

[mkoryak]

Thanks,
I've heard this request before and I think it makes sense. I think ill set it up to fire an event on the table when the header is un/floated, that way you can do whatever you want based on those events.

I would have done this sooner, but there is some complexity there because based on useAbsolutePositoning the header is sometimes not actually unfloated back into the table, it just looks like it is. anyway, I have all the information to do it.

#165

[ccjmne]

Oh yeah, that'll be just fine, if not better. Thanks 👍

[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.