fix(tables): preserve expiration timestamp offsets

Author: j15z

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

@@ -28,7 +28,7 @@ Every column has a type, which decides how its values are stored and validated.
 | **JSON** | An object or array | `{ "tier": "pro" }` |
 | **Select** | One of a fixed set of options, or several | `Pro` |
 
-Expiration accepts valid ISO timestamps with `Z` or an explicit numeric UTC offset, such as `2026-03-16T14:30:00-07:00`. Seconds are optional; fractional seconds support up to six digits. Values normalize to UTC without losing fractional precision, so `2026-03-16T14:30:00-07:00` and `2026-03-16T21:30:00Z` represent the same deadline and compare equally. Epoch numbers and timezone-free dates are not accepted. The picker edits UTC directly; cells, clipboard values, and exports use the normalized UTC value. Picking a day without a time uses midnight UTC. A table can have one Expiration column. An empty expiration leaves the row unexpired; on an update, omit the field to preserve it or set it to `null` to clear it. Expired rows are removed by periodic cleanup, subject to the table's delete lock.
+Expiration accepts valid ISO timestamps with `Z` or an explicit numeric UTC offset, such as `2026-03-16T14:30:00-07:00`. Seconds are optional; fractional seconds support up to six digits. Values preserve their supplied clock time and numeric offset without losing fractional precision; `Z` is stored as `-00:00`. For example, `2026-03-16T14:30:00-07:00` and `2026-03-16T21:30:00Z` represent the same deadline and compare equally. Epoch numbers and timezone-free dates are not accepted. The picker retains the stored offset; cells, clipboard values, and exports use that offset too. Picking a day without a time uses midnight in that offset. New picker values default to `-00:00`. Numeric offsets are fixed: editing a date does not automatically switch between summer and winter offsets. A table can have one Expiration column. An empty expiration leaves the row unexpired; on an update, omit the field to preserve it or set it to `null` to clear it. Expired rows are removed by periodic cleanup, subject to the table's delete lock.
 
 Types are enforced as you enter values, so a Number column only takes numbers.
 

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

@@ -100,7 +100,7 @@ const table: TableInfo = {
 
 const row: TableRow = {
   id: 'row-1',
-  data: { expires_at: '2026-11-01T08:00:00Z' },
+  data: { expires_at: '2026-11-01T01:00:00-07:00' },
   executions: {},
   position: 0,
   createdAt: '2026-01-01T00:00:00Z',
@@ -119,7 +119,7 @@ describe('RowModal expiration editing', () => {
     mockUpdateRow.mockResolvedValue(undefined)
   })
 
-  it('edits UTC fields while timezone settings load or change', async () => {
+  it('preserves expiration offsets while timezone settings load or change', async () => {
     mockUseTimezoneState.mockReturnValue({ timezone: 'Asia/Tokyo', status: 'loading' })
     const container = document.createElement('div')
     document.body.appendChild(container)
@@ -136,7 +136,7 @@ describe('RowModal expiration editing', () => {
     ;(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true
     act(() => root.render(createElement(RowModal, props)))
 
-    expect(container.querySelector<HTMLInputElement>('[data-testid="time"]')?.value).toBe('08:00')
+    expect(container.querySelector<HTMLInputElement>('[data-testid="time"]')?.value).toBe('01:00')
     expect(container.querySelector<HTMLButtonElement>('[data-testid="submit"]')?.disabled).toBe(
       false
     )
@@ -154,15 +154,15 @@ describe('RowModal expiration editing', () => {
     act(() => root.render(createElement(RowModal, props)))
 
     const timeInput = container.querySelector<HTMLInputElement>('[data-testid="time"]')
-    expect(timeInput?.value).toBe('08:00')
+    expect(timeInput?.value).toBe('01:00')
     act(() => changeInput(timeInput as HTMLInputElement, '01:30'))
 
     const submit = container.querySelector<HTMLButtonElement>('[data-testid="submit"]')
     await act(async () => submit?.click())
 
     expect(mockUpdateRow).toHaveBeenCalledWith({
       rowId: 'row-1',
-      data: { expires_at: '2026-11-01T01:30:00Z' },
+      data: { expires_at: '2026-11-01T01:30:00-07:00' },
     })
     expect(props.onSuccess).toHaveBeenCalledTimes(1)
 
@@ -206,7 +206,7 @@ describe('RowModal expiration editing', () => {
     container.remove()
   })
 
-  it('allows UTC expiration edits even when the saved timezone is invalid', () => {
+  it('allows expiration edits even when the saved timezone is invalid', () => {
     mockUseTimezoneState.mockReturnValue({
       timezone: 'America/Los_Angeles',
       savedTimezone: 'Mars/Olympus',
@@ -226,7 +226,7 @@ describe('RowModal expiration editing', () => {
 
     act(() => root.render(createElement(RowModal, props)))
 
-    expect(container.querySelector<HTMLInputElement>('[data-testid="time"]')?.value).toBe('08:00')
+    expect(container.querySelector<HTMLInputElement>('[data-testid="time"]')?.value).toBe('01:00')
     expect(container.querySelector<HTMLButtonElement>('[data-testid="submit"]')?.disabled).toBe(
       false
     )

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

@@ -22,7 +22,7 @@ import { useParams } from 'next/navigation'
 import type { ColumnDefinition, TableInfo, TableRow } from '@/lib/table'
 import { columnTypeOf } from '@/lib/table/column-types'
 import { resolveCurrencyCode } from '@/lib/table/currency'
-import { ttlValueFromPicker, ttlValueToPickerParts } from '@/lib/table/ttl-values'
+import { todayAtTtlOffset, ttlValueFromPicker, ttlValueToPickerParts } from '@/lib/table/ttl-values'
 import { getTimezoneEditBlockedMessage } from '@/app/workspace/[workspaceId]/tables/[tableId]/components/timezone-editing'
 import { type TimezoneState, useTimezoneState } from '@/hooks/queries/general-settings'
 import { useDeleteTableRow, useDeleteTableRows, useUpdateTableRow } from '@/hooks/queries/tables'
@@ -341,32 +341,37 @@ function ColumnField({ column, value, timeZone, onChange }: ColumnFieldProps) {
     )
   }
 
-  if (definition.editor === 'date' || definition.editor === 'utc-date') {
-    const isUtc = definition.editor === 'utc-date'
-    const pickerTimeZone = isUtc ? 'UTC' : timeZone
+  if (definition.editor === 'date' || definition.editor === 'offset-date') {
     const storedValue = formatValueForInput(value, column.type)
-    const parts = isUtc ? ttlValueToPickerParts(storedValue) : dateValueToLocalParts(storedValue)
+    const offsetParts =
+      definition.editor === 'offset-date' ? ttlValueToPickerParts(storedValue) : null
+    const parts = offsetParts ?? dateValueToLocalParts(storedValue)
+    const pickerToday = offsetParts
+      ? todayAtTtlOffset(offsetParts.offset)
+      : todayLocalCalendarDate(timeZone)
     const valueFromParts = (day: string, time: string | null) =>
-      isUtc ? ttlValueFromPicker(day, time) : localPartsToDateValue(day, time, timeZone)
+      offsetParts
+        ? ttlValueFromPicker(day, time, offsetParts.offset)
+        : localPartsToDateValue(day, time, timeZone)
     return (
       <ChipModalField type='custom' title={title} required={column.required} hint={hint}>
         <div className='flex items-center gap-2'>
           <ChipDatePicker
             value={parts.day ?? undefined}
-            today={todayLocalCalendarDate(pickerTimeZone)}
+            today={pickerToday}
             onChange={(day) => onChange(valueFromParts(day, parts.time))}
             placeholder='Select date'
             className='flex-1'
           />
           <ChipTimePicker
             value={parts.time?.slice(0, 5)}
-            onChange={(time) =>
-              onChange(valueFromParts(parts.day ?? todayLocalCalendarDate(pickerTimeZone), time))
-            }
-            placeholder={isUtc ? 'UTC time' : 'Add time'}
+            onChange={(time) => onChange(valueFromParts(parts.day ?? pickerToday, time))}
+            placeholder='Add time'
             className='w-[110px]'
           />
-          {isUtc && <span className='text-[var(--text-tertiary)] text-small'>UTC</span>}
+          {offsetParts && (
+            <span className='text-[var(--text-tertiary)] text-small'>{offsetParts.offset}</span>
+          )}
         </div>
       </ChipModalField>
     )

apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/cells/inline-editors.test.ts

@@ -14,7 +14,14 @@ import { cleanCellValue } from '@/app/workspace/[workspaceId]/tables/[tableId]/u
 
 const { mockToastError, mockUseTimezoneState, mockCalendar } = vi.hoisted(() => ({
   mockToastError: vi.fn(),
-  mockCalendar: vi.fn((_props: { onChange: (value: string) => void }) => null),
+  mockCalendar: vi.fn(
+    (_props: {
+      onChange: (value: string) => void
+      value?: string
+      timeLabel?: string
+      today?: string
+    }) => null
+  ),
   mockUseTimezoneState: vi.fn(),
 }))
 
@@ -61,14 +68,14 @@ describe('dateEditorRawValue', () => {
     expect(cleanCellValue(repeatedRaw, ttlColumn, timezone)).toBeNull()
 
     const fractionalRaw = dateEditorRawValue('2023-11-14t22:13:20.001Z', ttlColumn, timezone)
-    expect(cleanCellValue(fractionalRaw, ttlColumn, timezone)).toBe('2023-11-14T22:13:20.001Z')
+    expect(cleanCellValue(fractionalRaw, ttlColumn, timezone)).toBe('2023-11-14T22:13:20.001-00:00')
   })
 
   it.each([
-    ['2026-11-01T01:30', '2026-11-01T01:30:00Z'],
-    ['2026-03-08T02:30:45', '2026-03-08T02:30:45Z'],
-    ['2026-09-07', '2026-09-07T00:00:00Z'],
-  ])('saves literal UTC picker selection %s', (picked, expected) => {
+    ['2026-11-01T01:30', '2026-11-01T01:30:00-00:00'],
+    ['2026-03-08T02:30:45', '2026-03-08T02:30:45-00:00'],
+    ['2026-09-07', '2026-09-07T00:00:00-00:00'],
+  ])('saves new picker selections with a zero offset %s', (picked, expected) => {
     const container = document.createElement('div')
     document.body.appendChild(container)
     const root = createRoot(container)
@@ -96,13 +103,42 @@ describe('dateEditorRawValue', () => {
     container.remove()
   })
 
+  it.each(['-07:00', '-08:00', '+05:45', '-00:00', '+00:00'])(
+    'retains %s when changing the date and time in the picker',
+    (offset) => {
+      const container = document.createElement('div')
+      document.body.appendChild(container)
+      const root = createRoot(container)
+      const onSave = vi.fn()
+      act(() =>
+        root.render(
+          createElement(InlineEditor, {
+            column: column('ttl'),
+            value: `2026-09-07T07:30:00.123456${offset}`,
+            onSave,
+            onCancel: vi.fn(),
+          })
+        )
+      )
+      const picker = mockCalendar.mock.calls.at(-1)![0]
+      expect(picker.timeLabel).toBe(`Time (${offset})`)
+      act(() => picker.onChange('2026-11-01T01:30:45'))
+      const input = container.querySelector('input') as HTMLInputElement
+      expect(input.value).toBe(`2026-11-01T01:30:45${offset}`)
+      act(() => input.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true })))
+      expect(onSave).toHaveBeenCalledWith(`2026-11-01T01:30:45${offset}`, 'enter')
+      act(() => root.unmount())
+      container.remove()
+    }
+  )
+
   it('keeps ordinary date drafts on their existing display parser', () => {
     expect(dateEditorRawValue('11/01/2026 1:30:00 AM', column('date'), 'America/New_York')).toBe(
       '2026-11-01T01:30:00-04:00'
     )
   })
 
-  it('accepts a typed offset timestamp and saves the same instant in UTC', () => {
+  it('preserves a typed offset timestamp and its microseconds', () => {
     const container = document.createElement('div')
     document.body.appendChild(container)
     const root = createRoot(container)
@@ -120,18 +156,18 @@ describe('dateEditorRawValue', () => {
     const input = container.querySelector('input') as HTMLInputElement
     act(() => changeInput(input, '2026-09-07T07:30:00.123456-07:00'))
     act(() => input.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true })))
-    expect(onSave).toHaveBeenCalledWith('2026-09-07T14:30:00.123456Z', 'enter')
+    expect(onSave).toHaveBeenCalledWith('2026-09-07T07:30:00.123456-07:00', 'enter')
     expect(mockToastError).not.toHaveBeenCalled()
     act(() => root.unmount())
     container.remove()
   })
 
-  it('keeps an open TTL edit in UTC when the timezone setting changes', () => {
+  it('keeps an open TTL edit in its supplied offset when the timezone setting changes', () => {
     const container = document.createElement('div')
     document.body.appendChild(container)
     const root = createRoot(container)
     const onSave = vi.fn()
-    const value = '2026-06-15T13:00:30Z'
+    const value = '2026-06-15T06:00:30-07:00'
     const props = {
       value,
       column: column('ttl'),
@@ -148,18 +184,18 @@ describe('dateEditorRawValue', () => {
     act(() => root.render(createElement(InlineEditor, props)))
 
     const input = container.querySelector('input') as HTMLInputElement
-    expect(input?.value).toBe('2026-06-15T13:00:30Z')
+    expect(input?.value).toBe('2026-06-15T06:00:30-07:00')
     act(() => changeInput(input, '2026-09-01T09:00:00Z'))
     act(() => {
       input.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }))
     })
 
-    expect(onSave).toHaveBeenCalledWith('2026-09-01T09:00:00Z', 'enter')
+    expect(onSave).toHaveBeenCalledWith('2026-09-01T09:00:00-00:00', 'enter')
     act(() => root.unmount())
     container.remove()
   })
 
-  it('creates a UTC TTL draft while timezone settings are loading', () => {
+  it('converts a legacy Z value to a zero-offset draft while timezone settings are loading', () => {
     mockUseTimezoneState.mockReturnValue({
       timezone: 'Asia/Tokyo',
       status: 'loading',
@@ -177,7 +213,7 @@ describe('dateEditorRawValue', () => {
 
     act(() => root.render(createElement(InlineEditor, props)))
 
-    expect(container.querySelector('input')?.value).toBe('2026-06-15T13:00:30Z')
+    expect(container.querySelector('input')?.value).toBe('2026-06-15T13:00:30-00:00')
     expect(container.querySelector('[role="status"]')).toBeNull()
 
     mockUseTimezoneState.mockReturnValue({
@@ -191,7 +227,7 @@ describe('dateEditorRawValue', () => {
     act(() => changeInput(input, '2026-09-01T09:00:00Z'))
     act(() => input.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true })))
 
-    expect(onSave).toHaveBeenCalledWith('2026-09-01T09:00:00Z', 'enter')
+    expect(onSave).toHaveBeenCalledWith('2026-09-01T09:00:00-00:00', 'enter')
     act(() => root.unmount())
     container.remove()
   })
@@ -263,19 +299,19 @@ describe('dateEditorRawValue', () => {
     {
       caseName: 'a historical sub-minute offset',
       timezone: 'Africa/Monrovia',
-      value: '1970-01-01T00:44:30Z',
+      value: '1970-01-01T00:44:30-00:00',
     },
     {
       caseName: 'microsecond precision',
       timezone: 'America/Los_Angeles',
-      value: '2026-09-07T14:30:00.123456Z',
+      value: '2026-09-07T07:30:00.123456-07:00',
     },
     {
       caseName: 'the far-future representable boundary',
       timezone: 'Asia/Tokyo',
-      value: '9999-12-31T23:59:59Z',
+      value: '9999-12-31T23:59:59+00:00',
     },
-  ])('preserves the exact UTC string for $caseName when untouched', ({ timezone, value }) => {
+  ])('preserves the exact offset string for $caseName when untouched', ({ timezone, value }) => {
     mockUseTimezoneState.mockReturnValue({ timezone, status: 'ready' })
     const container = document.createElement('div')
     document.body.appendChild(container)
@@ -314,15 +350,15 @@ describe('dateEditorRawValue', () => {
     act(() =>
       root.render(
         createElement(InlineEditor, {
-          value: '1970-01-01T00:44:30Z',
+          value: '1970-01-01T00:44:30-00:00',
           column: column('ttl'),
           onSave: vi.fn(),
           onCancel,
         })
       )
     )
 
-    expect(container.querySelector('input')?.value).toBe('1970-01-01T00:44:30Z')
+    expect(container.querySelector('input')?.value).toBe('1970-01-01T00:44:30-00:00')
     expect(onCancel).not.toHaveBeenCalled()
     expect(mockToastError).not.toHaveBeenCalled()
     act(() => root.unmount())

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

@@ -17,7 +17,7 @@ import { Check } from '@sim/emcn/icons'
 import type { ColumnDefinition } from '@/lib/table'
 import { columnTypeOf } from '@/lib/table/column-types'
 import { isCalendarDateString } from '@/lib/table/dates'
-import { ttlValueFromPicker, ttlValueToPickerParts } from '@/lib/table/ttl-values'
+import { todayAtTtlOffset, ttlValueFromPicker, ttlValueToPickerParts } from '@/lib/table/ttl-values'
 import { getTimezoneEditBlockedMessage } from '@/app/workspace/[workspaceId]/tables/[tableId]/components/timezone-editing'
 import { useTimezoneState } from '@/hooks/queries/general-settings'
 import type { SaveReason } from '../../../types'
@@ -121,12 +121,12 @@ function ReadyInlineDateEditor({
   const editTimeZoneRef = useRef(initialTimeZone)
   const timeZone = editTimeZoneRef.current
 
-  const isUtc = columnTypeOf(column).editor === 'utc-date'
+  const isOffsetDate = columnTypeOf(column).editor === 'offset-date'
   const storedValue = formatValueForInput(value, column.type)
   const initialDraft =
     initialCharacter !== undefined
       ? initialCharacter
-      : isUtc
+      : isOffsetDate
         ? storedValue
         : storageToDisplay(storedValue, { seconds: true })
   const [draft, setDraft] = useState(initialDraft)
@@ -136,10 +136,9 @@ function ReadyInlineDateEditor({
   const draftRef = useRef(draft)
   draftRef.current = draft
 
-  /** Expiration pickers use UTC; Date pickers preserve the stored wall time. */
-  const draftParts = isUtc
-    ? ttlValueToPickerParts(draft)
-    : dateValueToLocalParts(displayToStorage(draft, timeZone) ?? storedValue)
+  const offsetParts = isOffsetDate ? ttlValueToPickerParts(draft) : null
+  const draftParts =
+    offsetParts ?? dateValueToLocalParts(displayToStorage(draft, timeZone) ?? storedValue)
   const pickerValue = draftParts.day
     ? draftParts.time
       ? `${draftParts.day}T${draftParts.time}`
@@ -239,12 +238,12 @@ function ReadyInlineDateEditor({
   const handlePickerChange = (picked: string) => {
     clearTimeout(blurTimeoutRef.current)
     if (isCalendarDateString(picked)) {
-      doSave('enter', isUtc ? ttlValueFromPicker(picked, null) : picked)
+      doSave('enter', offsetParts ? ttlValueFromPicker(picked, null, offsetParts.offset) : picked)
       return
     }
-    if (isUtc) {
+    if (offsetParts) {
       const [day, time] = picked.split('T')
-      setDraft(ttlValueFromPicker(day, time ?? null))
+      setDraft(ttlValueFromPicker(day, time ?? null, offsetParts.offset))
       setInvalid(false)
       inputRef.current?.focus()
       return
@@ -275,7 +274,7 @@ function ReadyInlineDateEditor({
         }}
         onKeyDown={handleKeyDown}
         onBlur={scheduleBlurSave}
-        placeholder={isUtc ? 'YYYY-MM-DDTHH:mm:ss±HH:mm' : 'mm/dd/yyyy'}
+        placeholder={isOffsetDate ? 'YYYY-MM-DDTHH:mm:ss±HH:mm' : 'mm/dd/yyyy'}
         className={cn(
           'w-full min-w-0 select-text border-none bg-transparent p-0 text-[var(--text-primary)] text-small outline-hidden',
           invalid && 'text-[var(--text-error)]'
@@ -295,8 +294,10 @@ function ReadyInlineDateEditor({
             value={pickerValue}
             onChange={handlePickerChange}
             showTime
-            timeLabel={isUtc ? 'Time (UTC)' : undefined}
-            today={todayLocalCalendarDate(timeZone)}
+            timeLabel={offsetParts ? `Time (${offsetParts.offset})` : undefined}
+            today={
+              offsetParts ? todayAtTtlOffset(offsetParts.offset) : todayLocalCalendarDate(timeZone)
+            }
           />
         </PopoverContent>
       </Popover>
@@ -495,7 +496,7 @@ export function InlineEditor(props: InlineEditorProps) {
   switch (columnTypeOf(props.column).editor) {
     case 'date':
       return <InlineDateEditor {...props} />
-    case 'utc-date':
+    case 'offset-date':
       return <ReadyInlineDateEditor {...props} initialTimeZone='UTC' />
     case 'select':
       return <InlineSelectEditor {...props} />