fix(Table): fix sticky Table when no offset is given

dnbexperience · May 31, 2022 · 888564d · 888564d
1 parent d1da715
commit 888564d
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 5 deletions.
diff --git a/packages/dnb-eufemia/src/components/table/TableStickyHeader.tsx b/packages/dnb-eufemia/src/components/table/TableStickyHeader.tsx
@@ -52,7 +52,7 @@ export const useStickyHeader = ({
       let tdElem: HTMLTableCellElement
       let thHeight = 80
       let tdHeight = 64
-      let offsetTop = 0
+      let offsetTopPx = 0
 
       try {
         trElem = tableElem.querySelector(
@@ -61,13 +61,14 @@ export const useStickyHeader = ({
         thElem = getThElement(tableElem)
         tdElem = getTdElement(tableElem)
 
-        offsetTop = parseFloat(String(stickyOffset))
+        offsetTopPx = parseFloat(String(stickyOffset || '0'))
 
-        if (offsetTop > 0) {
+        if (offsetTopPx > 0) {
           if (String(stickyOffset).includes('em')) {
+            offsetTopPx = Math.round(offsetTopPx * 16)
             trElem.style.top = String(stickyOffset)
           } else {
-            trElem.style.top = `${offsetTop / 16}rem`
+            trElem.style.top = `${offsetTopPx / 16}rem`
           }
         }
 
@@ -81,7 +82,7 @@ export const useStickyHeader = ({
         stickyWarning(e)
       }
 
-      const marginTop = thHeight + tdHeight + offsetTop
+      const marginTop = thHeight + tdHeight + offsetTopPx
 
       intersectionObserver.current = new IntersectionObserver(
         (entries) => {

diff --git a/packages/dnb-eufemia/src/components/table/__tests__/TableStickyHeader.test.tsx b/packages/dnb-eufemia/src/components/table/__tests__/TableStickyHeader.test.tsx
@@ -88,6 +88,24 @@ describe('useStickyHeader', () => {
     expect(getTrClasses()).toEqual(['dnb-tr', 'sticky'])
   })
 
+  it('should use default stickyOffset when not given', () => {
+    render(
+      <Table sticky>
+        <BasicTable sticky />
+      </Table>
+    )
+
+    expect(screen.queryByRole('table').querySelector('tr').style.top).toBe(
+      ''
+    )
+    expect(window.IntersectionObserver).toHaveBeenCalledTimes(1)
+    expect(window.IntersectionObserver).toHaveBeenCalledWith(
+      expect.any(Function),
+      // Formula: thHeight + tdHeight + offsetTopPx = -(sum)px
+      { rootMargin: '-144px 0px 0px 0px' }
+    )
+  })
+
   it('should support stickyOffset', () => {
     const getTrElem = () => screen.queryByRole('table').querySelector('tr')
 
@@ -98,6 +116,12 @@ describe('useStickyHeader', () => {
     )
 
     expect(getTrElem().style.top).toEqual('4rem')
+    expect(window.IntersectionObserver).toHaveBeenCalledTimes(1)
+    expect(window.IntersectionObserver).toHaveBeenNthCalledWith(
+      1,
+      expect.any(Function),
+      { rootMargin: '-208px 0px 0px 0px' }
+    )
 
     // provide pixels
     rerender(
@@ -107,6 +131,12 @@ describe('useStickyHeader', () => {
     )
 
     expect(getTrElem().style.top).toEqual('4rem')
+    expect(window.IntersectionObserver).toHaveBeenCalledTimes(2)
+    expect(window.IntersectionObserver).toHaveBeenNthCalledWith(
+      2,
+      expect.any(Function),
+      { rootMargin: '-208px 0px 0px 0px' }
+    )
   })
 })