From 93269fe314743511aac3055733fc1d1324921e16 Mon Sep 17 00:00:00 2001
From: Jan Prochazka <jan.prochazka@gmail.com>
Date: Fri, 1 Jul 2022 08:00:21 +0200
Subject: [PATCH] perspectives: fixed table header

---
 .../src/perspectives/PerspectiveTable.svelte  | 45 ++++++++++++++++---
 1 file changed, 39 insertions(+), 6 deletions(-)

diff --git a/packages/web/src/perspectives/PerspectiveTable.svelte b/packages/web/src/perspectives/PerspectiveTable.svelte
index 1fede42cf..3296ab16a 100644
--- a/packages/web/src/perspectives/PerspectiveTable.svelte
+++ b/packages/web/src/perspectives/PerspectiveTable.svelte
@@ -8,11 +8,14 @@
   } from 'dbgate-datalib';
   import _, { range } from 'lodash';
   import { onMount } from 'svelte';
-  import { prop_dev } from 'svelte/internal';
+  import { prop_dev, tick } from 'svelte/internal';
 
   export let root: PerspectiveTreeNode;
   let dataRows;
   let domWrapper;
+  let domTableHead;
+  let domHeaderWrap;
+  let theadClone;
 
   async function loadLevelData(node: PerspectiveTreeNode, parentRows: any[]) {
     // const loadProps: PerspectiveDataLoadPropsWithNode[] = [];
@@ -72,19 +75,41 @@
     // }
   }
 
-  function handleScroll() {
-    const translate = 'translate(0,' + domWrapper.scrollTop + 'px)';
-    domWrapper.querySelector('thead').style.transform = translate;
+  async function createHeaderClone() {
+    if (!domTableHead || !domHeaderWrap) return;
+    await tick();
+
+    if (theadClone) {
+      theadClone.remove();
+      theadClone = null;
+    }
+    theadClone = domTableHead.cloneNode(true);
+    const sourceCells = domTableHead.querySelectorAll('th');
+    const targetCells = theadClone.querySelectorAll('th');
+    domHeaderWrap.appendChild(theadClone);
+    for (const [src, dst] of _.zip(sourceCells, targetCells)) {
+      // @ts-ignore
+      dst.style.width = `${src.getBoundingClientRect().width}px`;
+    }
   }
 
   $: loadData(root);
   $: display = root && dataRows ? new PerspectiveDisplay(root, dataRows) : null;
+
+  $: {
+    display;
+    domTableHead;
+    domHeaderWrap;
+    createHeaderClone();
+  }
 </script>
 
-<div class="wrapper" on:scroll={handleScroll} bind:this={domWrapper}>
+<div class="headerWrap" bind:this={domHeaderWrap} />
+
+<div class="wrapper" bind:this={domWrapper}>
   {#if display}
     <table>
-      <thead>
+      <thead bind:this={domTableHead}>
         {#each _.range(display.columnLevelCount) as columnLevel}
           <tr>
             {#each display.columns as column}
@@ -121,6 +146,14 @@
     display: flex;
   }
 
+  .headerWrap {
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 16px;
+    z-index: 100;
+  }
+
   table {
     /* position: absolute;
     left: 0;