Use Tabulator for tables.

web/package-lock.json

@@ -15,7 +15,8 @@
         "bootstrap": "^5.3.3",
         "echarts": "^5.5.0",
         "fuse.js": "^7.0.0",
-        "svelte-echarts": "^1.0.0-rc1"
+        "svelte-echarts": "^1.0.0-rc1",
+        "tabulator-tables": "^6.2.1"
       },
       "devDependencies": {
         "@sveltejs/vite-plugin-svelte": "^3.0.2",
@@ -2118,6 +2119,11 @@
         }
       }
     },
+    "node_modules/tabulator-tables": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/tabulator-tables/-/tabulator-tables-6.2.1.tgz",
+      "integrity": "sha512-iCyLUzE9xEesEWqHDzNgShr6fpIIsRXnvTSDxiEti3sVbVYwlRt5HTBnXsl8bxY+4p64Rxxdlk9jT3voNLcIZQ=="
+    },
     "node_modules/to-regex-range": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
@@ -3860,6 +3866,11 @@
         "strip-indent": "^3.0.0"
       }
     },
+    "tabulator-tables": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/tabulator-tables/-/tabulator-tables-6.2.1.tgz",
+      "integrity": "sha512-iCyLUzE9xEesEWqHDzNgShr6fpIIsRXnvTSDxiEti3sVbVYwlRt5HTBnXsl8bxY+4p64Rxxdlk9jT3voNLcIZQ=="
+    },
     "to-regex-range": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",

web/package.json

@@ -28,6 +28,7 @@
     "bootstrap": "^5.3.3",
     "echarts": "^5.5.0",
     "fuse.js": "^7.0.0",
-    "svelte-echarts": "^1.0.0-rc1"
+    "svelte-echarts": "^1.0.0-rc1",
+    "tabulator-tables": "^6.2.1"
   }
 }

web/src/NodeWithTableView.svelte

@@ -2,6 +2,7 @@
   import { type NodeProps } from '@xyflow/svelte';
   import { Tabulator } from 'tabulator-tables';
   import LynxKiteNode from './LynxKiteNode.svelte';
+  import Table from './Table.svelte';
   type $$Props = NodeProps;
   export let data: $$Props['data'];
   const open = {};
@@ -13,24 +14,7 @@
     {#each Object.entries(data.view.dataframes) as [name, df]}
       {#if !single}<div class="df-head" on:click={() => open[name] = !open[name]}>{name}</div>{/if}
       {#if single || open[name]}
-      <table class="table table-striped">
-        <thead>
-          <tr>
-            {#each df.columns as column}
-              <th>{column}</th>
-            {/each}
-          </tr>
-        </thead>
-        <tbody>
-          {#each df.data as row}
-            <tr>
-              {#each row as cell}
-                <td><div class="text-truncate">{cell}</div></td>
-              {/each}
-            </tr>
-          {/each}
-        </tbody>
-      </table>
+        <Table columns={df.columns} data={df.data} />
       {/if}
     {/each}
     {#each Object.entries(data.view.others || {}) as [name, o]}

web/src/Table.svelte

@@ -0,0 +1,31 @@
+<script>
+  import {TabulatorFull as Tabulator} from 'tabulator-tables';
+  import {onMount} from 'svelte';
+
+  export let data, columns;
+
+  let tableComponent;
+  let tab;
+
+  onMount(() => {
+    console.log(data, columns);
+    // The rows in the data are arrays, but Tabulator expects objects.
+    const objs = [];
+    for (const row of data) {
+      const obj = {};
+      for (let i = 0; i < columns.length; i++) {
+        obj[columns[i]] = row[i];
+      }
+      objs.push(obj);
+    }
+    tab = new Tabulator(tableComponent, {
+      data: objs,
+      columns: columns.map(c => ({title: c, field: c, widthGrow: 1})),
+      height: '311px',
+      reactiveData: true,
+      layout: "fitColumns",
+    });
+  });
+</script>
+
+<div bind:this={tableComponent}></div>

web/src/app.scss

@@ -1,6 +1,7 @@
 // Import all of Bootstrap's CSS
 $form-select-indicator-color: oklch(90% 0.01 55);
 @import "bootstrap/scss/bootstrap";
+@import "tabulator-tables";
 :root {
   --bs-border-color: oklch(90% 0.01 55);
 }