feat: better icons on table header + fix overflowing bug on viewer

Author: adiologydev

resources/js/components/postgres/postgres-table-data.tsx

@@ -5,11 +5,10 @@ import PostgresFilters from "@/components/postgres/postgres-filters";
 import PostgresSort from "@/components/postgres/postgres-sort";
 import { Skeleton } from "@/components/ui/skeleton";
 import { Table, TableBody, TableHead, TableHeader, TableRow } from "@/components/ui/table";
-import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
 import { DatabaseConnection } from "@/types/database";
 import { TableRecord } from "@/types/postgres";
-import { CodeIcon, KeyIcon, TableIcon } from "lucide-react";
-import { useState } from "react";
+import { CalendarIcon, CheckIcon, CodeIcon, HashIcon, KeyIcon, SigmaIcon, TableIcon, TextIcon } from "lucide-react";
+import { ReactElement, useState } from "react";
 import DeletePostgresRow from "./delete-postgres-row";
 import EditPostgresRow from "./edit-postgres-row";
 import PostgresTableRow from "./postgres-table-row";
@@ -102,15 +101,29 @@ const TableDataDisplay = ({
         }
     };
 
-    const PrimaryKeyIcon = ({ isPrimaryKey }: { isPrimaryKey: boolean | undefined }) => {
-        return isPrimaryKey ? (
-            <Tooltip>
-                <TooltipTrigger>
-                    <KeyIcon className="text-primary size-3 rotate-45" />
-                </TooltipTrigger>
-                <TooltipContent>Primary Key</TooltipContent>
-            </Tooltip>
-        ) : null;
+    const getColumnIcon = (column: ColumnData) => {
+        const icons: ReactElement[] = [];
+        if (column.is_primary_key) {
+            icons.push(<KeyIcon className="text-primary size-3 rotate-45" />);
+        }
+        if (/^(text|character|varchar|char|citext)/.test(column.data_type)) {
+            icons.push(<TextIcon className="text-primary size-3" />);
+        }
+        if (/^(integer|bigint|smallint|numeric|decimal|float|double)/.test(column.data_type)) {
+            icons.push(<SigmaIcon className="text-primary size-3" />);
+        }
+        if (/^(boolean|bool)/.test(column.data_type)) {
+            icons.push(<CheckIcon className="text-primary size-3" />);
+        }
+        if (/^(date|time|timestamp|interval)/.test(column.data_type)) {
+            icons.push(<CalendarIcon className="text-primary size-3" />);
+        } else if (/^(json|jsonb)/.test(column.data_type)) {
+            icons.push(<CodeIcon className="text-primary size-3" />);
+        } else if (/^(uuid|uuid-ossp)/.test(column.data_type)) {
+            icons.push(<HashIcon className="text-primary size-3" />);
+        }
+
+        return icons;
     };
 
     return (
@@ -149,7 +162,7 @@ const TableDataDisplay = ({
                                     {columns.map((column, index) => (
                                         <TableHead key={index} className="h-10">
                                             <div className="flex items-center gap-1 align-middle">
-                                                <PrimaryKeyIcon isPrimaryKey={column.is_primary_key} />
+                                                {getColumnIcon(column)}
                                                 {column.column_name}
                                                 <span className="font-mono text-xs text-gray-500">({column.data_type})</span>
                                             </div>

resources/js/components/postgres/postgres-table-row.tsx

@@ -16,7 +16,7 @@ const PostgresTableRow = ({ row, columns, rowIndex, onEdit, onDelete }: Postgres
             <ContextMenuTrigger className="w-full" asChild>
                 <TableRow key={rowIndex} className="w-full">
                     {columns.map((column, colIndex) => (
-                        <TableCell key={colIndex} className="h-10">
+                        <TableCell key={colIndex} className="hover:border-primary/50 h-10 truncate hover:border">
                             {row[column.column_name] !== null ? String(row[column.column_name]) : <span className="text-gray-400">NULL</span>}
                         </TableCell>
                     ))}

resources/js/components/postgres/postgres-table-view.tsx

@@ -1,6 +1,5 @@
 import TableDataDisplay from "@/components/postgres/postgres-table-data";
 import { DatabaseConnection } from "@/types/database";
-import { ScrollArea } from "../ui/scroll-area";
 
 /**
  * Component for displaying table data in regular table view mode
@@ -46,23 +45,21 @@ const TableView = ({
     }
 
     return (
-        <ScrollArea className="max-w-full">
-            <TableDataDisplay
-                selectedTable={selectedTable}
-                loadingTable={loadingTable}
-                columns={columns}
-                tableData={tableData}
-                pagination={pagination}
-                setPagination={setPagination}
-                connectionId={connectionId}
-                database={database}
-                schema={schema}
-                onRowAdded={refreshTableData}
-                connection={connection}
-                refreshTableData={refreshTableData}
-                isQueryResult={false}
-            />
-        </ScrollArea>
+        <TableDataDisplay
+            selectedTable={selectedTable}
+            loadingTable={loadingTable}
+            columns={columns}
+            tableData={tableData}
+            pagination={pagination}
+            setPagination={setPagination}
+            connectionId={connectionId}
+            database={database}
+            schema={schema}
+            onRowAdded={refreshTableData}
+            connection={connection}
+            refreshTableData={refreshTableData}
+            isQueryResult={false}
+        />
     );
 };
 

resources/js/layouts/app/app-sidebar-layout.tsx

@@ -14,9 +14,9 @@ export default function AppSidebarLayout({ children, breadcrumbs = [], actions }
     return (
         <AppShell variant="sidebar">
             <AppSidebar />
-            <AppContent variant="sidebar">
+            <AppContent variant="sidebar" className="overflow-hidden">
                 <AppSidebarHeader breadcrumbs={breadcrumbs} actions={actions} />
-                {children}
+                <div className="mx-auto flex w-full flex-1 flex-col">{children}</div>
             </AppContent>
         </AppShell>
     );