flux:table -> add support for left/right sticky columns

[lucasromanojf]

Hello,

I'd like to suggest adding support for left/right sticky columns to flux:table component.

[MiguelLaforest]

Sticky headers would be nice too!

[jeffchown]

@MiguelLaforest This is doable via Tailwind, see #351 (comment)

[MiguelLaforest]

I've spent too much time trying to make it work with tailwind only. Unfortunately, the problem is the height of the elements and where the overflow-scroll is applied. The flux the table is already wrapped in 2 divs, but the styling in applied on the table, so fairly difficult to style the wrapping divs and you would have to wrap the flux:table in another div to add an arbitrary height for the overflow. Most of the examples, like those in the other discussion or the codepen below, wrap their table in two divs and apply h-screen. I made it work pretty well with a little bit of js, in the past, with custom component, doesn't work with Flux (or at least I can't put more time trying to make it work).

While writing this, I realize that my use case is may be a little different as I don't want the table to be scrollable, I want to scroll the page normally and when the top of the page (including the header if it's there) reaches the table, the head sticks. The horizontal overflow is automatically set when the table is larger than the page so it might help.

tldr: css is hard, i'd prefer not publishing the component if possible and the example don't necessarily apply well with flux/my use case

...or I'm dumb

[jeffchown]

@lucasromanojf While it's not a 'built-in' to Flux solution, this may help: https://codepen.io/stephanrusu/pen/podLzWj

[lucasromanojf]

Hey, thanks for this, but for using sticky columns we have to use separate borders, and this makes flux table styling not good, demanding manual re-styling.

Would be good to have it built-in while keeping the styling intact.

[jeffchown]

You're welcome, @lucasromanojf

Took a shot :)