d1s 0.2.1

package/src/components/table-view.jsx

@@ -0,0 +1,843 @@
+// components/table-view.jsx
+'use client';
+
+import React, {
+  useState,
+  useEffect,
+  useRef,
+  useCallback
+} from 'react';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow
+} from '@/components/ui/table';
+import { ScrollArea, ScrollBar } from '@/components/ui/scroll-area';
+import { Alert, AlertDescription } from '@/components/ui/alert';
+import { Checkbox } from '@/components/ui/checkbox';
+import { Loader2, AlertCircle } from 'lucide-react';
+import { useDatabase } from '@/context/database-context';
+import TableToolbar from './table-toolbar';
+import { EditableCell } from './editable-cell';
+import { EditableRow } from './editable-row';
+import DeleteRecordsDialog from './delete-records-dialog';
+import { DatabaseErrorDialog } from './table-error-dialog';
+import { useToast } from '@/hooks/use-toast';
+import { parseSQLError } from '@/lib/parse-sql-error';
+import { ResizableTable, ResizableHeader } from './resize-columns';
+import { SortableHeader, sortData } from './column-sorting';
+
+export function TableView({ tableName }) {
+  // Database context and utilities
+  const { 
+    executeQuery,
+    getCachedTable,
+    updateTableCache,
+    invalidateTable,
+    switchTable,
+    activeTable,
+    updateTableData
+  } = useDatabase();
+  const { toast } = useToast();
+
+  // Table state
+  const [data, setData] = useState(() => []);
+  const [schema, setSchema] = useState([]);
+  const [totalRows, setTotalRows] = useState(0);
+  const [isTableLoading, setIsTableLoading] = useState(true);
+  const [isSaving, setIsSaving] = useState(false);
+  const [error, setError] = useState(null);
+
+  // Edit states
+  const [editedCells, setEditedCells] = useState(new Map());
+  const [editedRows, setEditedRows] = useState(new Set());
+  const [newRecords, setNewRecords] = useState([]);
+
+  // Pagination state
+  const [currentPage, setCurrentPage] = useState(1);
+  const [rowsPerPage, setRowsPerPage] = useState(50);
+  const [totalPages, setTotalPages] = useState(1);
+
+  // Selection state
+  const [selectedRows, setSelectedRows] = useState(new Set());
+  const checkboxRef = useRef(null);
+
+  // Delete dialog state
+  const [showDeleteDialog, setShowDeleteDialog] = useState(false);
+  const [isDeleting, setIsDeleting] = useState(false);
+  const [deleteError, setDeleteError] = useState(null);
+
+  // Database error dialog state
+  const [showDatabaseError, setShowDatabaseError] = useState(false);
+  const [databaseError, setDatabaseError] = useState(null);
+
+  // Sorting state
+  const [sortConfigs, setSortConfigs] = useState({});
+
+  // Instead of reading from localStorage during initial render,
+  // we initialize with fallback values.
+  const [columnWidths, setColumnWidths] = useState({});
+  const [visibleColumns, setVisibleColumns] = useState([]);
+
+  // On mount (client only) load saved values from localStorage
+  useEffect(() => {
+    if (tableName && typeof window !== 'undefined') {
+      const savedWidths = localStorage.getItem(`table-widths-${tableName}`);
+      if (savedWidths) {
+        setColumnWidths(JSON.parse(savedWidths));
+      }
+      const savedColumns = localStorage.getItem(`table-columns-${tableName}`);
+      if (savedColumns) {
+        try {
+          setVisibleColumns(JSON.parse(savedColumns));
+        } catch (e) {
+          setVisibleColumns([]);
+        }
+      }
+    }
+  }, [tableName]);
+
+  // Load data with proper cache handling
+  const loadTableData = useCallback(async (forceFetch = false) => {
+    if (!tableName) return;
+  
+    // First check cache with correct page and limit
+    const cached = getCachedTable(tableName, currentPage, rowsPerPage);
+  
+    if (cached && !forceFetch) {
+      setData(cached.data);
+      setSchema(cached.schema);
+      setTotalRows(cached.meta.total);
+      setTotalPages(cached.meta.totalPages);
+      return;
+    }
+  
+    // Only show loading state for fresh fetches
+    setIsTableLoading(true);
+    setError(null);
+    setSelectedRows(new Set());
+  
+    try {
+      const result = await switchTable(tableName, {
+        page: currentPage,
+        limit: rowsPerPage,
+        forceFetch
+      });
+  
+      // If the returned meta doesn't have the correct page number, override it:
+      result.meta.page = currentPage;
+  
+      setData(Array.isArray(result.data) ? result.data : []);
+      setSchema(result.schema || []);
+      setTotalRows(result.meta.total);
+      setTotalPages(result.meta.totalPages);
+  
+      return true;
+    } catch (err) {
+      console.error('Error loading table data:', err);
+      setError(err.message || String(err));
+      toast({
+        variant: 'destructive',
+        title: 'Error',
+        description: `Failed to load table: ${err.message}`
+      });
+      throw err;
+    } finally {
+      setIsTableLoading(false);
+    }
+  }, [
+    tableName, 
+    currentPage, 
+    rowsPerPage, 
+    getCachedTable, 
+    switchTable, 
+    toast, 
+    visibleColumns.length
+  ]);  
+
+  // Handle column visibility
+  const handleColumnToggle = useCallback((columnName) => {
+    setVisibleColumns(prev => {
+      const newVisibleColumns = prev.includes(columnName)
+        ? prev.filter(col => col !== columnName)
+        : [...prev, columnName];
+      
+      localStorage.setItem(
+        `table-columns-${tableName}`,
+        JSON.stringify(newVisibleColumns)
+      );
+      
+      return newVisibleColumns;
+    });
+  }, [tableName]);
+
+  // Handle column resize
+  const handleColumnResize = useCallback((column, newWidth) => {
+    setColumnWidths(prev => {
+      const updated = { ...prev, [column]: newWidth };
+      localStorage.setItem(`table-widths-${tableName}`, JSON.stringify(updated));
+      return updated;
+    });
+  }, [tableName]);
+
+  // Handle refresh (explicit user action)
+  const handleRefresh = useCallback(async () => {
+    try {
+      setSelectedRows(new Set());
+      invalidateTable(tableName);
+      await loadTableData(true);
+
+      toast({
+        title: 'Success',
+        description: 'Table data refreshed'
+      });
+    } catch (error) {
+      console.error('Refresh failed:', error);
+      toast({
+        variant: 'destructive',
+        title: 'Refresh Failed',
+        description: error.message
+      });
+    }
+  }, [
+    loadTableData, 
+    invalidateTable, 
+    tableName, 
+    toast
+  ]);
+
+  // Handle sorting
+  const handleSort = useCallback((column, direction) => {
+    setSortConfigs(prev => ({
+      ...prev,
+      [column]: direction
+    }));
+    
+    const sortedData = sortData(data, column, direction);
+    setData(sortedData);
+
+    // Update cache with sorted data using the correct arguments:
+    // tableName, new data array, schema, and meta.
+    const currentCache = getCachedTable(tableName);
+    if (currentCache) {
+      updateTableCache(
+        tableName,
+        sortedData,
+        currentCache.schema,
+        { ...currentCache.meta, currentPage, limit: rowsPerPage },
+        currentPage,
+        rowsPerPage
+      );      
+    }
+  }, [data, tableName, getCachedTable, updateTableCache]);
+
+  // Start editing a cell
+  const handleStartEdit = useCallback((rowIndex, column, originalValue) => {
+    const cellKey = `${rowIndex}-${column}`;
+    setEditedCells((prev) =>
+      new Map(prev).set(cellKey, {
+        value: originalValue,
+        originalValue
+      })
+    );
+    setEditedRows((prev) => new Set(prev).add(rowIndex));
+  }, []);
+
+  // Handle cell value change
+  const handleCellChange = useCallback(
+    (rowIndex, column, value) => {
+      const cellKey = `${rowIndex}-${column}`;
+      const row = data[rowIndex];
+      const originalValue =
+        editedCells.get(cellKey)?.originalValue ?? row[column];
+
+      if (value === originalValue) {
+        // If value is back to original, remove from edited cells
+        const newEditedCells = new Map(editedCells);
+        newEditedCells.delete(cellKey);
+        setEditedCells(newEditedCells);
+
+        // Check if row has any other edits
+        const hasOtherEdits = Array.from(newEditedCells.keys()).some((key) =>
+          key.startsWith(`${rowIndex}-`)
+        );
+        if (!hasOtherEdits) {
+          const newEditedRows = new Set(editedRows);
+          newEditedRows.delete(rowIndex);
+          setEditedRows(newEditedRows);
+        }
+      } else {
+        // Add or update edit
+        setEditedCells((prev) =>
+          new Map(prev).set(cellKey, {
+            value,
+            originalValue
+          })
+        );
+        setEditedRows((prev) => new Set(prev).add(rowIndex));
+      }
+    },
+    [data, editedCells, editedRows]
+  );
+
+  // Add record handlers
+  const handleAddRecord = useCallback(() => {
+    setNewRecords((prev) => [...prev, {}]);
+  }, []);
+
+  const handleRemoveNewRecord = useCallback((index) => {
+    setNewRecords((prev) => prev.filter((_, i) => i !== index));
+  }, []);
+
+  const handleNewRecordChange = useCallback((index, record) => {
+    setNewRecords((prev) => {
+      const updated = [...prev];
+      updated[index] = record;
+      return updated;
+    });
+  }, []);
+
+  // Modified handleSaveChanges function
+  const handleSaveChanges = async (forceUpdate = false) => {
+    setIsSaving(true);
+    try {
+      // ===== Save New Records =====
+      if (newRecords.length > 0) {
+        let addedCount = 0;
+  
+        // Get datetime columns from schema
+        const datetimeColumns = schema
+          .filter((col) => col.type.toLowerCase() === 'datetime')
+          .map((col) => col.name);
+  
+        for (const record of newRecords) {
+          let columnsToInsert = Object.keys(record).filter(
+            (col) =>
+              record[col] !== null &&
+              record[col] !== '' &&
+              record[col] !== 'null'
+          );
+  
+          datetimeColumns.forEach((col) => {
+            if (!columnsToInsert.includes(col)) {
+              columnsToInsert.push(col);
+            }
+          });
+  
+          if (columnsToInsert.length === 0) continue;
+  
+          const values = columnsToInsert.map((col) => {
+            if (datetimeColumns.includes(col)) {
+              return 'CURRENT_TIMESTAMP';
+            }
+  
+            const value = record[col];
+            if (value === null || value === '' || value === 'null') return 'NULL';
+            return `'${value.toString().replace(/'/g, "''")}'`;
+          });
+  
+          const insertQuery = `INSERT INTO ${tableName} (${columnsToInsert.join(
+            ', '
+          )}) VALUES (${values.join(', ')});`;
+  
+          await executeQuery(insertQuery);
+          addedCount++;
+        }
+  
+        if (addedCount > 0) {
+          // Fetch fresh data after insert using updateTableData
+          const result = await updateTableData(tableName);
+          setData(result.data);
+          setTotalRows(result.meta.total);
+          setTotalPages(Math.ceil(result.meta.total / rowsPerPage));
+  
+          toast({
+            title: 'Success',
+            description: `Added ${addedCount} ${
+              addedCount === 1 ? 'record' : 'records'
+            }`
+          });
+        }
+        setNewRecords([]);
+      }
+  
+      // ===== Save Edited Cells =====
+      if (editedCells.size > 0 && (forceUpdate || !databaseError)) {
+        const primaryKeyColumn = schema.find((col) => col.pk === 1)?.name;
+        if (!primaryKeyColumn) {
+          throw new Error('No primary key found in table schema');
+        }
+  
+        const rowUpdates = new Map();
+        editedCells.forEach((edit, cellKey) => {
+          const [rowIndex, column] = cellKey.split('-');
+          const row = data[rowIndex];
+          if (!rowUpdates.has(row[primaryKeyColumn])) {
+            rowUpdates.set(row[primaryKeyColumn], new Map());
+          }
+          rowUpdates.get(row[primaryKeyColumn]).set(column, edit.value);
+        });
+  
+        let updatedCount = 0;
+  
+        for (const [primaryKeyValue, updates] of rowUpdates) {
+          const setClauses = Array.from(updates.entries())
+            .map(([column, value]) => {
+              if (value === null || value === '' || value === 'null') {
+                return `${column} = NULL`;
+              } else if (value === 'CURRENT_TIMESTAMP') {
+                return `${column} = CURRENT_TIMESTAMP`;
+              } else {
+                return `${column} = '${value.toString().replace(/'/g, "''")}'`;
+              }
+            })
+            .join(', ');
+  
+          const updateQuery = `
+            UPDATE ${tableName}
+            SET ${setClauses}
+            WHERE ${primaryKeyColumn} = ${primaryKeyValue};
+          `;
+  
+          await executeQuery(updateQuery);
+          updatedCount++;
+        }
+  
+        if (updatedCount > 0) {
+          // Fetch fresh data after update using updateTableData
+          const result = await updateTableData(tableName);
+          setData(result.data);
+          setTotalRows(result.meta.total);
+          setTotalPages(Math.ceil(result.meta.total / rowsPerPage));
+  
+          toast({
+            title: 'Success',
+            description: `Updated ${updatedCount} ${
+              updatedCount === 1 ? 'record' : 'records'
+            }`
+          });
+        }
+      }
+  
+      // Clear edit states
+      setEditedCells(new Map());
+      setEditedRows(new Set());
+      setDatabaseError(null);
+    } catch (error) {
+  
+      const parsedError = parseSQLError(error);
+      const errorData = {
+        ...parsedError,
+        stderr: error.stderr,
+        stdout: error.stdout
+      };
+  
+      setDatabaseError(errorData);
+      setShowDatabaseError(true);
+  
+    } finally {
+      setIsSaving(false);
+    }
+  };
+  
+  // Handle delete records with cache update
+  const handleDeleteRecords = useCallback(async () => {
+    setIsDeleting(true);
+    setDeleteError(null);
+  
+    if (!tableName) return; // Early return if no table selected
+    
+    setIsDeleting(true);
+    setDeleteError(null);
+
+    try {
+      const primaryKeyColumn = schema.find((col) => col.pk === 1)?.name;
+      if (!primaryKeyColumn) {
+        throw new Error('No primary key found in table schema');
+      }
+      
+      // Store current table name to ensure we don't switch
+      const currentTableName = tableName;
+  
+      const selectedValues = Array.from(selectedRows).map((index) => {
+        const row = data[index];
+        return row[primaryKeyColumn];
+      });
+  
+      if (selectedValues.length === 0) return;
+  
+      const deleteQuery = `DELETE FROM ${tableName} WHERE ${primaryKeyColumn} IN (${selectedValues.join(
+        ','
+      )});`;
+      await executeQuery(deleteQuery);
+  
+      // Update local state
+      const deletedSet = new Set(selectedValues);
+      const updatedData = data.filter((row) => !deletedSet.has(row[primaryKeyColumn]));
+      setData(updatedData);
+      setTotalRows((prev) => prev - selectedValues.length);
+      setTotalPages(Math.ceil((totalRows - selectedValues.length) / rowsPerPage));
+  
+      // Update cache with the correct arguments:
+      // new data array, the same schema, and updated meta.
+      const currentCache = getCachedTable(tableName);
+      if (currentCache) {
+        updateTableCache(
+          tableName,
+          updatedData,
+          currentCache.schema,
+          {
+            ...currentCache.meta,
+            total: currentCache.meta.total - selectedValues.length
+          }
+        );
+      }
+  
+      // If current page becomes empty and it's not the first page
+      if (currentPage > 1 && data.length === selectedValues.length) {
+        setCurrentPage((prev) => prev - 1);
+        await loadTableData();
+      }
+  
+      setShowDeleteDialog(false);
+      setSelectedRows(new Set());
+  
+      toast({
+        title: 'Success',
+        description: `Successfully deleted ${selectedValues.length} ${
+          selectedValues.length === 1 ? 'record' : 'records'
+        }`
+      });
+    } catch (error) {
+      console.error('Delete operation failed:', error);
+      setDeleteError(error.message || String(error));
+    } finally {
+      setIsDeleting(false);
+    }
+  }, [
+    tableName,
+    selectedRows,
+    data,
+    schema,
+    executeQuery,
+    updateTableData,
+    loadTableData,
+    currentPage,
+    rowsPerPage,
+    totalRows,
+    toast,
+    getCachedTable,
+    updateTableCache
+  ]);
+  
+  // Handle discard changes
+  const handleDiscardChanges = () => {
+    setEditedCells(new Map());
+    setEditedRows(new Set());
+    setNewRecords([]);
+    setDatabaseError(null);
+  
+    toast({
+      description: 'Changes discarded'
+    });
+  };
+  
+  // Initialize table data
+  useEffect(() => {
+    if (!tableName) return;
+  
+    // Clear states only when tableName changes
+    setEditedCells(new Map());
+    setEditedRows(new Set());
+    setNewRecords([]);
+    setError(null);
+    setSelectedRows(new Set());
+    setCurrentPage(1); // Always start at page 1 for a new table
+  
+    // Look up the cache using page 1
+    const cached = getCachedTable(tableName, 1, rowsPerPage);
+    if (cached) {
+      setData(cached.data);
+      setSchema(cached.schema);
+      setTotalRows(cached.meta.total);
+      setTotalPages(cached.meta.totalPages);
+      setVisibleColumns((prev) => {
+        if (prev.length) return prev;
+        const columns = cached.schema.map((col) => col.name);
+        localStorage.setItem(`table-columns-${tableName}`, JSON.stringify(columns));
+        return columns;
+      });
+    } else {
+      loadTableData(false);
+    }
+    // Note: The dependency array now only depends on tableName (and rowsPerPage if needed)
+  }, [tableName, rowsPerPage]);
+
+  // Monitor active table changes
+  useEffect(() => {
+    if (activeTable === tableName) {
+      const cached = getCachedTable(tableName);
+      if (cached) {
+        setData(cached.data);
+        setSchema(cached.schema);
+        setTotalRows(cached.meta.total);
+        setTotalPages(cached.meta.totalPages);
+      }
+    }
+  }, [activeTable, tableName, getCachedTable]);
+  
+  // Handle pagination
+  useEffect(() => {
+    if (tableName && !isTableLoading) {
+      // Pass the correct page and limit to the cache lookup
+      const cached = getCachedTable(tableName, currentPage, rowsPerPage);
+
+      if (!cached || currentPage !== cached.meta?.currentPage) {
+        loadTableData(false);
+      }
+    }
+  }, [
+    tableName, 
+    currentPage, 
+    rowsPerPage, 
+    isTableLoading, 
+    loadTableData, 
+    getCachedTable]
+  );
+  
+  // Update checkbox indeterminate state
+  useEffect(() => {
+    if (checkboxRef.current) {
+      checkboxRef.current.indeterminate =
+        selectedRows.size > 0 && selectedRows.size < data.length;
+    }
+  }, [selectedRows.size, data.length]);
+  
+  // Row selection handlers
+  const handleSelectAll = useCallback(
+    (checked) => {
+      setSelectedRows(checked ? new Set(data.map((_, index) => index)) : new Set());
+    },
+    [data]
+  );
+  
+  const handleRowSelect = useCallback((index, checked) => {
+    setSelectedRows((prev) => {
+      const newSelected = new Set(prev);
+      if (checked) {
+        newSelected.add(index);
+      } else {
+        newSelected.delete(index);
+      }
+      return newSelected;
+    });
+  }, []);
+  
+  const handleColumnsResize = useCallback((newWidths) => {
+    setColumnWidths(newWidths);
+    localStorage.setItem(`table-widths-${tableName}`, JSON.stringify(newWidths));
+  }, [tableName]);
+  
+  // Filter schema based on visible columns
+  const visibleSchema = schema.filter(col => visibleColumns.includes(col.name));
+  
+  const hasChanges = editedCells.size > 0 || newRecords.length > 0;
+  
+  // Error display
+  if (error) {
+    return (
+      <div className="p-4">
+        <Alert variant="destructive">
+          <AlertCircle className="h-4 w-4" />
+          <AlertDescription>Failed to load table: {error}</AlertDescription>
+        </Alert>
+      </div>
+    );
+  }
+  
+  return (
+    <div className="h-full flex flex-col">
+      <TableToolbar
+        selectedCount={selectedRows.size}
+        totalRows={totalRows}
+        currentPage={currentPage}
+        totalPages={totalPages}
+        rowsPerPage={rowsPerPage}
+        onPageChange={setCurrentPage}
+        onRowsPerPageChange={setRowsPerPage}
+        onAdd={handleAddRecord}
+        onDelete={() => setShowDeleteDialog(true)}
+        onRefresh={handleRefresh}
+        tableName={tableName}
+        disabled={hasChanges}
+        editCount={editedCells.size}
+        newRecordsCount={newRecords.length}
+        isSaving={isSaving}
+        onSaveChanges={handleSaveChanges}
+        onDiscardChanges={handleDiscardChanges}
+        schema={schema}               
+        visibleColumns={visibleColumns}
+        onColumnToggle={handleColumnToggle}
+      />
+  
+      <ResizableTable columns={schema} onColumnsResize={handleColumnResize}>
+        <div className="relative flex-1 overflow-hidden bg-background font-mono">
+          <ScrollArea className="w-full h-screen">
+            <div className="relative w-max min-w-fit pb-4">
+              <Table>
+                {!isTableLoading && (
+                  <TableHeader className="bg-neutral-100 sticky top-0 z-30">
+                    <TableRow>
+                      <TableHead className="w-10 p-0 border-r border-neutral-200">
+                        <div className="py-0.5 px-3 flex items-center">
+                          <Checkbox
+                            ref={checkboxRef}
+                            checked={selectedRows.size === data.length && data.length > 0}
+                            onCheckedChange={handleSelectAll}
+                            disabled={hasChanges}
+                          />
+                        </div>
+                      </TableHead>
+                      {visibleSchema.map((col) => (
+                        <ResizableHeader
+                          key={col.name}
+                          width={columnWidths[col.name] || 150}
+                          onResize={(width) => handleColumnResize(col.name, width)}
+                          className="py-0.5 whitespace-nowrap border-r border-neutral-200"
+                        >
+                          <SortableHeader
+                            column={col.name}
+                            sortConfig={sortConfigs}
+                            onSort={handleSort}
+                          >
+                            <span className="text-xs font-bold text-foreground">
+                              {col.name}
+                            </span>
+                            <span className="text-xs text-muted-foreground">
+                              {col.type?.toLowerCase()}
+                            </span>
+                          </SortableHeader>
+                        </ResizableHeader>
+                      ))}
+                    </TableRow>
+                  </TableHeader>
+                )}
+
+                <TableBody>
+                {isTableLoading && (
+                  <TableRow className="hover:bg-transparent">
+                    <TableCell 
+                      colSpan={visibleSchema.length + 1} 
+                      className="h-[calc(100vh-200px)]"
+                    >
+                      <div className="h-full w-full flex items-center justify-center">
+                        <Loader2 className="h-6 w-6 animate-spin text-primary" />
+                      </div>
+                    </TableCell>
+                  </TableRow>
+                )}
+                  
+                  {!isTableLoading && (
+                    <>
+                      {/* Render New Records */}
+                      {newRecords.map((record, index) => (
+                        <EditableRow
+                          key={`new-${index}`}
+                          schema={visibleSchema}
+                          onRemove={() => handleRemoveNewRecord(index)}
+                          onChange={(record) => handleNewRecordChange(index, record)}
+                        />
+                      ))}
+
+                      {/* Only show "Table is empty" message when there is no data */}
+                      {data.length === 0 && newRecords.length === 0 ? (
+                        <TableRow className="hover:bg-transparent">
+                          <TableCell
+                            colSpan={visibleSchema.length + 1}
+                            className="h-[calc(100vh-200px)] text-center text-muted-foreground"
+                          >
+                            Table is empty
+                          </TableCell>
+                        </TableRow>
+                      ) : (
+                        data.map((row, index) => (
+                          <TableRow
+                            key={index}
+                            className={`${selectedRows.has(index) ? 'bg-muted/50' : ''}`}
+                          >
+                            <TableCell className="p-0">
+                              <div className="px-3 py-2.5 flex items-center">
+                                <Checkbox
+                                  checked={selectedRows.has(index)}
+                                  onCheckedChange={(checked) => handleRowSelect(index, checked)}
+                                  disabled={hasChanges}
+                                />
+                              </div>
+                            </TableCell>
+                            {visibleSchema.map((col) => {
+                              const cellKey = `${index}-${col.name}`;
+                              const editState = editedCells.get(cellKey);
+                              return (
+                                <EditableCell
+                                  key={col.name}
+                                  value={editState ? editState.value : row[col.name]}
+                                  row={row}
+                                  column={col.name}
+                                  schema={schema}
+                                  onChange={(value) => handleCellChange(index, col.name, value)}
+                                  onStartEdit={(originalValue) =>
+                                    handleStartEdit(index, col.name, originalValue)
+                                  }
+                                  isEditing={editedCells.has(cellKey)}
+                                  style={{ width: `${columnWidths[col.name] || 150}px` }}
+                                />
+                              );
+                            })}
+                          </TableRow>
+                        ))
+                      )}
+                    </>
+                  )}
+                </TableBody>
+              </Table>
+
+              <ScrollBar orientation="horizontal" />
+            </div>
+          </ScrollArea>
+        </div>
+      </ResizableTable>
+
+      {/* Delete Dialog */}
+      <DeleteRecordsDialog
+        isOpen={showDeleteDialog}
+        onClose={() => {
+          setShowDeleteDialog(false);
+          setDeleteError(null);
+        }}
+        onConfirm={handleDeleteRecords}
+        selectedCount={selectedRows.size}
+        tableName={tableName}
+        isDeleting={isDeleting}
+        error={deleteError}
+      />
+  
+      {/* Database Error Dialog */}
+      <DatabaseErrorDialog
+        isOpen={showDatabaseError}
+        onClose={() => setShowDatabaseError(false)}
+        error={databaseError}
+        onOpenInSQL={() => {
+          setShowDatabaseError(false);
+        }}
+        onUpdateAnyway={async () => {
+          setShowDatabaseError(false);
+          await handleSaveChanges(true); // Force update
+        }}
+        showSQLOption={databaseError?.type === 'NULLABLE_PK'}
+      />
+    </div>
+  );  
+}