From 53b40e95e5b16e14d0e5d217b44d8f721ddd0b33 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=9Cmit=20Tun=C3=A7?= <umitreva@gmail.com>
Date: Fri, 24 Apr 2026 13:36:55 +0300
Subject: [PATCH] feat: implement database explorer, SQL console, and tabbed
 navigation interface for table management

---
 .../src/components/DatabaseTablesGrid.tsx     | 19 ++++++++++++++++++-
 frontend/src/components/MainContent.tsx       | 15 +++++++++++++++
 frontend/src/components/SqlConsole.tsx        | 19 ++++++++++++++++++-
 3 files changed, 51 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/DatabaseTablesGrid.tsx b/frontend/src/components/DatabaseTablesGrid.tsx
index 2c6b466..35f9ec6 100644
--- a/frontend/src/components/DatabaseTablesGrid.tsx
+++ b/frontend/src/components/DatabaseTablesGrid.tsx
@@ -184,7 +184,24 @@ const DatabaseTablesGrid: React.FC<DatabaseTablesGridProps> = ({ database, setNo
           loading={loading}
           getRowId={(row: any) => row.name}
           density="comfortable"
-          sx={{ border: 'none' }}
+          sx={{ 
+            border: 'none',
+            '& .MuiDataGrid-row:nth-of-type(even)': {
+              bgcolor: (theme) => theme.palette.mode === 'dark' ? 'rgba(255,255,255,0.02)' : 'rgba(0,0,0,0.01)',
+            },
+            '& .MuiDataGrid-cell': {
+              borderRight: '1px solid',
+              borderColor: 'divider',
+            },
+            '& .MuiDataGrid-columnHeader': {
+              borderRight: '1px solid',
+              borderColor: 'divider',
+            },
+            '& .MuiDataGrid-columnHeaders': {
+              borderBottom: '1px solid',
+              borderColor: 'divider',
+            }
+          }}
         />
       </Paper>
     </Box>
diff --git a/frontend/src/components/MainContent.tsx b/frontend/src/components/MainContent.tsx
index 482e302..86d8076 100644
--- a/frontend/src/components/MainContent.tsx
+++ b/frontend/src/components/MainContent.tsx
@@ -145,6 +145,21 @@ const MainContent: React.FC = () => {
                     pageSizeOptions={[25, 50, 100]}
                     sx={{
                       border: 'none',
+                      '& .MuiDataGrid-row:nth-of-type(even)': {
+                        bgcolor: (theme) => theme.palette.mode === 'dark' ? 'rgba(255,255,255,0.02)' : 'rgba(0,0,0,0.01)',
+                      },
+                      '& .MuiDataGrid-cell': {
+                        borderRight: '1px solid',
+                        borderColor: 'divider',
+                      },
+                      '& .MuiDataGrid-columnHeader': {
+                        borderRight: '1px solid',
+                        borderColor: 'divider',
+                      },
+                      '& .MuiDataGrid-columnHeaders': {
+                        borderBottom: '1px solid',
+                        borderColor: 'divider',
+                      },
                       '& .MuiDataGrid-row:hover': { bgcolor: 'rgba(0, 97, 255, 0.04)' },
                     }}
                   />
diff --git a/frontend/src/components/SqlConsole.tsx b/frontend/src/components/SqlConsole.tsx
index 3bfe991..5587d50 100644
--- a/frontend/src/components/SqlConsole.tsx
+++ b/frontend/src/components/SqlConsole.tsx
@@ -121,7 +121,24 @@ const SqlConsole: React.FC<SqlConsoleProps> = ({ initialQuery, setNotification }
           columns={columns}
           rowCount={rowCount}
           loading={loading}
-          sx={{ border: 'none' }}
+          sx={{
+            border: 'none',
+            '& .MuiDataGrid-row:nth-of-type(even)': {
+              bgcolor: (theme) => theme.palette.mode === 'dark' ? 'rgba(255,255,255,0.02)' : 'rgba(0,0,0,0.01)',
+            },
+            '& .MuiDataGrid-cell': {
+              borderRight: '1px solid',
+              borderColor: 'divider',
+            },
+            '& .MuiDataGrid-columnHeader': {
+              borderRight: '1px solid',
+              borderColor: 'divider',
+            },
+            '& .MuiDataGrid-columnHeaders': {
+              borderBottom: '1px solid',
+              borderColor: 'divider',
+            }
+          }}
         />
       </Paper>
     </Box>