From 2ecfbbf284f7e58b3b94560de715d69c3d823654 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Sat, 17 Jan 2026 21:26:28 +0200
Subject: [PATCH] feat(sql_console): improve fit & solve build error

---
 .../widgets/collections/table/tabulator.tsx   | 24 +++++++++++--------
 apps/client/src/widgets/sql_table_schemas.css | 11 +--------
 .../src/widgets/type_widgets/SqlConsole.css   |  8 +++++--
 3 files changed, 21 insertions(+), 22 deletions(-)

diff --git a/apps/client/src/widgets/collections/table/tabulator.tsx b/apps/client/src/widgets/collections/table/tabulator.tsx
index 31fb8d4f85..d908104cec 100644
--- a/apps/client/src/widgets/collections/table/tabulator.tsx
+++ b/apps/client/src/widgets/collections/table/tabulator.tsx
@@ -1,18 +1,20 @@
-import { useContext, useEffect, useLayoutEffect, useRef } from "preact/hooks";
-import { EventCallBackMethods, Module, Options, Tabulator as VanillaTabulator } from "tabulator-tables";
 import "tabulator-tables/dist/css/tabulator.css";
 import "../../../../src/stylesheets/table.css";
-import { ParentComponent, renderReactWidget } from "../../react/react_utils";
-import { JSX } from "preact/jsx-runtime";
+
 import { isValidElement, RefObject } from "preact";
+import { useContext, useEffect, useLayoutEffect, useRef } from "preact/hooks";
+import { JSX } from "preact/jsx-runtime";
+import { EventCallBackMethods, Module, Options, Tabulator as VanillaTabulator } from "tabulator-tables";
+
+import { ParentComponent, renderReactWidget } from "../../react/react_utils";
 
 interface TableProps<T> extends Omit<Options, "data" | "footerElement" | "index"> {
-    tabulatorRef: RefObject<VanillaTabulator>;
+    tabulatorRef?: RefObject<VanillaTabulator>;
     className?: string;
     data?: T[];
     modules?: (new (table: VanillaTabulator) => Module)[];
     events?: Partial<EventCallBackMethods>;
-    index: keyof T;
+    index?: keyof T;
     footerElement?: string | HTMLElement | JSX.Element;
     onReady?: () => void;
 }
@@ -43,7 +45,9 @@ export default function Tabulator<T>({ className, columns, data, modules, tabula
 
         tabulator.on("tableBuilt", () => {
             tabulatorRef.current = tabulator;
-            externalTabulatorRef.current = tabulator;
+            if (externalTabulatorRef) {
+                externalTabulatorRef.current = tabulator;
+            }
             onReady?.();
         });
 
@@ -62,12 +66,12 @@ export default function Tabulator<T>({ className, columns, data, modules, tabula
             for (const [ eventName, handler ] of Object.entries(events)) {
                 tabulator.off(eventName as keyof EventCallBackMethods, handler);
             }
-        }
+        };
     }, Object.values(events ?? {}));
 
     // Change in data.
-    useEffect(() => { tabulatorRef.current?.setData(data) }, [ data ]);
-    useEffect(() => { columns && tabulatorRef.current?.setColumns(columns)}, [ data]);
+    useEffect(() => { tabulatorRef.current?.setData(data); }, [ data ]);
+    useEffect(() => { columns && tabulatorRef.current?.setColumns(columns); }, [ data ]);
 
     return (
         <div ref={containerRef} className={className} />
diff --git a/apps/client/src/widgets/sql_table_schemas.css b/apps/client/src/widgets/sql_table_schemas.css
index d6c1c8f95e..1dcf3919fe 100644
--- a/apps/client/src/widgets/sql_table_schemas.css
+++ b/apps/client/src/widgets/sql_table_schemas.css
@@ -19,15 +19,6 @@
     cursor: pointer;
 }
 
-.sql-console-result-container {
-    width: 100%;
-    font-size: smaller;
-    margin-top: 10px;
-    flex-grow: 1;
-    overflow: auto;
-    min-height: 0;
-}
-
 .table-schema td {
     padding: 5px;
 }
@@ -40,4 +31,4 @@
 /* Data type */
 .dropdown .table-schema td:nth-child(2) {
     color: var(--muted-text-color);
-}
\ No newline at end of file
+}
diff --git a/apps/client/src/widgets/type_widgets/SqlConsole.css b/apps/client/src/widgets/type_widgets/SqlConsole.css
index 15272c2bc8..3f77b38f71 100644
--- a/apps/client/src/widgets/type_widgets/SqlConsole.css
+++ b/apps/client/src/widgets/type_widgets/SqlConsole.css
@@ -7,8 +7,12 @@
         overflow: auto;
     }
 
-    .sql-console-result-container td {
-        white-space: preserve;
+    .sql-console-result-container {
+        width: 100%;
+        font-size: smaller;
+        flex-grow: 1;
+        overflow: auto;
+        min-height: 0;
     }
 }