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 = ({ 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', + } + }} /> 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 = ({ 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', + } + }} />