ui: revert sticky-kit changes

packages/ui-default/components/table/StyledTable.js

@@ -1,11 +1,14 @@
+import 'sticky-kit/dist/sticky-kit';
+
 import $ from 'jquery';
+import _ from 'lodash';
 import responsiveCutoff from 'vj/breakpoints.json';
 import DOMAttachedObject from 'vj/components/DOMAttachedObject';
 import { isBelow } from 'vj/utils/mediaQuery';
 
 const navHeight = isBelow(responsiveCutoff.mobile)
   ? 0
-  : ($('.nav').height() || 0);
+  : $('.nav').height();
 
 export default class StyledTable extends DOMAttachedObject {
   static DOMAttachKey = 'vjStyledTableInstance';
@@ -13,63 +16,36 @@ export default class StyledTable extends DOMAttachedObject {
   static DOMAttachSelector = '.data-table';
 
   constructor($dom) {
-    const $body = $dom.closest('.section__body');
-    if ($body.length === 0) {
+    if ($dom.closest('.section__body').length === 0) {
       super(null);
       return;
     }
 
     super($dom);
 
-    // Scroll container only wraps the data table
     this.$container = $('<div>').addClass('section__table-container');
     this.$container.insertBefore(this.$dom);
-    this.$container.append(this.$dom);
 
-    if ($body[0].style.overflow === 'hidden') return;
-    // Sentinel to detect when header becomes stuck
-    this.$sentinel = $('<div>').css({ height: 0, margin: 0, padding: 0 });
-
-    // Header sits outside the scroll container so sticky works against viewport
     this.$header = $('<table>');
     this.$header.attr('class', `${this.$dom.attr('class')} section__table-header`);
-    this.$header.css({
-      position: 'sticky',
-      top: `${navHeight}px`,
-    });
 
-    this.$sentinel.insertBefore(this.$container);
-    this.$header.insertBefore(this.$container);
+    this.$container
+      .append(this.$header)
+      .append(this.$dom);
 
     this.$header.empty();
     this.$dom.children('colgroup').clone().appendTo(this.$header);
     this.$dom.children('thead').appendTo(this.$header);
 
-    // Sync horizontal scroll between header and body
-    this.$container.on('scroll', () => {
-      this.$header.css('transform', `translateX(-${this.$container.scrollLeft()}px)`);
-    });
-
-    // Detect sticky state via IntersectionObserver
-    const header = this.$header[0];
-    const sentinel = this.$sentinel[0];
-    if (window.IntersectionObserver) {
-      this._observer = new IntersectionObserver(
-        ([entry]) => {
-          if (entry.isIntersecting) {
-            header.classList.remove('is_stuck');
-          } else {
-            header.classList.add('is_stuck');
-          }
-        },
-        { threshold: [0], rootMargin: `-${navHeight}px 0px 0px 0px` },
-      );
-      this._observer.observe(sentinel);
-    }
+    const stickyOptions = {
+      parent: this.$container,
+      offset_top: navHeight,
+    };
+    _.defer(() => this.$header.stick_in_parent(stickyOptions));
   }
 
   detach() {
-    if (this._observer) this._observer.disconnect();
     super.detach();
+    this.$header.trigger('sticky_kit:detach');
   }
 }

packages/ui-default/components/table/table.page.styl

@@ -46,21 +46,22 @@
     font-size: rem($font-size-small)
 
 .section__table-container
+  overflow: hidden
   overflow-x: auto
 
 .section__table-header
   background: $table-header-bg-color
   box-shadow: $table-header-shadow
+  position: relative
   z-index: 100
-  overflow: hidden
   transition: box-shadow .2s linear
 
-  &.is_stuck
-    box-shadow: $table-header-shadow-floating
-
   thead > tr
     border-bottom: 0
 
+  &.is_stuck
+    box-shadow: $table-header-shadow-floating
+
 .section__table-container,
 .section__body
   & > .data-table