Data Grid
The data grid displays query results and table contents in a spreadsheet-like interface. It supports viewing, editing, sorting, and exporting data with high performance even for large datasets.
Viewing Data
Opening Tables
To view a table’s contents:
- Expand a database in the sidebar
- Click on a table name
- The data grid loads the table contents
Or run a query:
The data grid header shows:
- Row count: Number of rows returned
- Execution time: How long the query took
- Affected rows: For UPDATE/DELETE queries
Column Features
Resizing Columns
- Drag column borders to resize
- Double-click a border to auto-fit column width
- Column widths are remembered for each table
Sorting Data
Click a column header to sort:
- First click: Sort ascending (A-Z, 0-9)
- Second click: Sort descending (Z-A, 9-0)
- Third click: Remove sort
Sorting is done locally on the loaded data. For server-side sorting, use ORDER BY in your query.
Column Types
The data grid displays different data types appropriately:
| Type | Display |
|---|
| Text/Varchar | Plain text |
| Integer | Right-aligned numbers |
| Decimal/Float | Formatted numbers |
| Boolean | True/False |
| Date/Time | Formatted date strings |
| NULL | Styled “NULL” indicator |
| JSON | Formatted JSON (expandable) |
| ENUM | Dropdown popover editor |
| SET | Checkbox popover editor |
| Binary/BLOB | Binary indicator |
Data Editing
Inline Editing
To edit a cell:
- Double-click the cell
- Enter the new value
- Press
Enter to confirm or Escape to cancel
Edit Modes
| Mode | Trigger | Description |
|---|
| View | Default | Read-only display |
| Edit | Double-click | Modify cell value |
Date/Time Picker
When you edit a cell in a date, datetime, timestamp, or time column, a native date picker popover appears instead of a plain text field. The picker automatically adapts to the column type:
| Column Type | Picker Elements |
|---|
DATE | Year, month, day |
DATETIME / TIMESTAMP | Year, month, day, hour, minute, second |
TIME | Hour, minute, second |
YYYY-MM-DD HH:MM:SS). Use the stepper controls or type directly in the picker fields to change the date.
The date picker automatically parses the existing cell value. If the value cannot be parsed, it defaults to the current date/time.
Foreign Key Lookup
When you edit a cell in a foreign key column, a searchable dropdown popover appears showing valid values from the referenced table:
- The dropdown displays both the FK value and a descriptive text column (e.g.,
1 — John Doe)
- Type in the search field to filter values
- Single-click a value to highlight it; double-click or press
Enter to commit the selection
- The popover auto-detects the best display column from the referenced table
Foreign key lookups fetch up to 1,000 values from the referenced table. For tables with more values, use the search field to narrow results.
ENUM Column Editor
When you double-click a cell in an ENUM column, a searchable dropdown popover appears showing all allowed values:
- Search field: Type to filter the list of values
- NULL option: Shown at the top for nullable columns (displayed in italic)
- Current value: Highlighted in the accent color
- Single-click a value to select and commit immediately
- Press
Escape to cancel without changes
This works across all supported databases:
| Database | ENUM Source |
|---|
| MySQL/MariaDB | Native ENUM type from column definition |
| PostgreSQL | User-defined enum types (via pg_enum catalog) |
| SQLite | CHECK(column IN ('val1','val2')) constraints |
SET Column Editor
When you double-click a cell in a SET column (MySQL/MariaDB), a checkbox popover appears:
- Each allowed value is shown as a checkbox
- Currently selected values are pre-checked (parsed from the comma-separated cell value)
- Click OK or press
Enter to commit the selected values (joined with commas)
- Click Cancel or press
Escape to discard changes
If ENUM/SET values are not available (e.g., from a complex query result rather than a direct table browse), the cell falls back to inline text editing.
JSON Editor
When you edit a cell in a JSON or JSONB column, a dedicated JSON editor popover appears:
- Real-time validation: Shows whether the JSON is valid as you type
- Save/Cancel: Explicit buttons to commit or discard changes
The editor validates JSON before saving. If the text is not valid JSON, you’ll see a confirmation dialog before the value is saved.
JSON values are automatically compacted (minified) when saved to the database for efficient storage.
Multi-Row Editing
You can perform operations on multiple rows at once:
- Select multiple rows: Click row numbers while holding
Cmd (non-contiguous) or Shift (range)
- Delete multiple rows: Select rows, then click Delete or press the
Delete key
- Multi-row operations: Use toolbar buttons to act on the current selection
Saving Changes
Changes are queued and not applied to the database immediately. Use the following actions to manage pending changes:
- Commit: Click the Commit button (or press
Cmd+S) to apply all pending changes to the database
- Discard: Click the Discard button to revert all pending changes
- Undo/Redo: Press
Cmd+Z to undo or Cmd+Shift+Z to redo individual edits before committing
See Change Tracking for full details on how changes are queued and applied.
Editing is available for simple SELECT * FROM table queries. Complex queries with joins or aggregations are read-only.
Adding New Rows
To add a new row:
- Click the + button in the toolbar (or use keyboard shortcut)
- Fill in the values for each column
- Apply changes to save
Deleting Rows
To delete rows:
- Select the row(s) to delete
- Click the Delete button or press
Delete key
- Confirm the deletion
- Apply changes to execute
Change Indicators
When you make edits, TablePro provides visual feedback on pending changes:
- Modified cells are highlighted with a distinct background color
- New rows display an insertion indicator
- Deleted rows display a deletion indicator
- The toolbar shows the count of pending changes
These indicators help you review all modifications before committing them to the database. See Change Tracking for details on how change tracking works.
Navigation
Keyboard Navigation
| Key | Action |
|---|
| Arrow keys | Move between cells |
Tab | Move to next cell |
Shift+Tab | Move to previous cell |
Enter | Edit selected cell |
Escape | Cancel edit / Deselect |
Home | Go to first cell in row |
End | Go to last cell in row |
Cmd+Home | Go to first row |
Cmd+End | Go to last row |
Page Up | Scroll up one page |
Page Down | Scroll down one page |
Mouse Navigation
- Click: Select a cell
- Double-click: Edit a cell
- Click + drag: Select multiple cells
- Scroll wheel: Vertical scrolling
- Shift + scroll: Horizontal scrolling
Selection
Selecting Cells
- Single cell: Click the cell
- Cell range: Click and drag, or click first cell then Shift+click last cell
- Entire row: Click the row number
- Multiple rows: Click row number and drag, or Cmd+click for non-contiguous
Copying Data
- Select the cells or rows you want to copy
- Press
Cmd+C
- Paste into another application
TablePro supports multiple copy formats:
| Format | Shortcut | Description |
|---|
| Tab-separated | Cmd+C | Default copy, compatible with spreadsheets |
| CSV | Cmd+Shift+C | Comma-separated values |
| JSON | Cmd+Option+C | JSON array of objects |
| TSV | Available from context menu | Tab-separated with header |
- Excel
- Numbers
- Google Sheets
- Text editors
For large result sets, the data grid uses pagination:
Page Controls
- First page: Go to the beginning
- Previous page: Go back one page
- Page number: Current page / total pages
- Next page: Go forward one page
- Last page: Go to the end
Page Size
Configure the default page size in Settings > Data Grid:
| Option | Rows per Page |
|---|
| Small | 100 |
| Medium | 500 |
| Large | 1,000 |
| Custom | 10 - 100,000 |
Smaller page sizes load faster and use less memory. Use larger sizes when you need to see more data at once.
NULL Values
NULL values are displayed distinctively:
- Styled text showing “NULL” (customizable)
- Different color from regular values
- Cannot be confused with the string “NULL”
Customizing NULL Display
In Settings > Data Grid:
| Setting | Default | Description |
|---|
| NULL Display | ”NULL” | Text shown for NULL values |
| Format | Example |
|---|
| ISO 8601 | 2024-12-31 23:59:59 |
| ISO Date | 2024-12-31 |
| US Long | 12/31/2024 11:59:59 PM |
| US Short | 12/31/2024 |
| EU Long | 31/12/2024 23:59:59 |
| EU Short | 31/12/2024 |
Row Height
Adjust row height for better readability:
| Option | Height | Best For |
|---|
| Compact | 20px | Dense data, more rows visible |
| Normal | 24px | Standard viewing |
| Comfortable | 28px | Better readability |
| Spacious | 32px | Accessibility, touch |
Alternate Row Colors
Enable alternating row colors for easier scanning:
- On: Every other row has a subtle background color
- Off: All rows have the same background
Configure in Settings > Data Grid > Show Alternate Rows.
Working with Large Datasets
-
Use LIMIT: Always limit results when exploring
SELECT * FROM large_table LIMIT 100;
-
Select specific columns: Avoid
SELECT * for tables with many columns
SELECT id, name, email FROM users;
-
Use pagination: Let the data grid paginate results
-
Filter at the database: Use WHERE clauses instead of loading all data
SELECT * FROM orders WHERE status = 'pending';
Memory Usage
The data grid loads data in pages to manage memory:
- Only visible pages are kept in memory
- Scrolling loads new pages as needed
- Large BLOB/TEXT columns are loaded on demand
Export Options
Export data directly from the data grid:
- Run your query or open a table
- Click the Export button
- Choose format: CSV, JSON, SQL
- Select destination
See Import & Export for detailed export options.
Keyboard Shortcuts
| Action | Shortcut |
|---|
| Copy selection | Cmd+C |
| Copy as CSV | Cmd+Shift+C |
| Copy as JSON | Cmd+Option+C |
| Select all | Cmd+A |
| Delete row | Delete |
| Edit cell | Enter |
| Cancel edit | Escape |
| Undo | Cmd+Z |
| Redo | Cmd+Shift+Z |
| Commit changes | Cmd+S |
| Navigate | Arrow keys |
| Next cell | Tab |
| Previous cell | Shift+Tab |
Next Steps
