UI Data Types Reference

Complete reference for Supamode UI data types. Choose the right input control for each column to give your team the best editing experience.

The UI Data Type determines how Supamode renders input controls for a column. Setting the correct type gives your team appropriate inputs, validation, and formatting for each field.

How Data Types Work

Supamode infers types from PostgreSQL metadata:

text columns default to Plain Text
boolean columns get a toggle switch
timestamp columns get a date picker
jsonb columns get a JSON editor

You can override these defaults to better match your data. For example, a text column storing email addresses should use the Email type for proper validation and formatting.

Data Type Reference

Text Types

Plain Text

Single-line text input for short strings.

Input control: <input type="text"> Best for: Names, titles, slugs, short identifiers Table display: Truncated if too long

Example columns: first_name, title, slug

Long Text

Multi-line textarea with auto-resize.

Input control: <textarea> Best for: Descriptions, bios, notes, any multi-line content Table display: First line with ellipsis

Example columns: description, bio, notes

Markdown

Rich Markdown editor with toolbar and live preview.

Input control: Markdown editor with formatting buttons Best for: Blog content, documentation, formatted text Table display: Plain text preview (no formatting) Stored as: Raw Markdown string

Example columns: content, body, readme

HTML

WYSIWYG rich text editor.

Input control: Visual editor with formatting, links, embeds Best for: Marketing content, email templates, rich descriptions Table display: Plain text preview (tags stripped) Stored as: Sanitized HTML

Example columns: html_content, email_body

Contact Types

Email

Email input with validation.

Input control: <input type="email"> Validation: Must be valid email format Table display: Email with copy button and mail icon Best for: Email address columns

Example columns: email, contact_email, notification_email

Phone

Telephone input.

Input control: <input type="tel"> Table display: Phone number with copy button Best for: Phone number columns

Example columns: phone, mobile, contact_number

URL

URL input with validation.

Input control: <input type="url"> Validation: Must be valid URL Table display: Clickable link with external icon Best for: Website URLs, links, references

Example columns: website, profile_url, source_url

Address

Structured address input with multiple fields.

Input control: Separate inputs for street, city, state, zip, country Stored as: JSON object Table display: Formatted single-line address

Example columns: address, billing_address, shipping_address

JSON structure:

{
  "street": "123 Main St",
  "city": "San Francisco",
  "state": "CA",
  "zip": "94102",
  "country": "USA"
}

Numeric and Financial Types

Integer

Whole number input.

Input control: Number input (no decimals) Table display: Formatted number Best for: Counts, quantities, IDs

Float

Decimal number input.

Input control: Number input with decimals Table display: Formatted number Best for: Measurements, ratings, percentages

Currency

Number input with currency formatting.

Input control: Number input with currency symbol Configuration: Select currency code (USD, EUR, GBP, etc.) Table display: Formatted with currency symbol and decimals Stored as: Number (cents or full amount based on your schema)

Example columns: price, amount, total

Percentage

Number input with percentage display.

Input control: Number input Table display: Number with % suffix Best for: Rates, discounts, completion percentages

Example columns: discount_rate, tax_rate, progress

Date and Time Types

Date

Date picker.

Input control: Calendar date picker Stored as: ISO date string or timestamp Table display: Localized date format

DateTime

Date and time picker.

Input control: Calendar + time picker Table display: Localized date and time

Time

Time picker only.

Input control: Time input Table display: Formatted time

Boolean Type

Boolean

Toggle switch.

Input control: On/off switch Table display: Checkmark or X icon Best for: Flags, status toggles

Example columns: is_active, is_published, email_verified

Selection Types

List

Dropdown from predefined options.

Input control: Select dropdown Configuration: Define available options Best for: Enums, status fields, categories

Example columns: status, type, category

Visual Types

Color

Color picker input.

Input control: Color picker with hex/RGB input Table display: Color swatch with hex code Stored as: Hex string (e.g., #FF5733)

Example columns: brand_color, theme_color, accent

File Types

For file types, you also need to configure storage settings.

File

General file upload.

Input control: File picker/drag-and-drop Table display: Filename with download link Best for: Documents, PDFs, any file type

Example columns: attachment, document, resume

Image

Image upload with preview.

Input control: Image picker with preview Table display: Thumbnail preview Best for: Photos, avatars, graphics

Example columns: avatar, cover_image, thumbnail

Audio

Audio file upload with player.

Input control: Audio file picker Table display: Audio player Best for: Music, podcasts, voice recordings

Example columns: audio_file, podcast_episode

Video

Video upload with player.

Input control: Video file picker Table display: Video player/thumbnail Best for: Videos, recordings

Example columns: video_url, intro_video

PostgreSQL to UI Type Mapping

Supamode auto-detects types based on PostgreSQL column types:

PostgreSQL Type	Default UI Type
`text`, `varchar`, `char`	Plain Text
`boolean`	Boolean
`integer`, `int4`, `int8`	Integer
`numeric`, `decimal`, `float4`, `float8`	Float
`date`	Date
`timestamp`, `timestamptz`	DateTime
`time`, `timetz`	Time
`json`, `jsonb`	JSON Editor
`uuid`	Plain Text
`bytea`	File

When to Override the Default

Override the auto-detected type when:

Scenario	Override To
`text` column stores emails	Email
`text` column stores URLs	URL
`text` column stores Markdown	Markdown
`text` column stores HTML	HTML
`text` column stores file paths	File/Image
`numeric` column is money	Currency
`numeric` column is percentage	Percentage
`text` column has enum values	List
`text` column stores colors	Color
`text` column stores phones	Phone

Configuration Tips

Use Specific Types

Don't leave everything as Plain Text. Specific types provide:

Better input controls (date pickers, color pickers)
Input validation (email format, URL format)
Better table formatting (currency, percentages)
Improved UX (copy buttons, preview)

Match Your Schema

If your PostgreSQL column has constraints, match them in the UI type:

CHECK constraint for specific values → List type
email in column name → Email type
_url suffix → URL type

Consider the User

Choose types based on who edits the data:

Technical users: Plain Text is fine
Non-technical users: Use specific types with validation
Content editors: Markdown or HTML editors

Frequently Asked Questions

Can I create custom data types?

No. Supamode has a fixed set of UI data types. For custom needs, use the closest type or store the data as JSON and use the JSON editor.

Does changing the UI type affect the database?

No. UI types only control how the Data Explorer renders inputs and displays values. Your PostgreSQL column type stays the same.

Why isn't my file upload working?

File types (File, Image, Audio, Video) require storage configuration. Set up the bucket name and path template in the column's storage settings.

Can I validate input beyond what the type provides?

UI types provide basic validation. For complex validation, use PostgreSQL CHECK constraints or database triggers. Supamode will show constraint violation errors.

How do I handle JSONB columns?

JSONB columns default to a JSON editor. For structured JSON (like addresses), consider the Address type. Otherwise, the JSON editor provides syntax highlighting and validation.