diff --git a/.github/ISSUE_TEMPLATE/feature_request.yml b/.github/ISSUE_TEMPLATE/feature_request.yml
index 864fa3f..0e1a10c 100644
--- a/.github/ISSUE_TEMPLATE/feature_request.yml
+++ b/.github/ISSUE_TEMPLATE/feature_request.yml
@@ -8,7 +8,6 @@ body:
       attributes:
           value: |
               Thanks for taking the time to suggest an improvement!
-              Datary is a database management tool, so features related to databases, UX, performance, or integrations are especially welcome.
 
     - type: textarea
       attributes:
diff --git a/.github/scripts/telegram-notify.js b/.github/scripts/telegram-notify.js
index 6b52de8..3734bbc 100644
--- a/.github/scripts/telegram-notify.js
+++ b/.github/scripts/telegram-notify.js
@@ -25,7 +25,7 @@ if (GITHUB_EVENT_PATH && fs.existsSync(GITHUB_EVENT_PATH)) {
 
 	if (GITHUB_EVENT_NAME === 'push') {
 		message += `\n*Push*\n\n`
-		message += `Branch: ${GITHUB_REF?.replace('refs/heads/', '')}\n`
+		message += `Branch: ${GITHUB_REF?.replace('refs/heads/', '')}\n\n`
 
 		payload.commits?.slice(0, 3).forEach((c, i) => {
 			message += `${i + 1}. ${c.message.split('\n')[0]}\n`
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index a6dc8fe..1f99225 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -28,8 +28,6 @@ We aim to maintain a friendly and inclusive environment. Please respect all part
 - Give constructive feedback.
 - Report problems or abusive behavior to maintainers.
 
-Full code of conduct can be found in [`CODE_OF_CONDUCT.md`](./CODE_OF_CONDUCT.md).
-
 ---
 
 ## How to Contribute
diff --git a/apps/desktop/renderer/package.json b/apps/desktop/renderer/package.json
index 46fd223..316b358 100644
--- a/apps/desktop/renderer/package.json
+++ b/apps/desktop/renderer/package.json
@@ -13,6 +13,7 @@
 		"@datary/core": "workspace:",
 		"@hookform/resolvers": "^5.2.2",
 		"@tailwindcss/vite": "^4.1.18",
+		"@tanstack/react-virtual": "^3.13.18",
 		"class-variance-authority": "^0.7.1",
 		"clsx": "^2.1.1",
 		"lucide-react": "^0.563.0",
diff --git a/apps/desktop/renderer/src/app/store/table-data.store.ts b/apps/desktop/renderer/src/app/store/table-data.store.ts
index e40e94c..b56f21b 100644
--- a/apps/desktop/renderer/src/app/store/table-data.store.ts
+++ b/apps/desktop/renderer/src/app/store/table-data.store.ts
@@ -26,15 +26,48 @@ export const useTableDataStore = create<TableDataState>((set, get) => ({
 
 		set({ loading: true })
 
-		const data = await window.datary.db.loadTableData(schema, table)
+		try {
+			const [columnsRaw, tableDataRaw] = await Promise.all([
+				window.datary.db.loadColumns(schema, table),
+				window.datary.db.loadTableData(schema, table)
+			])
 
-		set(state => ({
-			tables: {
-				...state.tables,
-				[key]: data
-			},
-			loading: false
-		}))
+			// @ts-ignore
+			const columns = columnsRaw.map(col => {
+				let type = col.type
+				if (col.enumValues && col.enumValues.length > 0) {
+					type = `enum(${col.enumValues.join(', ')})`
+				}
+				return {
+					columnName: col.columnName,
+					type,
+					nullable: col.nullable,
+					enumValues: col.enumValues
+				}
+			})
+
+			const tableData: TableData = {
+				// @ts-ignore
+				columns: columns.map(col => ({
+					name: col.columnName,
+					type: col.type,
+					nullable: col.nullable
+				})),
+				rows: tableDataRaw.rows
+			}
+
+			set(state => ({
+				tables: {
+					...state.tables,
+					[key]: tableData
+				},
+				loading: false
+			}))
+		} catch (err: any) {
+			toast.error(`Failed to load table ${table}: ${err.message}`)
+			console.error(err)
+			set({ loading: false })
+		}
 	},
 	reset: () =>
 		set({
diff --git a/apps/desktop/renderer/src/main.tsx b/apps/desktop/renderer/src/main.tsx
index 22a1a01..3e2112b 100644
--- a/apps/desktop/renderer/src/main.tsx
+++ b/apps/desktop/renderer/src/main.tsx
@@ -1,8 +1,4 @@
-import type {
-	ColumnMetadataContract,
-	DatabaseMetadataContract,
-	TableMetadataContract
-} from '@datary/core'
+import type { DatabaseMetadataContract, TableMetadataContract } from '@datary/core'
 import ReactDOM from 'react-dom/client'
 import { HashRouter } from 'react-router-dom'
 
@@ -26,11 +22,7 @@ declare global {
 					schema: string | null
 				): Promise<TableMetadataContract[]>
 				loadViews(database: string, schema: string | null): Promise<TableMetadataContract[]>
-				loadColumns(
-					database: string,
-					schema: string,
-					table: string
-				): Promise<ColumnMetadataContract[]>
+				loadColumns: any
 				loadTableData: any
 				disconnect: Function
 			}
diff --git a/apps/desktop/renderer/src/modules/explorer/components/tabs/ExplorerTabContextMenu.tsx b/apps/desktop/renderer/src/modules/explorer/components/tabs/ExplorerTabContextMenu.tsx
new file mode 100644
index 0000000..f5ab81c
--- /dev/null
+++ b/apps/desktop/renderer/src/modules/explorer/components/tabs/ExplorerTabContextMenu.tsx
@@ -0,0 +1,65 @@
+import type { ReactNode } from 'react'
+
+import { useContextMenu } from '@/shared/hooks/useContextMenu'
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem } from '@/shared/ui/dropdown-menu'
+
+interface Props {
+	children: ReactNode
+	disabledCloseOthers: boolean
+	onClose: () => void
+	onCloseOthers: () => void
+	onCloseAll: () => void
+}
+export function ExplorerTabContextMenu({
+	children,
+	disabledCloseOthers,
+	onClose,
+	onCloseOthers,
+	onCloseAll
+}: Props) {
+	const { open, position, onContextMenu, close } = useContextMenu()
+
+	return (
+		<>
+			<div onContextMenu={onContextMenu}>{children}</div>
+
+			{open && (
+				<DropdownMenu open={open} onOpenChange={val => !val && close()}>
+					<DropdownMenuContent
+						align="start"
+						sideOffset={4}
+						className="absolute"
+						style={{ top: position!.y, left: position!.x }}
+					>
+						<DropdownMenuItem
+							onClick={() => {
+								onClose()
+								close()
+							}}
+						>
+							Close
+						</DropdownMenuItem>
+						<DropdownMenuItem
+							disabled={disabledCloseOthers}
+							onClick={() => {
+								onCloseOthers()
+								close()
+							}}
+						>
+							Close Others
+						</DropdownMenuItem>
+						<DropdownMenuItem
+							disabled={disabledCloseOthers}
+							onClick={() => {
+								onCloseAll()
+								close()
+							}}
+						>
+							Close All
+						</DropdownMenuItem>
+					</DropdownMenuContent>
+				</DropdownMenu>
+			)}
+		</>
+	)
+}
diff --git a/apps/desktop/renderer/src/modules/explorer/components/tabs/ExplorerTabs.tsx b/apps/desktop/renderer/src/modules/explorer/components/tabs/ExplorerTabs.tsx
index cdb83dc..58cb030 100644
--- a/apps/desktop/renderer/src/modules/explorer/components/tabs/ExplorerTabs.tsx
+++ b/apps/desktop/renderer/src/modules/explorer/components/tabs/ExplorerTabs.tsx
@@ -2,8 +2,9 @@ import type { ReactNode } from 'react'
 
 import type { Tab } from '../../types/explorer.types'
 
+import { ExplorerTabContextMenu } from './ExplorerTabContextMenu'
 import { TabContent } from './TabContent'
-import { TableTabs } from '@/shared/components/table-tabs'
+import { TableTabs } from './TableTabs'
 import { cn } from '@/shared/lib/utils'
 
 interface Props {
@@ -11,17 +12,41 @@ interface Props {
 	activeTab: string
 	onSelectTab: (id: string) => void
 	onCloseTab: (id: string) => void
+	onCloseOthers: (id: string) => void
+	onCloseAll: () => void
 	children?: ReactNode
 }
 
-export function ExplorerTabs({ tabs, activeTab, onSelectTab, onCloseTab }: Props) {
+export function ExplorerTabs({
+	tabs,
+	activeTab,
+	onSelectTab,
+	onCloseTab,
+	onCloseOthers,
+	onCloseAll
+}: Props) {
 	return (
-		<div className="flex h-full flex-col">
+		<div className="flex h-full min-h-0 flex-col">
 			<TableTabs
 				tabs={tabs}
 				activeTab={activeTab}
 				onSelectTab={onSelectTab}
 				onCloseTab={onCloseTab}
+				renderTab={(tab, tabNode) => (
+					<ExplorerTabContextMenu
+						disabledCloseOthers={tabs.length <= 1}
+						onClose={() => onCloseTab(tab.id)}
+						onCloseOthers={() => {
+							onSelectTab(tab.id)
+							onCloseOthers(tab.id)
+						}}
+						onCloseAll={() => {
+							onCloseAll()
+						}}
+					>
+						<div className="h-full">{tabNode}</div>
+					</ExplorerTabContextMenu>
+				)}
 			>
 				{tabs.map(tab => (
 					<div
diff --git a/apps/desktop/renderer/src/modules/explorer/components/tabs/TabContent.tsx b/apps/desktop/renderer/src/modules/explorer/components/tabs/TabContent.tsx
index efc4098..b3b6360 100644
--- a/apps/desktop/renderer/src/modules/explorer/components/tabs/TabContent.tsx
+++ b/apps/desktop/renderer/src/modules/explorer/components/tabs/TabContent.tsx
@@ -1,7 +1,9 @@
+import { useMemo } from 'react'
+
 import type { Tab } from '../../types/explorer.types'
 
 import { useTableDataStore } from '@/app/store/table-data.store'
-import { DataTable } from '@/shared/components/data-table'
+import { DataGrid } from '@/widgets/data-grid/DataGrid'
 import { QueryEditor } from '@/widgets/query-editor/components/QueryEditor'
 
 interface Props {
@@ -26,5 +28,15 @@ export function TabContent({ tab }: Props) {
 		)
 	}
 
-	return <DataTable data={data} />
+	const gridData = useMemo(() => {
+		return {
+			rows: data.rows,
+			columns: data.columns.map(col => ({
+				name: col.name,
+				type: col.type
+			}))
+		}
+	}, [data])
+
+	return <DataGrid data={gridData} rowHeight={32} renderer="dom" editable />
 }
diff --git a/apps/desktop/renderer/src/shared/components/table-tabs.tsx b/apps/desktop/renderer/src/modules/explorer/components/tabs/TableTabs.tsx
similarity index 62%
rename from apps/desktop/renderer/src/shared/components/table-tabs.tsx
rename to apps/desktop/renderer/src/modules/explorer/components/tabs/TableTabs.tsx
index 148114e..61be7d3 100644
--- a/apps/desktop/renderer/src/shared/components/table-tabs.tsx
+++ b/apps/desktop/renderer/src/modules/explorer/components/tabs/TableTabs.tsx
@@ -1,9 +1,8 @@
 import { ChevronLeft, ChevronRight, Table, X } from 'lucide-react'
-import React from 'react'
-import { useEffect, useRef, useState } from 'react'
+import { type ReactNode, useEffect, useRef, useState } from 'react'
 
-import { cn } from '../lib/utils'
-import { Button } from '../ui/button'
+import { cn } from '../../../../shared/lib/utils'
+import { Button } from '../../../../shared/ui/button'
 
 export interface Tab {
 	id: string
@@ -16,10 +15,18 @@ interface TableTabsProps {
 	activeTab: string
 	onSelectTab: (id: string) => void
 	onCloseTab: (id: string) => void
-	children: React.ReactNode
+	renderTab?: (tab: Tab, defaultTab: ReactNode) => ReactNode
+	children: ReactNode
 }
 
-export function TableTabs({ tabs, activeTab, onSelectTab, onCloseTab, children }: TableTabsProps) {
+export function TableTabs({
+	tabs,
+	activeTab,
+	onSelectTab,
+	onCloseTab,
+	renderTab,
+	children
+}: TableTabsProps) {
 	const tabsRef = useRef<HTMLDivElement>(null)
 	const [showScrollButtons, setShowScrollButtons] = useState(false)
 
@@ -61,38 +68,42 @@ export function TableTabs({ tabs, activeTab, onSelectTab, onCloseTab, children }
 				)}
 
 				<div ref={tabsRef} className="scrollbar-none flex flex-1 overflow-x-auto">
-					{tabs.map(tab => (
-						<button
-							key={tab.id}
-							type="button"
-							className={cn(
-								'group border-border flex shrink-0 items-center gap-2 border-r px-4 py-2 text-sm transition-colors',
-								activeTab === tab.id
-									? 'bg-background text-foreground'
-									: 'bg-card text-muted-foreground hover:bg-secondary hover:text-foreground'
-							)}
-							onClick={() => onSelectTab(tab.id)}
-						>
-							<Table className="text-primary h-4 w-4" />
-							<span className="max-w-32 truncate">{tab.name}</span>
+					{tabs.map(tab => {
+						const defaultTab = (
 							<button
+								key={tab.id}
 								type="button"
 								className={cn(
-									'ml-1 rounded p-0.5 transition-colors',
-									'text-muted-foreground hover:bg-secondary hover:text-foreground',
-									'opacity-0 group-hover:opacity-100',
-									activeTab === tab.id && 'opacity-100'
+									'group border-border flex shrink-0 items-center gap-2 border-r px-4 py-2 text-sm transition-colors select-none',
+									activeTab === tab.id
+										? 'bg-background text-foreground'
+										: 'bg-card text-muted-foreground hover:bg-secondary hover:text-foreground'
 								)}
-								onClick={e => {
-									e.stopPropagation()
-									onCloseTab(tab.id)
-								}}
+								onClick={() => onSelectTab(tab.id)}
 							>
-								<X className="h-3.5 w-3.5" />
-								<span className="sr-only">Close tab</span>
+								<Table className="text-primary h-4 w-4" />
+								<span className="max-w-32 truncate">{tab.name}</span>
+
+								<button
+									type="button"
+									className={cn(
+										'ml-1 rounded p-0.5 transition-colors',
+										'text-muted-foreground hover:bg-secondary hover:text-foreground',
+										'opacity-0 group-hover:opacity-100',
+										activeTab === tab.id && 'opacity-100'
+									)}
+									onClick={e => {
+										e.stopPropagation()
+										onCloseTab(tab.id)
+									}}
+								>
+									<X className="h-3.5 w-3.5" />
+								</button>
 							</button>
-						</button>
-					))}
+						)
+
+						return renderTab ? renderTab(tab, defaultTab) : defaultTab
+					})}
 				</div>
 
 				{showScrollButtons && (
@@ -103,7 +114,6 @@ export function TableTabs({ tabs, activeTab, onSelectTab, onCloseTab, children }
 						onClick={() => scroll('right')}
 					>
 						<ChevronRight className="h-4 w-4" />
-						<span className="sr-only">Scroll right</span>
 					</Button>
 				)}
 			</div>
diff --git a/apps/desktop/renderer/src/modules/explorer/hooks/useExplorerActions.ts b/apps/desktop/renderer/src/modules/explorer/hooks/useExplorerActions.ts
index a6ccbad..db93910 100644
--- a/apps/desktop/renderer/src/modules/explorer/hooks/useExplorerActions.ts
+++ b/apps/desktop/renderer/src/modules/explorer/hooks/useExplorerActions.ts
@@ -40,8 +40,6 @@ export function useExplorerActions(tabs: any, database: any) {
 	}
 
 	const handleDisconnect = async () => {
-		await window.datary.db.disconnect()
-
 		navigate('/')
 	}
 
diff --git a/apps/desktop/renderer/src/modules/explorer/hooks/useExplorerTabs.ts b/apps/desktop/renderer/src/modules/explorer/hooks/useExplorerTabs.ts
index 1c94ad8..af1e62f 100644
--- a/apps/desktop/renderer/src/modules/explorer/hooks/useExplorerTabs.ts
+++ b/apps/desktop/renderer/src/modules/explorer/hooks/useExplorerTabs.ts
@@ -22,9 +22,7 @@ export function useExplorerTabs() {
 				const index = prev.findIndex(t => t.id === tabId)
 				const nextTabs = prev.filter(t => t.id !== tabId)
 
-				if (activeTab !== tabId) {
-					return nextTabs
-				}
+				if (activeTab !== tabId) return nextTabs
 
 				if (nextTabs.length === 0) {
 					setActiveTab('')
@@ -40,5 +38,23 @@ export function useExplorerTabs() {
 		[activeTab]
 	)
 
-	return { tabs, activeTab, setActiveTab, addTab, closeTab }
+	const closeOthers = useCallback((tabId: string) => {
+		setTabs(prev => prev.filter(t => t.id === tabId))
+		setActiveTab(tabId)
+	}, [])
+
+	const closeAll = useCallback(() => {
+		setTabs([])
+		setActiveTab('')
+	}, [])
+
+	return {
+		tabs,
+		activeTab,
+		setActiveTab,
+		addTab,
+		closeTab,
+		closeOthers,
+		closeAll
+	}
 }
diff --git a/apps/desktop/renderer/src/modules/explorer/pages/explorer.page.tsx b/apps/desktop/renderer/src/modules/explorer/pages/explorer.page.tsx
index 6aba429..03d0e21 100644
--- a/apps/desktop/renderer/src/modules/explorer/pages/explorer.page.tsx
+++ b/apps/desktop/renderer/src/modules/explorer/pages/explorer.page.tsx
@@ -51,6 +51,8 @@ export default function ExplorerPage() {
 							activeTab={explorer.tabs.activeTab}
 							onSelectTab={explorer.tabs.setActiveTab}
 							onCloseTab={explorer.tabs.closeTab}
+							onCloseOthers={explorer.tabs.closeOthers}
+							onCloseAll={explorer.tabs.closeAll}
 						/>
 					</main>
 				</div>
diff --git a/apps/desktop/renderer/src/shared/hooks/useContextMenu.ts b/apps/desktop/renderer/src/shared/hooks/useContextMenu.ts
new file mode 100644
index 0000000..2826da1
--- /dev/null
+++ b/apps/desktop/renderer/src/shared/hooks/useContextMenu.ts
@@ -0,0 +1,22 @@
+import { useCallback, useState } from 'react'
+
+export function useContextMenu() {
+	const [open, setOpen] = useState(false)
+	const [position, setPosition] = useState<{ x: number; y: number } | null>(null)
+
+	const onContextMenu = useCallback((e: React.MouseEvent) => {
+		e.preventDefault()
+
+		setPosition({ x: e.clientX, y: e.clientY })
+		setOpen(true)
+	}, [])
+
+	const openAtButton = useCallback(() => {
+		setPosition(null)
+		setOpen(true)
+	}, [])
+
+	const close = useCallback(() => setOpen(false), [])
+
+	return { open, position, onContextMenu, openAtButton, close }
+}
diff --git a/apps/desktop/renderer/src/widgets/data-grid/DataGrid.tsx b/apps/desktop/renderer/src/widgets/data-grid/DataGrid.tsx
new file mode 100644
index 0000000..96c78b7
--- /dev/null
+++ b/apps/desktop/renderer/src/widgets/data-grid/DataGrid.tsx
@@ -0,0 +1,252 @@
+import { useCallback, useEffect, useMemo, useState } from 'react'
+import {
+	LuChevronDown,
+	LuChevronLeft,
+	LuChevronRight,
+	LuChevronsLeft,
+	LuChevronsRight,
+	LuChevronsUpDown,
+	LuChevronUp
+} from 'react-icons/lu'
+
+import { GridViewport } from './GridViewport'
+import type { DataGridProps } from './types'
+import { rowsToColumnar, useGridEngine } from './useGridEngine'
+import { cn } from '@/shared/lib/utils'
+import { Button } from '@/shared/ui/button'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/shared/ui/select'
+
+export function DataGrid(props: DataGridProps) {
+	const { data, rowHeight = 36, estimatedColumnWidth = 150, editable = true, className } = props
+
+	const columnar = useMemo(() => {
+		if ('rowCount' in (data as any)) return data as any
+		return rowsToColumnar((data as any).rows, (data as any).columns)
+	}, [data])
+
+	const engine = useGridEngine(columnar)
+
+	const [sortColumn, setSortColumn] = useState<string | null>(null)
+	const [sortDirection, setSortDirection] = useState<'asc' | 'desc' | null>(null)
+
+	const [search, setSearch] = useState('')
+
+	useEffect(() => {
+		engine.applyGlobalFilter(search || null)
+	}, [search])
+
+	const handleSort = useCallback(
+		(colName: string) => {
+			let nextDir: 'asc' | 'desc' | null = 'asc'
+			if (sortColumn === colName) {
+				if (sortDirection === 'asc') nextDir = 'desc'
+				else if (sortDirection === 'desc') nextDir = null
+			}
+			setSortColumn(nextDir ? colName : null)
+			setSortDirection(nextDir)
+
+			engine.sortByColumn(nextDir ? colName : '', nextDir)
+		},
+		[sortColumn, sortDirection, engine]
+	)
+
+	const handleCellEdit = useCallback(
+		(logicalRowIndex: number, columnName: string, newValue: string) => {
+			const physical = engine.indices[logicalRowIndex]
+
+			engine.updateCell(physical, columnName, newValue)
+			props.onCellEdit?.(physical, columnName, newValue)
+		},
+		[engine, props]
+	)
+
+	const DOMRenderer = useCallback(() => {
+		const columns = engine.columns
+		const totalWidth = columns.reduce((s, c) => s + (c.width ?? estimatedColumnWidth), 0)
+
+		return (
+			<div className="flex min-h-0 flex-1">
+				<GridViewport
+					rowCount={engine.indices.length}
+					rowHeight={rowHeight}
+					className="flex-1 overflow-auto"
+					overscan={6}
+					contentWidth={totalWidth}
+				>
+					{virtualRows => {
+						return (
+							<div className="absolute top-0 right-0 left-0">
+								<div
+									style={{
+										width: totalWidth,
+										height: rowHeight
+									}}
+									className="bg-background border-border sticky top-0 z-20 flex items-center border-b"
+								>
+									{columns.map((col, index) => (
+										<div
+											key={index}
+											style={{
+												width: col.width ?? estimatedColumnWidth,
+												minWidth: 80
+											}}
+											className={cn(
+												'border-border box-border flex cursor-pointer items-center justify-between gap-2 truncate overflow-hidden px-3 py-2 text-xs font-medium tracking-wider whitespace-nowrap uppercase select-none',
+												index !== columns.length - 1 && 'border-r'
+											)}
+											onClick={() => handleSort(col.name)}
+										>
+											<span className="truncate">{col.name}</span>
+											<span className="text-muted-foreground">
+												{sortColumn === col.name ? (
+													sortDirection === 'asc' ? (
+														<LuChevronUp />
+													) : (
+														<LuChevronDown />
+													)
+												) : (
+													<LuChevronsUpDown />
+												)}
+											</span>
+										</div>
+									))}
+								</div>
+
+								{virtualRows.map(v => {
+									const logical = v.index
+									const physical = engine.indices[logical]
+
+									return (
+										<div
+											key={logical}
+											className="bg-card text-foreground border-border absolute left-0 box-border flex items-center border-b"
+											style={{
+												top: v.start,
+												height: v.size,
+												width: totalWidth
+											}}
+										>
+											{engine.columns.map((col, index) => {
+												const value = (col.data as any)[physical]
+
+												return (
+													<div
+														key={index}
+														style={{
+															width:
+																col.width ?? estimatedColumnWidth,
+															minWidth: 80
+														}}
+														className={cn(
+															'border-border box-border truncate overflow-hidden px-3 py-2 text-sm whitespace-nowrap',
+															index !== engine.columns.length - 1
+																? 'border-r'
+																: ''
+														)}
+														onDoubleClick={() => {
+															if (!editable) return
+
+															const newValue = window.prompt(
+																`Edit ${col.name}`,
+																String(value ?? '')
+															)
+															if (newValue !== null)
+																handleCellEdit(
+																	logical,
+																	col.name,
+																	newValue
+																)
+														}}
+													>
+														<span className="block truncate">
+															{value !== null &&
+															value !== undefined ? (
+																String(value)
+															) : (
+																<i className="text-muted-foreground">
+																	null
+																</i>
+															)}
+														</span>
+													</div>
+												)
+											})}
+										</div>
+									)
+								})}
+							</div>
+						)
+					}}
+				</GridViewport>
+			</div>
+		)
+	}, [
+		engine,
+		engine.columns,
+		engine.indices,
+		estimatedColumnWidth,
+		handleSort,
+		handleCellEdit,
+		rowHeight,
+		sortColumn,
+		sortDirection,
+		editable
+	])
+
+	return (
+		<div className={cn('flex h-full min-h-0 w-full flex-col', className)}>
+			{/* <div className="flex items-center gap-2 p-2">
+				<input
+					placeholder="Search..."
+					value={search}
+					onChange={e => setSearch(e.target.value)}
+					className="border-border rounded border px-2 py-1"
+				/>
+				<div className="text-foreground ml-auto text-sm">{engine.indices.length} rows</div>
+			</div> */}
+
+			<div className="flex min-h-0">
+				<DOMRenderer />
+			</div>
+
+			<div className="border-border flex items-center justify-between border-t px-4 py-3">
+				<div className="flex items-center gap-2 text-sm">
+					<span className="text-muted-foreground">Rows per page:</span>
+					<Select>
+						<SelectTrigger className="h-8 w-16">
+							<SelectValue />
+						</SelectTrigger>
+						<SelectContent position="popper" side="top">
+							<SelectItem value="10">10</SelectItem>
+							<SelectItem value="25">25</SelectItem>
+							<SelectItem value="50">50</SelectItem>
+							<SelectItem value="100">100</SelectItem>
+						</SelectContent>
+					</Select>
+				</div>
+
+				<div className="flex items-center gap-2">
+					<span className="text-muted-foreground text-sm">Page 1 of 6</span>
+					<div className="flex items-center gap-1">
+						<Button variant="outline" size="icon" className="h-8 w-8 bg-transparent">
+							<LuChevronsLeft className="h-4 w-4" />
+							<span className="sr-only">First page</span>
+						</Button>
+						<Button variant="outline" size="icon" className="h-8 w-8 bg-transparent">
+							<LuChevronLeft className="h-4 w-4" />
+							<span className="sr-only">Previous page</span>
+						</Button>
+						<Button variant="outline" size="icon" className="h-8 w-8 bg-transparent">
+							<LuChevronRight className="h-4 w-4" />
+							<span className="sr-only">Next page</span>
+						</Button>
+						<Button variant="outline" size="icon" className="h-8 w-8 bg-transparent">
+							<LuChevronsRight className="h-4 w-4" />
+							<span className="sr-only">Last page</span>
+						</Button>
+					</div>
+				</div>
+			</div>
+		</div>
+	)
+}
diff --git a/apps/desktop/renderer/src/widgets/data-grid/GridViewport.tsx b/apps/desktop/renderer/src/widgets/data-grid/GridViewport.tsx
new file mode 100644
index 0000000..b3a17b9
--- /dev/null
+++ b/apps/desktop/renderer/src/widgets/data-grid/GridViewport.tsx
@@ -0,0 +1,48 @@
+import { useVirtualizer } from '@tanstack/react-virtual'
+import { type ReactNode, useRef } from 'react'
+
+interface GridViewportProps {
+	rowCount: number
+	rowHeight: number
+	contentWidth?: number
+	children: (virtualRows: { index: number; start: number; size: number }[]) => ReactNode
+	className?: string
+	overscan?: number
+}
+
+export function GridViewport({
+	rowCount,
+	rowHeight,
+	contentWidth,
+	children,
+	className,
+	overscan = 5
+}: GridViewportProps) {
+	const parentRef = useRef<HTMLDivElement | null>(null)
+
+	const rowVirtualizer = useVirtualizer({
+		count: rowCount,
+		getScrollElement: () => parentRef.current,
+		estimateSize: () => rowHeight,
+		overscan
+	})
+
+	const virtualItems = rowVirtualizer.getVirtualItems()
+	const totalHeight = rowVirtualizer.getTotalSize()
+
+	return (
+		<div
+			ref={parentRef}
+			className={className ?? 'h-full w-full overflow-auto'}
+			style={{ position: 'relative' }}
+		>
+			<div
+				style={{ height: totalHeight, position: 'relative', width: contentWidth ?? '100%' }}
+			>
+				{children(
+					virtualItems.map(v => ({ index: v.index, start: v.start, size: v.size }))
+				)}
+			</div>
+		</div>
+	)
+}
diff --git a/apps/desktop/renderer/src/widgets/data-grid/types.ts b/apps/desktop/renderer/src/widgets/data-grid/types.ts
new file mode 100644
index 0000000..2579561
--- /dev/null
+++ b/apps/desktop/renderer/src/widgets/data-grid/types.ts
@@ -0,0 +1,38 @@
+export type TypedArray =
+	| Int8Array
+	| Uint8Array
+	| Uint8ClampedArray
+	| Int16Array
+	| Uint16Array
+	| Int32Array
+	| Uint32Array
+	| Float32Array
+	| Float64Array
+	| BigInt64Array
+	| BigUint64Array
+
+export type CellValue = string | number | null | undefined
+
+export interface Column<T = CellValue> {
+	name: string
+	type?: string
+	width?: number
+	data: ArrayLike<T>
+}
+
+export interface ColumnarData {
+	columns: Column[]
+	rowCount: number
+}
+
+export type RowObject = Record<string, CellValue>
+
+export interface DataGridProps {
+	data: ColumnarData | { rows: RowObject[]; columns?: { name: string; type?: string }[] }
+	rowHeight?: number
+	estimatedColumnWidth?: number
+	renderer?: 'dom' | 'canvas'
+	editable?: boolean
+	className?: string
+	onCellEdit?: (rowIndex: number, column: string, value: string) => void
+}
diff --git a/apps/desktop/renderer/src/widgets/data-grid/useGridEngine.ts b/apps/desktop/renderer/src/widgets/data-grid/useGridEngine.ts
new file mode 100644
index 0000000..33fdf8d
--- /dev/null
+++ b/apps/desktop/renderer/src/widgets/data-grid/useGridEngine.ts
@@ -0,0 +1,190 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+
+import type { CellValue, Column, ColumnarData, RowObject } from './types'
+
+export function rowsToColumnar(rows: RowObject[], columnsHint?: { name: string; type?: string }[]) {
+	if (!rows.length) {
+		const cols = (columnsHint ?? []).map(c => ({
+			name: c.name,
+			type: c.type,
+			data: [] as CellValue[]
+		}))
+
+		return { columns: cols, rowCount: 0 } as ColumnarData
+	}
+
+	const colNames = columnsHint?.map(c => c.name) ?? Object.keys(rows[0])
+	const columns: Column[] = colNames.map(name => ({ name, type: undefined, data: [] }))
+
+	for (let r = 0; r < rows.length; r++) {
+		const row = rows[r]
+
+		for (let c = 0; c < colNames.length; c++) {
+			const name = colNames[c]
+
+			;(columns[c].data as CellValue[]).push(row[name])
+		}
+	}
+
+	return { columns, rowCount: rows.length } as ColumnarData
+}
+
+export function useGridEngine(
+	initialData: ColumnarData | { rows: RowObject[]; columns?: { name: string; type?: string }[] }
+) {
+	const normalized = useMemo(() => {
+		if ('rowCount' in initialData) return initialData as ColumnarData
+
+		return rowsToColumnar(initialData.rows, initialData.columns)
+	}, [initialData])
+
+	const [columns, setColumns] = useState<Column[]>(() =>
+		normalized.columns.map(c => ({ ...c, data: Array.from(c.data as any) }))
+	)
+	const [rowCount, setRowCount] = useState<number>(normalized.rowCount)
+
+	const [indices, setIndices] = useState<number[]>(() => {
+		return Array.from({ length: normalized.rowCount }, (_, i) => i)
+	})
+
+	// @ts-ignore
+	const [globalFilter, setGlobalFilter] = useState<string | null>(null)
+
+	const columnsRef = useRef(columns)
+
+	useEffect(() => {
+		columnsRef.current = columns
+	}, [columns])
+
+	useEffect(() => {
+		setColumns(normalized.columns.map(c => ({ ...c, data: Array.from(c.data as any) })))
+		setRowCount(normalized.rowCount)
+		setIndices(Array.from({ length: normalized.rowCount }, (_, i) => i))
+		setGlobalFilter(null)
+	}, [normalized])
+
+	const getCell = useCallback(
+		(logicalRowIndex: number, columnName: string): CellValue => {
+			const physicalIndex = indices[logicalRowIndex]
+			const col = columnsRef.current.find(c => c.name === columnName)
+
+			return col ? (col.data as any)[physicalIndex] : undefined
+		},
+		[indices]
+	)
+
+	const getRow = useCallback(
+		(logicalRowIndex: number) => {
+			const physicalIndex = indices[logicalRowIndex]
+			const row: Record<string, CellValue> = {}
+
+			for (const c of columnsRef.current) {
+				row[c.name] = (c.data as any)[physicalIndex]
+			}
+
+			return row
+		},
+		[indices]
+	)
+
+	const updateCell = useCallback(
+		(physicalRowIndex: number, columnName: string, value: string | number | null) => {
+			setColumns(prev => {
+				const idx = prev.findIndex(c => c.name === columnName)
+				if (idx === -1) return prev
+				const col = prev[idx]
+				const newData = Array.from(col.data as any)
+				newData[physicalRowIndex] = value
+				const newCol = { ...col, data: newData }
+				const next = [...prev]
+				// @ts-ignore
+				next[idx] = newCol
+				return next
+			})
+		},
+		[]
+	)
+
+	const sortByColumn = useCallback(
+		(columnName: string, direction: 'asc' | 'desc' | null) => {
+			if (!direction) {
+				return
+			}
+
+			const col = columnsRef.current.find(c => c.name === columnName)
+			if (!col) return
+
+			const colData = col.data as any[]
+
+			setIndices(prevIndices => {
+				const arr = prevIndices.map(i => ({ i, v: colData[i] }))
+
+				arr.sort((a, b) => {
+					const aV = a.v,
+						bV = b.v
+					if (aV === null || aV === undefined) return 1
+					if (bV === null || bV === undefined) return -1
+					const cmp = String(aV).localeCompare(String(bV), undefined, { numeric: true })
+					return direction === 'asc' ? cmp : -cmp
+				})
+
+				return arr.map(item => item.i)
+			})
+		},
+		[rowCount]
+	)
+
+	const applyGlobalFilter = useCallback(
+		(query: string | null) => {
+			setGlobalFilter(query)
+
+			if (!query) {
+				setIndices(Array.from({ length: rowCount }, (_, i) => i))
+				return
+			}
+
+			const q = query.toLowerCase()
+
+			const cols = columnsRef.current
+			const matches: number[] = []
+
+			for (let i = 0; i < rowCount; i++) {
+				let matched = false
+
+				for (let c = 0; c < cols.length; c++) {
+					const val = (cols[c].data as any)[i]
+
+					if (val !== null && val !== undefined) {
+						if (String(val).toLowerCase().includes(q)) {
+							matched = true
+							break
+						}
+					}
+				}
+
+				if (matched) matches.push(i)
+			}
+
+			setIndices(matches)
+		},
+		[rowCount]
+	)
+
+	const reset = useCallback(() => {
+		setIndices(Array.from({ length: rowCount }, (_, i) => i))
+		setGlobalFilter(null)
+	}, [rowCount])
+
+	return {
+		columns: columns,
+		rowCount,
+		visibleCount: indices.length,
+		indices,
+		getCell,
+		getRow,
+		updateCell,
+		sortByColumn,
+		applyGlobalFilter,
+		reset
+	}
+}
diff --git a/apps/desktop/renderer/src/widgets/sidebar/components/ConnectionItem.tsx b/apps/desktop/renderer/src/widgets/sidebar/components/ConnectionItem.tsx
index 09da34f..6cbbe5f 100644
--- a/apps/desktop/renderer/src/widgets/sidebar/components/ConnectionItem.tsx
+++ b/apps/desktop/renderer/src/widgets/sidebar/components/ConnectionItem.tsx
@@ -4,6 +4,7 @@ import { useState } from 'react'
 import { getConnectionIcon } from '../lib/get-connection-icon'
 
 import type { DatabaseConnection } from '@/entities/connection/model/connection.types'
+import { useContextMenu } from '@/shared/hooks/useContextMenu'
 import {
 	AlertDialog,
 	AlertDialogAction,
@@ -32,19 +33,13 @@ interface Props {
 }
 
 export function ConnectionItem({ connection, collapsed, onSelect, onConnect, onDelete }: Props) {
-	const [contextMenuOpen, setContextMenuOpen] = useState(false)
 	const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false)
+	const { open, onContextMenu, openAtButton, close } = useContextMenu()
 
-	const handleContextMenu = (e: React.MouseEvent) => {
-		e.preventDefault()
-		setContextMenuOpen(true)
-	}
-
-	const handleCloseContext = () => setContextMenuOpen(false)
 	const handleDeleteConfirm = () => {
 		onDelete?.()
 		setIsDeleteDialogOpen(false)
-		handleCloseContext()
+		close()
 	}
 
 	if (collapsed) {
@@ -65,11 +60,11 @@ export function ConnectionItem({ connection, collapsed, onSelect, onConnect, onD
 
 	return (
 		<>
-			<DropdownMenu open={contextMenuOpen} onOpenChange={setContextMenuOpen}>
+			<DropdownMenu open={open} onOpenChange={val => !val && close()}>
 				<DropdownMenuTrigger asChild>
 					<button
 						onClick={onSelect}
-						onContextMenu={handleContextMenu}
+						onContextMenu={onContextMenu}
 						className="group hover:bg-sidebar-accent/50 relative flex w-full gap-3 rounded-md px-3 py-2.5 text-left"
 					>
 						<div className="mt-0.5 shrink-0">{getConnectionIcon(connection.type)}</div>
@@ -95,7 +90,7 @@ export function ConnectionItem({ connection, collapsed, onSelect, onConnect, onD
 							variant="ghost"
 							onClick={e => {
 								e.stopPropagation()
-								setContextMenuOpen(true)
+								openAtButton()
 							}}
 							className="absolute top-1 right-1 h-6 w-6 opacity-0 group-hover:opacity-100"
 						>
@@ -104,16 +99,11 @@ export function ConnectionItem({ connection, collapsed, onSelect, onConnect, onD
 					</button>
 				</DropdownMenuTrigger>
 
-				<DropdownMenuContent
-					align="end"
-					side="right"
-					className="w-20"
-					onCloseAutoFocus={handleCloseContext}
-				>
+				<DropdownMenuContent align="end" side="right" className="w-28">
 					<DropdownMenuItem
 						onClick={() => {
 							onConnect?.()
-							handleCloseContext()
+							close()
 						}}
 					>
 						<Database className="mr-2 h-4 w-4" />
diff --git a/packages/db/src/postgres/metadata/postgres.metadata.mapper.ts b/packages/db/src/postgres/metadata/postgres.metadata.mapper.ts
index b9c5f80..26b918e 100644
--- a/packages/db/src/postgres/metadata/postgres.metadata.mapper.ts
+++ b/packages/db/src/postgres/metadata/postgres.metadata.mapper.ts
@@ -1,11 +1,11 @@
 import type { Row } from '../../shared/sql.types'
 
-export function mapTableSchema(
-	rows: Row[]
-): { columnName: string; type: string; nullable: boolean }[] {
+import { ColumnMeta } from './postgres.metadata.repository'
+
+export function mapTableSchema(rows: Row[]): ColumnMeta[] {
 	return rows.map(row => ({
 		columnName: row.column_name,
-		type: row.data_type,
+		type: row.data_type === 'USER-DEFINED' ? row.udt_name : row.data_type,
 		nullable: row.is_nullable === 'YES'
 	}))
 }
diff --git a/packages/db/src/postgres/metadata/postgres.metadata.repository.ts b/packages/db/src/postgres/metadata/postgres.metadata.repository.ts
index 87eb4d7..aee55eb 100644
--- a/packages/db/src/postgres/metadata/postgres.metadata.repository.ts
+++ b/packages/db/src/postgres/metadata/postgres.metadata.repository.ts
@@ -24,6 +24,7 @@ export type ColumnMeta = {
 	columnName: string
 	type: string
 	nullable: boolean
+	enumValues?: string[]
 }
 
 export class PostgresMetadataRepository {
@@ -64,9 +65,20 @@ export class PostgresMetadataRepository {
 	}
 
 	public async loadColumns(schema: string, table: string): Promise<ColumnMeta[]> {
-		const res = await this.safeQuery(COLUMNS_QUERY, [schema, table])
+		const rows = await this.safeQuery(COLUMNS_QUERY, [schema, table])
+		const columns = mapTableSchema(rows.rows)
+
+		for (const col of columns) {
+			if (col.type === 'USER-DEFINED') {
+				const enumValues = await this.loadEnumValues(schema, col.type)
+				if (enumValues) {
+					col.enumValues = enumValues
+					col.type = `enum(${enumValues.join(', ')})`
+				}
+			}
+		}
 
-		return mapTableSchema(res.rows)
+		return columns
 	}
 
 	public async loadTableData(schema: string, table: string, limit = 100, offset = 0) {
@@ -85,6 +97,24 @@ export class PostgresMetadataRepository {
 		}
 	}
 
+	private async loadEnumValues(
+		schema: string,
+		columnType: string
+	): Promise<string[] | undefined> {
+		const res = await this.safeQuery<{ enumlabel: string }>(
+			`SELECT enumlabel
+     FROM pg_type t
+     JOIN pg_enum e ON t.oid = e.enumtypid
+     JOIN pg_catalog.pg_namespace n ON n.oid = t.typnamespace
+     WHERE n.nspname = $1
+       AND t.typname = $2`,
+			[schema, columnType]
+		)
+
+		if (res.rows.length === 0) return undefined
+		return res.rows.map(r => r.enumlabel)
+	}
+
 	private async safeQuery<T = any>(sql: string, params?: any[]): Promise<QueryResult<T>> {
 		try {
 			return await this.client.query<T>(sql, params)
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 171a66b..417f1e8 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1890,6 +1890,15 @@ packages:
     peerDependencies:
       vite: ^5.2.0 || ^6 || ^7
 
+  '@tanstack/react-virtual@3.13.18':
+    resolution: {integrity: sha512-dZkhyfahpvlaV0rIKnvQiVoWPyURppl6w4m9IwMDpuIjcJ1sD9YGWrt0wISvgU7ewACXx2Ct46WPgI6qAD4v6A==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+
+  '@tanstack/virtual-core@3.13.18':
+    resolution: {integrity: sha512-Mx86Hqu1k39icq2Zusq+Ey2J6dDWTjDvEv43PJtRCoEYTLyfaPnxIQ6iy7YAOK0NV/qOEmZQ/uCufrppZxTgcg==}
+
   '@tediousjs/connection-string@0.6.0':
     resolution: {integrity: sha512-GxlsW354Vi6QqbUgdPyQVcQjI7cZBdGV5vOYVYuCVDTylx2wl3WHR2HlhcxxHTrMigbelpXsdcZso+66uxPfow==}
 
@@ -6685,6 +6694,14 @@ snapshots:
       tailwindcss: 4.1.18
       vite: 7.3.1(@types/node@25.2.0)(jiti@2.6.1)(lightningcss@1.30.2)(yaml@2.8.2)
 
+  '@tanstack/react-virtual@3.13.18(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
+    dependencies:
+      '@tanstack/virtual-core': 3.13.18
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+
+  '@tanstack/virtual-core@3.13.18': {}
+
   '@tediousjs/connection-string@0.6.0': {}
 
   '@tootallnate/quickjs-emscripten@0.23.0': {}