From 47676edb13da39969d7117548149323c4b0b776c Mon Sep 17 00:00:00 2001
From: Boki <boki@stare.gg>
Date: Wed, 18 Jun 2025 08:31:53 -0400
Subject: [PATCH] work on data-table

---
 .../src/components/ui/DataTable/DataTable.tsx | 70 +++++++++++++++++--
 .../exchanges/components/ExchangesTable.tsx   | 24 +++----
 2 files changed, 74 insertions(+), 20 deletions(-)

diff --git a/apps/web-app/src/components/ui/DataTable/DataTable.tsx b/apps/web-app/src/components/ui/DataTable/DataTable.tsx
index fa03ec7..1811074 100644
--- a/apps/web-app/src/components/ui/DataTable/DataTable.tsx
+++ b/apps/web-app/src/components/ui/DataTable/DataTable.tsx
@@ -10,9 +10,56 @@ import {
   SortingState,
   useReactTable,
 } from '@tanstack/react-table';
-import { useState } from 'react';
+import { useState, useRef, useEffect } from 'react';
 import { TableVirtuoso } from 'react-virtuoso';
 
+// Tooltip wrapper for cells that might overflow
+function CellWithTooltip({ children, className }: { children: React.ReactNode; className?: string }) {
+  const [showTooltip, setShowTooltip] = useState(false);
+  const [tooltipContent, setTooltipContent] = useState('');
+  const cellRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const element = cellRef.current;
+    if (element) {
+      // Check if content is overflowing
+      const isOverflowing = element.scrollWidth > element.clientWidth;
+      if (isOverflowing) {
+        setTooltipContent(element.textContent || '');
+      }
+    }
+  }, [children]);
+
+  const handleMouseEnter = () => {
+    const element = cellRef.current;
+    if (element && element.scrollWidth > element.clientWidth) {
+      setShowTooltip(true);
+    }
+  };
+
+  const handleMouseLeave = () => {
+    setShowTooltip(false);
+  };
+
+  return (
+    <div className="relative">
+      <div
+        ref={cellRef}
+        className={className}
+        onMouseEnter={handleMouseEnter}
+        onMouseLeave={handleMouseLeave}
+      >
+        {children}
+      </div>
+      {showTooltip && tooltipContent && (
+        <div className="absolute z-50 px-2 py-1 bg-gray-900 text-white text-xs rounded shadow-lg whitespace-nowrap -top-8 left-0 max-w-xs">
+          {tooltipContent}
+        </div>
+      )}
+    </div>
+  );
+}
+
 interface DataTableProps<T> {
   data: T[];
   columns: ColumnDef<T>[];
@@ -49,6 +96,10 @@ export function DataTable<T>({
     getRowCanExpand,
     enableColumnResizing: true,
     columnResizeMode: 'onChange',
+    getCenterTotalSize: () => {
+      // Force table to use full width
+      return '100%';
+    },
   });
 
   if (loading) {
@@ -82,6 +133,7 @@ export function DataTable<T>({
             style={{
               ...style,
               width: '100%',
+              tableLayout: 'fixed',
             }}
             className="bg-background"
           />
@@ -112,11 +164,15 @@ export function DataTable<T>({
                 <td
                   key={cell.id}
                   className="px-3 py-2 text-sm text-text-primary"
-                  style={{ width: cell.column.getSize() }}
+                  style={{ 
+                    width: `${cell.column.getSize()}px`,
+                    minWidth: `${cell.column.getSize()}px`,
+                    maxWidth: `${cell.column.getSize()}px`,
+                  }}
                 >
-                  <div className="truncate">
+                  <CellWithTooltip className="truncate overflow-hidden text-ellipsis whitespace-nowrap">
                     {flexRender(cell.column.columnDef.cell, cell.getContext())}
-                  </div>
+                  </CellWithTooltip>
                 </td>
               ))}
             </tr>
@@ -134,7 +190,11 @@ export function DataTable<T>({
                   'relative px-3 py-2 text-xs font-medium text-text-secondary uppercase tracking-wider text-left',
                   header.column.getCanSort() && 'cursor-pointer select-none hover:text-text-primary'
                 )}
-                style={{ width: header.getSize() }}
+                style={{ 
+                  width: `${header.getSize()}px`,
+                  minWidth: `${header.getSize()}px`,
+                  maxWidth: `${header.getSize()}px`,
+                }}
                 onClick={header.column.getToggleSortingHandler()}
               >
                 {header.isPlaceholder ? null : (
diff --git a/apps/web-app/src/features/exchanges/components/ExchangesTable.tsx b/apps/web-app/src/features/exchanges/components/ExchangesTable.tsx
index 1380f79..a825ea9 100644
--- a/apps/web-app/src/features/exchanges/components/ExchangesTable.tsx
+++ b/apps/web-app/src/features/exchanges/components/ExchangesTable.tsx
@@ -101,7 +101,7 @@ export function ExchangesTable() {
         accessorKey: 'id',
         size: 80,
         cell: ({ getValue }) => (
-          <span className="font-mono text-primary-400 text-xs">
+          <span className="font-mono text-primary-400 text-xs block truncate">
             {getValue() as string}
           </span>
         ),
@@ -112,7 +112,7 @@ export function ExchangesTable() {
         accessorKey: 'code',
         size: 100,
         cell: ({ getValue }) => (
-          <span className="font-mono text-text-primary text-sm font-medium">
+          <span className="font-mono text-text-primary text-sm font-medium block truncate">
             {getValue() as string}
           </span>
         ),
@@ -130,7 +130,6 @@ export function ExchangesTable() {
             return (
               <input
                 type="text"
-                style={{ width: cell.column.getSize() }}
                 value={editValue}
                 onChange={e => setEditValue(e.target.value)}
                 onBlur={() => handleCellEdit(row.original.id, 'name', editValue)}
@@ -150,11 +149,12 @@ export function ExchangesTable() {
 
           return (
             <div
-              className="cursor-pointer hover:bg-surface-secondary rounded px-2 py-1 transition-colors text-sm"
+              className="cursor-pointer hover:bg-surface-secondary rounded px-2 py-1 transition-colors text-sm truncate overflow-hidden text-ellipsis whitespace-nowrap"
               onClick={() => {
                 setEditingCell({ id: row.original.id, field: 'name' });
                 setEditValue(getValue() as string);
               }}
+              title={getValue() as string}
             >
               {getValue() as string}
             </div>
@@ -167,7 +167,7 @@ export function ExchangesTable() {
         accessorKey: 'country',
         size: 80,
         cell: ({ getValue }) => (
-          <span className="text-text-secondary text-sm">{getValue() as string}</span>
+          <span className="text-text-secondary text-sm block truncate">{getValue() as string}</span>
         ),
       },
       {
@@ -175,11 +175,8 @@ export function ExchangesTable() {
         header: 'Currency',
         accessorKey: 'currency',
         size: 80,
-        cell: ({ getValue, cell }) => (
-          <span
-            className="font-mono text-text-secondary text-sm"
-            style={{ width: cell.column.getSize() }}
-          >
+        cell: ({ getValue }) => (
+          <span className="font-mono text-text-secondary text-sm block truncate">
             {getValue() as string}
           </span>
         ),
@@ -189,13 +186,10 @@ export function ExchangesTable() {
         header: 'Active',
         accessorKey: 'active',
         size: 80,
-        cell: ({ getValue, row, cell }) => {
+        cell: ({ getValue, row }) => {
           const isActive = getValue() as boolean;
           return (
-            <label
-              className="relative inline-flex items-center cursor-pointer"
-              style={{ width: cell.column.getSize() }}
-            >
+            <label className="relative inline-flex items-center cursor-pointer">
               <input
                 type="checkbox"
                 checked={isActive}