feat: implement database explorer, SQL console, and tabbed navigation interface for table management

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>

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)' },
                     }}
                   />

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>