Column Formatters

Transform how your data is displayed with custom column formatters in DBCode. Apply predefined formatters or create custom JavaScript formatters to make your data more readable and meaningful.

Overview

Column Formatters allow you to customize how data is displayed in the grid without modifying the underlying data. You can:

  • Apply predefined formatters for common data types
  • Create custom JavaScript formatters for unique formatting needs
  • Apply formatters to specific columns or all columns with the same name
  • Save and reuse custom formatters across different connections

Accessing Column Formatters

To format a column:

  1. Right-click on any column header in the data grid
  2. Select Format Column from the context menu
  3. Choose from the dropdown list which includes both predefined and custom formatters
  4. To create a new custom formatter, select the option at the bottom of the dropdown
  5. For predefined formatters, you can click Customize this formatter to create a modified version

Predefined Formatters

DBCode includes several built-in formatters organized by category:

Binary Category

Binary as UUID

  • Converts MySQL binary(16) data to readable UUID format
  • Perfect for applications storing UUIDs as binary data
  • Example: 0x1234567890ABCDEF... → 12345678-90AB-CDEF-...

Base64 Encoded

  • Displays binary data as base64 strings
  • Useful for viewing encoded binary content

Hex Viewer

  • Shows binary data as hexadecimal with byte grouping
  • Ideal for debugging binary data structures

Text Category

Hyperlinks

  • Auto-detects URLs and email addresses
  • Converts them to clickable links in the grid
  • Supports both HTTP/HTTPS URLs and email addresses

JSON Pretty

  • Formats JSON strings with proper indentation
  • Adds syntax highlighting for better readability
  • Great for JSON columns in your database

Title Case

  • Converts text to title case formatting
  • Capitalizes the first letter of each word

Numeric Category

Currency

  • Formats numbers as currency with locale support
  • Configurable currency type
  • Example: 1234.56 → $1,234.56

Percentage

  • Displays numbers as percentages
  • Configurable decimal places
  • Example: 0.1234 → 12.34%

Scientific Notation

  • Formats large or small numbers scientifically
  • Useful for scientific data
  • Example: 1230000 → 1.23e+6

Thousands Separator

  • Adds locale-appropriate thousands separators
  • Example: 1234567 → 1,234,567

Boolean Category

Yes/No

  • Displays true/false values as Yes/No
  • More user-friendly than raw boolean values

Icon

  • Shows boolean values as icons (✓/✗)
  • Visual representation of true/false states

On/Off

  • Displays boolean values as On/Off switches
  • Clear indication of state

Custom Formatters

Create your own JavaScript formatters for unique formatting requirements.

Creating a Custom Formatter

  1. In the Format Column window, open the dropdown with all formatter options
  2. Select the Create New Custom Formatter option at the bottom of the dropdown
  3. Enter a name for your formatter
  4. Write your JavaScript code in the editor
  5. Preview the output with sample data
  6. Click Save & Apply to create and apply the formatter

Customizing Predefined Formatters

You can also customize existing predefined formatters:

  1. Select any predefined formatter from the dropdown
  2. Click the Customize this formatter link
  3. Modify the JavaScript code to suit your needs
  4. Give your customized formatter a new name
  5. Preview the changes and click Save & Apply

Custom Formatter Code Structure

Your custom formatter should follow this pattern:

function format(value) {
  // Your formatting logic here
  // Return the formatted string
  return formattedValue;
}

Custom Formatter Examples

Phone Number Formatter

function format(value) {
  if (!value) return value;
  const phone = value.replace(/\D/g, '');
  if (phone.length === 10) {
    return `(${phone.slice(0,3)}) ${phone.slice(3,6)}-${phone.slice(6)}`;
  }
  return value;
}

Capitalize First Letter

function format(value) {
  if (!value || typeof value !== 'string') return value;
  return value.charAt(0).toUpperCase() + value.slice(1).toLowerCase();
}

Date Relative Time

function format(value) {
  if (!value) return value;
  const date = new Date(value);
  const now = new Date();
  const diffMs = now - date;
  const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24));


  if (diffDays === 0) return 'Today';
  if (diffDays === 1) return 'Yesterday';
  if (diffDays < 7) return `${diffDays} days ago`;


  return date.toLocaleDateString();
}

Managing Custom Formatters

Using Existing Custom Formatters

  1. Your saved custom formatters appear in the main dropdown alongside predefined formatters
  2. Select any custom formatter from the dropdown to apply it
  3. Preview the output and click Apply Formatter

Editing Custom Formatters

  1. Select an existing custom formatter from the dropdown
  2. Edit the formatter’s name and code as needed
  3. Preview your changes
  4. Click Save & Apply to update and apply the changes

Application Scope

When applying a formatter, you can choose:

Apply to Specific Column

  • Apply to just this column in this table: Formats only the selected column in the current table
  • Most specific option, useful for table-specific formatting needs

Apply to All Similar Columns

  • Apply to all columns named ‘[column_name]’: Formats all columns with the same name across all tables
  • Useful for consistent formatting of common column names like ‘email’, ‘phone’, ‘created_at’

Formatter Storage

Global Custom Formatters

  • Custom formatters are saved globally in VS Code settings
  • Available across all database connections
  • Persist between sessions and workspace changes

Connection-Specific Mappings

  • Formatter assignments are stored per connection
  • Each connection remembers which formatters are applied to which columns

Performance Considerations

  • Formatters are applied client-side and don’t affect database performance
  • Complex custom formatters may impact rendering performance on large datasets
  • Original data remains unchanged; only the display is modified
  • Formatters include error handling with fallback to original values

Best Practices

Writing Custom Formatters

  • Always handle null/undefined values
  • Keep formatters simple and fast for better performance
  • Test with various data samples before applying

Naming Conventions

  • Use descriptive names for custom formatters
  • Include the data type or use case in the name
  • Examples: “Phone Number US”, “Currency EUR”, “Date Relative”

Troubleshooting

Formatter Not Applied

  • Check that the formatter is compatible with the column’s data type
  • Verify the formatter was saved successfully
  • Try reloading the data or reopening the table

Custom Formatter Errors

  • Check the JavaScript console for error messages
  • Ensure your formatter handles all possible input values
  • Test with null, undefined, and unexpected data types

Performance Issues

  • Simplify complex formatting logic
  • Consider using predefined formatters when possible
  • Limit the use of expensive operations in custom formatters

Column Formatters make your data more readable and meaningful while maintaining the flexibility to customize display formatting to your specific needs.