feat(tables): colored select options, metadata controls, docs

Select options take a color, stored as a Badge variant name rather than a hex
so each resolves to a token pair already tuned for light and dark — a stored
hex is picked against one theme and fails in the other, and an unmapped value
falls back to currentColor and renders as a black chip. New options cycle the
palette by position so an authored option set is distinguishable without
colouring each one by hand; existing options stay gray until someone picks.

The config sidebar gains the decimal-places and include-time controls, and
asks the registry which to show (`typeOwnsMetadataKey`) rather than testing
type names — the one leak the skill's grep turned up in this change.

The delete-column undo snapshot carried one flattened field per metadata key,
so a new key was silently dropped on restore. It now captures
`typeMetadataOf(column)` whole.

Tests cover coerce/validate round-trips for the new types; the url-scheme and
legacy-date cases were confirmed to fail with their guards removed.

Author: waleedlatif1

apps/docs/content/docs/en/tables/index.mdx

@@ -23,14 +23,25 @@ Every column has a type, which decides how its values are stored and validated.
 | **Text** | A free-form string | `"Acme Corp"` |
 | **Number** | A numeric value | `42` |
 | **Currency** | An amount in a currency you pick per column | `$1,234.56` |
+| **Percent** | A percentage | `25%` |
 | **Boolean** | `true` or `false` | `true` |
-| **Date** | A date | `2026-03-16` |
-| **JSON** | An object or array | `{ "tier": "pro" }` |
+| **Date** | A date, with or without a time | `2026-03-16` |
 | **Select** | One of a fixed set of options, or several | `Pro` |
+| **Email** | An email address | `person@example.com` |
+| **Phone** | A phone number | `+1 555 123 4567` |
+| **URL** | A link | `https://sim.ai` |
+| **Duration** | A length of time | `1:30:00` |
+| **JSON** | An object or array | `{ "tier": "pro" }` |
 
 Types are enforced as you enter values, so a Number column only takes numbers.
 
-A Currency column stores a plain number and renders it in the currency you choose for that column, so filters, sorts, and exports all see the amount itself. Changing a column's currency relabels it — it does not convert the amounts.
+Currency, Percent, and Duration columns all store a plain number, so filters, sorts, and exports see the amount itself rather than its formatting — `> 50%` and `>= 1h` are ordinary numeric comparisons. Changing a column's currency relabels it; it does not convert the amounts. Number and Percent columns take a decimal-place setting that changes how values are shown without rounding what is stored.
+
+Email, Phone, and URL columns tidy values as you enter them — addresses are lower-cased, phone numbers stripped to digits, and links given a scheme — so the same value entered two ways matches. URL cells render as clickable links.
+
+A Date column can carry a time of day or just a calendar date. Turning **Include time** off on a column that already has times will drop them.
+
+Select options can each be given a color, which is used for the pill shown in the cell.
 
 ## Editing a table
 

apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/column-config-sidebar/column-config-sidebar.tsx

@@ -6,11 +6,13 @@ import { X } from '@sim/emcn/icons'
 import { toError } from '@sim/utils/errors'
 import { findValidationIssue, isValidationError } from '@/lib/api/client/errors'
 import type { ColumnDefinition, SelectOption } from '@/lib/table'
+import { typeOwnsMetadataKey } from '@/lib/table/column-types'
 import {
   DEFAULT_CURRENCY_CODE,
   getCurrencyOptions,
   resolveCurrencyCode,
 } from '@/lib/table/currency'
+import { clampPrecision, DEFAULT_PRECISION } from '@/lib/table/precision'
 import {
   FieldError,
   RequiredLabel,
@@ -21,7 +23,7 @@ import { PLAIN_COLUMN_TYPE_OPTIONS } from './column-types'
 
 /** Whether a column type carries an option set. */
 function isSelectType(type: ColumnDefinition['type']): boolean {
-  return type === 'select'
+  return typeOwnsMetadataKey(type, 'options')
 }
 
 /**
@@ -129,14 +131,27 @@ function ColumnConfigBody({
       ? resolveCurrencyCode(existingColumn?.currencyCode)
       : DEFAULT_CURRENCY_CODE
   )
+  const [precisionInput, setPrecisionInput] = useState<number>(() =>
+    clampPrecision(existingColumn?.precision)
+  )
+  const [includeTimeInput, setIncludeTimeInput] = useState<boolean>(() =>
+    // Absent means a column created before the key existed, and those hold
+    // instants — so the toggle reflects what the column actually stores.
+    config.mode === 'edit' ? existingColumn?.includeTime !== false : false
+  )
   const [showValidation, setShowValidation] = useState(false)
   const [nameError, setNameError] = useState<string | null>(null)
   const [optionsError, setOptionsError] = useState<string | null>(null)
 
   const saveDisabled = updateColumn.isPending || addColumn.isPending
   const trimmedName = nameInput.trim()
   const wantsOptions = isSelectType(typeInput)
-  const wantsCurrency = typeInput === 'currency'
+  // Which metadata controls to show is a registry question, not a list of type
+  // names: a type that later gains `precision` gets the control for free, and a
+  // type that loses it cannot leave a stale control behind.
+  const wantsCurrency = typeOwnsMetadataKey(typeInput, 'currencyCode')
+  const wantsPrecision = typeOwnsMetadataKey(typeInput, 'precision')
+  const wantsIncludeTime = typeOwnsMetadataKey(typeInput, 'includeTime')
   const trimmedOptions = optionsInput.map((o) => ({ ...o, name: o.name.trim() }))
 
   /** Client-side option validation mirroring the server rules; returns an error message or null. */
@@ -171,6 +186,8 @@ function ColumnConfigBody({
           ...(wantsOptions ? { options: trimmedOptions } : {}),
           ...(wantsOptions && multipleInput ? { multiple: true } : {}),
           ...(wantsCurrency ? { currencyCode: currencyInput } : {}),
+          ...(wantsPrecision ? { precision: precisionInput } : {}),
+          ...(wantsIncludeTime ? { includeTime: includeTimeInput } : {}),
         })
         toast.success(`Added "${trimmedName}"`)
         onClose()
@@ -191,6 +208,10 @@ function ColumnConfigBody({
       const multipleChanged = wantsOptions && !!existingColumn?.multiple !== multipleInput
       const currencyChanged =
         wantsCurrency && resolveCurrencyCode(existingColumn?.currencyCode) !== currencyInput
+      const precisionChanged =
+        wantsPrecision && clampPrecision(existingColumn?.precision) !== precisionInput
+      const includeTimeChanged =
+        wantsIncludeTime && (existingColumn?.includeTime !== false) !== includeTimeInput
 
       const updates: {
         name?: string
@@ -199,6 +220,8 @@ function ColumnConfigBody({
         options?: SelectOption[]
         multiple?: boolean
         currencyCode?: string
+        precision?: number
+        includeTime?: boolean
       } = {
         ...(renamed ? { name: trimmedName } : {}),
         ...(typeChanged ? { type: typeInput } : {}),
@@ -209,6 +232,12 @@ function ColumnConfigBody({
         ...(wantsCurrency && (typeChanged || currencyChanged)
           ? { currencyCode: currencyInput }
           : {}),
+        ...(wantsPrecision && (typeChanged || precisionChanged)
+          ? { precision: precisionInput }
+          : {}),
+        ...(wantsIncludeTime && (typeChanged || includeTimeChanged)
+          ? { includeTime: includeTimeInput }
+          : {}),
       }
       if (Object.keys(updates).length === 0) {
         onClose()
@@ -306,6 +335,37 @@ function ColumnConfigBody({
           </>
         )}
 
+        {wantsPrecision && (
+          <>
+            <FieldDivider />
+            <div className='flex flex-col gap-[9.5px]'>
+              <RequiredLabel>Decimal places</RequiredLabel>
+              <ChipInput
+                type='number'
+                inputMode='numeric'
+                min={DEFAULT_PRECISION.min}
+                max={DEFAULT_PRECISION.max}
+                value={String(precisionInput)}
+                onChange={(e) => setPrecisionInput(clampPrecision(Number(e.target.value)))}
+              />
+            </div>
+          </>
+        )}
+
+        {wantsIncludeTime && (
+          <>
+            <FieldDivider />
+            <div className='flex items-center justify-between pl-0.5'>
+              <Label htmlFor='column-sidebar-include-time'>Include time</Label>
+              <Switch
+                id='column-sidebar-include-time'
+                checked={includeTimeInput}
+                onCheckedChange={(v) => setIncludeTimeInput(!!v)}
+              />
+            </div>
+          </>
+        )}
+
         {wantsOptions && (
           <>
             <FieldDivider />

apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/select-field/select-color-picker.tsx

@@ -0,0 +1,48 @@
+'use client'
+
+import { Badge, DropdownMenu, DropdownMenuContent, DropdownMenuTrigger } from '@sim/emcn'
+import { SELECT_OPTION_COLORS, type SelectOptionColor } from '@/lib/table'
+
+interface SelectColorPickerProps {
+  color: SelectOptionColor | undefined
+  onChange: (color: SelectOptionColor) => void
+  /** Option name, so the trigger's accessible label says which option it colors. */
+  optionName: string
+}
+
+/**
+ * Swatch dropdown for one option's pill color.
+ *
+ * Each swatch is a real `Badge` in the variant it selects, so the menu shows the
+ * exact chrome the pill will have in both themes rather than an approximation
+ * of it — the badge stays the single owner of its colors.
+ */
+export function SelectColorPicker({ color, onChange, optionName }: SelectColorPickerProps) {
+  const current = color ?? 'gray'
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger
+        className='size-7 shrink-0 rounded-md p-1'
+        aria-label={`Color for ${optionName || 'option'}`}
+      >
+        <Badge variant={current} size='sm' className='size-full justify-center p-0'>
+          <span className='sr-only'>{current}</span>
+        </Badge>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align='end' className='grid grid-cols-5 gap-1 p-1.5'>
+        {SELECT_OPTION_COLORS.map((swatch) => (
+          <button
+            key={swatch}
+            type='button'
+            onClick={() => onChange(swatch)}
+            aria-label={swatch}
+            aria-pressed={swatch === current}
+            className='rounded-md p-0.5 transition-colors hover-hover:bg-[var(--surface-5)]'
+          >
+            <Badge variant={swatch} size='sm' className='size-5 justify-center p-0' />
+          </button>
+        ))}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}

apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/select-field/select-options-editor.tsx

@@ -4,7 +4,8 @@ import { useEffect, useRef, useState } from 'react'
 import { Button, ChipInput } from '@sim/emcn'
 import { X } from '@sim/emcn/icons'
 import { generateShortId } from '@sim/utils/id'
-import type { SelectOption } from '@/lib/table'
+import { SELECT_OPTION_COLORS, type SelectOption } from '@/lib/table'
+import { SelectColorPicker } from './select-color-picker'
 
 interface SelectOptionsEditorProps {
   options: SelectOption[]
@@ -44,17 +45,29 @@ export function SelectOptionsEditor({ options, onChange }: SelectOptionsEditorPr
     onChange(options.filter((o) => o.id !== id))
   }
 
-  /** Typing into the trailing row promotes it to a real option and keeps focus. */
+  /**
+   * Typing into the trailing row promotes it to a real option and keeps focus.
+   *
+   * The color cycles through the palette by position rather than defaulting to
+   * gray, so a freshly authored option set is distinguishable at a glance
+   * without the user colouring each one by hand.
+   */
   const materialize = (name: string) => {
     const id = generateShortId()
-    onChange([...options, { id, name }])
+    const color = SELECT_OPTION_COLORS[options.length % SELECT_OPTION_COLORS.length]
+    onChange([...options, { id, name, color }])
     setPendingFocusId(id)
   }
 
   return (
     <div className='flex flex-col gap-1'>
       {options.map((option) => (
         <div key={option.id} className='flex items-center gap-1.5'>
+          <SelectColorPicker
+            color={option.color}
+            onChange={(color) => update(option.id, { color })}
+            optionName={option.name}
+          />
           <ChipInput
             ref={(el) => {
               if (el) inputRefs.current.set(option.id, el)
@@ -86,6 +99,7 @@ export function SelectOptionsEditor({ options, onChange }: SelectOptionsEditorPr
         </div>
       ))}
       <div className='flex items-center gap-1.5'>
+        <span className='size-7 shrink-0' aria-hidden />
         <ChipInput
           ref={trailingRef}
           value=''

apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/select-field/select-pill.tsx

@@ -34,10 +34,17 @@ interface SelectPillProps {
   className?: string
 }
 
-/** A single option pill, rendered through the shared neutral `Badge`. */
+/**
+ * A single option pill, rendered through the shared `Badge`.
+ *
+ * The option's color IS a `Badge` variant name, so this passes it straight
+ * through rather than mapping to classes — the badge stays the single owner of
+ * its chrome. An option with no color keeps the neutral gray every option used
+ * before colors existed.
+ */
 export function SelectPill({ option, size = 'sm', className }: SelectPillProps) {
   return (
-    <Badge variant='gray' size={size} className={cn('max-w-full', className)}>
+    <Badge variant={option.color ?? 'gray'} size={size} className={cn('max-w-full', className)}>
       <span className='truncate'>{option.name}</span>
     </Badge>
   )

apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/table-grid.tsx

@@ -21,7 +21,7 @@ import type {
   WorkflowGroup,
 } from '@/lib/table'
 import { getColumnId } from '@/lib/table/column-keys'
-import { columnTypeOf } from '@/lib/table/column-types'
+import { columnTypeOf, typeMetadataOf } from '@/lib/table/column-types'
 import { TABLE_LIMITS } from '@/lib/table/constants'
 import { useUserPermissionsContext } from '@/app/workspace/[workspaceId]/providers/workspace-permissions-provider'
 import type { RemoteTableSelection } from '@/app/workspace/[workspaceId]/tables/[tableId]/hooks/use-table-room'
@@ -3539,11 +3539,9 @@ export function TableGrid({
             columnPosition: adjustedPosition >= 0 ? adjustedPosition : cols.length,
             columnUnique: entry.def?.unique ?? false,
             columnRequired: entry.def?.required ?? false,
-            // Without these a deleted select column can't be re-created — it is
+            // Without this a deleted select column can't be re-created — it is
             // invalid with no options, and the saved cell data is option ids.
-            ...(entry.def?.options ? { columnOptions: entry.def.options } : {}),
-            ...(entry.def?.multiple ? { columnMultiple: true } : {}),
-            ...(entry.def?.currencyCode ? { columnCurrencyCode: entry.def.currencyCode } : {}),
+            ...(entry.def ? { columnMetadata: typeMetadataOf(entry.def) } : {}),
             cellData,
             previousOrder: orderSnapshot,
             previousWidth,

apps/sim/hooks/use-table-undo.ts

@@ -386,11 +386,10 @@ export function useTableUndo({
                   type: action.columnType,
                   required: action.columnRequired,
                   unique: action.columnUnique,
-                  // A select column is rejected without its options, and the
-                  // cell data restored below is keyed by those option ids.
-                  ...(action.columnOptions ? { options: action.columnOptions } : {}),
-                  ...(action.columnMultiple ? { multiple: true } : {}),
-                  ...(action.columnCurrencyCode ? { currencyCode: action.columnCurrencyCode } : {}),
+                  // Every type-specific key the column carried. A select column
+                  // is rejected without its options, and the cell data restored
+                  // below is keyed by those option ids.
+                  ...action.columnMetadata,
                   position: action.columnPosition,
                 },
                 {

apps/sim/lib/api/contracts/tables.ts

@@ -35,6 +35,7 @@ import {
 } from '@/lib/table/constants'
 import { CSV_MAX_FILE_SIZE_BYTES } from '@/lib/table/import'
 import type { ColumnTypeMetadata } from '@/lib/table/types'
+import { SELECT_OPTION_COLORS } from '@/lib/table/types'
 
 export const domainObjectSchema = <T>() => z.custom<T>(isRecordLike)
 
@@ -51,6 +52,8 @@ export const selectOptionSchema = z.object({
     .string()
     .min(1, 'Option name is required')
     .max(100, 'Option name must be 100 characters or less'),
+  /** Pill color; absent renders the neutral gray options used before colors. */
+  color: z.enum(SELECT_OPTION_COLORS).optional(),
 })
 
 export const selectOptionsSchema = z

apps/sim/lib/copilot/tools/server/table/user-table.ts

@@ -80,6 +80,7 @@ import type {
   Filter,
   RowData,
   SelectOption,
+  SelectOptionColor,
   SortSpec,
   TableDefinition,
   TableDeleteJobPayload,
@@ -92,6 +93,7 @@ import type {
   WorkflowGroupInputMapping,
   WorkflowGroupOutput,
 } from '@/lib/table/types'
+import { isSelectOptionColor } from '@/lib/table/types'
 import { markTableUpdateFailed, runTableUpdate } from '@/lib/table/update-runner'
 import { cancelWorkflowGroupRuns, runWorkflowColumn } from '@/lib/table/workflow-columns'
 import {
@@ -356,12 +358,27 @@ export function normalizeSelectOptionsInput(
   }
   const resolveId = (name: string): string => idByName.get(name.toLowerCase()) ?? generateShortId()
 
+  // An option's existing color survives a re-send that omits it, so an edit
+  // that only renames options does not silently reset every pill to gray.
+  const colorByName = new Map<string, SelectOptionColor>()
+  for (const option of existing) {
+    if (option.color) colorByName.set(option.name.toLowerCase(), option.color)
+  }
+  const resolveColor = (name: string, supplied: unknown): SelectOptionColor | undefined => {
+    if (typeof supplied === 'string' && isSelectOptionColor(supplied)) return supplied
+    return colorByName.get(name.toLowerCase())
+  }
+
   return raw.map((entry) => {
-    if (typeof entry === 'string') return { id: resolveId(entry), name: entry }
-    const e = (entry ?? {}) as { id?: unknown; name?: unknown }
+    if (typeof entry === 'string') {
+      const color = resolveColor(entry, undefined)
+      return { id: resolveId(entry), name: entry, ...(color ? { color } : {}) }
+    }
+    const e = (entry ?? {}) as { id?: unknown; name?: unknown; color?: unknown }
     const name = typeof e.name === 'string' ? e.name : String(e.name ?? '')
     const id = typeof e.id === 'string' && e.id.length > 0 ? e.id : resolveId(name)
-    return { id, name }
+    const color = resolveColor(name, e.color)
+    return { id, name, ...(color ? { color } : {}) }
   })
 }