search

Addepar / ember-table

https://opensource.addepar.com/ember-table/
Other
1.69k stars 352 forks source link

Custom sticky header/footer offsets #834

Open billdami opened 4 years ago

billdami commented 4 years ago

In some layouts, there may be fixed page elements (e.g. a fixed nav bar) above or below the table, and when scrolling the table, the sticky column headers/footers are hidden beneath them, because it appears their sticky offset is hardcoded to 0:

https://github.com/Addepar/ember-table/blob/e4379ed3b3c35d66787fb17eb00b3a9cc22f0d61/addon/-private/sticky/table-sticky-polyfill.js#L80

I think it would be nice to expose additional arguments on the <EmberTable> component, such as headerStickyOffset, and footerStickyOffset, that are passed into setupTableStickyPolyfill() which allow specifying a number that is base pixel value to offset their sticky positioning by. (Additionally, if changing these values after-render could re-adjust the sticky setup, that would be ideal, though probably not critical.)

mixonic commented 4 years ago

@billdami can you provide a gif or a diagram or something? I'm not sure what the intent is here- The ember-table is scrollable, but also the table viewport is being scrolled behind nav elements?

billdami commented 4 years ago

@mixonic sure ill see if I can create one from an existing project w/this issue, gimme a few.

billdami commented 4 years ago

@mixonic here is the issue demonstrated in one of our apps:

https://drive.google.com/file/d/1DZzWRaqArfTzebrvaa94wazHhkiYzDXa/view?usp=sharing

So in this scenario, the <body> itself is the scrollable container, and there is a position: fixed element above the table. When the body is scrolled down, the column headers become sticky, but with an offset of 0, so they are sticky at the top of the <body>, underneath the fixed nav bar element.

bantic commented 4 years ago

@billdami Can you make that drive link public so that other can take a look, too?

billdami commented 4 years ago

@bantic @mixonic my bad, I thought I made that link public, this should be accessible now:

https://drive.google.com/file/d/1DZzWRaqArfTzebrvaa94wazHhkiYzDXa/view?usp=sharing