Fix showing JSON columns in Svelte Table (#541)

.changeset/famous-mayflies-attend.md

@@ -0,0 +1,6 @@
+---
+"@latitude-data/svelte": patch
+"@latitude-data/client": patch
+---
+
+Fix show JSON columns in Svelte table component

packages/client/core/src/theme/assets/latitude.css

@@ -3,18 +3,28 @@
 @tailwind utilities;
 
 @layer base {
+  /* Chrome, Safari and Opera */
+  .no-scrollbar::-webkit-scrollbar {
+    display: none;
+  }
+
+  .no-scrollbar {
+    -ms-overflow-style: none; /* IE and Edge */
+    scrollbar-width: none; /* Firefox */
+    overflow: -moz-scrollbars-none; /* Firefox */
+  }
   .custom-scrollbar {
     /** Make scrollbar to not take space **/
     overflow: overlay !important;
   }
   .custom-scrollbar::-webkit-scrollbar {
-    @apply lat-w-5 lat-h-5;
+    @apply lat-h-5 lat-w-5;
   }
 
   .custom-scrollbar::-webkit-scrollbar-thumb {
     @apply lat-bg-gray-400;
-    @apply lat-rounded-full lat-bg-clip-padding lat-border-solid;
-    @apply lat-border-transparent lat-border-[6px];
+    @apply lat-rounded-full lat-border-solid lat-bg-clip-padding;
+    @apply lat-border-[6px] lat-border-transparent;
   }
 
   .custom-scrollbar::-webkit-scrollbar-track {

packages/client/core/src/theme/ui/table/index.ts

@@ -43,7 +43,7 @@ function tableFooterCssClass({ className }: Props) {
 
 function tableCellCssClass({ className }: Props) {
   return cn(
-    'lat-p-2 lat-align-middle [&:has([role=checkbox])]:lat-pr-0 [&>[role=checkbox]]:lat-translate-y-[2px]',
+    'lat-p-2 lat-max-w-80 lat-overflow-x-auto no-scrollbar lat-align-middle [&:has([role=checkbox])]:lat-pr-0 [&>[role=checkbox]]:lat-translate-y-[2px]',
     className,
   )
 }

packages/client/svelte/src/lib/internal/ui/Table/Table.svelte

@@ -10,7 +10,10 @@
 
 <script lang="ts">
   import * as Table from '$lib/internal/ui/_table'
-  import QueryResult from '@latitude-data/query_result'
+  import QueryResult, {
+    type Field,
+    type QueryResultRow,
+  } from '@latitude-data/query_result'
   import { Card } from '$lib'
   import { createTable, Render, Subscribe } from 'svelte-headless-table'
   import { readable } from 'svelte/store'
@@ -26,11 +29,27 @@
   let className: $$Props['class'] = undefined
   export { className as class }
 
-  $: table = createTable(readable(data.toArray()))
+  /**
+   * This is very similar to QueryResult.toArray
+   * but please resists your sharp dry instintcs and
+   * leave this method here.
+   * We only want to stringify JSON columns in this case
+   */
+  function toArray(fields: Field[], result: QueryResult) {
+    return result.rows.map((row: unknown[]) =>
+      row.reduce((acc: Record<string, unknown>, value, i) => {
+        acc[fields[i]!.name] =
+          typeof value === 'object' ? JSON.stringify(value) : value
+        return acc
+      }, {} as QueryResultRow),
+    )
+  }
+
+  $: table = createTable(readable(toArray(data.fields, data)))
   $: columns = table.createColumns(
     data.fields.map((field) =>
-      table.column({ accessor: field.name, header: field.name })
-    )
+      table.column({ accessor: field.name, header: field.name }),
+    ),
   )
   $: ({ headerRows, pageRows, tableAttrs, tableBodyAttrs } =
     table.createViewModel(columns))