fix(tables): clamp ratings on server coercion, lazy locale formatters, case-insensitive select match in row modal

Author: waleedlatif1

apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/row-modal/row-modal.tsx

@@ -255,15 +255,19 @@ function ColumnField({ column, value, onChange }: ColumnFieldProps) {
   if (column.type === 'select') {
     const options = column.options ?? []
     const current = typeof value === 'string' ? value : ''
+    // Match the stored value case-insensitively (same as the grid's tag
+    // rendering) so a casing variant selects its canonical option instead of
+    // appearing as a duplicate entry.
+    const matched = options.find((option) => option.toLowerCase() === current.toLowerCase())
     const selectOptions = [
       ...options.map((option) => ({ label: option, value: option })),
-      ...(current && !options.includes(current) ? [{ label: current, value: current }] : []),
+      ...(current && matched === undefined ? [{ label: current, value: current }] : []),
     ]
     return (
       <ChipModalField type='custom' title={title} required={column.required} hint={hint}>
         <ChipCombobox
           options={selectOptions}
-          value={current}
+          value={matched ?? current}
           onChange={(v) => onChange(v)}
           placeholder='Select option'
           maxHeight={260}

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

@@ -8,11 +8,11 @@ import { Badge, Checkbox, Tooltip } from '@/components/emcn'
 import { Mail } from '@/components/emcn/icons'
 import { cn } from '@/lib/core/utils/cn'
 import type { RowExecutionMetadata } from '@/lib/table'
+import { RATING_MAX } from '@/lib/table/constants'
 import { StatusBadge } from '@/app/workspace/[workspaceId]/logs/utils'
 import {
   formatCurrencyDisplay,
   formatPercentDisplay,
-  RATING_MAX,
   selectBadgeVariant,
   storageToDisplay,
 } from '../../../utils'

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

@@ -13,7 +13,7 @@ import { cn } from '@/lib/core/utils/cn'
 import { captureEvent } from '@/lib/posthog/client'
 import type { ColumnDefinition, Filter, TableRow as TableRowType, WorkflowGroup } from '@/lib/table'
 import { getColumnId } from '@/lib/table/column-keys'
-import { getColumnStorageType, TABLE_LIMITS } from '@/lib/table/constants'
+import { getColumnStorageType, RATING_MAX, TABLE_LIMITS } from '@/lib/table/constants'
 import { useUserPermissionsContext } from '@/app/workspace/[workspaceId]/providers/workspace-permissions-provider'
 import {
   useAddTableColumn,
@@ -38,7 +38,6 @@ import {
   cleanCellValue,
   formatCurrencyDisplay,
   formatPercentDisplay,
-  RATING_MAX,
   generateColumnName as sharedGenerateColumnName,
   storageToDisplay,
 } from '../../utils'

apps/sim/app/workspace/[workspaceId]/tables/[tableId]/utils.ts

@@ -1,29 +1,34 @@
 import type { ColumnDefinition } from '@/lib/table'
-import { getColumnStorageType } from '@/lib/table/constants'
-
-/** Ratings range 0..RATING_MAX and render as RATING_MAX stars. */
-export const RATING_MAX = 5
-
-/** Browser locale for number formatting; `en-US` outside the browser. */
-const DISPLAY_LOCALE = typeof navigator === 'undefined' ? 'en-US' : navigator.language
-
-const CURRENCY_FORMATTER = new Intl.NumberFormat(DISPLAY_LOCALE, {
-  style: 'currency',
-  currency: 'USD',
-})
-const PERCENT_FORMATTER = new Intl.NumberFormat(DISPLAY_LOCALE, { maximumFractionDigits: 2 })
+import { getColumnStorageType, RATING_MAX } from '@/lib/table/constants'
 
 /**
- * Formats a currency cell's numeric value for display in the user's locale.
- * USD is the default display currency until per-column currency config exists.
+ * Number formatters for currency/percent cells, created lazily on first
+ * format call. Cell values only render after the client-side row fetch, so
+ * these always initialize in the browser with `navigator.language` — never at
+ * module load during SSR, where the locale would diverge and risk hydration
+ * mismatches. USD is the default display currency until per-column currency
+ * config exists.
  */
+let currencyFormatter: Intl.NumberFormat | undefined
+let percentFormatter: Intl.NumberFormat | undefined
+
+function displayLocale(): string {
+  return typeof navigator === 'undefined' ? 'en-US' : navigator.language
+}
+
+/** Formats a currency cell's numeric value for display in the user's locale. */
 export function formatCurrencyDisplay(value: number): string {
-  return CURRENCY_FORMATTER.format(value)
+  currencyFormatter ??= new Intl.NumberFormat(displayLocale(), {
+    style: 'currency',
+    currency: 'USD',
+  })
+  return currencyFormatter.format(value)
 }
 
 /** Formats a percent cell's numeric value for display, e.g. `12.5` → `12.5%`. */
 export function formatPercentDisplay(value: number): string {
-  return `${PERCENT_FORMATTER.format(value)}%`
+  percentFormatter ??= new Intl.NumberFormat(displayLocale(), { maximumFractionDigits: 2 })
+  return `${percentFormatter.format(value)}%`
 }
 
 /**

apps/sim/lib/table/__tests__/validation.test.ts

@@ -386,6 +386,21 @@ describe('Validation', () => {
         expect(result.valid).toBe(false)
         expect(result.errors[0]).toContain('must be number')
       })
+
+      it('should round and clamp rating values to 0..RATING_MAX on coercion', () => {
+        const data = { score: 9.6, price: 9.6 }
+        coerceRowValues(data, richSchema)
+        expect(data.score).toBe(5)
+        expect(data.price).toBe(9.6)
+
+        const low = { score: -3 }
+        coerceRowValues(low, richSchema)
+        expect(low.score).toBe(0)
+
+        const fractional = { score: '3.4' }
+        coerceRowValues(fractional, richSchema)
+        expect(fractional.score).toBe(3)
+      })
     })
   })
 

apps/sim/lib/table/constants.ts

@@ -137,6 +137,9 @@ export const COLUMN_TYPES = [
   'rating',
 ] as const
 
+/** Ratings range 0..RATING_MAX; `rating` cells render as RATING_MAX stars. */
+export const RATING_MAX = 5
+
 /** Storage primitives — the value shapes actually persisted in row data. */
 export const STORAGE_COLUMN_TYPES = ['string', 'number', 'boolean', 'date', 'json'] as const
 

apps/sim/lib/table/validation.ts

@@ -7,7 +7,13 @@ import { userTableRows } from '@sim/db/schema'
 import { and, eq, or, type SQL, sql } from 'drizzle-orm'
 import { NextResponse } from 'next/server'
 import { getColumnId } from './column-keys'
-import { COLUMN_TYPES, getColumnStorageType, NAME_PATTERN, TABLE_LIMITS } from './constants'
+import {
+  COLUMN_TYPES,
+  getColumnStorageType,
+  NAME_PATTERN,
+  RATING_MAX,
+  TABLE_LIMITS,
+} from './constants'
 import { withSeqscanOff } from './planner'
 import type { ColumnDefinition, JsonValue, RowData, TableSchema, ValidationResult } from './types'
 
@@ -279,15 +285,21 @@ function coerceValueToColumnType(
         return { ok: true, value: String(value) }
       }
       return { ok: false }
-    case 'number':
-      if (typeof value === 'number') {
-        return Number.isFinite(value) ? { ok: true, value } : { ok: false }
+    case 'number': {
+      const num =
+        typeof value === 'number'
+          ? value
+          : typeof value === 'string' && value.trim() !== ''
+            ? Number(value)
+            : Number.NaN
+      if (!Number.isFinite(num)) return { ok: false }
+      // Ratings normalize to whole stars in 0..RATING_MAX on every write path
+      // (API, batch, CSV import) so storage always matches what the grid renders.
+      if (type === 'rating') {
+        return { ok: true, value: Math.min(RATING_MAX, Math.max(0, Math.round(num))) }
       }
-      if (typeof value === 'string' && value.trim() !== '') {
-        const parsed = Number(value)
-        return Number.isFinite(parsed) ? { ok: true, value: parsed } : { ok: false }
-      }
-      return { ok: false }
+      return { ok: true, value: num }
+    }
     case 'boolean':
       if (typeof value === 'boolean') return { ok: true, value }
       if (typeof value === 'string') {