Add Option To "Freeze" Headers (ala Excel)

[nickdevore]

I'd like to add an optional setting that would use the css position: sticky style to make a table's headers flow with the scroll. This style also needs a top: n px; value to go with. Should I simply hard code something like 3px or should I make that part of the option as well?

MDN Documentation

It looks like it is supported now on enough browsers that it shouldn't be an issue

[jehhynes]

Seems like this should be part of your application's CSS:

.griddly table tr.columnHeaders th {
position: sticky;
top: 0px;
z-index: 999;
}

An advantage to doing it this way is you can add customizations easily like media queries to make it responsive or making the inline filters sticky also (for this to work, the inline filters would have to be changed to use th instead of td):

.griddly table tr.griddly-filters-inline th {
position: sticky;
top: 40px;
z-index: 999;
}

[nickdevore]

That's true. And if this isn't something you think would be used, then I'll drop it, but it seems like it would be used by others?

I like your idea of using local css to customize it, so perhaps I'd add a GriddlySetting boolean property of FreezeHeaders or StickyHeaders that would use a predefined class to add the necessary styles. Additionally, I'd provide a StickyHeadersClassName property that would let you override the class name so you could do some customizations.

Too much?

[jehhynes]

I'd be interested in what @programcsharp thinks about this. Seems like griddly is supposed to be mainly a functional component that leaves the look-and-feel implementation up to the user. In that vein, I'd rather write an article in the help doc or a demo showing how to do this, rather then creating a setting.