[grid] Allow sticky columns

[probert94]

Description

It is currently possible to have frozen columns, which will always stay on their place. This works well, if the frozen columns are the first columns in the grid, but it does not work that well, if the frozen columns are in the middle of the grid. For those columns, using position: sticky would in most cases be the better option.

Example:

Frozen:

Sticky:

Notes:

I played around with sticky positioning using the developer-tools and it seems like it is enough to set the following css-properties:

• position: sticky
• left: "0px" (replace 0px with the total width off all previous, sticky columns)
• z-index: 2 (same as for frozen columns)

[web-padawan]

Unfortunately, position: sticky is not supported by IE11 so that will likely need a fallback. If you have any idea how to implement it, feel free to add your notes or submit a PR.

[probert94]

@web-padawan good point, I did not know about that. A possible fallback would be to use the same logic as frozen, but freeze the column only if it is at the start/end of the container. Of course it would need to take into account other sticky columns in the table.

The data-table in Angular Material has support for sticky columns and in IE11 they just don't stick and behave like normal columns. I guess that's a valid option too.

[probert94]

@web-padawan now that IE11 isn't supported anymore, it would probably be possible to replace the frozen behavior with a sticky behavior. What do you think?

[jouni]

With position: sticky, we would need to set the offset (left) of each column separately, as there could be other frozen columns preceding that take up space.