Database Client

DevDb Pro provides a powerful, intuitive database client interface directly in VS Code. Browse, edit, and manage your database without leaving your editor.

Interface Overview

The DevDb interface consists of three main sections:

1. Sidebar (Left)

• Database connections list
• Tables organized by database
• Quick reconnect button
• Connection status indicators

2. Main View (Center)

• Table data in a spreadsheet-like grid
• Inline editing capabilities
• Row actions (delete, edit)
• Pagination controls

3. Details Pane (Right)

• Value preview - View selected cell data
• Schema viewer - Table structure and constraints
• JSON formatter - Pretty-print JSON values

Browsing Data

Opening Tables

Method 1: From Sidebar

• Click any table name to open it
• Cmd+Click (Mac) or Ctrl+Click (Windows/Linux) to open in current tab

Method 2: Quick Access

• Press Cmd+K Cmd+G (Mac) or Ctrl+K Ctrl+G (Windows/Linux)
• Type table name
• Press Enter

Method 3: From Code

• Right-click a table/model name in your code
• Select "DevDb > Open table at cursor"

Navigating Data

• Scroll to browse rows
• Click column headers to sort
• Use pagination controls at the bottom
• Search/filter using the search box

Previewing Values

Click any cell to preview its content in the right pane:

• Text values - Full content display
• JSON strings - Automatically formatted and highlighted
• Large text - Scrollable preview
• NULL values - Clearly indicated

Editing Data

Edit a Value

1. Cmd+Click (Mac) or Ctrl+Click (Windows/Linux) on the value
2. Edit the content in the input field
3. Press Enter or click outside to stage the change
4. Press Cmd+S (Mac) or Ctrl+S (Windows/Linux) to save

Undo/Redo Changes

During an edit session:

• Cmd+Z / Ctrl+Z - Undo last change
• Cmd+Y / Ctrl+Y - Redo change

Set Value to NULL

1. Click the cell to select it
2. Click the "Set null" button
3. Save changes with Cmd+S / Ctrl+S

Edit Controls

When in edit mode, a control box appears with:

• Undo button
• Redo button
• Save button
• Cancel button
• Change counter showing pending edits

Deleting Data

Delete a Row

1. Hover over the row
2. Click the trash icon
3. Confirm the deletion

Permanent Action

Row deletions are immediate and cannot be undone. Make sure you have backups if needed.

Schema Viewer

View table structure in the right pane:

Information Displayed

• Column names and types
• Primary keys
• Foreign keys
• Indexes
• Constraints (NOT NULL, UNIQUE, etc.)
• Default values

Usage

1. Open a table
2. Switch to the "Schema" tab in the right pane
3. Browse column definitions

Connection Management

Multiple Connections

DevDb supports multiple database connections:

• Each connection appears in the sidebar
• Switch between databases by clicking connection names
• Each maintains independent state

Reconnect

If a connection is lost:

1. Click the Reconnect button in the sidebar
2. DevDb attempts to re-establish the connection
3. Status indicator updates on success/failure

Performance Tips

Working with Large Tables

• Use pagination to load data in chunks
• Apply filters to reduce result sets
• Sort on indexed columns for better performance

Editing Best Practices

• Stage multiple edits before saving (reduces database calls)
• Review changes in the control box before saving
• Use undo/redo to experiment safely

JSON Data

• Click to preview instead of editing large JSON in-cell
• Copy formatted JSON from the preview pane
• Validate JSON before saving edits

Keyboard Shortcuts

Action	Mac	Windows/Linux
Toggle DevDb	Cmd+K Cmd+D	Ctrl+K Ctrl+D
Go to Table	Cmd+K Cmd+G	Ctrl+K Ctrl+G
Edit Value	Cmd+Click	Ctrl+Click
Save Changes	Cmd+S	Ctrl+S
Undo	Cmd+Z	Ctrl+Z
Redo	Cmd+Y	Ctrl+Y

Next Steps

• Quick Table Access - Navigate tables efficiently
• Data Export - Export data to JSON or SQL
• Laravel Integration - Framework-specific features