Sticky header row

[julian-scholz]

It would be very interesting if you could specify in the global table settings that the header rows can be sticky. Especially with larger data sets or more data sets per page, you otherwise have to constantly scroll upwards if you have many columns in a table.

[uap-universe]

If you mean by "sticky header" just adding position: sticky to header elements on demand, it looks like this could be done for the next milestone.

But maybe you try that out first. You can add the following to your stylesheet

angular2-smart-table thead th {
  position: sticky;
  top: 0;
}

and see if it has the desired effect. I guess it is a bit more complicated than that in the smart tables, because they have two header rows (the filters are also header elements).

You can also try to directly style the thead element. But rumors are that this does not (or did not) work in Chrome.

[julian-scholz]

Exactly, that's roughly how I've already implemented it. Nevertheless, I would find it quite helpful if this option could be configured directly in the settings.
Especially if you also want to make the first columns (in my case the edit column) sticky, you also have to configure the respective z-indexes. Personally, I would find it cool if you could configure the entire column headings on the one hand and individual columns on the left-hand side to be sticky on the other.

[uap-universe]

Making the action column sticky is a bit more tedious and needs more careful testing, because 1) there could be a multi-select column before the action column and 2) you can choose the action column to be right instead of left.

But for the next milestone I will add the sticky flag for the table head.

[uap-universe]

Sorry @juulian98 - I have to remove this from the next milestone for now.

Sticky table stuff is still a complete mess... It simply does not work as expected (see the following screenshot).

You could fix the background issue by giving the cells an explicit background. But how can I know which background this is? What's with theming? Custom styles etc.?

Also I do not have a clue why the borders are disappearing when the header becomes sticky.

Apart from that, for sticky headers to work in a scrollable container, the scrollable container must be the direct parent of the table. So I had to hack a height attribute into this thing, because it is not sufficient to wrap a div arround with some height and overflow: auto.

I uploaded the current draft. Any ideas on how to make this thing work are more than welcome :)